{{-- <x-guest-layout>
    <!-- Session Status -->
    <x-auth-session-status class="mb-4" :status="session('status')" />

    <form method="POST" action="{{ route('login') }}">
        @csrf

        <!-- Email Address -->
        <div>
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus autocomplete="username" />
            <x-input-error :messages="$errors->get('email')" class="mt-2" />
        </div>

        <!-- Password -->
        <div class="mt-4">
            <x-input-label for="password" :value="__('Password')" />

            <x-text-input id="password" class="block mt-1 w-full"
                            type="password"
                            name="password"
                            required autocomplete="current-password" />

            <x-input-error :messages="$errors->get('password')" class="mt-2" />
        </div>

        <!-- Remember Me -->
        <div class="block mt-4">
            <label for="remember_me" class="inline-flex items-center">
                <input id="remember_me" type="checkbox" class="rounded dark:bg-gray-900 border-gray-300 dark:border-gray-700 text-indigo-600 shadow-sm focus:ring-indigo-500 dark:focus:ring-indigo-600 dark:focus:ring-offset-gray-800" name="remember">
                <span class="ms-2 text-sm text-gray-600 dark:text-gray-400">{{ __('Remember me') }}</span>
            </label>
        </div>

        <div class="flex items-center justify-end mt-4">
            @if (Route::has('password.request'))
                <a class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800" href="{{ route('password.request') }}">
                    {{ __('Forgot your password?') }}
                </a>
            @endif

            <x-primary-button class="ms-3">
                {{ __('Log in') }}
            </x-primary-button>
        </div>
    </form>
</x-guest-layout> --}}
@extends('index')
@section('title', 'Connexion')

@section('content')
    <style>
        .login-page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--bs-primary) 0%, #1e3a5f 100%);
        }

        .login-card {
            max-width: 420px;
            width: 100%;
        }
    </style>

    <div class="login-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-5">
                    <div class="login-card">
                        <div class="card border-0 shadow-lg">
                            <div class="card-body p-5">

                                <div class="text-center mb-4">
                                    <div class="icon-box bg-primary bg-opacity-10 text-primary mx-auto mb-3"
                                        style="width: 70px; height: 70px;">
                                        <i class="bi bi-building fs-2"></i>
                                    </div>
                                    <h3 class="fw-bold">MetalPro Admin</h3>
                                    <p class="text-body-secondary">Connectez-vous à votre espace</p>
                                </div>

                                {{-- STATUS SESSION --}}
                                @if (session('status'))
                                    <div class="alert alert-success">
                                        {{ session('status') }}
                                    </div>
                                @endif

                                <form method="POST" action="{{ route('login') }}">
                                    @csrf

                                    {{-- EMAIL --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Email</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-transparent">
                                                <i class="bi bi-envelope"></i>
                                            </span>
                                            <input type="email" name="email"
                                                class="form-control form-control-lg @error('email') is-invalid @enderror"
                                                value="{{ old('email') }}" required autofocus
                                                placeholder="admin@metalpro.fr">
                                        </div>
                                        @error('email')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- PASSWORD --}}
                                    <div class="mb-4">
                                        <div class="d-flex justify-content-between">
                                            <label class="form-label fw-semibold">Mot de passe</label>

                                            @if (Route::has('password.request'))
                                                <a href="{{ route('password.request') }}"
                                                    class="text-primary text-decoration-none small">
                                                    Mot de passe oublié ?
                                                </a>
                                            @endif
                                        </div>

                                        <div class="input-group">
                                            <span class="input-group-text bg-transparent">
                                                <i class="bi bi-lock"></i>
                                            </span>
                                            <input type="password" name="password" id="password"
                                                class="form-control form-control-lg @error('password') is-invalid @enderror"
                                                required autocomplete="current-password" placeholder="••••••••">
                                            <button class="btn btn-outline-secondary" type="button"
                                                onclick="togglePassword()">
                                                <i class="bi bi-eye" id="toggleIcon"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- REMEMBER --}}
                                    <div class="form-check mb-4">
                                        <input class="form-check-input" type="checkbox" name="remember" id="remember"
                                            {{ old('remember') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="remember">
                                            Se souvenir de moi
                                        </label>
                                    </div>

                                    {{-- SUBMIT --}}
                                    <button type="submit" class="btn btn-primary btn-lg w-100 mb-3">
                                        <i class="bi bi-box-arrow-in-right me-2"></i>
                                        Se connecter
                                    </button>

                                    <div class="text-center">
                                        <a href="{{ url('/') }}" class="text-body-secondary text-decoration-none">
                                            <i class="bi bi-arrow-left me-1"></i>Retour au site
                                        </a>
                                    </div>
                                </form>

                            </div>
                        </div>

                        <p class="text-center text-white-50 mt-4 small">
                            &copy; {{ date('Y') }} MetalPro Construction
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function togglePassword() {
            const password = document.getElementById('password');
            const icon = document.getElementById('toggleIcon');

            if (password.type === 'password') {
                password.type = 'text';
                icon.classList.replace('bi-eye', 'bi-eye-slash');
            } else {
                password.type = 'password';
                icon.classList.replace('bi-eye-slash', 'bi-eye');
            }
        }
    </script>
@endsection