@extends('staff.layout')

@section('content')

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

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

        <div class="d-flex align-items-center gap-2">

            <a href="{{ route('staff.bp_table') }}"
                class="btn btn-sm btn-outline-primary">

                <i class="ti ti-arrow-left"></i>

            </a>

            <h3 class="mb-0 text-white fw-bold">
                Add Bank Pledge
            </h3>

        </div>

    </div>


    <!-- =========================================
         MAIN FORM CARD
    ========================================== -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <div class="mb-4">

            <h5 class="text-white mb-1">
                Pledge Details
            </h5>

            <p class="text-white-50 mb-0">
                Enter the complete gold pledge details below.
            </p>

        </div>


        <form id="pledgeForm">

            <div class="row g-3">


                <!-- =========================================
                     GA & JEWELS
                ========================================== -->

                <div class="col-12">

                    <div class="ga-container">

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

                            <div>

                                <h6 class="text-white mb-1">
                                    GA & Jewels
                                </h6>

                                <small class="text-white-50">
                                    Add one or more GA numbers and select the required jewels.
                                </small>

                            </div>


                            <button type="button"
                                class="btn btn-sm btn-primary"
                                id="addGaBtn">

                                <i class="ti ti-plus me-1"></i>
                                Add GA

                            </button>

                        </div>


                        <!-- Dynamic GA Rows -->
                        <div id="gaRows"></div>


                        <!-- Overall Summary -->
                        <div class="ga-summary mt-3">

                            <div class="row g-2">

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

                                    <div class="summary-item">

                                        <span>
                                            Total GAs
                                        </span>

                                        <strong id="totalGaCount">
                                            0
                                        </strong>

                                    </div>

                                </div>


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

                                    <div class="summary-item">

                                        <span>
                                            Selected Jewels
                                        </span>

                                        <strong id="totalJewelCount">
                                            0
                                        </strong>

                                    </div>

                                </div>


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

                                    <div class="summary-item">

                                        <span>
                                            Total Weight
                                        </span>

                                        <strong>

                                            <span id="totalJewelWeight">
                                                0.000
                                            </span>

                                            g

                                        </strong>

                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>


                <!-- =========================================
                     2. GOLD NUMBER
                ========================================== -->

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

                    <label for="goldNumber"
                        class="form-label text-white">

                        Gold Number
                        <span class="text-danger">*</span>

                    </label>

                    <input type="text"
                        id="goldNumber"
                        name="gold_number"
                        class="form-control"
                        placeholder="Enter gold number"
                        required>

                </div>


                <!-- =========================================
                     3. PLEDGE DATE
                ========================================== -->

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

                    <label for="pledgeDate"
                        class="form-label text-white">

                        Pledge Date
                        <span class="text-danger">*</span>

                    </label>

                    <input type="date"
                        id="pledgeDate"
                        name="pledge_date"
                        class="form-control"
                        required>

                </div>


                <!-- =========================================
                     4. BANK PLEDGE ID
                ========================================== -->

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

                    <label for="bankPledgeId"
                        class="form-label text-white">

                        Bank Pledge ID
                        <span class="text-danger">*</span>

                    </label>

                    <input type="text"
                        id="bankPledgeId"
                        name="bank_pledge_id"
                        class="form-control"
                        placeholder="Enter bank pledge ID"
                        required>

                </div>


                <!-- =========================================
                     5. GA ID
                ========================================== -->

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

                    <label for="gaId"
                        class="form-label text-white">

                        GA ID
                        <span class="text-danger">*</span>

                    </label>

                    <input type="text"
                        id="gaId"
                        name="ga_id"
                        class="form-control"
                        placeholder="Enter GA ID"
                        required>

                </div>


                <!-- =========================================
                     6. TYPE
                ========================================== -->

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

                    <label for="pledgeType"
                        class="form-label text-white">

                        Type
                        <span class="text-danger">*</span>

                    </label>

                    <select id="pledgeType"
                        name="type"
                        class="form-select"
                        required>

                        <option value="" selected disabled>
                            Select type
                        </option>

                        <option value="Own">
                            Own
                        </option>

                        <option value="Customer">
                            Customer
                        </option>

                        <option value="Purchased">
                            Purchased
                        </option>

                        <option value="Mixed">
                            Mixed
                        </option>

                    </select>

                </div>


                <!-- =========================================
                     7. PLEDGE NAME
                ========================================== -->

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

                    <label for="pledgeName"
                        class="form-label text-white">

                        Pledge Name
                        <span class="text-danger">*</span>

                    </label>

                    <input type="text"
                        id="pledgeName"
                        name="pledge_name"
                        class="form-control"
                        placeholder="Enter pledge name"
                        required>

                </div>


                <!-- =========================================
                     8. BANK NAME
                ========================================== -->

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

                    <label for="bankName"
                        class="form-label text-white">

                        Bank Name
                        <span class="text-danger">*</span>

                    </label>

                    <input type="text"
                        id="bankName"
                        name="bank_name"
                        class="form-control"
                        placeholder="Enter bank name"
                        required>

                </div>


                <!-- =========================================
                     9. BRANCH NAME
                ========================================== -->

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

                    <label for="branchName"
                        class="form-label text-white">

                        Branch Name
                        <span class="text-danger">*</span>

                    </label>

                    <input type="text"
                        id="branchName"
                        name="branch_name"
                        class="form-control"
                        placeholder="Enter branch name"
                        required>

                </div>


                <!-- =========================================
                     10. TOTAL GROSS WEIGHT
                ========================================== -->

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

                    <label for="grossWeight"
                        class="form-label text-white">

                        Total Gross Weight
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <input type="number"
                            id="grossWeight"
                            name="total_gross_weight"
                            class="form-control"
                            placeholder="0.000"
                            step="0.001"
                            min="0"
                            required>

                        <span class="input-group-text">
                            g
                        </span>

                    </div>

                </div>


                <!-- =========================================
                     11. NET WEIGHT
                ========================================== -->

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

                    <label for="netWeight"
                        class="form-label text-white">

                        Net Weight
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <input type="number"
                            id="netWeight"
                            name="net_weight"
                            class="form-control"
                            placeholder="0.000"
                            step="0.001"
                            min="0"
                            required>

                        <span class="input-group-text">
                            g
                        </span>

                    </div>

                </div>


                <!-- =========================================
                     12. BANK RATE
                ========================================== -->

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

                    <label for="bankRate"
                        class="form-label text-white">

                        Bank Rate
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="bankRate"
                            name="bank_rate"
                            class="form-control"
                            placeholder="Enter bank rate"
                            step="0.01"
                            min="0"
                            required>

                    </div>

                </div>


                <!-- =========================================
                     13. BANK TOTAL LOAN
                ========================================== -->

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

                    <label for="bankTotalLoan"
                        class="form-label text-white">

                        Bank Total Loan
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="bankTotalLoan"
                            name="bank_total_loan"
                            class="form-control"
                            placeholder="Enter total loan"
                            step="0.01"
                            min="0"
                            required>

                    </div>

                </div>


                <!-- =========================================
                     14. AMOUNT
                ========================================== -->

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

                    <label for="amount"
                        class="form-label text-white">

                        Amount
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="amount"
                            name="amount"
                            class="form-control"
                            placeholder="Enter amount"
                            step="0.01"
                            min="0"
                            required>

                    </div>

                </div>


                <!-- =========================================
                     15. BANK INTEREST
                ========================================== -->

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

                    <label for="bankInterest"
                        class="form-label text-white">

                        Bank Interest
                        <span class="text-danger">*</span>

                    </label>

                    <div class="input-group">

                        <input type="number"
                            id="bankInterest"
                            name="bank_interest"
                            class="form-control"
                            placeholder="Enter interest"
                            step="0.01"
                            min="0"
                            required>

                        <span class="input-group-text">
                            %
                        </span>

                    </div>

                </div>


                <!-- =========================================
                     16. DUE DATE
                ========================================== -->

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

                    <label for="dueDate"
                        class="form-label text-white">

                        Due Date
                        <span class="text-danger">*</span>

                    </label>

                    <input type="date"
                        id="dueDate"
                        name="due_date"
                        class="form-control"
                        required>

                </div>


                <!-- =========================================
                     17. SCHEME TYPE
                ========================================== -->

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

                    <label for="schemeType"
                        class="form-label text-white">

                        Scheme Type
                        <span class="text-danger">*</span>

                    </label>

                    <select id="schemeType"
                        name="scheme_type"
                        class="form-select"
                        required>

                        <option value="" selected disabled>
                            Select scheme
                        </option>

                        <option value="Monthly">
                            Monthly
                        </option>

                        <option value="Yearly">
                            Yearly
                        </option>

                    </select>

                </div>


                <!-- =========================================
                     18. PROCESSING FEE
                ========================================== -->

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

                    <label for="processingFee"
                        class="form-label text-white">

                        Processing Fee

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="processingFee"
                            name="processing_fee"
                            class="form-control"
                            placeholder="Enter processing fee"
                            step="0.01"
                            min="0">

                    </div>

                </div>


                <!-- =========================================
                     19. LOAN ACCOUNT NUMBER
                ========================================== -->

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

                    <label for="loanAcNo"
                        class="form-label text-white">

                        Loan AC No.

                    </label>

                    <input type="text"
                        id="loanAcNo"
                        name="loan_ac_no"
                        class="form-control"
                        placeholder="Enter loan account number">

                </div>


                <!-- =========================================
                     20. APPRAISOR CHARGE
                ========================================== -->

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

                    <label for="appraisorCharge"
                        class="form-label text-white">

                        Appraisor Charge

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="appraisorCharge"
                            name="appraisor_charge"
                            class="form-control"
                            placeholder="Enter appraisor charge"
                            step="0.01"
                            min="0">

                    </div>

                </div>


                <!-- =========================================
                     21. OTHER CHARGE
                ========================================== -->

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

                    <label for="otherCharge"
                        class="form-label text-white">

                        Other Charge

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="otherCharge"
                            name="other_charge"
                            class="form-control"
                            placeholder="Enter other charge"
                            step="0.01"
                            min="0">

                    </div>

                </div>


                <!-- =========================================
                     22. HOLDER COMMISSION
                ========================================== -->

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

                    <label for="holderCommission"
                        class="form-label text-white">

                        Holder Commission

                    </label>

                    <div class="input-group">

                        <span class="input-group-text">
                            ₹
                        </span>

                        <input type="number"
                            id="holderCommission"
                            name="holder_commission"
                            class="form-control"
                            placeholder="Enter holder commission"
                            step="0.01"
                            min="0">

                    </div>

                </div>


                <!-- =========================================
                     23. REMARK
                ========================================== -->

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

                    <label for="remark"
                        class="form-label text-white">

                        Remark

                    </label>

                    <textarea id="remark"
                        name="remark"
                        class="form-control"
                        rows="3"
                        placeholder="Enter remark"></textarea>

                </div>


                <!-- =========================================
                     24. CLOSING DATE
                ========================================== -->

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

                    <label for="closingDate"
                        class="form-label text-white">

                        Closing Date

                    </label>

                    <input type="date"
                        id="closingDate"
                        name="closing_date"
                        class="form-control">

                </div>


                <!-- =========================================
                     BUTTONS
                ========================================== -->

                <div class="col-12">

                    <div class="d-flex justify-content-end gap-2 mt-3">

                        <button type="reset"
                            class="btn btn-outline-secondary">

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

                            Reset

                        </button>


                        <button type="submit"
                            class="btn btn-primary">

                            <i class="ti ti-device-floppy me-1"></i>

                            Save Pledge

                        </button>

                    </div>

                </div>

            </div>

        </form>

    </div>

