@extends('layouts.front-end.app')
@section('title', 'Login')
@push('css_or_js')
@endpush
@section('content')
    <div class="cs_height_40 cs_height_lg_30"></div>
    <div class="container">
        <div class="cs_breadcamp_wrap cs_style_1 cs_accent_light_bg cs_bg_filed cs_radius_8"
            data-src="{{ asset('assets/front-end') }}/images/Login_banner.jpg">
            <div>
                <h1 class="cs_breadcamp_title cs_fs_54 cs_semibold">Member Login</h1>
                <p class="mb-0 cs_fs_18">Access your Glowify account to continue your beauty journey.</p>
            </div>
        </div>
    </div>
    <!-- End Breadcamp -->
    <div class="cs_height_80 cs_height_lg_80"></div>
    <div class="container">
        <div class="cs_login_card cs_gray_bg_4 cs_radius_10">
            <div class="row align-items-center cs_gap_y_40">
                <div class="col-xxl-5 col-xl-6 col-lg-7">
                    <img src="{{ asset('assets/front-end') }}/images/Login_img.jpg" alt="">
                </div>
                <div class="col-lg-5 offset-xl-1">
                    <h2 class="cs_fs_36 cs_medium">WELCOME BACK!</h2>
                    <p class="cs_light mb-0">Please enter your details</p>
                    <div class="cs_height_30 cs_height_lg_20"></div>
                    <form action="{{ route('customer.auth.login.store') }}" method="POST">
                        @csrf
                        <label class="cs_semibold">Phone or Email Address<span>*</span></label>
                        <input type="text" class="cs_form_field" name="email_or_phone"
                            value="{{ old('email_or_phone') }}">
                        @error('email_or_phone')
                            <span class="text-danger">{{ $message }}</span>
                        @enderror

                        <div class="cs_height_20 cs_height_lg_20"></div>
                        <label class="cs_semibold">Password<span>*</span></label>
                        <div class="cs_password">
                            <input type="password" class="cs_password_input cs_form_field" name="password">
                            @error('password')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            <button class="cs_eye_btn" type="button">
                                <svg width="29" height="16" viewBox="0 0 29 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M14.5 0C8.95924 0 3.93459 2.80577 0.22691 7.36308C-0.0756367 7.73644 -0.0756367 8.25807 0.22691 8.63144C3.93459 13.1942 8.95924 16 14.5 16C20.0408 16 25.0654 13.1942 28.7731 8.63692C29.0756 8.26355 29.0756 7.74194 28.7731 7.36857C25.0654 2.80577 20.0408 0 14.5 0ZM14.8975 13.6335C11.2194 13.8476 8.18211 11.0419 8.41347 7.63212C8.6033 4.82086 11.0652 2.54221 14.1025 2.36651C17.7806 2.15237 20.8179 4.95813 20.5865 8.36788C20.3908 11.1736 17.9289 13.4523 14.8975 13.6335ZM14.7136 11.0309C12.7322 11.1462 11.0949 9.63624 11.2254 7.80233C11.3262 6.28689 12.6551 5.06246 14.2924 4.96362C16.2738 4.84832 17.9111 6.35827 17.7806 8.19218C17.6738 9.71311 16.3449 10.9375 14.7136 11.0309Z"
                                        fill="currentColor" />
                                </svg>
                            </button>
                        </div>
                        <div class="cs_height_35 cs_height_lg_35"></div>
                        <div class="cs_login_card_row_1 cs_light">
                            <div class="cs_custom_checkbox cs_style_1">
                                <input type="checkbox" name="remember" value="1">
                                <span>Remember Me</span>
                            </div>
                            <a href="#" class="">Forgot Password?</a>
                        </div>
                        <div class="cs_height_35 cs_height_lg_35"></div>
                        <button class="cs_btn cs_style_1 cs_fs_18 cs_medium w-100" type="submit">LOG IN</button>
                    </form>
                    <div class="cs_height_30 cs_height_lg_30"></div>
                    <p class="mb-0 cs_light cs_primary_color">Don't have an account? <a
                            href="{{ route('customer.auth.register') }}" class="cs_accent_color cs_semibold">Signup Now</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // Get the CSRF token from the meta tag in your layout (usually added by default in Laravel)
        let csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

        document.getElementById('email_or_phone').addEventListener('input', function() {
            let emailOrPhone = this.value;

            axios.post('{{ route('customer.auth.login.validate') }}', {
                    email_or_phone: emailOrPhone
                }, {
                    headers: {
                        'X-CSRF-TOKEN': csrfToken // Add the CSRF token to the headers
                    }
                })
                .then(function(response) {
                    if (response.data.success) {
                        document.getElementById('email_or_phone_error').textContent = '';
                    } else {
                        document.getElementById('email_or_phone_error').textContent = response.data.message;
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        });

        document.getElementById('password').addEventListener('input', function() {
            let password = this.value;

            axios.post('{{ route('customer.auth.login.validate') }}', {
                    password: password
                }, {
                    headers: {
                        'X-CSRF-TOKEN': csrfToken // Add the CSRF token to the headers
                    }
                })
                .then(function(response) {
                    if (response.data.success) {
                        document.getElementById('password_error').textContent = '';
                    } else {
                        document.getElementById('password_error').textContent = response.data.message;
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        });
    </script>
@endpush