@extends('staff.layout')

@section('content')




<div class="container-fluid">

    <div class="card gold-transfer-card shadow-sm">

        <div class="card-body p-4">

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

                <a href="{{ route('gt_table') }}" class="btn btn-outline-primary">
                    <i class="ti ti-arrow-left"></i>
                </a>

                <h5 class="fw-bold text-primary mb-0">
                    Gold Transfer
                </h5>

            </div>


            {{-- ================= FORM ================= --}}

            <form action="{{ route('gt_transfer_store') }}"
                  method="POST"
                  id="goldTransferForm">

                @csrf


                {{-- ================= TRANSFER TYPE ================= --}}

                <div class="mb-4">

                    <label class="form-label d-block">
                        Select Type
                    </label>

                    <div class="d-flex gap-3">

                        {{-- CUSTOMER --}}
                        <label class="type-box"
                               id="customerTypeBox">

                            <input type="radio"
                                   name="transfer_type"
                                   value="customer"
                                   {{ old('transfer_type', 'customer') == 'customer' ? 'checked' : '' }}
                                   onchange="showSection('customer')">

                            Customer

                        </label>


                        {{-- BANK --}}
                        <label class="type-box"
                               id="bankTypeBox">

                            <input type="radio"
                                   name="transfer_type"
                                   value="bank"
                                   {{ old('transfer_type') == 'bank' ? 'checked' : '' }}
                                   onchange="showSection('bank')">

                            Bank

                        </label>

                    </div>

                </div>


                {{-- ================================================= --}}
                {{-- CUSTOMER SECTION --}}
                {{-- ================================================= --}}

                <div id="customerSection">

                    <div class="section-title">
                        Customer Details
                    </div>


                    <div class="row g-3">

                        {{-- CUSTOMER NAME --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Name
                            </label>

                            <input type="text"
                                   name="customer_name"
                                   class="form-control customer-field"
                                   placeholder="Enter customer name"
                                   value="{{ old('customer_name') }}">

                        </div>


                        {{-- CUSTOMER PLACE --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Place
                            </label>

                            <input type="text"
                                   name="customer_place"
                                   class="form-control customer-field"
                                   placeholder="Enter place"
                                   value="{{ old('customer_place') }}">

                        </div>


                        {{-- AADHAR --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Aadhar
                            </label>

                            <input type="text"
                                   name="customer_aadhar"
                                   class="form-control customer-field"
                                   placeholder="Enter Aadhar number"
                                   value="{{ old('customer_aadhar') }}">

                        </div>


                        {{-- PHONE --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Phone No
                            </label>

                            <input type="text"
                                   name="customer_phone"
                                   class="form-control customer-field"
                                   placeholder="Enter phone number"
                                   value="{{ old('customer_phone') }}">

                        </div>

                    </div>


                    <hr class="gold-divider">


                    {{-- CUSTOMER GOLD DETAILS --}}

                    <div class="section-title">
                        Gold Details
                    </div>


                    <div class="row g-3">

                        {{-- GROSS --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                Gross Gram
                            </label>

                            <input type="number"
                                   name="gross_gram"
                                   id="customerGrossGram"
                                   class="form-control customer-field"
                                   step="0.001"
                                   min="0"
                                   placeholder="Enter gross gram"
                                   value="{{ old('gross_gram') }}">

                        </div>

                        {{-- per  gram default --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                per Gram
                            </label>

    <input type="number"
           name="per_gram"
           id="customerPerGram"
           class="form-control"
           step="0.01"
           value="{{ $gold22kAmount ?? 0 }}"
           readonly>

                        </div>


                        {{-- REDUCED --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                Reduced Gram
                            </label>

                            <input type="number"
                                   name="reduced_gram"
                                   id="customerReducedGram"
                                   class="form-control customer-field"
                                   step="0.001"
                                   min="0"
                                   placeholder="Enter reduced gram"
                                   value="{{ old('reduced_gram') }}">

                        </div>


                        {{-- NET --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Net Gram
                            </label>

                            <input type="number"
                                   name="net_gram"
                                   id="customerNetGram"
                                   class="form-control customer-field"
                                   step="0.001"
                                   min="0"
                                   placeholder="Net gram"
                                   value="{{ old('net_gram') }}"
                                   readonly>

                        </div>


                        {{-- AMOUNT --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Amount
                            </label>

                            <input type="number"
                                   name="per_gram"
                                   id="customerAmount"
                                   class="form-control customer-field"
                                   step="0.01"
                                   min="0"
                                   placeholder="Amount"
                                   value="{{ old('per_gram') }}"
                                   readonly>

                        </div>

                    </div>

                </div>


                {{-- ================================================= --}}
                {{-- BANK SECTION --}}
                {{-- ================================================= --}}

                <div id="bankSection" style="display:none;">

                    <div class="section-title">
                        Bank Details
                    </div>


                    <div class="row g-3">

                        {{-- BANK NAME --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Name
                            </label>

                            <input type="text"
                                   name="bank_name"
                                   class="form-control bank-field"
                                   placeholder="Enter bank name"
                                   value="{{ old('bank_name') }}">

                        </div>


                        {{-- BRANCH --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Branch
                            </label>

                            <input type="text"
                                   name="bank_branch"
                                   class="form-control bank-field"
                                   placeholder="Enter branch"
                                   value="{{ old('bank_branch') }}">

                        </div>


                        {{-- AGENT --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Agent
                            </label>

                            <input type="text"
                                   name="bank_agent"
                                   class="form-control bank-field"
                                   placeholder="Enter agent name"
                                   value="{{ old('bank_agent') }}">

                        </div>


                        {{-- PHONE --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Phone No
                            </label>

                            <input type="text"
                                   name="bank_phone"
                                   class="form-control bank-field"
                                   placeholder="Enter phone number"
                                   value="{{ old('bank_phone') }}">

                        </div>

                    </div>


                    <hr class="gold-divider">


                    {{-- BANK GOLD DETAILS --}}

                    <div class="section-title">
                        Gold Details
                    </div>


                    <div class="row g-3">

                        {{-- GROSS --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                Gross Gram
                            </label>

                            <input type="number"
                                   name="gross_gram"
                                   id="bankGrossGram"
                                   class="form-control bank-field"
                                   step="0.001"
                                   min="0"
                                   placeholder="Enter gross gram"
                                   value="{{ old('gross_gram') }}">

                        </div>

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

                            <label class="form-label">
                                Per Gram
                            </label>

                            <input type="number"
                                name="per_gram"
                                id="bankPerGram"
                                class="form-control"
                                step="0.01"
                                value="{{ $gold22kAmount ?? 0 }}"
                                readonly>

                        </div>


                        {{-- REDUCED --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                Reduced Gram
                            </label>

                            <input type="number"
                                   name="reduced_gram"
                                   id="bankReducedGram"
                                   class="form-control bank-field"
                                   step="0.001"
                                   min="0"
                                   placeholder="Enter reduced gram"
                                   value="{{ old('reduced_gram') }}">

                        </div>


                        {{-- NET --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Net Gram
                            </label>

                            <input type="number"
                                   name="net_gram"
                                   id="bankNetGram"
                                   class="form-control bank-field"
                                   step="0.001"
                                   min="0"
                                   placeholder="Net gram"
                                   value="{{ old('net_gram') }}"
                                   readonly>

                        </div>


                        {{-- AMOUNT --}}
                        <div class="col-md-6">

                            <label class="form-label">
                                Amount
                            </label>

                            <input type="number"
                                   name="per_gram"
                                   id="bankAmount"
                                   class="form-control bank-field"
                                   step="0.01"
                                   min="0"
                                   placeholder="Amount"
                                   value="{{ old('per_gram') }}"
                                   readonly>

                        </div>

                    </div>

                </div>


                {{-- ================================================= --}}
                {{-- DISBURSEMENT MODE --}}
                {{-- ================================================= --}}

                <hr class="gold-divider">

                <div class="section-title">
                    Disbursement Mode
                </div>


                <div class="d-flex gap-4 mb-3">

                    {{-- BY HAND --}}
                    <div class="form-check">

                        <input class="form-check-input"
                               type="radio"
                               name="disbursement_mode"
                               id="cash"
                               value="By hand"
                               {{ old('disbursement_mode', 'By hand') == 'By hand' ? 'checked' : '' }}
                               onchange="toggleBankDetails()">

                        <label class="form-check-label"
                               for="cash">

                            By hand

                        </label>

                    </div>


                    {{-- BANK TRANSFER --}}
                    <div class="form-check">

                        <input class="form-check-input"
                               type="radio"
                               name="disbursement_mode"
                               id="bankTransfer"
                               value="Bank Transfer"
                               {{ old('disbursement_mode') == 'Bank Transfer' ? 'checked' : '' }}
                               onchange="toggleBankDetails()">

                        <label class="form-check-label"
                               for="bankTransfer">

                            Bank Transfer

                        </label>

                    </div>

                </div>


                {{-- ================================================= --}}
                {{-- DISBURSEMENT BANK DETAILS --}}
                {{-- ================================================= --}}

                <div id="bankDetailsSection" style="display:none;">

                    <div class="section-title">
                        Bank Details For Disbursement
                    </div>


                    <div class="row g-3">

                        {{-- DISBURSEMENT BANK NAME --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                Bank Name
                            </label>

                            <input type="text"
                                   name="disbursement_bank_name"
                                   class="form-control"
                                   placeholder="Enter bank name"
                                   value="{{ old('disbursement_bank_name') }}">

                        </div>


                        {{-- ACCOUNT NUMBER --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                Account Number
                            </label>

                            <input type="text"
                                   name="account_number"
                                   class="form-control"
                                   placeholder="Enter account number"
                                   value="{{ old('account_number') }}">

                        </div>


                        {{-- IFSC --}}
                        <div class="col-md-4">

                            <label class="form-label">
                                IFSC
                            </label>

                            <input type="text"
                                   name="ifsc"
                                   class="form-control"
                                   placeholder="Enter IFSC"
                                   value="{{ old('ifsc') }}">

                        </div>

                    </div>

                </div>


                {{-- ================================================= --}}
                {{-- BUTTONS --}}
                {{-- ================================================= --}}

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

                    <!-- <a href="#"
                       class="btn btn-secondary">

                        Cancel

                    </a> -->


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

                        <span id="submitText">
                            Submit
                        </span>

                    </button>

                </div>

            </form>

        </div>

    </div>

</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // =====================================================
    // 22K GOLD RATE FROM CONTROLLER
    // =====================================================

    const gold22kAmount =
        parseFloat(@json((float) ($gold22kAmount ?? 0))) || 0;

    console.log('22K Rate:', gold22kAmount);


    // =====================================================
    // COMMON CALCULATION
    // =====================================================

    function calculate(prefix) {

        const grossField =
            document.getElementById(prefix + 'GrossGram');

        const reducedField =
            document.getElementById(prefix + 'ReducedGram');

        const netField =
            document.getElementById(prefix + 'NetGram');

        const amountField =
            document.getElementById(prefix + 'Amount');

        if (!grossField || !reducedField || !netField || !amountField) {
            return;
        }

        const gross =
            parseFloat(grossField.value) || 0;

        const reduced =
            parseFloat(reducedField.value) || 0;

        const net =
            gross - reduced;


        // Reduced > Gross
        if (net < 0) {

            netField.value = '';
            amountField.value = '';

            return;
        }


        // Net Gram
        netField.value =
            net.toFixed(3);


        // Amount = Net Gram × 22K Rate
        const totalAmount =
            net * gold22kAmount;


        amountField.value =
            totalAmount.toFixed(2);
    }


    // =====================================================
    // CUSTOMER
    // =====================================================

    function calculateCustomer() {
        calculate('customer');
    }


    // =====================================================
    // BANK
    // =====================================================

    function calculateBank() {
        calculate('bank');
    }


    // =====================================================
    // SHOW CUSTOMER / BANK SECTION
    // =====================================================

    window.showSection = function (type) {

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

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

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

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

        const customerFields =
            document.querySelectorAll('.customer-field');

        const bankFields =
            document.querySelectorAll('.bank-field');


        if (type === 'customer') {

            customerSection.style.display = 'block';
            bankSection.style.display = 'none';

            customerTypeBox.classList.add('active');
            bankTypeBox.classList.remove('active');


            customerFields.forEach(function (field) {
                field.disabled = false;
            });

            bankFields.forEach(function (field) {
                field.disabled = true;
            });


            calculateCustomer();

        } else {

            customerSection.style.display = 'none';
            bankSection.style.display = 'block';

            customerTypeBox.classList.remove('active');
            bankTypeBox.classList.add('active');


            customerFields.forEach(function (field) {
                field.disabled = true;
            });

            bankFields.forEach(function (field) {
                field.disabled = false;
            });


            calculateBank();
        }
    };


    // =====================================================
    // CUSTOMER INPUT EVENTS
    // =====================================================

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

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


    if (customerGrossGram) {
        customerGrossGram.addEventListener(
            'input',
            calculateCustomer
        );
    }

    if (customerReducedGram) {
        customerReducedGram.addEventListener(
            'input',
            calculateCustomer
        );
    }


    // =====================================================
    // BANK INPUT EVENTS
    // =====================================================

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

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


    if (bankGrossGram) {
        bankGrossGram.addEventListener(
            'input',
            calculateBank
        );
    }

    if (bankReducedGram) {
        bankReducedGram.addEventListener(
            'input',
            calculateBank
        );
    }


    // =====================================================
    // DISBURSEMENT BANK DETAILS
    // =====================================================

    window.toggleBankDetails = function () {

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

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


        if (!bankTransfer || !bankDetailsSection) {
            return;
        }


        if (bankTransfer.checked) {

            bankDetailsSection.style.display = 'block';

        } else {

            bankDetailsSection.style.display = 'none';
        }
    };


    // =====================================================
    // SUBMIT BUTTON
    // =====================================================

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

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

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


    if (goldTransferForm && submitBtn && submitText) {

        goldTransferForm.addEventListener(
            'submit',
            function () {

                submitText.innerText =
                    'Submitting...';

                submitBtn.disabled = true;
            }
        );
    }


    // =====================================================
    // INITIAL LOAD
    // =====================================================

    const selectedType =
        document.querySelector(
            'input[name="transfer_type"]:checked'
        );


    if (selectedType) {

        showSection(
            selectedType.value
        );

    } else {

        calculateCustomer();
        calculateBank();
    }


    // Initialize bank details
    toggleBankDetails();

});
</script>

@endsection