@extends('Admin.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('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('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('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 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