@extends('layouts.basic')

@section('styles')
    <style>

    </style>

@endsection
@section('content')
<div class="container-fluid">
    <div class="page-title">
        <div class="row">
            <div class="col-6">
                <h3>Collection</h3>
            </div>
            <div class="col-6">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i data-feather="home"></i></a></li>
                    <li class="breadcrumb-item"><a href="{{ route('collection.index') }}">Collection</a></li>
                    <li class="breadcrumb-item active">Collection-list</li>
                </ol>
            </div>
        </div>
    </div>
</div>
<section class="content content-card">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <form id="colection-form">
                            @csrf
                            <div class="row filter-row">
                            <div class="col">
                                <label for="invoice_number">Customer name:</label>
                                <select class="form-select" id="customer_id" name="customer_id" style="color:black;">
                                    <option></option>
                                    @foreach ($customers as $customer )
                                        <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="col">
                                <label for="balance_amount">Invoice number</label>

                              <select name="invoice_id" id="invoice_id" class="form-select">
                                <option></option>
                              </select>
                            </div>

                            <div class="col">
                                <label for="date_range">Date range:</label>
                                <input type="text" name="date_range" id="date_range" class="form-control" placeholder="Choose date range">
                            </div>

                            <div class="text-center">
                                <br>
                                <button class="btn btn-danger" onClick="window.location.reload();">clear</button>
                                <button type="submit" class="btn btn-dark">Filter</button>
                            </div>
                        </div>
                        </form>
                  </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="content content-card">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                    <div class="row align-items-center table-top-div">
                     <div class="col-lg-6">
                        <div>
                           <h6 class="table-headings">Collection-List</h6>
                        </div>
                     </div>
                     @can('collection-create')
                     <div class="col-lg-6">
                        <div class="add-button">
                           <a class="btn btn-secondary"  href="{{ route('collection.create') }}"><i class="fa fa-plus-circle"></i>&nbsp; Add</a>
                        </div>
                     </div>
                     @endcan

                   
                   
                  

                  </div>
                        <div class="table-responsive table-holder">
                        <table class="table table-bordered" id="collection_table" >
                            <thead>
                              <tr class="table table-secondary">
                                <th scope="col">S.NO</th>
                                <th scope="col">Customer Name</th>
                                <th scope="col">Invoice Number</th>
                                <th scope="col">Total Amount</th>
                                <th scope="col">Payable Amount</th>
                                <th scope="col">Balance Amount</th>
                                <th scope="col">Paid On</th>
                                <th scope="col">Payment Method</th>
                                {{-- <th scope="col">Payment Status</th> --}}
                                <th scope="col">Payment Note</th>
                                <th scope="col">Actions</th>
                              </tr>
                            </thead>
                            <tbody>
                                @foreach ($collection as $collections)
                                <tr>
                                    {{-- @dd($collections) --}}
                                    <th>{{ $loop->iteration }}</th>
                                    <td>{{ $collections->customer->customer_name }}</td>
                                    <td>{{ $collections->invoice->Voucher_no }}</td>
                                    <td>{{ IND_money_format($collections->total_amount) }}</td>
                                    <td>{{ IND_money_format($collections->payable_amount) }}</td>
                                    <td>{{ IND_money_format($collections->balance_amount) }}</td>
                                    @php
                                    $formattedDate = \Carbon\Carbon::parse($collections->paid_on)->format('d-m-Y h:i A');
                                    @endphp
                                    <td>{{   $formattedDate }}</td>
                                    <td>{{ $collections->payment_mode->name }}</td>
                                    <td>{{ $collections->payment_note }}</td>
                                    <td>
                                        <div class="action-buttons-grid" style="display: flex;gap: 10px;">
                                            @can('collection-edit')
                                            <a href="{{ route('collection.edit', $collections->id) }}"
                                                class="btn table-action-btn table-edit-btn" data-action="edit">
                                                <i class="fa fa-edit"></i>
                                            </a>
                                            @endcan
                                            @can('collection-delete')
                                            <a href="#"
                                                class="btn table-del-btn table-action-btn" data-action="delete" data-url="{{ route('collection.destroy', $collections->id) }}">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                            @endcan
                                          </div>
                                    </td>

                                  </tr>
                                @endforeach
                            </tbody>
                          </table>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="closeModalBtn">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this category?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"  id="closeModalBtn1">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@section('script')

