@extends('staff.layout')

@section('content')

    <!-- =========================================
                                                                                                                                                                             NEW GA ENTRY
                                                                                                                                                                        ========================================= -->

    <!-- 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('ga_cases') }}" 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">

            <!-- Circles + connecting line row -->
            <div class="d-flex align-items-center w-100">

                <!-- Step 1: completed -->
                <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                    style="width: 30px; height: 30px; background: linear-gradient(135deg, var(--gold-soft), var(--gold)); box-shadow: 0 0 12px rgba(226,182,92,.4);">
                    <small class="fw-semibold" style="color:#1a1206;">1</small>
                </div>
                <div class="flex-grow-1 mx-2" style="border-top: 1px solid var(--glass-border);"></div>

                <!-- Step 2: active -->
                <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                    style="width: 30px; height: 30px; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);">
                    <small class="fw-semibold" style="color: var(--ink-dim);">2</small>
                </div>
                <div class="flex-grow-1 mx-2" style="border-top: 1px solid var(--glass-border);"></div>

                <!-- Step 3 -->
                <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                    style="width: 30px; height: 30px; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);">
                    <small class="fw-semibold" style="color: var(--ink-dim);">3</small>
                </div>
                <div class="flex-grow-1 mx-2" style="border-top: 1px solid var(--glass-border);"></div>

                <!-- Step 4 -->
                <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                    style="width: 30px; height: 30px; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);">
                    <small class="fw-semibold" style="color: var(--ink-dim);">4</small>
                </div>
                <div class="flex-grow-1 mx-2" style="border-top: 1px solid var(--glass-border);"></div>

                <!-- Step 5 -->
                <div class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0"
                    style="width: 30px; height: 30px; background: rgba(255,255,255,.06); border: 1px solid var(--glass-border);">
                    <small class="fw-semibold" style="color: var(--ink-dim);">5</small>
                </div>

            </div>

            <!-- Labels row -->
            <div class="d-flex w-100 mt-2">

                <div class="text-center flex-shrink-0" style="width: 30px;">
                    <small class="fw-semibold text-nowrap" style="color: var(--gold-soft);">Personal Details</small>
                </div>
                <div class="flex-grow-1 mx-2"></div>

                <div class="text-center flex-shrink-0" style="width: 30px;">
                    <small class="fw-semibold text-nowrap" style="color:var(--ink-dim);">Gold</small>
                </div>
                <div class="flex-grow-1 mx-2"></div>

                <div class="text-center flex-shrink-0" style="width: 30px;">
                    <small class="text-nowrap" style="color: var(--ink-dim);">Docs</small>
                </div>
                <div class="flex-grow-1 mx-2"></div>
                <div class="text-center flex-shrink-0" style="width: 30px;">
                    <small class="text-nowrap" style="color: var(--ink-dim);">Loan</small>
                </div>

                <div class="flex-grow-1 mx-2"></div>

                <div class="text-center flex-shrink-0" style="width: 30px;">
                    <small class="text-nowrap" style="color: var(--ink-dim);">Review</small>
                </div>

            </div>

        </div>
    </div>

    <!-- =========================================
                                                                                                                                                                             FORM CARD
                                                                                                                                                                        ========================================= -->
    <div class="card p-md-4 p-3">
        <form action="{{ route('store_ga_customer') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row g-2 g-md-3">

                <div class="col-12 d-flex align-items-center gap-2 mb-1">
                    <i class="ti ti-user-circle" style="color: var(--gold-soft); font-size: 1.1rem;"></i>
                    <h6 class="fw-bold mb-0" style="color: var(--gold-soft);">Customer Details</h6>
                </div>

                <!-- LEFT SIDE -->
                <div class="col-lg-8 col-7">

                    <div class="row">
                        <!-- AADHAAR -->
                        <div class="col-12 mb-2 mb-lg-3">

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

                            <input type="text" name="aadhaar" id="aadhaar" class="form-control form-control-sm"
                                placeholder="XXXX XXXX 4321" maxlength="12"
                                value="{{ old('aadhaar', $gaCustomer['aadhaar'] ?? '') }}">

                            <small id="aadhaarStatus" class="d-none"></small>

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

                        </div>
                        <!-- CUSTOMER NAME -->
                        <div class="col-12 mb-2 mb-lg-3">

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

                            <input type="text" name="customer_name" id="customer_name"
                                value="{{ old('customer_name', $gaCustomer['customer_name'] ?? '') }}"
                                class="form-control form-control-sm" placeholder="Enter customer name">
                            @error('customer_name')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        <!-- MOBILE -->
                        <div class="col-12 mb-2 mb-lg-3">

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

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

                                <span class="input-group-text">
                                    <i class="ti ti-phone"></i>
                                </span>

                                <input type="tel" name="mobile" id="mobile"
                                    value="{{ old('mobile', $gaCustomer['mobile'] ?? '') }}" class="form-control"
                                    placeholder="+91 XXXXX XXXXX">

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

                        <!-- ADDRESS -->
                        <div class="col-12 mb-2 mb-lg-3">

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

                            <textarea name="address" class="form-control form-control-sm" rows="2"
                                placeholder="Enter address">{{ old('address', $gaCustomer['address'] ?? '') }}</textarea>
                            @error('address')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                    </div>

                </div>

                <!-- PHOTO -->
                <div class="col-lg-4 col-5">
                    <div class="w-100 risk-box p-2 text-center">

                        <!-- Desktop -->
                        <div id="livePhotoUploadDesktop"
                            class="rounded w-100 mb-2 d-none d-lg-flex align-items-center justify-content-center"
                            style="height: 160px; border: 1px solid var(--glass-border); cursor: pointer; overflow: hidden;"
                            onclick="document.getElementById('livePhoto').click()">

                            @if (!empty($gaCustomer['live_photo']))
                                <img src="{{ asset('storage/' . $gaCustomer['live_photo']) }}" class="w-100 h-100"
                                    style="object-fit: contain;" alt="Customer Photo">
                            @else
                                <div>
                                    <i class="ti ti-camera fs-2 d-block mb-1"></i>
                                    <span>Upload Photo</span>
                                </div>
                            @endif

                        </div>


                        <!-- Mobile -->
                        <div id="livePhotoUploadMobile"
                            class="rounded w-100 mb-1 d-flex d-lg-none align-items-center justify-content-center"
                            style="height: 120px; border: 1px solid var(--glass-border); cursor: pointer; overflow: hidden;"
                            onclick="document.getElementById('livePhoto').click()">

                            @if (!empty($gaCustomer['live_photo']))
                                <img src="{{ asset('storage/' . $gaCustomer['live_photo']) }}" class="w-100 h-100"
                                    style="object-fit: contain;" alt="Customer Photo">
                            @else
                                <div>
                                    <i class="ti ti-camera fs-2 d-block mb-1"></i>
                                    <span>Capture Photo</span>
                                </div>
                            @endif

                        </div>


                        <button type="button" class="btn btn-sm btn-primary w-100 text-nowrap mt-1"
                            onclick="document.getElementById('livePhoto').click()">

                            <i class="ti ti-camera me-1 d-none d-lg-inline-block"></i>
                            <span class="small">Live Photo</span>
                        </button>


                        <!-- KEEP THIS BACKEND INPUT -->
                        <input type="file" id="livePhoto" name="live_photo" class="d-none" accept="image/*"
                            capture="environment">

                    </div>

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

                <!-- GENDER -->
                <div class="col-md-4 col-12 mt-2">

                    <label class="form-label d-block">
                        Gender
                        <span class="text-danger">*</span>
                    </label>

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

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="gender" id="male" value="male" {{ old('gender', $gaCustomer['gender'] ?? '') == 'male' ? 'checked' : '' }}>

                            <label class="form-check-label" for="male">
                                Male
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="gender" id="female" value="female" {{ old('gender', $gaCustomer['gender'] ?? '') == 'female' ? 'checked' : '' }}>

                            <label class="form-check-label" for="female">
                                Female
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="gender" id="others" value="others" {{ old('gender', $gaCustomer['gender'] ?? '') == 'others' ? 'checked' : '' }}>

                            <label class="form-check-label" for="others">
                                Others
                            </label>
                        </div>

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



                <!-- PAN -->
                <div class="col-md-4 col-12 mb-3 mt-2 mt-md-0">

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

                    <div class="row g-1">

                        <div class="col-12">
                            <input type="text" name="pan" class="form-control form-control-sm" placeholder="ABCDE1234F"
                                value="{{ old('pan', $gaCustomer['pan'] ?? '') }}">
                        </div>

                    </div>

                </div>


            </div>
    </div>

    <div class="d-grid d-md-flex justify-content-md-end mt-2">
        <button type="submit" class="btn btn-primary" id="nextBtn">
            <span id="nextBtnText">
                Next
                <i class="ti ti-arrow-right ms-1"></i>
            </span>

            <span id="nextBtnLoading" class="d-none">
                <span class="spinner-border spinner-border-sm me-1" role="status"></span>
                Processing...
            </span>
        </button>
    </div>
    </form>
    </div>

    <div class="modal fade" id="documentPreviewModal" tabindex="-1" aria-labelledby="documentPreviewTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content document-preview-modal">
                <div class="modal-header">
                    <h5 class="modal-title" id="documentPreviewTitle">Document Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="documentPreviewImage" class="img-fluid document-preview-image" src=""
                        alt="Selected document preview">
                </div>
            </div>
        </div>
    </div>

    <!-- Image preview -->
    <script>
        function setupDocumentUpload(inputId, nameId, previewId, imageId, title) {
            const input = document.getElementById(inputId);
            const name = document.getElementById(nameId);
            const preview = document.getElementById(previewId);
            const image = document.getElementById(imageId);

            input.addEventListener('change', function (event) {
                const file = event.target.files[0];
                if (!file) {
                    name.classList.add('d-none');
                    preview.classList.add('d-none');
                    return;
                }

                name.textContent = file.name;
                name.classList.remove('d-none');

                if (file.type.startsWith('image/')) {
                    const url = URL.createObjectURL(file);
                    image.src = url;
                    preview.classList.remove('d-none');
                    preview.dataset.title = title;
                } else {
                    preview.classList.add('d-none');
                }
            });

            preview.addEventListener('click', function () {
                document.getElementById('documentPreviewTitle').textContent = this.dataset.title;
                document.getElementById('documentPreviewImage').src = image.src;
            });
        }
    </script>
    <script>
        document.getElementById('livePhoto').addEventListener('change', function (event) {

            const file = event.target.files[0];

            if (!file || !file.type.startsWith('image/')) {
                return;
            }

            const url = URL.createObjectURL(file);

            document.getElementById('livePhotoUploadDesktop').innerHTML = `
                                                                <img src="${url}"
                                                                    class="w-100 h-100"
                                                                    style="object-fit: cover;"
                                                                    alt="Customer Photo">
                                                            `;

            document.getElementById('livePhotoUploadMobile').innerHTML = `
                                                                <img src="${url}"
                                                                    class="w-100 h-100"
                                                                    style="object-fit: cover;"
                                                                    alt="Customer Photo">
                                                            `;
        });
    </script>
    <script>
        document.querySelector('form').addEventListener('submit', function () {

            const button = document.getElementById('nextBtn');
            const text = document.getElementById('nextBtnText');
            const loading = document.getElementById('nextBtnLoading');

            button.disabled = true;
            text.classList.add('d-none');
            loading.classList.remove('d-none');
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const aadhaarInput = document.getElementById('aadhaar');
            const customerName = document.getElementById('customer_name');
            const mobile = document.getElementById('mobile');
            const aadhaarStatus = document.getElementById('aadhaarStatus');

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

                let aadhaar = this.value.replace(/\D/g, '');

                this.value = aadhaar;

                // Wait until 12 digits are entered
                if (aadhaar.length !== 12) {

                    aadhaarStatus.classList.add('d-none');
                    aadhaarStatus.textContent = '';

                    return;
                }

                fetch("{{ route('get_customer_by_aadhaar') }}?aadhaar=" + encodeURIComponent(aadhaar))
                    .then(response => response.json())
                    .then(data => {

                        if (data.exists) {

                            // Existing customer
                            customerName.value = data.customer_name;
                            mobile.value = data.mobile;

                            aadhaarStatus.classList.remove(
                                'd-none',
                                'text-danger',
                                'text-muted'
                            );

                            aadhaarStatus.classList.add('text-success');

                            aadhaarStatus.textContent = 'Existing customer found.';

                        } else {

                            // New customer
                            customerName.value = '';
                            mobile.value = '';

                            aadhaarStatus.classList.remove(
                                'd-none',
                                'text-success',
                                'text-danger'
                            );

                            aadhaarStatus.classList.add('text-muted');

                            aadhaarStatus.textContent = 'New customer. Please enter customer details.';
                        }

                    })
                    .catch(error => {

                        console.error('Aadhaar lookup error:', error);

                        aadhaarStatus.classList.remove(
                            'd-none',
                            'text-success',
                            'text-muted'
                        );

                        aadhaarStatus.classList.add('text-danger');

                        aadhaarStatus.textContent = 'Unable to check Aadhaar.';
                    });

            });

        });
    </script>
@endsection