</div>


<!-- =========================================
     CUSTOM CSS
========================================== -->

<style>

    /* =========================================
       GA MAIN CONTAINER
    ========================================== */

    .ga-container {

        background: rgba(255, 255, 255, 0.025);

        border: 1px solid rgba(255, 255, 255, 0.10);

        border-radius: 12px;

        padding: 14px;

    }


    /* =========================================
       GA BLOCK
    ========================================== */

    .ga-block {

        background: rgba(255, 255, 255, 0.025);

        border: 1px solid rgba(255, 255, 255, 0.09);

        border-radius: 9px;

        padding: 10px;

        margin-bottom: 8px;

    }


    /* =========================================
       GA HEADER
    ========================================== */

    .ga-header {

        display: flex;

        align-items: center;

        gap: 8px;

    }


    /* =========================================
       GA INPUT
    ========================================== */

    .ga-input {

        max-width: 260px;

    }


    /* =========================================
       GA STATUS
    ========================================== */

    .ga-status {

        font-size: 12px;

        white-space: nowrap;

    }


    /* =========================================
       JEWEL SECTION
    ========================================== */

    .ga-jewels {

        margin-top: 8px;

        border-top: 1px solid rgba(255, 255, 255, 0.07);

        padding-top: 7px;

    }


    /* =========================================
       JEWEL ROW
    ========================================== */

    .dynamic-jewel-row {

        display: grid;

        grid-template-columns: 32px 1fr 150px 10px;

        align-items: center;

        gap: 8px;

        min-height: 42px;

        padding: 5px 8px;

        border: 1px solid rgba(255, 255, 255, 0.06);

        border-radius: 7px;

        margin-bottom: 5px;

        background: rgba(255, 255, 255, 0.025);

        transition: all .2s ease;

    }


    .dynamic-jewel-row.selected {

        border-color: rgba(13, 110, 253, 0.35);

        background: rgba(13, 110, 253, 0.06);

    }


    /* =========================================
       JEWEL NAME
    ========================================== */

    .jewel-name {

        color: #fff;

        font-size: 13px;

        font-weight: 600;

    }


    .jewel-index {

        color: rgba(255, 255, 255, .45);

        font-size: 11px;

        margin-right: 6px;

    }


    /* =========================================
       JEWEL WEIGHT
    ========================================== */

    .jewel-weight {

        height: 31px !important;

        font-size: 12px;

    }


    /* =========================================
       SUMMARY
    ========================================== */

    .ga-summary {

        border-top: 1px solid rgba(255, 255, 255, 0.08);

        padding-top: 10px;

    }


    .summary-item {

        display: flex;

        align-items: center;

        justify-content: space-between;

        background: rgba(255, 255, 255, 0.035);

        border: 1px solid rgba(255, 255, 255, 0.06);

        border-radius: 7px;

        padding: 8px 10px;

        font-size: 12px;

    }


    .summary-item span {

        color: rgba(255, 255, 255, .55);

    }


    .summary-item strong {

        color: #fff;

        font-size: 13px;

    }


    /* =========================================
       MOBILE
    ========================================== */

    @media (max-width: 767px) {

        .ga-container {

            padding: 10px;

        }


        .ga-header {

            flex-wrap: wrap;

        }


        .ga-input {

            max-width: none;

            flex: 1;

        }


        .ga-status {

            width: 100%;

            margin-left: 38px;

        }


        .dynamic-jewel-row {

            grid-template-columns: 28px 1fr 105px 10px;

            gap: 5px;

            padding: 5px;

        }

    }

