@extends('layouts.master-without-nav')

@section('title')
    @lang('translation.reset-password')@endsection

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/css/intlTelInput.css">
    <style>
        .iti {
            width: 100% !important;
        }
    </style>
@endsection

@php
      $bg_image = \App\Models\GeneralSettings::where('key', \App\Models\GeneralSettings::LOGINIMAGE)->first() != null ? asset("").\App\Models\GeneralSettings::where('key', \App\Models\GeneralSettings::LOGINIMAGE)->first()->value : asset('assets/images/auth-one-bg.jpg');

@endphp

@section('content')
    <!-- Auth Page Wrapper -->
    <div class="auth-page-wrapper auth-bg-cover py-5 d-flex justify-content-center align-items-center min-vh-100">
        <div class="bg-overlay"></div>

        <!-- Auth Page Content -->
        <div class="auth-page-content overflow-hidden pt-lg-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card overflow-hidden">
                            <div class="row g-0">
                                <!-- Left Image Section -->
                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 auth-one-bg h-100">
                                        <img src="{{ $bg_image }}" alt="Login Background" class="img-fluid">
                                    </div>
                                </div>

                                <!-- Right Form Section -->
                                <div class="col-lg-6">
                                    <div class="p-lg-5 p-4 bg-white">
                                        <div>
                                            <h5 class="text-success">Reset Password</h5>
                                          <p class="text-muted">Reset your password with GC7 Cafe using your phone number.</p>
                                        </div>

                                        <!-- Success & Error Messages -->
                                        @if (session('success'))
                                            <div class="alert alert-success">
                                                {{ session('success') }}
                                            </div>
                                        @endif

                                        @if (session('error'))
                                            <div class="alert alert-danger">
                                                {{ session('error') }}
                                            </div>
                                        @endif

                                        <!-- Login Form -->
                                        <div class="mt-4">
                                            <form action="{{ route('guest.password.send.otp') }}" method="POST">
                                                @csrf

                                                <!-- Phone Number Input -->
                                                <div class="mb-3">
                                                    <label for="phone_no" class="form-label">Phone Number</label>
                                                    <input required type="tel" class="form-control @error('phone_no') is-invalid @enderror" id="phone_no" name="phone_no" placeholder="Enter phone number">
                                                    <div id="phone-number-error" class="text-danger mt-2" style="display: none;"></div>

                                                    @error('phone_no')
                                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                                    @enderror
                                                </div>


                                                <!-- Submit Button -->
                                                <div class="mt-4">
                                                    <button class="btn btn-success w-100" type="submit">Send Verification Code<</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="mt-5 text-center">
                                                                                    <p class="mb-0">Remember it?
                                                                                           <a href="{{ route('guest.login') }}" class="fw-semibold text-success text-decoration-underline">Guest Login</a>
                                                                                      </p>
                                                                                   </div>


                                        </div>
                                    </div>
                                </div>
                                <!-- End Col -->
                            </div>
                            <!-- End Row -->
                        </div>
                        <!-- End Card -->
                    </div>
                    <!-- End Col -->
                </div>
                <!-- End Row -->
            </div>
            <!-- End Container -->
    </div>
        <!-- End Auth Page Content -->
    <!-- End Auth Page Wrapper -->

    @section('script')
        <!-- Intl-Tel-Input Script -->
        <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/js/intlTelInput.min.js"></script>
        <script>
            const phoneInput = document.querySelector("#phone_no");
            const iti = intlTelInput(phoneInput, {
                initialCountry: "us",
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@24.7.0/build/js/utils.js",
            });

            phoneInput.addEventListener("blur", function () {
                const isValid = iti.isValidNumber();
                const errorDiv = document.getElementById("phone-number-error");

                if (!isValid) {
                    phoneInput.classList.add("is-invalid");
                    errorDiv.style.display = "block";
                    errorDiv.innerText = "Please enter a valid phone number.";
                } else {
                    phoneInput.classList.remove("is-invalid");
                    errorDiv.style.display = "none";
                }
            });

            document.querySelector("form").addEventListener("submit", function (event) {
                if (iti.isValidNumber()) {
                    const fullPhoneNumber = iti.getNumber();
                    phoneInput.value = fullPhoneNumber;
                } else {
                    event.preventDefault();
                    const errorDiv = document.getElementById("phone-number-error");
                    phoneInput.classList.add("is-invalid");
                    errorDiv.style.display = "block";
                    errorDiv.innerText = "Please enter a valid phone number.";
                }
            });
        </script>
    @endsection
@endsection