@extends('admin.partials.layout')
@section('css')

<link rel="stylesheet" type="text/css"
href="{{asset('admin/assets/node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css')}}">
<link rel="stylesheet" type="text/css"
href="{{asset('admin/assets/node_modules/datatables.net-bs4/css/responsive.dataTables.min.css')}}">

<style>
    @media (max-width: 767px){
        .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {       
            overflow: scroll!important;
        }
    }

    .dataTables_info {
     float: right;
    }
</style>
@endsection

@section('content')
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h4 class="text-themecolor">Vendors Payable List 
            </h4>
        </div>
        <div class="col-md-7 align-self-center text-end">
            <div class="d-flex justify-content-end align-items-center">
                <ol class="breadcrumb justify-content-end">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active">Vendors Payable</li>
                </ol>
            </div>
        </div>
    </div>
            
            <div class="row">
                <div class="col-sm-12">
                    <section class="card">
                        <header class="card-header bg-info">
                            <h4 class="mb-0 text-white">Search</h4>
                        </header>
                        <div class="card-body">
                            <form id="vendorPayableFilter">
    <div class="row">
        <!-- Consignment -->
        <div class="col-md-4">
            <label for="consignment_id">Consignment</label>
            <select class="form-control jobnumbernew" id="consignment_id" name="consignment_id">
                <option value="">All</option>
                @foreach($consignments as $consignment)
                    <option value="{{ $consignment->id }}">{{ $consignment->job_number_prefix }}</option>
                @endforeach
            </select>
        </div>

        <!-- Vendor -->
        <div class="col-md-4">
            <label for="vendor_id">Vendor</label>
            <select class="form-control vendor" id="vendor_id" name="vendor_id">
                <option value="">All</option>
                @foreach($vendors as $vendor)
                    <option value="{{ $vendor->id }}">{{ $vendor->vendor_name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Account -->
        <div class="col-md-4">
            <label for="account_id">Account</label>
            <select class="form-control account" id="account_id" name="account_id">
                <option value="">All</option>
                @foreach($accounts as $account)
                    <option value="{{ $account->id }}">{{ $account->account_name }}</option>
                @endforeach
            </select>
        </div>

        <!-- Start Date -->
        <div class="col-md-4">
            <label for="start_date">Start Date</label>
            <input type="date" class="form-control" id="start_date" name="start_date">
        </div>

        <!-- End Date -->
        <div class="col-md-4">
            <label for="end_date">End Date</label>
            <input type="date" class="form-control" id="end_date" name="end_date">
        </div>

        <!-- Search Button -->
        <div class="col-md-12 d-flex align-items-end justify-content-center mt-4">
            <div class="w-100 text-center">
                <button type="submit" class="btn btn-primary px-4">Search</button>
                <!--<button type="reset" id="resetFilter" class="btn btn-secondary px-4">Reset</button>-->
            </div>
        </div>
    </div>
</form>

            </div>
        </section>
    </div>
</div>


    <!-- page start--> 
                <div class="row">
                    <div class="col-sm-12">
                        <section class="card">
                            <header class="card-header bg-info">
                                <div class="row">
                                    <div class="col-md-6 align-self-center">
                                        <h4 class="mb-0 text-white" >All Vendors List</h4>
                                    </div>
                                    <div class="col-md-6 text-end">
                                        <a class="btn btn-primary" href="{{URL::to('admin/vendorpayable/create')}}">Create New </a>
                                    </div>
                                </div>
                            </header>
                        <div class="card-body">    
                            <table id="vendorPayableTable" class="mydatatable display nowrap table table-hover table-striped border" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Consignment</th>
                                        <th>Vendor</th>
                                        <th>Account</th>
                                        <th>Amount</th>
                                        <th>Date</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>

                    </div>
                </div>
            </section>
         </div>
@endsection

@section('js')

       <script src="{{asset('admin/assets/node_modules/datatables.net/js/jquery.dataTables.min.js')}}"></script>
       <script src="{{asset('admin/assets/node_modules/datatables.net-bs4/js/dataTables.responsive.min.js')}}"></script>
       <script src="https://www.fatwaqa.com/admin/assets/node_modules/switchery/dist/switchery.min.js"></script>

       <script>
        $(function () {
    var application_table = $('.mydatatable').DataTable({
        processing: true,
        searching: true,
        fixedColumns: false,
        fixedHeader: false,
        scrollCollapse: false,
        scrollX: true,
        autoWidth: false,
        dom: 'lirtp',
        serverSide: true,
        lengthMenu: [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
        ajax: {
            url: "{{ URL::to('admin/vendorpayable') }}",
            type: "GET",
            data: function (d) {
                d.consignment_id = $('#consignment_id').val();
                d.vendor_id = $('#vendor_id').val();
                d.account_id = $('#account_id').val();
                d.start_date = $('#start_date').val();
                d.end_date = $('#end_date').val();
                d.search = $('#search').val();
            }
        }
    });

    // Apply filter on form submit
    $('#vendorPayableFilter').submit(function (e) {
        e.preventDefault();
        application_table.draw();
    });

    // Reset filter form
    $('#resetFilter').click(function () {
        $('#vendorPayableFilter')[0].reset();
        application_table.draw();
    });

    // Handle status change toast
    $(".mydatatable").delegate(".is_status", "change", function () {
        $.toast({
            heading: "Status Changed Successfully",
            position: 'top-right',
            loaderBg: '#ff6849',
            icon: 'success',
            hideAfter: 3500,
            stack: 6,
        });
    });

    // Handle delete action
    $(".mydatatable").delegate(".delete_btn", "click", function () {
        var id = $(this).data('id');
        $.ajax({
            url: id,
            method: "DELETE",
            data: { '_token': "{{ csrf_token() }}" },
            success: function (response) {
                $.toast({
                    heading: response.message,
                    position: 'top-right',
                    loaderBg: '#ff6849',
                    icon: 'success',
                    hideAfter: 3500,
                    stack: 6,
                });
                application_table.draw();
            },
            error: function (response) {
                $.toast({
                    heading: response?.responseJSON?.message || 'Something Went Wrong',
                    position: 'top-right',
                    loaderBg: '#ff6849',
                    icon: 'error',
                    hideAfter: 3500,
                    stack: 6,
                });
            },
        });
    });
});

    </script>
@endsection