@section('title', 'Claim History')
<div>
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-md-4">
                            <div class="search-box mr-2 mb-2 d-inline-block">
                                <div class="position-relative">
                                    <h4>Claim History</h4>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            {{-- <div class="text-sm-right">
                                <button type="button" class="btn btn-success btn-rounded waves-effect waves-light mb-2 mr-2" wire:click="productUnitInfoModal"><i class="mdi mdi-plus mr-1"></i>Unit Info</button>
                            </div> --}}

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="basicpill-firstname-input">From Date</label>
                                        <input type="date" class="form-control" wire:model.debounce.150ms="from_date" />
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="basicpill-firstname-input">To Date</label>
                                        <input type="date" class="form-control" wire:model.debounce.150ms="to_date" />
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div wire:ignore class="form-group">
                                        <label for="basicpill-firstname-input">Agent</label>
                                        <select class="form-control form-select select2 updateTable"
                                            name="vendor_wise_search select2" id="vendor_wise_search" wire:model.debounce.150ms="vendor_wise_search">
                                            <option value="">Select Agent</option>
                                            @foreach ($referl_agents as $item)
                                                <option value="{{ $item->id }}">
                                                    {{ $item->business_name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div><!-- end col-->
                    </div>
                    <div  class="table-responsive">
                        <div  class="table-responsive">
                            <table class="table table-bordered dt-responsive nowrap" id="claimHistoryTable" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                <thead>
                                    <tr>
                                        <th>SL</th>
                                        <th>User</th>
                                        <th>Amount</th>
                                        <th>Payment Method</th>
                                        <th>Account</th>
                                        <th>Comments</th>
                                        <th>Request Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach($datas as $k => $data)
                                    <tr>
                                        <td>{{$k + 1}}</td>
                                        <td>{{$data->user?->Contact?->business_name}}</td>
                                        <td>{{$data->requested_amount}}</td>
                                        <td>{{$data->paymentMethod?->types}}</td>
                                        <td>{{$data->paymentMethod?->ac_account}}</td>
                                        <td>{{$data->comments}}</td>
                                        <td>{{date('d-m-Y',strtotime($data->created_at))}}</td>
                                        <td>
                                            <button class="btn btn-primary btn-sm" onclick="callEdit({{$data->id}})"><i class="bx bx-check font-size-18"></i></button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                            {{ $datas->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--  Modal content for the above example -->
    <div wire:ignore.self class="modal fade" id="productUnitInfoModal" 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 mt-0" id="myLargeModalLabel">Update Payment Information</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form wire:submit.prevent="savePaymentInformation">
                    <div class="modal-body">

                        @if (session()->has('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif

                        <div class="row">

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="basicpill-firstname-input">Transaction Id <span>*</span></label>
                                    <input class="form-control" type="text" wire:model.lazy="transction_id" placeholder="Transaction ID">
                                    @error('transction_id') <span class="error">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="basicpill-firstname-input">Comments</label>
                                    <textarea class="form-control" wire:model.lazy="comments" placeholder="Enter Comments"></textarea>
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="basicpill-firstname-input">Image</label>
                                    <input class="form-control" type="file" wire:model="image">
                                    @error('image') <span class="error">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="col-lg-12">
                                <div class="form-group">
                                    <label for="basicpill-firstname-input">Status</label>
                                    <select class="form-control" name="status" wire:model.lazy="status">
                                        <option value="Success">Success</option>
                                        <option value="Rejected">Rejected</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" >Submit</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {{-- Start Delete Modal --}}
    <div class="modal fade" id="DeletePopup" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-md modal-confirm">
            <div class="modal-content">
                <div class="modal-header flex-column">
                    <div class="icon-box">
                        <i class="material-icons">&#xE5CD;</i>
                    </div>
                    <h4 class="modal-title w-100">Are you sure?</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Do you really want to delete this records?</p>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-danger" wire:click="ConfirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Delete Modal --}}
</div>
@push('scripts')
    <script>
    $(document).ready(function() {
        $('#vendor_wise_search').select2();
        $('#vendor_wise_search').on('change', function(e) {
            console.log("change status....");
            var data = $('#vendor_wise_search').select2("val");
            @this.set('vendor_wise_search', data);
        });
    });

 function callEdit(id) {
    //@this.call('unitEdit', id);
     @this.set('selected_id',id);
     //console.log("console you id" + id);
     $('#productUnitInfoModal').modal('show');
}

    function callDelete(id) {
        @this.call('DeleteModal', id);
    }

 /*******
        $(document).ready(function () {


            var datatable = $('#claimHistoryTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{route('data.claim-history-table')}}",
                    type: 'GET',
                    cache: false,
                    data: function(d) {
                        console.log("data call....");
                        //d.is_active = $('#is_active').val();
                        d.vendor_wise_search = $('#vendor_wise_search').val();
                        // d.featured = $('#featured').val();
                        // d.sub_category = $('#sub_category').val();
                        // d.vendor_wise_search = $('#vendor_wise_search').val();
                        // d.approved_status = $('#approved_status').val();
                    }
                },
                columns: [
                    {
                        title: 'SL',
                        data: 'id'
                    },
                    {
                        title: 'User',
                        data:  'business_name',
                        name:  'business_name'
                    },
                    {
                        title: 'Amount',
                        data:  'requested_amount',
                        name:  'requested_amount'
                    },

                    {
                        title: 'Payment Method',
                        data:  'payment_method_types',
                        name:  'payment_method_types'
                    },
                    {
                        title: 'Payment Method',
                        data:  'ac_accounts',
                        name:  'ac_accounts'
                    },
                    {
                        title: 'Comments',
                        data:  'comments',
                        name:  'comments'
                    },

                    {
                        title: 'Request Date',
                        data:  'date',
                        name:  'date'
                    },

                    {
                        title: 'Action',
                        data:  'action',
                        name:  'action'
                    },

                    //
                    // {
                    //     title: 'Rate',
                    //     data:  'rate',
                    //     name:  'rate'
                    // },

                    // {
                    //     title: 'Action',
                    //     data: 'action',
                    //     name:'action'
                    // },
                ]
            });


            $(document).on('change', '.updateTable', function() {
                $('#claimHistoryTable').DataTable().draw(true);
            });

            window.livewire.on('success', message => {
                datatable.draw(true);
            });
        });
 **********/

    </script>
@endpush