@extends('staff.layout')
<style>
    .step-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.step-content {
    min-width: 600px;
}

.step-item {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-circle-custom {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    color: var(--ink-dim);
    position: relative;
    z-index: 1;
}

.step-circle-custom.completed {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    box-shadow: 0 0 12px rgba(226,182,92,.4);
    color: #1a1206;
}

.step-connector {
    position: absolute;
    top: 19px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
    border-top: 1px solid var(--glass-border);
}

.step-connector.completed {
    border-color: var(--gold);
    opacity: .6;
}

.step-label-custom {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.4;
}

.step-label-custom small {
    color: var(--ink-dim);
}

.step-label-custom.active small {
    color: var(--gold-soft);
    font-weight: 600;
}
</style>
@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 w-100">
                    @foreach ([1, 2, 3, 4, 5] as $step)
                        <div class="step-item">

                            <div class="step-circle-custom
                                {{ in_array($step, [1, 2, 4]) || $step === 3 ? 'completed' : '' }}">

                                @if (in_array($step, [1, 2, 4]))
                                    <i class="ti ti-check"></i>
                                @else
                                    <small>{{ $step }}</small>
                                @endif
                            </div>

                            @if ($step < 5)
                                <div class="step-connector
                                    {{ in_array($step, [1, 2]) ? 'completed' : '' }}">
                                </div>
                            @endif

                            <div class="step-label-custom
                                {{ in_array($step, [1, 2, 3, 4]) ? 'active' : '' }}">
                                <small>
                                    {{ [
                                        1 => 'Personal Details',
                                        2 => 'Gold',
                                        3 => 'Docs',
                                        4 => 'Loan',
                                        5 => 'Review'
                                    ][$step] }}
                                </small>
                            </div>

                        </div>
                    @endforeach
                </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"
        required
    >
        <option value="">Select Interest Policy</option>

        @foreach ($policies as $policy)
            <option
                value="{{ $policy->id }}"
                data-interest="{{ $policy->interest }}"
                data-overdue-months="{{ $policy->interest_overdue_months }}"
                data-overdue-percentage="{{ $policy->interest_overdue_percentage }}"
                {{ old('policy_id', $loan['policy_id'] ?? '') == $policy->id ? 'selected' : '' }}
            >
                {{ $policy->policy_name }}
            </option>
        @endforeach

    </select>

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

</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="number"
            name="interest_percent"
            id="interestPercent"
            class="form-control text-end"
            value="{{ old('interest_percent', $loan['interest_percent'] ?? '') }}"
            step="0.001"
            min="0"
            required
        >

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

    </div>

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

</div>


{{-- THIRD ROW --}}

<!-- INTEREST OVERDUE MONTHS -->
<div class="col-md-3 col-12">
    <label class="form-label small mb-0 mt-lg-1">
        Interest Overdue Months
        <span class="text-danger">*</span>
    </label>

    <div class="input-group input-group-sm">
        <input
            type="number"
            name="interest_overdue_months"
            id="interestOverdueMonths"
            class="form-control text-end"
            value="{{ old('interest_overdue_months', $loan['interest_overdue_months'] ?? '') }}"
            min="1"
            step="1"
            required
        >

        <span class="input-group-text">
            Months
        </span>
    </div>

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


<!-- INTEREST OVERDUE PERCENTAGE -->
<div class="col-md-3 col-12">
    <label class="form-label small mb-0 mt-lg-1">
        Interest Overdue Percentage
        <span class="text-danger">*</span>
    </label>

    <div class="input-group input-group-sm">
        <input
            type="number"
            name="interest_overdue_percentage"
            id="interestOverduePercentage"
            class="form-control text-end"
            value="{{ old('interest_overdue_percentage', $loan['interest_overdue_percentage'] ?? '') }}"
            step="0.001"
            min="0"
            required
        >

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

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


<!-- NOTICE DUE MONTHS -->
<div class="col-md-3 col-12">
    <label class="form-label small mb-0 mt-lg-1">
        Notice Due Months
        <span class="text-danger">*</span>
    </label>

    <div class="input-group input-group-sm">
        <input
            type="number"
            name="notice_due_months"
            id="noticeDueMonths"
            class="form-control text-end"
            value="{{ old('notice_due_months', $loan['notice_due_months'] ?? '') }}"
            min="1"
            step="1"
            required
        >

        <span class="input-group-text">
            Months
        </span>
    </div>

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


<!-- NOTICE DUE FOLLOWUP -->
<div class="col-md-3 col-12">
    <label class="form-label small mb-0 mt-lg-1">
        Notice Due Followup
        <span class="text-danger">*</span>
    </label>

    <div class="input-group input-group-sm">
        <input
            type="number"
            name="notice_due_followup"
            id="noticeDueFollowup"
            class="form-control text-end"
            value="{{ old('notice_due_followup', $loan['notice_due_followup'] ?? '') }}"
            min="0"
            step="1"
            required
        >

        <span class="input-group-text">
            Followups
        </span>
    </div>

    @error('notice_due_followup')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</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_docs') }}" 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 interestInput =
            document.getElementById('interestPercent');

        const overdueMonthsInput =
            document.getElementById('interestOverdueMonths');

        const overduePercentageInput =
            document.getElementById('interestOverduePercentage');

        const noticeDueMonthsInput =
            document.getElementById('noticeDueMonths');

        const noticeDueFollowupInput =
            document.getElementById('noticeDueFollowup');


        function updatePolicyDetails() {

            const selectedOption =
                policySelect.options[policySelect.selectedIndex];


            if (!selectedOption || !selectedOption.value) {

                interestInput.value = '';
                overdueMonthsInput.value = '';
                overduePercentageInput.value = '';
                noticeDueMonthsInput.value = '';
                noticeDueFollowupInput.value = '';

                return;
            }


            // Interest
            interestInput.value =
                selectedOption.dataset.interest ?? '';


            // Interest Overdue Months
            overdueMonthsInput.value =
                selectedOption.dataset.overdueMonths ?? '';


            // Interest Overdue Percentage
            overduePercentageInput.value =
                selectedOption.dataset.overduePercentage ?? '';


            // Notice Due Months
            noticeDueMonthsInput.value =
                selectedOption.dataset.noticeDueMonths ?? '';


            // Notice Due Followup
            noticeDueFollowupInput.value =
                selectedOption.dataset.noticeDueFollowup ?? '';
        }


        // When policy changes
        policySelect.addEventListener(
            'change',
            updatePolicyDetails
        );


        // Load values for already selected policy
        updatePolicyDetails();

    });
</script>

@endsection