@extends('user.layout')
<style>
    .confirm-title {
        font-family: Public Sans;
        font-weight: 700;
        font-style: Bold;
        font-size: 20px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        text-decoration: underline;
        text-decoration-style: solid;
        text-decoration-offset: 0%;
        text-decoration-thickness: 0%;

    }

    .confirm-section-title {
        font-family: Public Sans;
        font-weight: 500;
        font-style: Medium;
        font-size: 15px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
    }

    .confirm-box {
        border: 2px solid #2b8bbd;
        border-radius: 6px;
        padding: 15px;
    }

    .confirm-label {
        font-weight: 600;
        color: #333;
    }

    .confirm-value {
        color: #555;
        margin-left: 4px;
    }

    p.mb-0.fs-5 {
        font-family: Public Sans;
        font-weight: 700;
        font-style: Bold;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        color: #2F2B3DE5;
    }

    strong.d-flex.text-start {
        font-family: Public Sans;
        font-weight: 500;
        font-style: Medium;
        font-size: 18px;
        leading-trim: NONE;
        line-height: 28px;
        letter-spacing: 0px;
        color: #2F2B3DE5;
    }

    .successcard.p-3.rounded.mb-4 {
        box-shadow: 0px 3px 12px 0px #2F2B3D24;
        background: var(--Misc-paper, #FFFFFF);
        box-shadow: 0px 3px 12px 0px #2F2B3D24;
    }

    .modal-dialog-scrollable .modal-content {
        max-height: 100%;
        overflow: auto !important;
    }
</style>
@section('content')

    <div class="row align-items-center justify-content-between mb-3 mt-3 g-3">
        <div class="col-12 col-md-auto text-md-start">
            <h5 class="mb-0">New Registration</h5>
        </div>

    </div>

    <div class="card p-3 p-md-5">

        <form action="{{ route('user.register.store') }}" method="POST" id="registrationForm">
            @csrf

            {{-- ================= PERSONAL DETAILS ================= --}}
            <h5 class="mb-3">Personal Details</h5>

            <div class="row g-3">

                {{-- Referral --}}
                {{-- Referral --}}
                <div class="col-md-4">
                <label class="form-label">Referral ID </label> <span class="text-danger">*</span>

                    <select class="form-select select2 @error('ref_id') is-invalid @enderror" name="ref_id" id="ref_id"
                        style="width:100%" required>
                    </select>

                    @error('ref_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>


                {{-- Referral ID --}}
                <div class="col-md-8">
                    <label class="form-label">Referral Name</label>
                    <input type="text" id="referral_name" class="form-control @error('referral_name') is-invalid @enderror"
                        name="referral_name" value="{{ old('referral_name') }}" placeholder="referral Name" readonly>

                    @error('referral_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Name --}}
                <div class="col-md-6">
                <label class="form-label">Name <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('name') is-invalid @enderror" name="name"
                        value="{{ old('name') }}" required>
                    @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Phone --}}
                <div class="col-md-6">
                <label class="form-label">Phone Number <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('phone_number') is-invalid @enderror" name="phone_number"
                        value="{{ old('phone_number') }}" required>
                    @error('phone_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Email --}}
                <div class="col-md-6">
                <label class="form-label">Email <span class="text-danger">*</span></label>

                    <input type="email" class="form-control @error('email') is-invalid @enderror" name="email"
                        value="{{ old('email') }}" required>
                    @error('email')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Address --}}
                <div class="col-md-6">
                <label class="form-label">Address <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('address') is-invalid @enderror" name="address"
                        value="{{ old('address') }}" required>
                    @error('address')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Pincode --}}
                <div class="col-md-4">
                <label class="form-label">Pincode <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('pincode') is-invalid @enderror" name="pincode"
                        value="{{ old('pincode') }}" required>
                    @error('pincode')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- State --}}
                <div class="col-md-4">
                <label class="form-label">State <span class="text-danger">*</span></label>

                    <select class="form-select @error('state') is-invalid @enderror" name="state" required>
                        <option value="">Select State</option>
                        <option value="Tamil Nadu" {{ old('state') == 'Tamil Nadu' ? 'selected' : '' }}>Tamil Nadu</option>
                        <option value="Kerala" {{ old('state') == 'Kerala' ? 'selected' : '' }}>Kerala</option>
                        <option value="Karnataka" {{ old('state') == 'Karnataka' ? 'selected' : '' }}>Karnataka</option>
                    </select>
                    @error('state')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Country --}}
                <div class="col-md-4">
                <label class="form-label">Country <span class="text-danger">*</span></label>

                    <select class="form-select @error('country') is-invalid @enderror" name="country" required>
                        <option value="India" selected>India</option>
                    </select>
                    @error('country')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

            </div>

            {{-- ================= BANK DETAILS ================= --}}
            <h5 class="mt-4 mb-3">Bank Details</h5>

            <div class="row g-3">

                <div class="col-md-6">
                <label class="form-label">Account Holder Name <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('account_holder') is-invalid @enderror"
                        name="account_holder" placeholder="Account Holder Name" value="{{ old('account_holder') }}"
                        required>
                    @error('account_holder')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                <label class="form-label">Account Number <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('account_number') is-invalid @enderror"
                        name="account_number" placeholder="Account Number" value="{{ old('account_number') }}" required>
                    @error('account_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-4">
                <label class="form-label">Bank Name <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('bank_name') is-invalid @enderror" name="bank_name"
                        placeholder="Bank Name" value="{{ old('bank_name') }}" required>
                    @error('bank_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-4">
                <label class="form-label">Branch Name <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('branch_name') is-invalid @enderror" name="branch_name"
                        placeholder="Branch Name" value="{{ old('branch_name') }}" required>
                    @error('branch_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-4">
                <label class="form-label">IFSC Code <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('ifsc') is-invalid @enderror" name="ifsc"
                        placeholder="IFSC Code" value="{{ old('ifsc') }}" required>
                    @error('ifsc')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

            </div>

            {{-- ================= KYC DETAILS ================= --}}
            <h5 class="mt-4 mb-3">KYC Details</h5>

            <div class="row g-3">

                <div class="col-md-6">
                <label class="form-label">PAN Number <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('pan_number') is-invalid @enderror" name="pan_number"
                        placeholder="PAN Number" value="{{ old('pan_number') }}" required>
                    @error('pan_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <div class="col-md-6">
                <label class="form-label">Aadhar Number <span class="text-danger">*</span></label>

                    <input type="text" class="form-control @error('aadhar_number') is-invalid @enderror"
                        name="aadhar_number" placeholder="Aadhar Number" value="{{ old('aadhar_number') }}" required>
                    @error('aadhar_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

            </div>

            {{-- ================= BUTTONS ================= --}}
            <div class="text-center mt-4">
                <button type="reset" class="btn btn-secondary me-2">Discard</button>
                <button type="submit" class="btn btn-primary">Submit</button>


            </div>

        </form>

    </div>



    <div class="modal fade" id="confirmationModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content p-3 p-md-4">

                <h5 class="confirm-title text-center mb-4">
                    Registration Details Confirmation
                </h5>

                <h6 class="confirm-section-title mb-3">Personal Details</h6>
                <div class="confirm-box mb-3">
                    <div class="row small g-2">
                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Referral Id :</span>
                            <span class="confirm-value text-break" id="c_referral_id"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Referral Name :</span>
                            <span class="confirm-value text-break" id="c_referral_name"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Name :</span>
                            <span class="confirm-value text-break" id="c_name"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Phone :</span>
                            <span class="confirm-value text-break" id="c_phone"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Email :</span>
                            <span class="confirm-value text-break" id="c_email"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Pincode :</span>
                            <span class="confirm-value text-break" id="c_pincode"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Address :</span>
                            <span class="confirm-value text-break" id="c_address"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">State :</span>
                            <span class="confirm-value text-break" id="c_state"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Country :</span>
                            <span class="confirm-value text-break" id="c_country"></span>
                        </div>
                    </div>
                </div>

                <h6 class="confirm-section-title mb-3">Bank Details</h6>
                <div class="confirm-box mb-3">
                    <div class="row small g-2">
                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Account Holder :</span>
                            <span class="confirm-value text-break" id="c_account_holder"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Account No :</span>
                            <span class="confirm-value text-break" id="c_account_number"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">IFSC :</span>
                            <span class="confirm-value text-break" id="c_ifsc"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Bank :</span>
                            <span class="confirm-value text-break" id="c_bank"></span>
                        </div>

                        <div class="col-12 col-md-4">
                            <span class="confirm-label">Branch :</span>
                            <span class="confirm-value text-break" id="c_branch"></span>
                        </div>
                    </div>
                </div>

                <h6 class="confirm-section-title mb-3">KYC Details</h6>
                <div class="confirm-box mb-4">
                    <div class="row small g-2">
                        <div class="col-12 col-md-6">
                            <span class="confirm-label">PAN :</span>
                            <span class="confirm-value text-break" id="c_pan"></span>
                        </div>

                        <div class="col-12 col-md-6 text-start text-md-end">
                            <span class="confirm-label">Aadhar :</span>
                            <span class="confirm-value text-break" id="c_aadhar"></span>
                        </div>
                    </div>
                </div>

                <div class="text-center d-flex flex-column flex-md-row justify-content-center">
                    <button class="btn btn-outline-secondary mb-2 mb-md-0 me-md-3" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary px-4" onclick="showSuccess()">Confirm</button>
                </div>

            </div>
        </div>
    </div>



    <div class="modal fade" id="successModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="max-width:660px;">
            <div class="modal-content border-0 shadow-lg rounded-4 p-3 p-md-4 text-center">

                <div class="bg-info rounded-3 py-3 mb-4">
                    <h2 class="fw-bold text-white mb-0 fs-3 fs-md-2" style="letter-spacing: 2px;">
                        OMIGA <span class="text-danger">VIP</span>
                    </h2>
                </div>

                <h1 class="fw-semibold mb-4 fs-3 fs-md-1">
                    Welcome to Omiga VIP
                </h1>

                <div class="rounded-3 p-3 p-md-4 mb-4 text-start shadow-sm">
                    <h5 class="fw-semibold mb-3">
                        Login Credentials for Omiga VIP
                    </h5>

                    <p class="mb-0 fs-5 fs-md-5">
                        Your login credentials will be sent to your registered email ID shortly.
                        <br class="d-none d-md-block"> Please check your inbox (and spam folder, if necessary).
                    </p>
                </div>

                <button type="button" class="btn btn-outline-primary btn-lg w-100 py-3 rounded-3" data-bs-dismiss="modal">
                    Close
                </button>

            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function () {

            const form = document.getElementById("registrationForm");
            const submitBtn = form.querySelector("button[type='submit']");

            let isSubmitting = false; // prevent multiple submits

            form.addEventListener("submit", function (event) {

                event.preventDefault();

                if (isSubmitting) return; // stop double click

                isSubmitting = true;
                submitBtn.disabled = true;
                submitBtn.innerText = "Validating...";

                clearErrors();

                fetch("{{ route('user.validate') }}", {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    },
                    body: new FormData(form)
                })
                    .then(async response => {

                        if (!response.ok) {

                            let data = {};

                            try {
                                data = await response.json();
                            } catch (e) {
                                data.message = "Something went wrong. Please try again.";
                            }

                            if (response.status === 422) {
                                showErrors(data.errors);
                            }
                            else if (response.status === 403) {
                                showGeneralError(data.message || "Unauthorized access.");
                            }
                            else if (response.status === 403) {
                                showGeneralError(data.message || "Unauthorized access.");
                            }
                            else if (response.status === 500) {
                                showGeneralError(data.message || "Server error occurred.");
                            }
                            else {
                                showGeneralError(data.message || "Server error occurred.");
                            }

                            isSubmitting = false;
                            submitBtn.disabled = false;
                            submitBtn.innerText = "Submit";

                            throw "error";
                        }

                        return response.json();
                    })
                    .then(() => {

                        fillConfirmationModal();

                        new bootstrap.Modal(
                            document.getElementById("confirmationModal")
                        ).show();

                        // Re-enable for confirmation step
                        isSubmitting = false;
                        submitBtn.disabled = false;
                        submitBtn.innerText = "Submit";
                    });

            });

        });

        function showGeneralError(message) {

            let alertDiv = document.createElement("div");
            alertDiv.classList.add("alert", "alert-danger", "mt-3");
            alertDiv.innerText = message;

            const form = document.getElementById("registrationForm");
            form.prepend(alertDiv);
        }

        function showErrors(errors) {

            for (let field in errors) {

                const input = document.querySelector(`[name="${field}"]`);

                if (input) {
                    input.classList.add("is-invalid");

                    let errorDiv = document.createElement("div");
                    errorDiv.classList.add("invalid-feedback");
                    errorDiv.innerText = errors[field][0];

                    input.parentNode.appendChild(errorDiv);
                }
            }
        }

        function clearErrors() {
            document.querySelectorAll(".is-invalid").forEach(el => el.classList.remove("is-invalid"));
            document.querySelectorAll(".invalid-feedback").forEach(el => el.remove());
        }



        function fillConfirmationModal() {

            document.getElementById('c_referral_id').innerText =
                document.querySelector('[name="ref_id"]').value;

            document.getElementById('c_referral_name').innerText =
                document.querySelector('[name="referral_name"]').value;

            document.getElementById('c_name').innerText =
                document.querySelector('[name="name"]').value;

            document.getElementById('c_phone').innerText =
                document.querySelector('[name="phone_number"]').value;

            document.getElementById('c_email').innerText =
                document.querySelector('[name="email"]').value;

            document.getElementById('c_address').innerText =
                document.querySelector('[name="address"]').value;

            document.getElementById('c_pincode').innerText =
                document.querySelector('[name="pincode"]').value;

            document.getElementById('c_state').innerText =
                document.querySelector('[name="state"]').value;

            document.getElementById('c_country').innerText =
                document.querySelector('[name="country"]').value;

            document.getElementById('c_account_holder').innerText =
                document.querySelector('[name="account_holder"]').value;

            document.getElementById('c_account_number').innerText =
                document.querySelector('[name="account_number"]').value;

            document.getElementById('c_bank').innerText =
                document.querySelector('[name="bank_name"]').value;

            document.getElementById('c_branch').innerText =
                document.querySelector('[name="branch_name"]').value;

            document.getElementById('c_ifsc').innerText =
                document.querySelector('[name="ifsc"]').value;

            document.getElementById('c_pan').innerText =
                document.querySelector('[name="pan_number"]').value;

            document.getElementById('c_aadhar').innerText =
                document.querySelector('[name="aadhar_number"]').value;
        }


        /* =========================
           Final Submit After Confirm
        ========================= */

        function showSuccess() {

            const confirmBtn = document.querySelector("#confirmationModal .btn-primary");

            if (confirmBtn.disabled) return;

            confirmBtn.disabled = true;
            confirmBtn.innerText = "Processing...";

            const confirmationModal = bootstrap.Modal.getInstance(
                document.getElementById('confirmationModal')
            );

            confirmationModal.hide();

            const form = document.getElementById("registrationForm");
            const formData = new FormData(form);

            fetch(form.action, {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                    'Accept': 'application/json'
                },
                body: formData
            })
                .then(response => response.json())
                .then(data => {

                    const successModal = new bootstrap.Modal(
                        document.getElementById('successModal')
                    );

                    successModal.show();
                    form.reset();

                    confirmBtn.disabled = false;
                    confirmBtn.innerText = "Confirm";
                });
        }





    </script>
    <script>
        $(document).ready(function () {

            $('#ref_id').select2({
                placeholder: "Search referral",
                minimumInputLength: 1,
                allowClear: true,
                ajax: {
                    url: "{{ route('user.referral.search') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.results
                        };
                    }
                }
            });

            $('#ref_id').on('select2:select', function (e) {
                let data = e.params.data;
                $('#referral_name').val(data.name ?? '');
            });

        });
    </script>


@endsection