{{-- <x-guest-layout>
    <form method="POST" action="{{ route('register') }}">
        @csrf

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

        <!-- Email Address -->
        <div class="mt-4">
            <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 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="new-password" />

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

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

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

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

        <div class="flex items-center justify-end mt-4">
            <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('login') }}">
                {{ __('Already registered?') }}
            </a>

            <x-primary-button class="ms-4">
                {{ __('Register') }}
            </x-primary-button>
        </div>
    </form>
</x-guest-layout> --}}
@extends('index')
@section('title', 'Inscription')

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

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

    <div class="register-page">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-6 col-lg-5">
                    <div class="register-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-person-plus fs-2"></i>
                                    </div>
                                    <h3 class="fw-bold">Créer un compte</h3>
                                    <p class="text-body-secondary">Rejoignez l’espace MetalPro</p>
                                </div>

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

                                    {{-- NAME --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Nom complet</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-transparent">
                                                <i class="bi bi-person"></i>
                                            </span>
                                            <input type="text" name="name"
                                                class="form-control form-control-lg @error('name') is-invalid @enderror"
                                                value="{{ old('name') }}" required autofocus placeholder="Jean Dupont">
                                        </div>
                                        @error('name')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- 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 placeholder="email@exemple.com">
                                        </div>
                                        @error('email')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- PASSWORD --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Mot de passe</label>
                                        <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="new-password" placeholder="••••••••">
                                            <button class="btn btn-outline-secondary" type="button"
                                                onclick="togglePassword('password', 'icon1')">
                                                <i class="bi bi-eye" id="icon1"></i>
                                            </button>
                                        </div>
                                        @error('password')
                                            <div class="invalid-feedback d-block">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    {{-- CONFIRM PASSWORD --}}
                                    <div class="mb-4">
                                        <label class="form-label fw-semibold">Confirmer le mot de passe</label>
                                        <div class="input-group">
                                            <span class="input-group-text bg-transparent">
                                                <i class="bi bi-shield-lock"></i>
                                            </span>
                                            <input type="password" name="password_confirmation" id="password_confirmation"
                                                class="form-control form-control-lg" required autocomplete="new-password"
                                                placeholder="••••••••">
                                            <button class="btn btn-outline-secondary" type="button"
                                                onclick="togglePassword('password_confirmation', 'icon2')">
                                                <i class="bi bi-eye" id="icon2"></i>
                                            </button>
                                        </div>
                                    </div>

                                    {{-- SUBMIT --}}
                                    <button type="submit" class="btn btn-primary btn-lg w-100 mb-3">
                                        <i class="bi bi-person-check me-2"></i>
                                        S’inscrire
                                    </button>

                                    <div class="text-center">
                                        <a href="{{ route('login') }}" class="text-body-secondary text-decoration-none">
                                            Déjà un compte ? Se connecter
                                        </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(inputId, iconId) {
            const input = document.getElementById(inputId);
            const icon = document.getElementById(iconId);

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