@extends('layout.admin')

@section('head')
    @extends('layout.header')
    @section('header_title', 'GRN')
@endsection

@section('content')
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">Good Receive Note</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item active">GRN</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-12">
                        <!-- jquery validation -->
                        <div class="card card-primary">
                            <div class="card-header">
                                <h3 class="card-title">Grn Details</h3>
                            </div>
                            <div class="card-body">

                                <div class="row">
                                    <div class="col-sm-4 col-md-5 border mt-3 pt-3">
                                        <div class="mb-3 row">
                                            <label for="inputPassword" class="col-sm-3 col-form-label">GRN ID</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" value="{{ $max_id }}"
                                                    id="max_id" readonly>
                                            </div>
                                        </div>
                                        <div class="mb-3 row" hidden>
                                            <label for="inputPassword" class="col-sm-3 col-form-label">INVOICE NO</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="inv_num">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="inputPassword" class="col-sm-3 col-form-label">SUPPLIER</label>
                                            <div class="col-sm-9">
                                                <select class="form-control select2bs4" id="sup"
                                                    aria-label="Default select example" onchange="change_sup(this.value)">
                                                    <option value="0">Select Supplier</option>
                                                    @foreach ($supplier as $item)
                                                        <option value="{{ $item->idSupplier }}">
                                                            {{ $item->Full_Name }}-{{ $item->Contact_No }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-md-7 border mt-3 pt-3">
                                        <h4 class="text-center">SUPPLIER DETAILS</h4>
                                        <div class="mb-3 row">
                                            <label for="staticEmail" class="col-sm-3 col-form-label">SUPPLIER ID</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly="" class="form-control-plaintext"
                                                    id="sup_id" value="-">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="staticEmail" class="col-sm-3 col-form-label">SUPPLIER NAME</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly="" class="form-control-plaintext"
                                                    id="sup_name" value="-">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="staticEmail" class="col-sm-3 col-form-label">CONTACT NUMBER</label>
                                            <div class="col-sm-9">
                                                <input type="text" readonly="" class="form-control-plaintext"
                                                    id="sup_tp" value="-">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.card -->
                    </div>

                </div>
                <!-- /.row -->
            </div>
        </section>

        <section class="content">

            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">Item Details</h3>
                                <input type="button" class="btn btn-success float-right" data-toggle="modal"
                                    data-target="#customer_details" style="text-align: right" value="Add Item (F2)">
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <div class="card-body table-responsive p-0" style="max-height: 350px;">
                                    <table class="table table-head-fixed text-nowrap" id="myTable">
                                        <thead>
                                            <tr>
                                                <th>Name</th>
                                                <th>Cost</th>
                                                <th>Qty</th>
                                                <th>Discount</th>
                                                <th>Total Cost</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- /.content -->


        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <!-- left column -->
                    <div class="col-md-12">
                        <!-- jquery validation -->
                        <div class="card card-primary">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 border pt-3 pl-3 pr-3">
                                        <div class="mb-3 row">
                                            <label for="inputPassword" class="col-sm-3 col-form-label">Total
                                                Amount</label>
                                            <div class="col-sm-9">
                                                <label class="col-sm-3 col-form-label" id="tot_amount_label">0.00</label>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="inputPassword" class="col-sm-3 col-form-label">Discount</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="tot_discount"
                                                    onkeyup="change_discount(this.value)">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="inputPassword" class="col-sm-3 col-form-label">Net Amount</label>
                                            <div class="col-sm-9">
                                                <label class="col-sm-3 col-form-label" id="net_amount">0.00</label>
                                            </div>
                                        </div>
                                        {{-- <div class="mb-3 row">
                                        <label for="payment_method" class="col-sm-3 col-form-label">Payment
                                            Method</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" id="payment_method"
                                                onchange="change_payment_method(this.value)">
                                                <option value="cash">Cash</option>
                                                <option value="credit">Credit</option>
                                                <option value="cheque">Cheque</option>
                                            </select>
                                        </div>
                                    </div> --}}
                                    </div>
                                    <div class="col-md-6 border pt-3 pl-3 pr-3">
                                        <div class="mb-3 row">
                                            <label for="paid_amount" class="col-sm-3 col-form-label">Cash Amount</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="cash_amount">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="paid_amount" class="col-sm-3 col-form-label">Card Amount</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="card_amount">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="paid_amount" class="col-sm-3 col-form-label">Online Amount</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="online_amount">
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="paid_amount" class="col-sm-3 col-form-label">Online
                                                Reference</label>
                                            <div class="col-sm-9">
                                                <input type="text" class="form-control" id="reference">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="amount-box right-align float-right mt-3">
                                    <button class="btn btn-primary" onclick="save_grn()">Save GRN</button>
                                </div>
                            </div>
                        </div>
                        <!-- /.card -->
                    </div>

                </div>
                <!-- /.row -->
            </div>
        </section>


        <div class="modal fade bd-example-modal-lg" id="customer_details" tabindex="-1" role="dialog"
            aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">ADD ITEM</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="row">

                            <div class="col-sm-12">
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-3 col-form-label">Item</label>
                                    <div class="col-sm-9">
                                        <select class="form-control select2bs4" id="item"
                                            aria-label="Default select example" onchange="change_item(this.value)">

                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-3 col-form-label">Cost</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="cost">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-3 col-form-label">Discount</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="dis">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-3 col-form-label">Qty</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="qty_2">
                                    </div>
                                </div>
                                <div class="mb-3 row">
                                    <label for="inputPassword" class="col-sm-3 col-form-label">Available Qty</label>
                                    <div class="col-sm-9">
                                        <h4 id="availble_qty_2" style="color: red;">0</h4>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <input type="submit" class="btn btn-primary" value="Add Items" onclick="adding_item()">
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <!-- /.content-wrapper -->
@endsection
@section('script')
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>


    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
    <script src="../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
    <script src="../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
    <script src="../plugins/jszip/jszip.min.js"></script>
    <script src="../plugins/pdfmake/pdfmake.min.js"></script>
    <script src="../plugins/pdfmake/vfs_fonts.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.print.min.js"></script>
    <script src="../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="../plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="../plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.min.js"></script>

    <!-- AdminLTE for demo purposes -->
    <script src="../dist/js/demo.js"></script>
    <script src="../JS/validate.js"></script>
    <script src="../JS/grn.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(function() {

            let x = ["#dis", "#cost", "#tot_discount", "#qty_2"];
            decimalFormat(x);

            $('#customer_details').on('shown.bs.modal', function() {
                $('#item').select2({
                    dropdownParent: $('#customer_details'),
                    width: '100%' // Ensures Select2 takes the full width of the parent element
                });
            });

        })
    </script>
@endsection