@php
    $activeTab = request()->query('tab'); // default email tab

@endphp
@extends('layouts.frontend.master_auth')
@section('title', 'Login')

@push('css')
    <link rel="stylesheet" href="{{ asset('frontend/css/login.css') }}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/css/intlTelInput.css">
    <style>
        .iti {
            width: 100%;
            display: block;
        }

        .iti__input {
            width: 100% !important;
            display: block !important;
        }

        .iti__selected-dial-code {
            font-size: 0.875rem !important;
        }
        .error{
            color: #9a2f2f;
        }

        label#mobile-error {
            position: absolute;
        }
    </style>
@endpush

@section('content')
    {{-- new design --}}
    <div id="root">
        <div
            class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-background to-secondary/5 p-4">
            <div>
                <a href="{{url('/')}}">
                    <img src="{{asset('frontend/logo/bau-logo.png')}}" alt="Logo" class="w-12 h-12" style="margin: auto">
                </a>
                <div class="rounded-lg border bg-card text-card-foreground shadow-sm w-full mt-1 max-w-md">
                    <div class="flex flex-col p-6 space-y-1">
                        <h3 class="tracking-tight text-2xl font-bold text-center">BAU 2001-2002 Alumni Association</h3>
                        <p class="text-sm text-muted-foreground text-center">Sign in to your BAU Alumni account</p>
                    </div>
                    <div class="p-6 pt-0">
                        <div dir="ltr" data-orientation="horizontal" class="w-full">
                            <div role="tablist" aria-orientation="horizontal"
                                 class="h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground grid w-full grid-cols-2 mb-6"
                                 tabindex="0" data-orientation="horizontal"
                                 style="outline: none"
                            >

                                <button
                                    type="button"
                                    role="tab"
                                    aria-controls="radix-:r0:-content-mobile"
                                    aria-selected="false"
                                    data-state="active"
                                    id="trigger-mobile"
                                    class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                                    tabindex="-1"
                                    data-orientation="horizontal"
                                    data-radix-collection-item=""
                                >
                                    Mobile Number
                                </button>

                                <button
                                    type="button"
                                    role="tab"
                                    aria-controls="radix-:r0:-content-email"
                                    aria-selected="true"
                                    data-state="inactive"
                                    id="trigger-email"
                                    class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
                                    tabindex="0"
                                    data-orientation="horizontal"
                                    data-radix-collection-item=""
                                >
                                    Email
                                </button>

                            </div>

                            <form method="POST" action="{{ route('login') }}" novalidate autocomplete="off">
                                @csrf
                                {{-- email content --}}
                                <div
                                    data-state="active"
                                    data-orientation="horizontal"
                                    role="tabpanel"
                                    aria-labelledby="radix-:r0:-trigger-email"
                                    id="content-email"
                                    tabindex="0"
                                    class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                                    style=""
                                >
                                    <div class="space-y-4">
                                        <div class="space-y-2" id="email-content">
                                            <label
                                                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                                for="email">
                                                Email Address
                                            </label>
                                            <input
                                                type="email"
                                                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="email"
                                                placeholder="your.email@example.com"
                                                value=""
                                                name="email"
                                                autocomplete="off"
                                            />
                                        </div>

                                        <div class="space-y-2" id="mobile-content">
                                            <label
                                                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                                for="mobile">
                                                Mobile Number
                                            </label>
                                            <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"
                                            />
                                        </div>


                                        <div class="space-y-2">
                                            <label
                                                class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
                                                for="email-password">
                                                Password
                                            </label>
                                            <div class="relative">
                                                <input
                                                    type="password"
                                                    class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 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="email-password"
                                                    placeholder="Enter your password"
                                                    value=""
                                                    name="password"
                                                />
                                                <button
                                                    type="button"
                                                    class="absolute inset-y-0 right-2 flex items-center pr-3 text-gray-500 hover:text-gray-700 focus:outline-none"
                                                    id="toggle-password"
                                                >
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                         class="w-5 h-5" id="eye-icon">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/>
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                                    </svg>
                                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none"
                                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                                                         class="w-5 h-5 hidden" id="eye-slash-icon">
                                                        <path stroke-linecap="round" stroke-linejoin="round"
                                                              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                        <input type="hidden" name="active_tab" id="active_tab" value="{{ $activeTab }}">


                                        <button
                                            class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2 w-full"
                                            type="submit"
                                        >
                                        <span id="email-button-text">
                                            Sign In with Email
                                        </span>
                                            <span id="mobile-button-text">
                                            Sign In with Mobile Number
                                        </span>
                                        </button>
                                    </div>
                                </div>
                                {{-- email content end --}}
                            </form>


                        </div>
                        <div class="mt-6 text-center space-y-2">
                            <a href="{{route('forget.password.form')}}"
                               class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-primary underline-offset-4 hover:underline h-10 px-4 py-2 text-sm"
                            >
                                Forgot password?
                            </a>
                            <div class="text-sm text-muted-foreground">
                                Don't have an account?
                                <a href="{{route('register.form')}}"
                                   class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 text-primary underline-offset-4 hover:underline p-0 h-auto"
                                >
                                    Register here
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- new design end --}}

