@extends('Admin.layout')

@section('content')
    <div class="container-fluid">

        {{-- Header --}}

        <div class="d-flex flex-wrap justify-content-between align-items-center mb-4">

            <div>

                <h4 class="fw-bold mb-1">
                    Gold Loan Applications
                </h4>

            </div>


            <a href="{{ route('create_loan') }}" class="btn btn-primary">

                <i class="bi bi-plus-circle me-1"></i>

                Create Gold Loan

            </a>

        </div>

        {{-- Table --}}

        <div class="card shadow-sm">


            <div class="table-responsive">

                <table id="goldLoanTable" class="table table-hover align-middle mb-0">

                    <thead class="table-light">
                        <tr>

                            <th>S.No</th>
                            <th>Date</th>
                            <th>Customer</th>
                            <th>Mobile</th>

                            <th>Gross Weight</th>
                            <th>Stone Weight</th>
                            <th>Net Weight</th>

                            <th>Address</th>

                            <th>Given Amount</th>
                            <th>Loan Per Gram Amount</th>

                            <th>Remark</th>

                            {{-- <th>Status</th> --}}

                            <th class="text-end">
                                Action
                            </th>

                        </tr>
                    </thead>



                </table>

            </div>

        </div>

    </div>





    {{-- DELETE GOLD LOAN MODAL --}}
    <div class="modal fade" id="deleteModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Delete Gold Loan
                </h5>

                <p class="text-muted">
                    Are you sure you want to delete this gold loan?
                </p>

                <form action="{{ route('gold_loan_delete') }}" method="POST" id="deleteForm">

                    @csrf

                    {{-- Hidden Gold Loan ID --}}
                    <input type="hidden" name="id" id="deleteLoanId">

                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">

                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">

                            Cancel

                        </button>

                        <button type="submit" class="btn btn-danger p-3 fw-semibold" id="confirmDeleteBtn">

                            Yes, Delete

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {



            $('#goldLoanTable').DataTable({

                processing: true,
                serverSide: true,

                ajax: "{{ route('gold_loan_data') }}",

                language: {
                    lengthMenu: '_MENU_'
                },
                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'created_at',
                        name: 'created_at',
                        className: 'text-nowrap'
                    },

                    {
                        data: 'customer_name',
                        name: 'customer_name'
                    },

                    {
                        data: 'mobile',
                        name: 'mobile'
                    },

                    {
                        data: 'gross_weight',
                        name: 'gross_weight'
                    },

                    {
                        data: 'stone_weight',
                        name: 'stone_weight'
                    },

                    {
                        data: 'net_weight',
                        name: 'net_weight'
                    },

                    {
                        data: 'address',
                        name: 'address'
                    },

                    {
                        data: 'given_amount',
                        name: 'given_amount'
                    },

                    {
                        data: 'loan_per_gram_amount',
                        name: 'loan_per_gram_amount'
                    },

                    {
                        data: 'admin_remark',
                        name: 'admin_remark'
                    },

                    // {
                    //     data: 'status',
                    //     name: 'status',
                    //     orderable: false,
                    //     searchable: false
                    // },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: 'text-end'
                    }

                ]

            });



            // DELETE MODAL
            $(document).on('click', '.deleteBtn', function() {

                const id = $(this).data('id');

                $('#deleteLoanId').val(id);

            });


            // -----------------------------------------
            // DELETE FORM
            // -----------------------------------------

            $(document).on('submit', '#deleteForm', function(e) {

                const form = this;

                const button = $(form).find(
                    'button[type="submit"]'
                );


                // Prevent double submit
                if ($(form).data('submitted') === true) {

                    e.preventDefault();

                    return false;
                }


                // Mark as submitted
                $(form).data('submitted', true);


                // Disable button
                button.prop('disabled', true);


                // Processing text
                button.html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>' +
                    'Deleting...'
                );

            });

        });
    </script>
@endsection