@extends('staff.layout')

@section('content')

<div class="page-view w-100">

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between gap-2 mb-3">

        <h3 class="mb-0 text-white fw-bold">
            GA Pledge Management
        </h3>

        <a href="{{ route('staff.bp_form') }}" class="btn btn-sm btn-primary">
            <i class="ti ti-plus me-1"></i>
            Add Pledge
        </a>

    </div>


    <!-- Table Card -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <!-- Table Header -->
        <div class="row g-3 align-items-center mb-3">

            <div class="col-12 col-md-6">

                <h5 class="text-white mb-0">
                    Pledge Report
                </h5>

            </div>


            <div class="col-12 col-md-6">

                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">

                    <!-- Page Length -->
                    <select id="pageLength"
                        class="form-select form-select-sm"
                        style="width:100%; max-width:100px;">

                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="all">All</option>

                    </select>


                    <!-- Search -->
                    <input type="search"
                        id="pledgeSearch"
                        class="form-control form-control-sm"
                        placeholder="Search Pledge..."
                        style="width:100%; max-width:300px;">

                </div>

            </div>

        </div>


        <!-- Table -->
        <div class="table-responsive bank-table-wrapper w-100">

            <table id="pledgeTable"
                class="table align-middle text-nowrap mb-0 w-100">

                <thead>

                    <tr>

                        <th>#</th>

                        <th>GA NUMBER</th>

                        <th>GOLD NUMBER</th>

                        <th>PLEDGE DATE</th>

                        <th>BANK PLEDGE ID</th>

                        <th>GA ID</th>

                        <th>TYPE</th>

                        <th>PLEDGE NAME</th>

                        <th>BANK NAME</th>

                        <th>BRANCH NAME</th>

                        <th>GROSS WEIGHT</th>

                        <th>NET WEIGHT</th>

                        <th>BANK RATE</th>

                        <th>BANK TOTAL LOAN</th>

                        <th>AMOUNT</th>

                        <th>BANK INTEREST</th>

                        <th>DUE DATE</th>

                        <th>SCHEME TYPE</th>

                        <th>PROCESSING FEE</th>

                        <th>LOAN AC NO</th>

                        <th>APPRAISOR CHARGE</th>

                        <th>OTHER CHARGE</th>

                        <th>HOLDER COMMISSION</th>

                        <th>REMARK</th>

                        <th>CLOSING DATE</th>

                        <th>ACTION</th>

                    </tr>

                </thead>

                <tbody></tbody>

            </table>

        </div>

    </div>

</div>


<!-- ========================================= -->
<!-- VIEW DETAILS MODAL -->
<!-- ========================================= -->