<script>
$(document).ready(function() {
  $('#collection_table').DataTable( {
        responsive: true,
        ordering: false,
        } );

        $('#customer_id').select2({
                placeholder: "Choose customer name",
                minimumInputLength: 1
            });
            $('#created_by').select2({
                placeholder: "Choose created person",
                minimumInputLength: 1
            });

            // $('#date_range').daterangepicker();


            $(function() {

        $('#date_range').daterangepicker({
            autoUpdateInput: false,
            locale: {
                cancelLabel: 'Clear'
            }
        });

        $('#date_range').on('apply.daterangepicker', function(ev, picker) {
            $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
        });

        $('#date_range').on('cancel.daterangepicker', function(ev, picker) {
            $(this).val('');
        });
    });
});
</script>
<script>

    $(document).on('click', '.table-del-btn', function(event) {
        event.preventDefault();
    var url = $(this).data('url');

    $('#deleteModal').modal('show');

    // When the user clicks the delete button in the modal
    $('#confirmDeleteBtn').on('click', function() {
        // Hide the modal
        $('#deleteModal').modal('hide');

        // Send an Ajax request to delete the category
        $.ajax({
            url: url,
            type: 'DELETE',
            dataType: 'json',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                // Display success message with iziToast
                iziToast.success({
                    title: 'Success',
                    message: response.message,
                    position: 'topRight',
                    timeout: 3000,
                });

            // Perform any additional actions after successful deletion
            location.reload();
            },
            error: function(xhr, status, error) {
                var errorMessage = xhr.responseJSON.error;

                // Show error Toastr notification
                iziToast.error({
                    title: 'Error',
                    message: errorMessage,
                    position: 'bottomRight'
                });
            }
        });
    });
});

$('#closeModalBtn').on('click', function() {
  $('#deleteModal').modal('hide');
});
$('#closeModalBtn1').on('click', function() {
  $('#deleteModal').modal('hide');
});
//     @if(session('success'))
//         iziToast.success({
//             title: 'Success',
//             message: '{{ session('success') }}',
//             position: 'bottomRight'
//         });
//     @endif

//     @if(session('error'))
//         iziToast.error({
//             title: 'error',
//             message: '{{ session('error') }}',
//             position: 'bottomRight'
//         });
//     @endif


// </script>
<script>
    $(document).ready(function() {

        $('#invoice_id').select2({
                placeholder: "Choose invoice number",
                minimumInputLength: 1
            });


         $('#colection-form').submit(function(event) {
          
            event.preventDefault();
            // Serialize the form data
            var formData = $(this).serialize();

            $.ajax({
                url: '{{ route('getsearchData') }}',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function(response) {
                    if (response && response.length > 0) {
                        // Clear existing table rows (if any)
                        $('#collection_table tbody').empty();

                        // Loop through the response data and append rows to the table
                        $.each(response, function(index, collection) {
                            var recordId = collection.id;
                          
                        var edit_url ="collection/" + recordId +"/edit";
                        var delete_url ="collection/" + recordId;
                      
                       
                            var formattedPaidOn = moment(collection.paid_on).format('DD-MM-YYYY hh:mm A'); // Format the date

                            var newRow = '<tr>' +
                                '<th>' + (index + 1) + '</th>' +
                                '<td>' + collection.customer.customer_name + '</td>' +
                                '<td>' + collection.invoice.Voucher_no + '</td>' +
                                '<td>' + collection.total_amount  + '</td>' +
                                '<td>' + collection.payable_amount + '</td>' +
                                '<td>' + collection.balance_amount + '</td>' +
                                '<td>' + formattedPaidOn + '</td>' +
                                '<td>' + collection.payment_mode.name + '</td>' +
                                '<td>' + collection.payment_note + '</td>' +
                                '<td>' +
                                '@can('collection-edit')'+
                                '<div class="action-buttons-grid" style="display: flex;gap: 10px;">' +
                                '<a href="' + edit_url + '" class="btn table-action-btn table-edit-btn" data-action="edit">' +
                                '<i class="fa fa-edit"></i>' +
                                '</a>' +
                                '@endcan'+
                                '@can('collection-delete')'+
                                '<a  class="btn table-del-btn table-action-btn" data-action="delete" data-url="' + delete_url + '">' +
                                '<i class="fa fa-trash"></i>' +
                                '</a>' +
                                ' @endcan'+
                                '</div>' +
                                '</td>' +
                                '</tr>';

                            $('#collection_table tbody').append(newRow);
                        });

                        



                    } else {
                        // Handle the case where no data is returned
                        // For example, show a message or hide the table
                        $('#collection_table tbody').empty();
                        $('#collection_table tbody').append('<tr><td colspan="9">No Record Found</td>/tr>');

                    }
                    console.log(response); // You can use the response to update the UI
                },
                error: function(xhr, status, error) {
                    // Handle error if any
                    console.error(error);
                }
            });
        });
    });




$('#customer_id').on('change', function() {


var selectedOption = $(this).val();

// Make an AJAX request to fetch the new values based on the selected option
$.ajax({
url: '{{ route('fecth_invoice_id') }}', // Replace with your actual URL for fetching values
method: 'GET',
data: { option: selectedOption },
success: function(response) {
    // Clear the existing options in select2
    $('#invoice_id').empty();

    // Append the new options to invoice_id
    response.forEach(function(option) {
        var newOption = new Option(option.invoice_id, option.id, false, false);
        console.log(newOption);
           //  $('#invoice_number option').prop('selected', false);
        $('#invoice_id').append(newOption);
    });

    // Trigger the change event on invoice_id to update its display
    $('#invoice_id').trigger('change');
},
error: function(xhr, status, error) {
    // Handle the error case
    console.error(error);
}
});
});

</script>


@endsection