@extends('staff.layout')
@section('content')

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

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

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

            <div>
                <h5 class="mb-0 fw-bold" style="color: var(--gold-soft);">New GA Entry</h5>
            </div>

        </div>

    </div>

    <!-- =========================================
                                                                                                                                                                                     STEP INDICATOR
                                                                                                                                                                                ========================================= -->
  <div class="card mb-4"> <div class="card-body py-3">
    <div class="step-scroll">

        <div class="step-content">

            <!-- Circles + Connecting Lines -->
            <div class="d-flex align-items-center w-100">

                <!-- Step 1: Completed -->
                <div class="step-circle-custom completed">
                    <i class="ti ti-check"></i>
                </div>

                <div class="step-connector done"></div>

                <!-- Step 2: Completed -->
                <div class="step-circle-custom completed">
                    <i class="ti ti-check"></i>
                </div>

                <div class="step-connector done"></div>

                <!-- Step 3: Active -->
                <div class="step-circle-custom completed">
                    <span>3</span>
                </div>

                <div class="step-connector"></div>

                <!-- Step 4: Pending -->
                <div class="step-circle-custom">
                    <span>4</span>
                </div>

                <div class="step-connector"></div>

                <!-- Step 5: Pending -->
                <div class="step-circle-custom">
                    <span>5</span>
                </div>

            </div>

            <!-- Labels -->
            <div class="d-flex align-items-start w-100 mt-2">

                <!-- Step 1 -->
                <div class="step-label-custom active">
                    <small>Personal Details</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 2 -->
                <div class="step-label-custom active">
                    <small>Gold</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 3 -->
                <div class="step-label-custom active">
                    <small>Loan</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 4 -->
                <div class="step-label-custom">
                    <small>Docs</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 5 -->
                <div class="step-label-custom">
                    <small>Review</small>
                </div>

            </div>

        </div>

    </div>

