@extends('layouts.app')

@section('content')

<div class="auth-page">

    <div class="auth-card register-card">

        {{-- LOGO --}}

        <div class="auth-logo">

            <img
                src="{{ asset('images/logo.png') }}"
                alt="High Court of Madhya Pradesh"
            >

        </div>


        <h3>
            Create Account
        </h3>

        <p class="auth-subtitle">
            User Registration
        </p>


        {{-- VALIDATION ERRORS --}}

        @if($errors->any())

            <div class="alert alert-danger">

                <ul class="mb-0">

                    @foreach($errors->all() as $error)

                        <li>
                            {{ $error }}
                        </li>

                    @endforeach

                </ul>

            </div>

        @endif


        {{-- REGISTRATION FORM --}}

        <form
            method="POST"
            action="{{ route('register.submit') }}"
            enctype="multipart/form-data"
        >

            @csrf


            {{-- =================================================
                 BASIC INFORMATION
            ================================================== --}}

            <div class="form-section-title">

                <i class="bi bi-person-vcard me-2"></i>

                Basic Information

            </div>


            <div class="row">


                {{-- NAME --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Name <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="name"
                        class="form-control"
                        value="{{ old('name') }}"
                        placeholder="Enter full name"
                        required
                    >

                </div>


                {{-- EMAIL --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Email <span class="text-danger">*</span>
                    </label>

                    <input
                        type="email"
                        name="email"
                        class="form-control"
                        value="{{ old('email') }}"
                        placeholder="Enter email address"
                        required
                    >

                </div>


                {{-- MOBILE --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Mobile <span class="text-danger">*</span>
                    </label>

                    <input
                        type="tel"
                        name="mobile"
                        class="form-control"
                        value="{{ old('mobile') }}"
                        placeholder="Enter mobile number"
                        maxlength="15"
                        required
                    >

                </div>


                {{-- DATE OF BIRTH --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Date of Birth
                    </label>

                    <input
                        type="date"
                        name="date_of_birth"
                        class="form-control"
                        value="{{ old('date_of_birth') }}"
                    >

                </div>


                {{-- RELATION TYPE --}}

                <div class="col-md-6 mb-3">

    <label class="form-label">
        Relation Type
    </label>

    <select
        name="relation_type"
        class="form-select"
    >

        <option value="">
            Select Relation Type
        </option>

        <option
            value="Single"
            {{ old('relation_type') == 'Single' ? 'selected' : '' }}
        >
            Single
        </option>

        <option
            value="Married"
            {{ old('relation_type') == 'Married' ? 'selected' : '' }}
        >
            Married
        </option>

    </select>

</div>


                {{-- FATHER NAME --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Father Name
                    </label>

                    <input
                        type="text"
                        name="father_name"
                        class="form-control"
                        value="{{ old('father_name') }}"
                        placeholder="Enter father name"
                    >

                </div>


                {{-- GENDER --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Gender
                    </label>

                    <select
                        name="gender"
                        class="form-select"
                    >

                        <option value="">
                            Select Gender
                        </option>

                        <option
                            value="Male"
                            {{ old('gender') == 'Male' ? 'selected' : '' }}
                        >
                            Male
                        </option>

                        <option
                            value="Female"
                            {{ old('gender') == 'Female' ? 'selected' : '' }}
                        >
                            Female
                        </option>

                        <option
                            value="Other"
                            {{ old('gender') == 'Other' ? 'selected' : '' }}
                        >
                            Other
                        </option>

                    </select>

                </div>


                {{-- EMPLOYEE CODE --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Employee Code <span class="text-danger">*</span>
                    </label>

                    <input
                        type="text"
                        name="employee_code"
                        class="form-control"
                        value="{{ old('employee_code') }}"
                        placeholder="Enter employee code"
                        required
                    >

                </div>

            </div>


            {{-- =================================================
                 PROFILE PICTURE
            ================================================== --}}

            <div class="form-section-title mt-3">

                <i class="bi bi-camera me-2"></i>

                Profile Picture

            </div>


            <div class="mb-3">

                <label class="form-label">
                    Profile Picture
                </label>

                <input
                    type="file"
                    name="profile_picture"
                    class="form-control"
                    accept=".jpg,.jpeg,.png,.webp"
                >

                <div class="form-text">
                    JPG, JPEG, PNG or WEBP. Maximum size 2 MB.
                </div>

            </div>


            {{-- =================================================
                 ADDRESS
            ================================================== --}}

            <div class="form-section-title mt-3">

                <i class="bi bi-geo-alt me-2"></i>

                Address Information

            </div>


            <div class="row">


                {{-- ADDRESS --}}

                <div class="col-12 mb-3">

                    <label class="form-label">
                        Address
                    </label>

                    <textarea
                        name="address"
                        class="form-control"
                        rows="3"
                        placeholder="Enter complete address"
                    >{{ old('address') }}</textarea>

                </div>


                {{-- CITY --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        City
                    </label>

                    <input
                        type="text"
                        name="city"
                        class="form-control"
                        value="{{ old('city') }}"
                        placeholder="Enter city"
                    >

                </div>


                {{-- STATE --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        State
                    </label>

                    <input
                        type="text"
                        name="state"
                        class="form-control"
                        value="{{ old('state') }}"
                        placeholder="Enter state"
                    >

                </div>

            </div>


            {{-- =================================================
                 ACCOUNT SECURITY
            ================================================== --}}

            <div class="form-section-title mt-3">

                <i class="bi bi-shield-lock me-2"></i>

                Account Security

            </div>


            <div class="row">


                {{-- PASSWORD --}}

                <div class="col-md-6 mb-3">

                    <label class="form-label">
                        Password <span class="text-danger">*</span>
                    </label>

                    <input
                        type="password"
                        name="password"
                        class="form-control"
                        placeholder="Minimum 8 characters"
                        required
                    >

                </div>


                {{-- CONFIRM PASSWORD --}}

                <div class="col-md-6 mb-4">

                    <label class="form-label">
                        Confirm Password <span class="text-danger">*</span>
                    </label>

                    <input
                        type="password"
                        name="password_confirmation"
                        class="form-control"
                        placeholder="Confirm password"
                        required
                    >

                </div>

            </div>


            {{-- =================================================
                 SUBMIT
            ================================================== --}}

            <button
                type="submit"
                class="btn auth-btn w-100"
            >

                <i class="bi bi-person-plus me-2"></i>

                Create Account

            </button>


        </form>


        {{-- LOGIN LINK --}}

        <div class="auth-footer">

            Already have an account?

            <a href="{{ route('login') }}">
                Login
            </a>

        </div>

    </div>

</div>


{{-- =========================================================
     REGISTER PAGE CSS
========================================================= --}}

<style>

.auth-page {

    min-height: calc(100vh - 120px);

    display: flex;

    justify-content: center;

    align-items: flex-start;

    background: #f6f7f9;

    padding: 40px 20px;

}


.register-card {

    max-width: 850px !important;

}


.auth-card {

    width: 100%;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 14px;

    padding: 35px;

    box-shadow: 0 8px 30px rgba(0,0,0,.07);

}


.auth-logo {

    text-align: center;

    margin-bottom: 15px;

}


.auth-logo img {

    width: 75px;

    height: 75px;

    object-fit: contain;

}


.auth-card h3 {

    text-align: center;

    font-weight: 700;

    color: #17212b;

    margin-bottom: 5px;

}


.auth-subtitle {

    text-align: center;

    color: #718096;

    margin-bottom: 30px;

}


.form-section-title {

    font-size: 15px;

    font-weight: 700;

    color: #34495e;

    border-bottom: 1px solid #e5e7eb;

    padding-bottom: 10px;

    margin-bottom: 18px;

}


.form-label {

    font-size: 13px;

    font-weight: 600;

    color: #475569;

    margin-bottom: 7px;

}


.form-control,
.form-select {

    min-height: 44px;

    border: 1px solid #dfe3e8;

    border-radius: 7px;

    font-size: 14px;

}


.form-control:focus,
.form-select:focus {

    border-color: #8a7b74;

    box-shadow: 0 0 0 .2rem rgba(80,60,50,.08);

}


textarea.form-control {

    min-height: 90px;

}


.auth-btn {

    background: #3f302b;

    border-color: #3f302b;

    color: #ffffff;

    padding: 11px;

    font-weight: 600;

    border-radius: 7px;

}


.auth-btn:hover {

    background: #2f2420;

    border-color: #2f2420;

    color: #ffffff;

}


.auth-footer {

    text-align: center;

    margin-top: 22px;

    color: #64748b;

    font-size: 14px;

}


.auth-footer a {

    color: #3f302b;

    font-weight: 600;

    text-decoration: none;

}


.form-text {

    font-size: 12px;

    color: #8994a2;

}


@media (max-width: 768px) {

    .auth-page {

        padding: 20px 10px;

    }

    .auth-card {

        padding: 22px;

    }

    .register-card {

        max-width: 100% !important;

    }

}

</style>

@endsection