@extends('layouts.app')

@section('content')
    <div class="login-container">
        <div class="login-card">
            <div class="text-center mb-4">
                <img src="{{ asset('images/logo.png') }}" alt="Admin Logo" class="login-logo">
                <h3 class="login-title mt-3">Admin Registration</h3>
            </div>

            <div class="card-body">
                @if (session('success'))
                    <div class="alert alert-primary">{{ session('success') }}</div>
                @endif
                @if ($errors->any())
                    <div id="error" class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form method="POST" action="{{ route('admin.register') }}" id="registerForm" class="needs-validation"
                    novalidate enctype="multipart/form-data">
                    @csrf

                    <div class="row">
                        <!-- First Name Field -->
                        <div class="col mb-4 position-relative">
                            <label for="first_name" class="form-label">First Name</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <input id="first_name" type="text"
                                    class="form-control @error('first_name') is-invalid @enderror" name="first_name"
                                    value="{{ old('first_name') }}" required autofocus>
                            </div>
                            @error('first_name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Last Name Field -->
                        <div class="col mb-4 position-relative">
                            <label for="last_name" class="form-label">Last Name</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <input id="last_name" type="text"
                                    class="form-control @error('last_name') is-invalid @enderror" name="last_name"
                                    value="{{ old('last_name') }}" required>
                            </div>
                            @error('last_name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Email Field -->
                    <div class="mb-4 position-relative">
                        <label for="email" class="form-label">Email</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                            <input id="email" type="email" class="form-control @error('email') is-invalid @enderror"
                                name="email" value="{{ old('email') }}" required autocomplete="email">
                        </div>
                        @error('email')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Mobile Field -->
                    <div class="mb-4 position-relative">
                        <label for="mobile" class="form-label">Mobile</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fas fa-phone"></i></span>
                            <input id="mobile" type="text" class="form-control @error('mobile') is-invalid @enderror"
                                name="mobile" value="{{ old('mobile') }}" required>
                        </div>
                        @error('mobile')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Profile Photo Field -->
                    <div class="mb-4 position-relative">
                        <label for="profile_photo" class="form-label">Profile Photo (Optional)</label>
                        <div class="input-group">
                            <input id="profile_photo" type="file"
                                class="form-control @error('profile_photo') is-invalid @enderror" name="profile_photo"
                                accept="image/*">
                        </div>
                        @error('profile_photo')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row">
                        <!-- Password Field -->
                        <div class="col mb-4 position-relative">
                            <label for="password" class="form-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                <input id="password" type="password"
                                    class="form-control @error('password') is-invalid @enderror" name="password" required
                                    autocomplete="new-password">
                            </div>
                            @error('password')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="col mb-4 position-relative">
                            <label for="password_confirmation" class="form-label">Confirm Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                <input id="password_confirmation" type="password" class="form-control"
                                    name="password_confirmation" required autocomplete="new-password">
                            </div>
                        </div>
                    </div>

                    <!-- Submit Button and Login Link -->
                    <div class="d-flex justify-content-between align-items-center">
                        <button type="submit" class="btn btn-primary btn-login" id="registerBtn">
                            Register
                        </button>
                        <a class="btn btn-link forgot-password" href="{{ route('admin.login.form') }}">
                            Already have an account? Login
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <style>
        /* Background for the entire page */
        .login-container {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* Card styling */
        .login-card {
            background: #ffffff;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            max-width: 750px;
            width: 100%;
            padding: 30px;
            animation: fadeIn 0.5s ease-in-out;
        }

        /* Fade-in animation */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Logo styling */
        .login-logo {
            max-width: 150px;
        }

        /* Title styling */
        .login-title {
            font-size: 24px;
            font-weight: 600;
            color: #333;
        }

        /* Form labels */
        .form-label {
            font-weight: 500;
            color: #555;
        }

        /* Input group styling */
        .input-group-text {
            background: #f1f3f5;
            border: 1px solid #ced4da;
            border-right: none;
            color: #6c757d;
        }

        /* Input fields */
        .form-control {
            border: 1px solid #ced4da;
            border-radius: 0.375rem;
            padding: 10px;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
        }

        /* Invalid feedback */
        .invalid-feedback {
            font-size: 14px;
            color: #dc3545;
        }

        /* Checkbox styling */
        .form-check-label {
            color: #555;
        }

        /* Register button */
        .btn-login {
            border: none;
            padding: 10px 20px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

 

        /* Login link */
        .forgot-password {
            color: #007bff;
            font-weight: 500;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .forgot-password:hover {
            color: #0056b3;
            text-decoration: underline;
        }

        /* Error message styling */
        #error .alert {
            margin-bottom: 15px;
        }
    </style>
@endsection