</style>


<!-- =========================================
     JAVASCRIPT
========================================== -->

<script>

document.addEventListener('DOMContentLoaded', function () {


    /*
    |--------------------------------------------------------------------------
    | SAMPLE GA DATA
    |--------------------------------------------------------------------------
    | Replace this later with your Laravel API/database data.
    |--------------------------------------------------------------------------
    */

    const gaJewels = {

        GA123: [

            {
                id: 1,
                jewel_number: 'JWL-001',
                weight: 8.250
            },

            {
                id: 2,
                jewel_number: 'JWL-002',
                weight: 12.450
            },

            {
                id: 3,
                jewel_number: 'JWL-003',
                weight: 6.800
            }

        ],


        GA124: [

            {
                id: 4,
                jewel_number: 'JWL-004',
                weight: 10.250
            },

            {
                id: 5,
                jewel_number: 'JWL-005',
                weight: 7.500
            },

            {
                id: 6,
                jewel_number: 'JWL-006',
                weight: 15.200
            },

            {
                id: 7,
                jewel_number: 'JWL-007',
                weight: 9.750
            },

            {
                id: 8,
                jewel_number: 'JWL-008',
                weight: 5.650
            }

        ],


        GA125: [

            {
                id: 9,
                jewel_number: 'JWL-009',
                weight: 11.250
            },

            {
                id: 10,
                jewel_number: 'JWL-010',
                weight: 8.400
            }

        ]

    };


    const gaRows =
        document.getElementById('gaRows');


    const addGaBtn =
        document.getElementById('addGaBtn');


    let gaIndex = 0;


    /*
    |--------------------------------------------------------------------------
    | ADD GA
    |--------------------------------------------------------------------------
    */

    function addGa() {

        gaIndex++;


        const gaBlock =
            document.createElement('div');


        gaBlock.className =
            'ga-block';


        gaBlock.dataset.index =
            gaIndex;


        gaBlock.innerHTML = `

            <!-- GA HEADER -->

            <div class="ga-header">

                <span class="badge bg-secondary">
                    GA ${gaIndex}
                </span>


                <input
                    type="text"
                    class="form-control form-control-sm ga-input ga-number"
                    placeholder="Enter GA number"
                    autocomplete="off"
                >


                <span class="ga-status text-white-50">
                    Enter GA number
                </span>


                <button
                    type="button"
                    class="btn btn-sm btn-outline-danger remove-ga"
                    title="Remove GA"
                >

                    <i class="ti ti-trash"></i>

                </button>

            </div>


            <!-- JEWELS -->

            <div class="ga-jewels d-none">


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


                    <!-- SELECT ALL -->

                    <div class="form-check ga-select-all mb-0">

                        <input
                            class="form-check-input select-all-ga"
                            type="checkbox"
                        >

                        <label class="form-check-label text-white">

                            Select All

                        </label>

                    </div>


                    <!-- COUNT -->

                    <span class="badge bg-primary jewel-count">

                        0 Jewels

                    </span>


                </div>


                <!-- JEWEL LIST -->

                <div class="jewel-list"></div>


                <!-- GA TOTAL -->

                <div class="d-flex justify-content-end mt-2">

                    <small class="text-white-50">

                        Selected:

                        <strong class="selected-count text-white">
                            0
                        </strong>

                        &nbsp;|&nbsp;

                        Weight:

                        <strong class="selected-weight text-white">
                            0.000 g
                        </strong>

                    </small>

                </div>

            </div>

        `;


        gaRows.appendChild(gaBlock);


        /*
        |--------------------------------------------------------------------------
        | GA INPUT
        |--------------------------------------------------------------------------
        */

        const gaInput =
            gaBlock.querySelector('.ga-number');


        gaInput.addEventListener('input', function () {

            const value =
                this.value.trim().toUpperCase();


            this.value = value;


            loadGaJewels(
                gaBlock,
                value
            );

        });


        /*
        |--------------------------------------------------------------------------
        | REMOVE GA
        |--------------------------------------------------------------------------
        */

        gaBlock
            .querySelector('.remove-ga')
            .addEventListener('click', function () {

                gaBlock.remove();

                updateOverallTotals();

            });


        /*
        |--------------------------------------------------------------------------
        | SELECT ALL
        |--------------------------------------------------------------------------
        */

        gaBlock
            .querySelector('.select-all-ga')
            .addEventListener('change', function () {

                const checked =
                    this.checked;


                gaBlock
                    .querySelectorAll('.jewel-checkbox')
                    .forEach(function (checkbox) {

                        checkbox.checked =
                            checked;


                        updateJewelRow(
                            checkbox
                        );

                    });


                updateGaTotals(
                    gaBlock
                );

            });


        /*
        |--------------------------------------------------------------------------
        | FOCUS
        |--------------------------------------------------------------------------
        */

        gaInput.focus();

    }


    /*
    |--------------------------------------------------------------------------
    | LOAD JEWELS
    |--------------------------------------------------------------------------
    */

    function loadGaJewels(
        gaBlock,
        gaNumber
    ) {


        const status =
            gaBlock.querySelector('.ga-status');


        const jewelsSection =
            gaBlock.querySelector('.ga-jewels');


        const jewelList =
            gaBlock.querySelector('.jewel-list');


        const jewelCount =
            gaBlock.querySelector('.jewel-count');


        const selectAll =
            gaBlock.querySelector('.select-all-ga');


        /*
        |--------------------------------------------------------------------------
        | EMPTY
        |--------------------------------------------------------------------------
        */

        if (!gaNumber) {

            status.textContent =
                'Enter GA number';


            status.className =
                'ga-status text-white-50';


            jewelsSection.classList.add(
                'd-none'
            );


            jewelList.innerHTML =
                '';


            updateOverallTotals();

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | FIND GA
        |--------------------------------------------------------------------------
        */

        const jewels =
            gaJewels[gaNumber];


        /*
        |--------------------------------------------------------------------------
        | NOT FOUND
        |--------------------------------------------------------------------------
        */

        if (!jewels) {

            status.textContent =
                'GA not found';


            status.className =
                'ga-status text-danger';


            jewelsSection.classList.add(
                'd-none'
            );


            jewelList.innerHTML =
                '';


            updateOverallTotals();

            return;

        }


        /*
        |--------------------------------------------------------------------------
        | FOUND
        |--------------------------------------------------------------------------
        */

        status.textContent =
            `${jewels.length} Jewels Found`;


        status.className =
            'ga-status text-success';


        jewelsSection.classList.remove(
            'd-none'
        );


        jewelCount.textContent =
            `${jewels.length} Jewels`;


        jewelList.innerHTML =
            '';


        /*
        |--------------------------------------------------------------------------
        | CREATE JEWELS
        |--------------------------------------------------------------------------
        */

        jewels.forEach(function (
            jewel,
            index
        ) {


            const row =
                document.createElement('div');


            row.className =
                'dynamic-jewel-row selected';


            row.innerHTML = `

                <!-- CHECKBOX -->

                <div>

                    <input
                        type="checkbox"
                        class="form-check-input jewel-checkbox"
                        data-weight="${jewel.weight}"
                        data-jewel-id="${jewel.id}"
                        checked
                    >

                </div>


                <!-- JEWEL -->

                <div>

                    <span class="jewel-index">
                        Jewel ${index + 1}
                    </span>

                    <span class="jewel-name">
                        ${jewel.jewel_number}
                    </span>

                </div>


                <!-- WEIGHT -->

                <div>

                    <div class="input-group input-group-sm">

                        <input
                            type="number"
                            class="form-control jewel-weight"
                            value="${jewel.weight.toFixed(3)}"
                            step="0.001"
                            readonly
                        >

                        <span class="input-group-text">
                            g
                        </span>

                    </div>

                </div>


                <!-- SPACE -->

                <div></div>

            `;


            jewelList.appendChild(row);


            /*
            |--------------------------------------------------------------------------
            | CHECKBOX
            |--------------------------------------------------------------------------
            */

            const checkbox =
                row.querySelector(
                    '.jewel-checkbox'
                );


            checkbox.addEventListener(
                'change',
                function () {

                    updateJewelRow(
                        this
                    );


                    updateGaTotals(
                        gaBlock
                    );

                }
            );

        });


        selectAll.checked =
            true;


        updateGaTotals(
            gaBlock
        );

    }


    /*
    |--------------------------------------------------------------------------
    | UPDATE JEWEL ROW
    |--------------------------------------------------------------------------
    */

    function updateJewelRow(
        checkbox
    ) {


        const row =
            checkbox.closest(
                '.dynamic-jewel-row'
            );


        if (checkbox.checked) {

            row.classList.add(
                'selected'
            );

        } else {

            row.classList.remove(
                'selected'
            );

        }

    }


    /*
    |--------------------------------------------------------------------------
    | UPDATE GA TOTALS
    |--------------------------------------------------------------------------
    */

    function updateGaTotals(
        gaBlock
    ) {


        let count = 0;

        let weight = 0;


        const checkboxes =
            gaBlock.querySelectorAll(
                '.jewel-checkbox'
            );


        checkboxes.forEach(
            function (checkbox) {


                if (checkbox.checked) {

                    count++;


                    weight +=
                        parseFloat(
                            checkbox.dataset.weight
                        ) || 0;

                }

            }
        );


        /*
        |--------------------------------------------------------------------------
        | SHOW GA TOTAL
        |--------------------------------------------------------------------------
        */

        gaBlock.querySelector(
            '.selected-count'
        ).textContent = count;


        gaBlock.querySelector(
            '.selected-weight'
        ).textContent =
            weight.toFixed(3) + ' g';


        /*
        |--------------------------------------------------------------------------
        | SELECT ALL STATE
        |--------------------------------------------------------------------------
        */

        const selectAll =
            gaBlock.querySelector(
                '.select-all-ga'
            );


        selectAll.checked =
            checkboxes.length > 0 &&
            count === checkboxes.length;


        selectAll.indeterminate =
            count > 0 &&
            count < checkboxes.length;


        updateOverallTotals();

    }


    /*
    |--------------------------------------------------------------------------
    | OVERALL TOTALS
    |--------------------------------------------------------------------------
    */

    function updateOverallTotals() {


        let totalGAs = 0;

        let totalJewels = 0;

        let totalWeight = 0;


        document
            .querySelectorAll('.ga-block')
            .forEach(function (gaBlock) {


                const checkboxes =
                    gaBlock.querySelectorAll(
                        '.jewel-checkbox:checked'
                    );


                if (checkboxes.length > 0) {

                    totalGAs++;

                }


                checkboxes.forEach(
                    function (checkbox) {


                        totalJewels++;


                        totalWeight +=
                            parseFloat(
                                checkbox.dataset.weight
                            ) || 0;

                    }
                );

            });


        /*
        |--------------------------------------------------------------------------
        | UPDATE SUMMARY
        |--------------------------------------------------------------------------
        */

        document.getElementById(
            'totalGaCount'
        ).textContent =
            totalGAs;


        document.getElementById(
            'totalJewelCount'
        ).textContent =
            totalJewels;


        document.getElementById(
            'totalJewelWeight'
        ).textContent =
            totalWeight.toFixed(3);


        /*
        |--------------------------------------------------------------------------
        | AUTO UPDATE NET WEIGHT
        |--------------------------------------------------------------------------
        */

        const netWeight =
            document.getElementById(
                'netWeight'
            );


        if (netWeight) {

            netWeight.value =
                totalWeight.toFixed(3);

        }


        /*
        |--------------------------------------------------------------------------
        | AUTO UPDATE GROSS WEIGHT
        |--------------------------------------------------------------------------
        */

        const grossWeight =
            document.getElementById(
                'grossWeight'
            );


        if (grossWeight) {

            grossWeight.value =
                totalWeight.toFixed(3);

        }

    }


    /*
    |--------------------------------------------------------------------------
    | ADD GA BUTTON
    |--------------------------------------------------------------------------
    */

    addGaBtn.addEventListener(
        'click',
        function () {

            addGa();

        }
    );


    /*
    |--------------------------------------------------------------------------
    | INITIAL GA
    |--------------------------------------------------------------------------
    */

    addGa();


    /*
    |--------------------------------------------------------------------------
    | FORM SUBMIT
    |--------------------------------------------------------------------------
    */

    document.getElementById(
        'pledgeForm'
    ).addEventListener(
        'submit',
        function (e) {


            e.preventDefault();


            const selectedGAs = [];


            /*
            |--------------------------------------------------------------------------
            | COLLECT ALL GA DATA
            |--------------------------------------------------------------------------
            */

            document
                .querySelectorAll('.ga-block')
                .forEach(function (gaBlock) {


                    const gaNumber =
                        gaBlock
                            .querySelector('.ga-number')
                            .value
                            .trim();


                    if (!gaNumber) {
                        return;
                    }


                    const selectedJewels = [];


                    gaBlock
                        .querySelectorAll(
                            '.jewel-checkbox:checked'
                        )
                        .forEach(
                            function (checkbox) {


                                const row =
                                    checkbox.closest(
                                        '.dynamic-jewel-row'
                                    );


                                const jewelNumber =
                                    row.querySelector(
                                        '.jewel-name'
                                    ).textContent.trim();


                                selectedJewels.push({

                                    jewel_id:
                                        checkbox.dataset.jewelId,

                                    jewel_number:
                                        jewelNumber,

                                    weight:
                                        parseFloat(
                                            checkbox.dataset.weight
                                        )

                                });

                            }
                        );


                    selectedGAs.push({

                        ga_number:
                            gaNumber,

                        jewels:
                            selectedJewels

                    });

                });


            /*
            |--------------------------------------------------------------------------
            | VALIDATE GA
            |--------------------------------------------------------------------------
            */

            if (selectedGAs.length === 0) {

                alert(
                    'Please add at least one GA number.'
                );

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | VALIDATE JEWELS
            |--------------------------------------------------------------------------
            */

            const totalSelectedJewels =
                selectedGAs.reduce(
                    function (total, ga) {

                        return total +
                            ga.jewels.length;

                    },
                    0
                );


            if (totalSelectedJewels === 0) {

                alert(
                    'Please select at least one jewel.'
                );

                return;

            }


            /*
            |--------------------------------------------------------------------------
            | FINAL DATA
            |--------------------------------------------------------------------------
            */

            const pledgeData = {


                /* GA + JEWELS */

                gas:
                    selectedGAs,


                /* OTHER FIELDS */

                gold_number:
                    document.getElementById(
                        'goldNumber'
                    ).value,


                pledge_date:
                    document.getElementById(
                        'pledgeDate'
                    ).value,


                bank_pledge_id:
                    document.getElementById(
                        'bankPledgeId'
                    ).value,


                ga_id:
                    document.getElementById(
                        'gaId'
                    ).value,


                type:
                    document.getElementById(
                        'pledgeType'
                    ).value,


                pledge_name:
                    document.getElementById(
                        'pledgeName'
                    ).value,


                bank_name:
                    document.getElementById(
                        'bankName'
                    ).value,


                branch_name:
                    document.getElementById(
                        'branchName'
                    ).value,


                total_gross_weight:
                    document.getElementById(
                        'grossWeight'
                    ).value,


                net_weight:
                    document.getElementById(
                        'netWeight'
                    ).value,


                bank_rate:
                    document.getElementById(
                        'bankRate'
                    ).value,


                bank_total_loan:
                    document.getElementById(
                        'bankTotalLoan'
                    ).value,


                amount:
                    document.getElementById(
                        'amount'
                    ).value,


                bank_interest:
                    document.getElementById(
                        'bankInterest'
                    ).value,


                due_date:
                    document.getElementById(
                        'dueDate'
                    ).value,


                scheme_type:
                    document.getElementById(
                        'schemeType'
                    ).value,


                processing_fee:
                    document.getElementById(
                        'processingFee'
                    ).value,


                loan_ac_no:
                    document.getElementById(
                        'loanAcNo'
                    ).value,


                appraisor_charge:
                    document.getElementById(
                        'appraisorCharge'
                    ).value,


                other_charge:
                    document.getElementById(
                        'otherCharge'
                    ).value,


                holder_commission:
                    document.getElementById(
                        'holderCommission'
                    ).value,


                remark:
                    document.getElementById(
                        'remark'
                    ).value,


                closing_date:
                    document.getElementById(
                        'closingDate'
                    ).value

            };


            console.log(
                'Complete Pledge Data:',
                pledgeData
            );


        }
    );


    /*
    |--------------------------------------------------------------------------
    | RESET FORM
    |--------------------------------------------------------------------------
    */

    document.getElementById(
        'pledgeForm'
    ).addEventListener(
        'reset',
        function () {


            setTimeout(
                function () {


                    /*
                    | Remove all GA rows
                    */

                    gaRows.innerHTML =
                        '';


                    gaIndex = 0;


                    /*
                    | Add fresh GA row
                    */

                    addGa();


                    /*
                    | Reset totals
                    */

                    document.getElementById(
                        'totalGaCount'
                    ).textContent = '0';


                    document.getElementById(
                        'totalJewelCount'
                    ).textContent = '0';


                    document.getElementById(
                        'totalJewelWeight'
                    ).textContent = '0.000';


                },
                0
            );

        }
    );

});

</script>

@endsection