</div>
</div>

    <!-- =========================================
                                                                                                                                                                                     LOAN DETAILS CARD
                                                                                                                                                                                ========================================= -->
    <div class="card p-md-4 p-3">

        <!-- TITLE -->
        <div class="d-flex align-items-center gap-2 mb-3">
            <i class="ti ti-coin" style="color: var(--gold-soft); font-size: 1.1rem;"></i>
            <h5 class="fw-bold mb-0" style="color: var(--gold-soft);">
                Loan & Interest Details
            </h5>
        </div>

        <form action="{{ route('staff_store_ga_loan') }}" method="POST" id="loanForm">
            @csrf
            <div class="row g-2 g-md-3 mb-3">

                <!-- NET WEIGHT -->
                <div class="col-md-4 col-12">

                    <label class="form-label small mb-0 mt-lg-1">
                        Net Weight
                        <span class="text-danger">*</span>
                    </label>

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

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

                        <input type="number" name="eligible_net_weight" id="eligibleNetWeight" class="form-control text-end"
                            value="{{ old('eligible_net_weight', number_format($totalNetWeight, 3, '.', '')) }}"
                            step="0.001" readonly>

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

                    </div>

                </div>

                <!-- 22K GOLD AMOUNT -->
                <div class="col-md-4 col-12">

                    <label class="form-label small mb-0 mt-lg-1">
                        Rate / g
                        <span class="text-danger">*</span>
                    </label>

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

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

                        <input type="number" name="gold_22k_amount" id="gold22kAmount" class="form-control text-end"
                            value="{{ old('gold_22k_amount', $loan['gold_22k_amount'] ?? $gold22k->amount ?? 0) }}"
                            step="0.01" min="0" required>

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

                    </div>

                </div>


                <!-- ELIGIBLE LOAN AMOUNT -->
                <div class="col-md-4 col-12">

                    <label class="form-label small mb-0 mt-lg-1">
                        Eligible Loan Amount
                        <span class="text-danger">*</span>
                    </label>

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

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

                        <input type="number" name="eligible_loan_amount" id="eligibleLoanAmount"
                            class="form-control text-end"
                            value="{{ old('eligible_loan_amount', $loan['eligible_loan_amount'] ?? number_format($eligibleLoanAmount, 2, '.', '')) }}"
                            step="0.01" min="0" required>

                    </div>

                </div>

                <!-- INTEREST POLICY -->
                <div class="col-md-6 col-12">
                    <label class="form-label small mb-0 mt-lg-1">
                        Interest Policy
                        <span class="text-danger">*</span>
                    </label>
                    <select name="policy_id" id="interestPolicy" class="form-select form-select-sm">

                        <option value="">Select Interest Policy</option>

                        @foreach ($policies as $policy)

                            <option value="{{ $policy->id }}" data-interest="{{ $policy->interest }}" {{ old('policy_id', $loan['policy_id'] ?? '') == $policy->id ? 'selected' : '' }}>

                                {{ $policy->policy_name }}

                            </option>

                        @endforeach

                    </select>
                </div>

                <!-- INTEREST PERCENT -->
                <div class="col-md-6 col-12">

                    <label class="form-label small mb-0 mt-lg-1">
                        Interest Percent
                        <span class="text-danger">*</span>
                    </label>

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

                        <input type="text" name="interest_percent" id="interestPercent" class="form-control text-end"
                            value="{{ old('interest_percent', $loan['interest_percent'] ?? '') }}" readonly>

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

                    </div>

                </div>
                <!-- NOTE -->
                <div class="col-12">

                </div>


                <div class="col-md-6 col-12 mb-2">
                    <label class="form-label small fw-semibold mb-1">
                        Disbursement Mode <span class="text-danger">*</span>
                    </label>

                    <div class="d-flex gap-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="disbursement_mode" id="cash" value="By hand"
                                {{ old('disbursement_mode', $loan['disbursement_mode'] ?? 'By hand') == 'By hand' ? 'checked' : '' }}>

                            <label class="form-check-label small" for="cash">
                                By hand
                            </label>

                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="disbursement_mode" id="bankTransfer"
                                value="Bank Transfer" {{ old('disbursement_mode', $loan['disbursement_mode'] ?? 'By hand') == 'Bank Transfer' ? 'checked' : '' }}>

                            <label class="form-check-label small" for="bankTransfer">
                                Bank Transfer
                            </label>
                        </div>
                    </div>
                </div>


                <!-- DISBURSEMENT DATE -->
                <div class="col-md-6 col-12 mb-2">

                    <label class="form-label small mb-1">
                        Disbursement Date <span class="text-danger">*</span>
                    </label>

                    <input type="date" name="disbursement_date" class="form-control form-control-sm"
                        value="{{ old('disbursement_date', $loan['disbursement_date'] ?? now()->format('Y-m-d')) }}">

                </div>


                <div class="col-12" id="bankDetailsSection">

                    <hr class="my-2">

                    <div class="d-flex align-items-center gap-2 mb-1 mt-2">
                        <i class="ti ti-building-bank" style="color: var(--gold-soft); font-size: 1.1rem;"></i>

                        <h6 class="fw-bold mb-0" style="color: var(--gold-soft);">
                            Customer Bank Details
                            <span class="fw-normal" style="color: var(--ink-dim); font-size: .82rem;">
                                (For Disbursement)
                            </span>
                        </h6>
                    </div>

                    <div class="row g-2 g-md-3">

                        <!-- BANK NAME -->
                        <div class="col-md-3 col-12 mb-3">

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

                            <select name="bank_id" id="bankName" class="form-select form-select-sm w-100">

                                <option value="">Select Bank</option>

                                @foreach($banks as $bank)

                                    <option value="{{ $bank->id }}" {{ old('bank_id', $loan['bank_id'] ?? '') == $bank->id ? 'selected' : '' }}>
                                        {{ $bank->bank_name }}
                                    </option>

                                @endforeach

                            </select>

                            @error('bank_id')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>

                          <div class="col-md-3 col-12 mb-3">

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

                            <input type="text" name="branch_name" class="form-control form-control-sm"
                                placeholder="branch_name"
                                value="{{ old('branch_name', $loan['branch_name'] ?? '') }}">

                            @error('branch_name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>


                        <!-- ACCOUNT NUMBER -->
                        <div class="col-md-3 col-12 mb-3">

                            <label class="form-label">
                                Account Number
                                <span class="text-danger">*</span>
                            </label>

                            <input type="text" name="account_number" class="form-control form-control-sm"
                                placeholder="67894576898"
                                value="{{ old('account_number', $loan['account_number'] ?? '') }}">

                            @error('account_number')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>


                        <!-- IFSC -->
                        <div class="col-md-3 col-12 mb-3">

                            <label class="form-label">
                                IFSC
                                <span class="text-danger">*</span>
                            </label>

                            <input type="text" name="ifsc" class="form-control form-control-sm" placeholder="AI00123467"
                                value="{{ old('ifsc', $loan['ifsc'] ?? '') }}">

                            @error('ifsc')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror

                        </div>

                    </div>

                </div>

            </div>

            <!-- NEXT BUTTON -->
            <div class="d-grid d-md-flex gap-2 justify-content-md-end">
                <a href="{{ route('staff_gold') }}" class="btn btn-primary">
                    Back
                    <i class="ti ti-arrow-left ms-1"></i>
                </a>
                <button type="submit" class="btn btn-primary">
                    Next
                    <i class="ti ti-arrow-right ms-1"></i>
                </button>

            </div>

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

            const goldItems = @json($goldItemsForCalculation);

            const gold22kAmountInput = document.getElementById('gold22kAmount');
            const eligibleLoanAmountInput = document.getElementById('eligibleLoanAmount');

            function calculateEligibleLoanAmount() {

                const ratePerGram = parseFloat(gold22kAmountInput.value) || 0;

                let eligibleLoanAmount = 0;

                goldItems.forEach(function (item) {

                    const netWeight = parseFloat(item.net) || 0;
                    const purity = parseInt(item.purity) || 0;
                    const reductionAmount = parseFloat(item.reduction_amount) || 0;

                    if (netWeight <= 0 || purity <= 0) {
                        return;
                    }

                    let customerRate = ratePerGram;
                    if (purity < 22) {
                        customerRate = Math.max(
                            0,
                            ratePerGram - reductionAmount
                        );
                    }

                    eligibleLoanAmount += netWeight * customerRate;
                });

                eligibleLoanAmountInput.value = eligibleLoanAmount.toFixed(2);
            }

            gold22kAmountInput.addEventListener(
                'input',
                calculateEligibleLoanAmount
            );

            calculateEligibleLoanAmount();

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

            const bankDetailsSection = document.getElementById('bankDetailsSection');
            const disbursementModes = document.querySelectorAll(
                'input[name="disbursement_mode"]'
            );

            function toggleBankDetails() {

                const selectedMode = document.querySelector(
                    'input[name="disbursement_mode"]:checked'
                )?.value;

                if (selectedMode === 'Bank Transfer') {

                    bankDetailsSection.style.display = '';

                } else {

                    bankDetailsSection.style.display = 'none';

                }
            }

            disbursementModes.forEach(function (radio) {

                radio.addEventListener('change', toggleBankDetails);

            });

            toggleBankDetails();

        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const policySelect = document.getElementById('interestPolicy');
            const percentInput = document.getElementById('interestPercent');

            function updateInterestPercent() {
                const selected = policySelect.options[policySelect.selectedIndex];
                percentInput.value = selected?.dataset.interest ?? '';
            }

            policySelect.addEventListener('change', updateInterestPercent);

            // Fill it for an already selected policy (old input / session)
            updateInterestPercent();
        });
    </script>
@endsection