<div class="modal fade"
    id="viewPledgeModal"
    tabindex="-1"
    aria-hidden="true">

    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">

        <div class="modal-content bank-card border-0">

            <div class="modal-header border-secondary">

                <h5 class="modal-title text-white">

                    <i class="ti ti-file-description me-2 text-primary"></i>

                    Pledge Details

                </h5>

                <button type="button"
                    class="btn-close btn-close-white"
                    data-bs-dismiss="modal">
                </button>

            </div>


            <div class="modal-body">

                <div class="row g-3">

                    <!-- 1 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            GA Number
                        </label>

                        <input type="text"
                            id="viewGaNumber"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 2 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Gold Number
                        </label>

                        <input type="text"
                            id="viewGoldNumber"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 3 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Pledge Date
                        </label>

                        <input type="text"
                            id="viewPledgeDate"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 4 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Bank Pledge ID
                        </label>

                        <input type="text"
                            id="viewBankPledgeId"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 5 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            GA ID
                        </label>

                        <input type="text"
                            id="viewGaId"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 6 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Type
                        </label>

                        <input type="text"
                            id="viewType"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 7 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Pledge Name
                        </label>

                        <input type="text"
                            id="viewPledgeName"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 8 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Bank Name
                        </label>

                        <input type="text"
                            id="viewBankName"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 9 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Branch Name
                        </label>

                        <input type="text"
                            id="viewBranchName"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 10 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Total Gross Weight
                        </label>

                        <input type="text"
                            id="viewGrossWeight"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 11 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Net Weight
                        </label>

                        <input type="text"
                            id="viewNetWeight"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 12 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Bank Rate
                        </label>

                        <input type="text"
                            id="viewBankRate"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 13 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Bank Total Loan
                        </label>

                        <input type="text"
                            id="viewBankTotalLoan"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 14 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Amount
                        </label>

                        <input type="text"
                            id="viewAmount"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 15 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Bank Interest
                        </label>

                        <input type="text"
                            id="viewBankInterest"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 16 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Due Date
                        </label>

                        <input type="text"
                            id="viewDueDate"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 17 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Scheme Type
                        </label>

                        <input type="text"
                            id="viewSchemeType"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 18 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Processing Fee
                        </label>

                        <input type="text"
                            id="viewProcessingFee"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 19 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Loan AC No
                        </label>

                        <input type="text"
                            id="viewLoanAcNo"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 20 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Appraisor Charge
                        </label>

                        <input type="text"
                            id="viewAppraisorCharge"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 21 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Other Charge
                        </label>

                        <input type="text"
                            id="viewOtherCharge"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 22 -->
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label text-white-50">
                            Holder Commission
                        </label>

                        <input type="text"
                            id="viewHolderCommission"
                            class="form-control"
                            readonly>
                    </div>


                    <!-- 23 -->
                    <div class="col-12 col-md-6">
                        <label class="form-label text-white-50">
                            Remark
                        </label>

                        <textarea id="viewRemark"
                            class="form-control"
                            rows="2"
                            readonly></textarea>
                    </div>


                    <!-- 24 -->
                    <div class="col-12 col-md-6">
                        <label class="form-label text-white-50">
                            Closing Date
                        </label>

                        <input type="text"
                            id="viewClosingDate"
                            class="form-control"
                            readonly>
                    </div>

                </div>

            </div>


            <div class="modal-footer border-secondary">

                <button type="button"
                    class="btn btn-outline-secondary"
                    data-bs-dismiss="modal">

                    Close

                </button>

            </div>

        </div>

    </div>

</div>


<!-- DataTables CSS -->
<link rel="stylesheet"
    href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>