@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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

    <script>

       function activateTab(tab) {

           if(tab === 'email') {

               $('#email-content').show();
               $('#mobile-content').hide();
               $('#email-button-text').show();
               $('#mobile-button-text').hide();
               $('#trigger-email').attr('aria-selected', 'true').attr('data-state', 'active');
               $('#trigger-mobile').attr('aria-selected', 'false').attr('data-state', 'inactive');
               $('#email').prop('disabled', false).attr('type', 'email');
           } else { console.log(111)
               $('#email-content').hide();
               $('#mobile-content').show();
               $('#email-button-text').hide();
               $('#mobile-button-text').show();
               $('#trigger-email').attr('aria-selected', 'false').attr('data-state', 'inactive');
               $('#trigger-mobile').attr('aria-selected', 'true').attr('data-state', 'active');
               $('#email').prop('disabled', true).attr('type', 'text');
           }
       }

       // Click handlers
       $('#trigger-email').click(function(){ activateTab('email'); });
       $('#trigger-mobile').click(function(){ activateTab('mobile'); });

       // On page load, activate the correct tab based on query param or old input
       $(document).ready(function() {
           var activeTab = {!! json_encode($activeTab) !!};
           if(activeTab){
               activateTab(activeTab); // DO NOT use .click()
           }else {
               $('#email-button-text').hide();
               $('#mobile-button-text').show();
               $('#email-content').hide();
               $('#mobile-content').show();
               $('#email').prop('disabled', true);
           }

       });

        $(document).ready(function () {
            // Initialize intl-tel-input
            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"
            });

            // Form validation
            $('form').validate({
                ignore: ":hidden, [disabled]",
                rules: {
                    email: {
                        email: true,
                        required: function (element) {
                            return $('#mobile').val().trim() === '';
                        }
                    },
                    phone: {
                        required: function (element) {
                            return $('#email').val().trim() === '';
                        }
                    },
                    password: {
                        required: true
                    }
                },
                messages: {
                    email: {
                        required: "The email field is required when phone is not provided.",
                        email: "Please enter a valid email address."
                    },
                    phone: {
                        required: "The phone field is required when email is not provided."
                    },
                    password: {
                        required: "The password field is required."
                    }
                },
                errorPlacement: function (error, element) {
                    error.addClass('text-danger text-sm mt-1 d-block');
                    error.insertAfter(element);
                },
                highlight: function (element) {
                    $(element).addClass('border-danger');
                },
                unhighlight: function (element) {
                    $(element).removeClass('border-danger');
                },
                submitHandler: function (form) {
                    const fullNumber = iti.getNumber();
                    $('#mobile').val(fullNumber);
                    form.submit();
                }
            });



            // Update mobile field value with full international number on form submit
            // $('form').on('submit', function () {
            //     const fullNumber = iti.getNumber();
            //     $('#mobile').val(fullNumber);
            // });



            $('#trigger-mobile').click(function () {
                $('#active_tab').val('mobile');

                $('#email-content').hide();
                $('#mobile-content').show();

                $('#email-button-text').hide();
                $('#mobile-button-text').show();

                $('#trigger-email').attr('aria-selected', 'false').attr('data-state', 'inactive');
                $(this).attr('aria-selected', 'true').attr('data-state', 'active');

                $('#email').prop('disabled', true).attr('type', 'text').val('');

                // $('#email').val('');

            })

            $('#trigger-email').click(function () {
                $('#active_tab').val('email');

                $('#email-content').show();
                $('#mobile-content').hide();

                $('#email-button-text').show();
                $('#mobile-button-text').hide();

                $('#trigger-email').attr('aria-selected', 'true').attr('data-state', 'active');
                $('#trigger-mobile').attr('aria-selected', 'false').attr('data-state', 'inactive');

                $('#email').prop('disabled', false).attr('type', 'email').val('');

                $('#mobile').val('');
            })

            // Password toggle functionality
            $('#toggle-password').click(function () {
                const passwordInput = $('#email-password');
                const eyeIcon = $('#eye-icon');
                const eyeSlashIcon = $('#eye-slash-icon');

                if (passwordInput.attr('type') === 'password') {
                    passwordInput.attr('type', 'text');
                    eyeIcon.addClass('hidden');
                    eyeSlashIcon.removeClass('hidden');
                } else {
                    passwordInput.attr('type', 'password');
                    eyeIcon.removeClass('hidden');
                    eyeSlashIcon.addClass('hidden');
                }
            });

        });
    </script>
@endpush