@extends('layouts.frontend.master_auth')
@section('title', 'Forget Password')

@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/css/intlTelInput.css">
    <style>
        input::placeholder {
            color: transparent;
        }

        .iti { width: 100%; display: block; }
        .iti__input {
            width: 100% !important;
            display: block !important;
        }
        .iti__selected-dial-code {
            font-size: 0.875rem !important;
        }

        label {
            line-height: 1;
        }

        input:not(:placeholder-shown) + label {
            top: -8px;
            left: 0.2rem;
            font-size: 1rem;
            transform: translateY(-4px) scale(0.75);
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            color: black;
        }

        .custom-hover:hover {
            background-color: black !important;
        }

        .password-input-wrapper {
            position: relative;
            /*margin-bottom: .5rem;*/
        }

        .password-toggle {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #718096;
        }

        .password-toggle:hover {
            color: #4A5568;
        }
    </style>
@endpush

@section('content')
    <div class="flex flex-col items-center justify-center min-h-screen bg-white">
        <div class="mb-4">
            <a href="{{url('/')}}">
            <img src="{{ asset('frontend/logo/bau-logo.png') }}" alt="Logo" class="w-12 h-12">
            </a>
        </div>

{{--        <h2 class="text-2xl font-semibold text-gray-900 mb-8">Forget Password</h2>--}}

        <div class="w-full max-w-md p-8 bg-white rounded-xl shadow-sm border border-gray-100">
            <h3 class="text-[#009245] text-2xl font-semibold mb-2">Forget Password</h3>

            <p class="text-gray-600 text-sm mb-8">
               Enter your registered phone number
            </p>

            <form method="POST" action="{{ route('forget.password') }}" id="forgetPasswordForm">
                @csrf

                <div class="password-input-wrapper">
                    <input
                        type="tel"
                        class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
                        id="mobile"
                        placeholder="Enter your mobile number"
                        value=""
                        name="phone"
                        autocomplete="off"
                    />
{{--                    <input type="text"--}}
{{--                           name="phone"--}}
{{--                           id="phone"--}}
{{--                           class="block w-full px-4 py-2 text-base bg-white border border-gray-300 rounded-lg appearance-none focus:outline-none focus:ring-0 focus:border-green-400 peer"--}}
{{--                           placeholder=" "/>--}}
                    <label for="phone"
                           class="absolute text-sm text-gray-500 duration-300 transform scale-75 -translate-y-4 bg-white px-2 peer-placeholder-shown:px-0 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:-translate-y-4 peer-focus:scale-75 peer-focus:px-2 peer-focus:text-gray-900 left-1 top-2 origin-[0] cursor-text">
                        Phone
                    </label>
                </div>

                <button type="submit" class="mt-3 w-full py-3 text-white bg-green-600 rounded-lg custom-hover">
                    Confirm
                </button>
            </form>
        </div>
    </div>
@endsection

@push('js')
    <x-generic-validation-error-toastr/>
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/intlTelInput.min.js"></script>
    <script>

        $(document).ready(function () {

            const mobileInput = document.querySelector("#mobile");
            const iti = window.intlTelInput(mobileInput, {
                initialCountry: "bd",
                preferredCountries: ["bd", "us", "gb"],
                separateDialCode: true,
                utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/utils.js"
            });

            $("#forgetPasswordForm").validate({
                rules: {
                    phone: {
                        required: true,
                        // minlength: 11,
                        // maxlength: 11,
                    },
                },
                messages: {
                    phone: {
                        required: "Phone is required",
                        // bdPhone: "Please enter a valid Bangladeshi phone number"
                        // minlength: "Phone must be at least 11 characters",
                        // maxlength: "Phone cannot exceed 11 characters"
                    },
                },
                errorElement: 'p',
                errorClass: 'mt-1 text-sm text-red-500',
                errorPlacement: function (error, element) {
                    error.insertAfter(element.parent());
                },
                highlight: function (element) {
                    $(element)
                        .addClass("border-red-500")
                        .removeClass("border-gray-300")
                        .siblings('label')
                        .addClass("text-red-500")
                        .removeClass("text-gray-500");
                },
                unhighlight: function (element) {
                    $(element)
                        .removeClass("border-red-500")
                        .addClass("border-gray-300")
                        .siblings('label')
                        .removeClass("text-red-500")
                        .addClass("text-gray-500");
                },
                submitHandler: function (form) {
                    const fullNumber = iti.getNumber();
                    let mobile = $('#mobile').val(fullNumber);

                    const submitBtn = $("button[type='submit']");
                    submitBtn.prop("disabled", true).html('<i class="fas fa-spinner fa-spin"></i> Processing...');

                    $.ajax({
                        url: $(form).attr('action'),
                        type: 'POST',
                        data: $(form).serialize(),
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            if (response.success) {
                                toastr.success(response.message);
                                if (response.redirectTo) {
                                    window.location.href = response.redirectTo;
                                }
                            } else {
                                toastr.error(response.message || 'User not found with this number');
                                submitBtn.prop("disabled", false).html('Confirm');
                            }
                        },
                        error: function(xhr) {
                            const response = xhr.responseJSON;

                            if (response.errors) {
                                Object.keys(response.errors).forEach(function(key) {
                                    toastr.error(response.errors[key][0]);
                                });
                            } else if (response.message) {
                                toastr.error(response.message);
                            } else {
                                toastr.error('Failed to set password. Please try again.');
                            }

                            submitBtn.prop("disabled", false).html('Confirm');
                        },
                        complete: function() {
                            submitBtn.prop("disabled", false).html('Confirm');
                        }
                    });

                    return false;
                }
            });
        });
    </script>
@endpush