$(document).ready(function () {


    /* =========================================
       PLEDGE DATA
    ========================================= */

    const data = [

        {
            id: 1,
            ga_number: 'GA-1001',
            gold_number: 'G-5001',
            pledge_date: '06 Oct 2026',
            bank_pledge_id: 'BP-78901',
            ga_id: 'GAID-001',
            type: 'Own',
            pledge_name: 'Arun Gold Pledge',
            bank_name: 'State Bank',
            branch_name: 'Nagercoil',
            total_gross_weight: '25.500 g',
            net_weight: '22.750 g',
            bank_rate: '₹6,850',
            bank_total_loan: '₹1,55,000',
            amount: '₹1,50,000',
            bank_interest: '10.50%',
            due_date: '06 Oct 2027',
            scheme_type: 'Yearly',
            processing_fee: '₹1,000',
            loan_ac_no: 'LN-100001',
            appraisor_charge: '₹500',
            other_charge: '₹250',
            holder_commission: '₹750',
            remark: 'Regular pledge',
            closing_date: '-'
        },

        {
            id: 2,
            ga_number: 'GA-1002',
            gold_number: 'G-5002',
            pledge_date: '07 Oct 2026',
            bank_pledge_id: 'BP-78902',
            ga_id: 'GAID-002',
            type: 'Customer',
            pledge_name: 'Priya Gold Pledge',
            bank_name: 'Canara Bank',
            branch_name: 'Marthandam',
            total_gross_weight: '18.200 g',
            net_weight: '16.850 g',
            bank_rate: '₹6,900',
            bank_total_loan: '₹1,10,000',
            amount: '₹1,05,000',
            bank_interest: '11.00%',
            due_date: '07 Oct 2027',
            scheme_type: 'Yearly',
            processing_fee: '₹800',
            loan_ac_no: 'LN-100002',
            appraisor_charge: '₹400',
            other_charge: '₹200',
            holder_commission: '₹500',
            remark: 'Customer pledge',
            closing_date: '-'
        },

        {
            id: 3,
            ga_number: 'GA-1003',
            gold_number: 'G-5003',
            pledge_date: '08 Oct 2026',
            bank_pledge_id: 'BP-78903',
            ga_id: 'GAID-003',
            type: 'Purchased',
            pledge_name: 'Karthik Gold',
            bank_name: 'Indian Bank',
            branch_name: 'Kanyakumari',
            total_gross_weight: '30.750 g',
            net_weight: '27.500 g',
            bank_rate: '₹6,800',
            bank_total_loan: '₹1,85,000',
            amount: '₹1,80,000',
            bank_interest: '10.75%',
            due_date: '08 Oct 2027',
            scheme_type: 'Monthly',
            processing_fee: '₹1,200',
            loan_ac_no: 'LN-100003',
            appraisor_charge: '₹600',
            other_charge: '₹300',
            holder_commission: '₹900',
            remark: 'Purchased gold pledge',
            closing_date: '-'
        },

        {
            id: 4,
            ga_number: 'GA-1004',
            gold_number: 'G-5004',
            pledge_date: '09 Oct 2026',
            bank_pledge_id: 'BP-78904',
            ga_id: 'GAID-004',
            type: 'Mixed',
            pledge_name: 'Suresh Mixed Pledge',
            bank_name: 'HDFC Bank',
            branch_name: 'Nagercoil',
            total_gross_weight: '42.300 g',
            net_weight: '38.250 g',
            bank_rate: '₹6,875',
            bank_total_loan: '₹2,60,000',
            amount: '₹2,50,000',
            bank_interest: '11.25%',
            due_date: '09 Oct 2027',
            scheme_type: 'Yearly',
            processing_fee: '₹1,500',
            loan_ac_no: 'LN-100004',
            appraisor_charge: '₹800',
            other_charge: '₹350',
            holder_commission: '₹1,000',
            remark: 'Mixed gold pledge',
            closing_date: '-'
        },

        {
            id: 5,
            ga_number: 'GA-1005',
            gold_number: 'G-5005',
            pledge_date: '10 Oct 2026',
            bank_pledge_id: 'BP-78905',
            ga_id: 'GAID-005',
            type: 'Customer',
            pledge_name: 'Divya Pledge',
            bank_name: 'Federal Bank',
            branch_name: 'Thuckalay',
            total_gross_weight: '15.750 g',
            net_weight: '14.200 g',
            bank_rate: '₹6,900',
            bank_total_loan: '₹95,000',
            amount: '₹90,000',
            bank_interest: '10.50%',
            due_date: '10 Oct 2027',
            scheme_type: 'Monthly',
            processing_fee: '₹700',
            loan_ac_no: 'LN-100005',
            appraisor_charge: '₹350',
            other_charge: '₹150',
            holder_commission: '₹400',
            remark: 'Customer gold',
            closing_date: '-'
        }

    ];


    /* =========================================
       DATATABLE
    ========================================= */

    const pledgeTable = $('#pledgeTable').DataTable({

        data: data,

        pageLength: 10,

        lengthChange: false,

        searching: true,

        ordering: true,

        order: [],

        info: true,

        autoWidth: false,

        dom: 'rtip',


        columns: [

            {
                data: null,
                orderable: false,
                searchable: false,

                render: function (data, type, row, meta) {

                    return meta.row + 1;

                }

            },


            {
                data: 'ga_number',

                render: function (data) {

                    return `
                        <span class="fw-semibold">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'gold_number',

                render: function (data) {

                    return `
                        <span>
                            <i class="ti ti-diamond me-1 text-warning"></i>
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'pledge_date',

                render: function (data) {

                    return `
                        <span>
                            <i class="ti ti-calendar-event me-1 text-warning"></i>
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'bank_pledge_id'
            },


            {
                data: 'ga_id'
            },


            {
                data: 'type',

                render: function (data) {

                    let badge = 'bg-secondary';

                    if (data === 'Own') {
                        badge = 'bg-primary';
                    }

                    if (data === 'Customer') {
                        badge = 'bg-success';
                    }

                    if (data === 'Purchased') {
                        badge = 'bg-warning text-dark';
                    }

                    if (data === 'Mixed') {
                        badge = 'bg-info';
                    }

                    return `
                        <span class="badge ${badge}">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'pledge_name',

                render: function (data) {

                    return `
                        <span class="fw-semibold">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'bank_name'
            },


            {
                data: 'branch_name'
            },


            {
                data: 'total_gross_weight',

                render: function (data) {

                    return `
                        <span class="fw-semibold">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'net_weight',

                render: function (data) {

                    return `
                        <span class="fw-semibold text-warning">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'bank_rate'
            },


            {
                data: 'bank_total_loan',

                render: function (data) {

                    return `
                        <span class="fw-semibold">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'amount',

                render: function (data) {

                    return `
                        <span class="fw-semibold text-success">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'bank_interest',

                render: function (data) {

                    return `
                        <span>
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'due_date',

                render: function (data) {

                    return `
                        <span>
                            <i class="ti ti-calendar-due me-1 text-danger"></i>
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'scheme_type',

                render: function (data) {

                    return `
                        <span class="badge bg-secondary">
                            ${data}
                        </span>
                    `;

                }

            },


            {
                data: 'processing_fee'
            },


            {
                data: 'loan_ac_no'
            },


            {
                data: 'appraisor_charge'
            },


            {
                data: 'other_charge'
            },


            {
                data: 'holder_commission'
            },


            {
                data: 'remark',

                render: function (data) {

                    return `
                        <span>
                            ${data || '-'}
                        </span>
                    `;

                }

            },


            {
                data: 'closing_date',

                render: function (data) {

                    if (!data || data === '-') {

                        return `
                            <span class="text-muted">
                                -
                            </span>
                        `;

                    }

                    return data;

                }

            },


            /* ACTION */

            {
                data: null,

                orderable: false,

                searchable: false,

                render: function (data, type, row) {

                    return `
                        <button type="button"
                            class="btn btn-sm btn-outline-primary view-pledge-btn"
                            data-id="${row.id}">

                            <i class="ti ti-eye me-1"></i>

                            View

                        </button>
                    `;

                }

            }

        ]

    });


    /* =========================================
       SEARCH
    ========================================= */

    $('#pledgeSearch').on('keyup', function () {

        pledgeTable
            .search(this.value)
            .draw();

    });


    /* =========================================
       PAGE LENGTH
    ========================================= */

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

        const value = this.value;


        if (value === 'all') {

            pledgeTable
                .page
                .len(-1)
                .draw();

        } else {

            pledgeTable
                .page
                .len(parseInt(value))
                .draw();

        }

    });


    /* =========================================
       VIEW DETAILS
    ========================================= */

    $(document).on('click', '.view-pledge-btn', function () {

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


        const pledge = data.find(function (item) {

            return item.id == id;

        });


        if (!pledge) {
            return;
        }


        $('#viewGaNumber').val(pledge.ga_number);
        $('#viewGoldNumber').val(pledge.gold_number);
        $('#viewPledgeDate').val(pledge.pledge_date);
        $('#viewBankPledgeId').val(pledge.bank_pledge_id);
        $('#viewGaId').val(pledge.ga_id);
        $('#viewType').val(pledge.type);
        $('#viewPledgeName').val(pledge.pledge_name);
        $('#viewBankName').val(pledge.bank_name);
        $('#viewBranchName').val(pledge.branch_name);
        $('#viewGrossWeight').val(pledge.total_gross_weight);
        $('#viewNetWeight').val(pledge.net_weight);
        $('#viewBankRate').val(pledge.bank_rate);
        $('#viewBankTotalLoan').val(pledge.bank_total_loan);
        $('#viewAmount').val(pledge.amount);
        $('#viewBankInterest').val(pledge.bank_interest);
        $('#viewDueDate').val(pledge.due_date);
        $('#viewSchemeType').val(pledge.scheme_type);
        $('#viewProcessingFee').val(pledge.processing_fee);
        $('#viewLoanAcNo').val(pledge.loan_ac_no);
        $('#viewAppraisorCharge').val(pledge.appraisor_charge);
        $('#viewOtherCharge').val(pledge.other_charge);
        $('#viewHolderCommission').val(pledge.holder_commission);
        $('#viewRemark').val(pledge.remark);
        $('#viewClosingDate').val(pledge.closing_date);


        const modalElement =
            document.getElementById('viewPledgeModal');


        const modal =
            bootstrap.Modal.getOrCreateInstance(modalElement);


        modal.show();

    });

});

</script>

@endsection