@extends('layouts.auth')

@section('title', 'Login')

@section('content')
    <div class="login-register-pg">

        <div class="pos-end-start-img">
            <img src="{{ url('images/RegionUp.png') }}" alt="">
        </div>

        <div class="form-box-wrapper">
            <div class="logo-main">
                <a href="{{ route('login') }}" class="logo">
                    <img src="{{ url('images/logo.svg') }}" width="194" height="72" alt="">
                </a>
            </div>
            <div class="title-main">
                <h2 class="title h3">{{ __('login') }}</h2>
                <p class="subtitle">{{ __('please_enter_your_email_address_to_receive_a_verification_code') }}</p>
            </div>
            <form id="loginForm" method="POST" action="{{ route('login') }}">
                @csrf

                <div class="form-input">
                    <label for="email" class="d-none">{{ __('email') }}</label>
                    <input id="email" type="email" class="form-control mail @error('email') is-invalid @enderror"
                        name="email" value="{{ old('email') }}" placeholder="{{ __('email') }}" required
                        autocomplete="email" autofocus>
                </div>

                <div class="form-input">
                    <label for="password" class="d-none">{{ __('password') }}</label>
                    <input id="password" type="password" class="form-control pw @error('password') is-invalid @enderror"
                        name="password" placeholder="{{ __('password') }}" required autocomplete="current-password">
                </div>
                <div class="form-validation-info">

                    @if (session('danger'))
                        <span class="invalid" role="alert">
                            {{ session('danger') }}
                        </span>
                    @endif

                    @if (session('success'))
                        <span class="valid">
                            {{ session('success') }}
                        </span>
                    @endif

                    @if ($errors->any())
                        <span class="invalid" role="alert">
                            @foreach ($errors->all() as $error)
                                {{ $error }}
                            @endforeach
                        </span>
                    @endif

                </div>

                <div class="form-btns">
                    <button type="submit" class="btn btn-ec-primary" id="loginSubmitBtn">
                        {{ __('submit') }}

                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"
                            xmlns="http://www.w3.org/2000/svg" id="btn-loader" class="btn-loader d-none">
                            <path opacity="0.3"
                                d="M19 10C19 11.1819 18.7672 12.3522 18.3149 13.4442C17.8626 14.5361 17.1997 15.5282 16.364 16.364C15.5282 17.1997 14.5361 17.8626 13.4441 18.3149C12.3522 18.7672 11.1819 19 10 19C8.8181 19 7.64778 18.7672 6.55585 18.3149C5.46392 17.8626 4.47176 17.1997 3.63604 16.364C2.80031 15.5282 2.13738 14.5361 1.68508 13.4441C1.23279 12.3522 1 11.1819 1 10C1 8.8181 1.23279 7.64778 1.68509 6.55585C2.13738 5.46392 2.80031 4.47176 3.63604 3.63604C4.47177 2.80031 5.46392 2.13737 6.55585 1.68508C7.64778 1.23279 8.81811 0.999999 10 1C11.1819 1 12.3522 1.23279 13.4442 1.68509C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.81811 19 10L19 10Z"
                                stroke="#A4A7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path
                                d="M10 1C11.1819 1 12.3522 1.23279 13.4442 1.68508C14.5361 2.13738 15.5282 2.80031 16.364 3.63604C17.1997 4.47177 17.8626 5.46392 18.3149 6.55585C18.7672 7.64778 19 8.8181 19 10"
                                stroke="#A4A7AE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>

                    </button>

                    @if (Route::has('password.request'))
                        <a class="btn btn-link ec-primary" href="{{ route('password.request') }}">
                            {{ __('Forgot Your Password?') }}
                        </a>
                    @endif
                </div>

            </form>
        </div>

        <div class="pos-end-end-img">
            <img src="{{ url('images/employee-vector1.svg') }}" alt="">
        </div>

    </div>
@endsection

@section('js')
    <script>
        //document.addEventListener('DOMContentLoaded', function() {
        document.addEventListener('turbo:load', function() {

            //var form = document.querySelector('form[action="{{ route('login') }}"]');
            var form = document.getElementById('loginForm');
            if (!form) return; // ⛔ Not login page → exit safely


            var submitBtn = document.getElementById('loginSubmitBtn');
            if (!submitBtn) return;

            var loader = submitBtn.querySelector('#btn-loader');
            if (!loader) return;


            form.addEventListener('submit', function() {

                // Disable button
                //submitBtn.disabled = true;

                loader.classList.remove('d-none');
            });

        });
    </script>
@endsection