@php
use App\Models\ComplaintAgainst;

$departments =
ComplaintAgainst::where('status',1)
->orderBy('name')
->get();
@endphp

@extends('layouts.app')

@section('content')

<style>
    :root {
        --kp-maroon: #7a1f2b;
        --kp-maroon-dark: #5c1620;
        --kp-green: #0b5e3c;
        --kp-green-dark: #073f28;
        --ink: #22282b;
        --muted: #6b7580;
    }

    .register-page * { font-family: 'Inter', sans-serif; }

    .register-page .page-bg {
        background:
            linear-gradient(160deg, rgba(6, 46, 32, .85), rgba(90, 20, 28, .8)),
            url('{{ asset('logo-complaint.jpeg') }}') no-repeat center center;
        background-size: cover;
        border-radius: 1.25rem;
        padding: 3rem 1rem;
    }

    /* ---------- Card ---------- */
    .register-page .reg-card {
        background: rgba(255, 255, 255, 0.97);
        border: none;
        border-radius: 1.1rem;
        box-shadow: 0 25px 60px -15px rgba(0, 0, 0, .5);
        overflow: hidden;
        position: relative;
    }

    .register-page .reg-card::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 6px;
        background: linear-gradient(90deg, var(--kp-green) 0%, var(--kp-green) 50%, var(--kp-maroon) 50%, var(--kp-maroon) 100%);
    }

    .register-page .card-inner {
        padding: 2.5rem 2.5rem 2.25rem;
    }

    /* ---------- Heading ---------- */
    .register-page .org-heading {
        text-align: center;
        margin-bottom: 1.75rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid #e7e2df;
    }

    .register-page .org-heading .dept {
        font-size: .92rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.1px;
        color: var(--kp-maroon);
        line-height: 1.5;
        margin-bottom: 0;
    }

    .register-page .org-heading .dept small {
        display: block;
        font-size: .76rem;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: .6px;
        text-transform: none;
        margin-top: .15rem;
    }

    .register-page .reg-badge {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        margin-top: 1rem;
        padding: .35rem 1rem;
        border-radius: 50px;
        background: var(--kp-maroon);
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    /* ---------- Form ---------- */
    .register-page .form-label {
        font-weight: 600;
        font-size: .85rem;
        color: var(--ink);
        margin-bottom: .4rem;
    }

    .register-page .input-icon-group {
        position: relative;
    }

    .register-page .input-icon-group > .bi {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        color: var(--muted);
        font-size: 1rem;
        pointer-events: none;
        z-index: 2;
    }

    .register-page .input-icon-group .form-control,
    .register-page .input-icon-group .form-select {
        padding-left: 2.6rem;
    }

    .register-page .input-icon-group .toggle-password {
        position: absolute;
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: var(--muted);
        font-size: 1rem;
        cursor: pointer;
        z-index: 2;
    }

    .register-page .form-control,
    .register-page .form-select {
        border-radius: .6rem;
        border: 1.5px solid #e2e5e9;
        padding: .65rem .9rem;
        font-size: .93rem;
        background-color: #fbfbfc;
    }

    .register-page .form-control:focus,
    .register-page .form-select:focus {
        border-color: var(--kp-green);
        box-shadow: 0 0 0 .18rem rgba(11, 94, 60, .15);
        background-color: #fff;
    }

    .register-page .form-control.is-invalid {
        border-color: #d32f2f;
    }

    #departmentBox {
        border-left: 3px solid var(--kp-green);
        background: #f4faf7;
        border-radius: .6rem;
        padding: 1rem 1rem .25rem;
        margin-top: -.25rem;
    }

    .register-page .admin-check {
        border: 1.5px dashed #e2c4c4;
        background: #fdf6f6;
        border-radius: .6rem;
        padding: .75rem 1rem;
    }

    .register-page .form-check-input:checked {
        background-color: var(--kp-maroon);
        border-color: var(--kp-maroon);
    }

    .register-page .form-check-label {
        font-size: .87rem;
        color: var(--ink);
    }

    /* ---------- Button ---------- */
    .register-page .btn-register {
        background: linear-gradient(135deg, var(--kp-green) 0%, var(--kp-green-dark) 100%);
        border: none;
        color: #fff;
        font-weight: 700;
        font-size: .95rem;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: .75rem 1rem;
        border-radius: .6rem;
        transition: transform .18s ease, box-shadow .18s ease;
        box-shadow: 0 8px 18px -6px rgba(11, 94, 60, .5);
    }

    .register-page .btn-register:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 22px -6px rgba(11, 94, 60, .55);
        color: #fff;
    }

    .register-page .login-link {
        text-align: center;
        margin-top: 1.25rem;
        font-size: .85rem;
        color: var(--muted);
    }

    .register-page .login-link a {
        color: var(--kp-maroon);
        font-weight: 600;
        text-decoration: none;
    }

    .register-page .login-link a:hover {
        text-decoration: underline;
    }

    @media (max-width: 575.98px) {
        .register-page .card-inner {
            padding: 2rem 1.4rem 1.75rem;
        }

        .register-page .org-heading .dept {
            font-size: .8rem;
        }

        .register-page .page-bg {
            padding: 2rem .75rem;
            border-radius: .75rem;
        }
    }
</style>

<div class="register-page">
    <div class="page-bg">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-md-9 col-lg-7 col-xl-6">

                    <div class="reg-card">
                        <div class="card-inner">

                            <!-- Heading -->
                            <div class="org-heading">
                                <p class="dept">
                                    Home &amp; Tribal Affairs Department
                                    <small>Government of Khyber Pakhtunkhwa</small>
                                    <small>Complaint Cell &mdash; 1992</small>
                                </p>
                                <span class="reg-badge">
                                    <i class="bi bi-person-plus-fill"></i> New User Registration
                                </span>
                            </div>

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

                                <div class="mb-3">
                                    <label for="name" class="form-label">Full Name</label>
                                    <div class="input-icon-group">
                                        <i class="bi bi-person-fill"></i>
                                        <input type="text"
                                            id="name"
                                            class="form-control @error('name') is-invalid @enderror"
                                            name="name"
                                            value="{{ old('name') }}"
                                            placeholder="Enter full name"
                                            required>
                                    </div>
                                    @error('name')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="email" class="form-label">Email Address</label>
                                    <div class="input-icon-group">
                                        <i class="bi bi-envelope-fill"></i>
                                        <input type="email"
                                            id="email"
                                            class="form-control @error('email') is-invalid @enderror"
                                            name="email"
                                            value="{{ old('email') }}"
                                            placeholder="name@example.com"
                                            required>
                                    </div>
                                    @error('email')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-3">
                                    <label for="role" class="form-label">User Role</label>
                                    <div class="input-icon-group">
                                        <i class="bi bi-person-badge-fill"></i>
                                        <select name="role" class="form-select @error('role') is-invalid @enderror" id="role" required>
                                            <option value="">Select Role</option>
                                            <option value="operator">Operator</option>
                                            <option value="coordinator">Coordinator</option>
                                            <option value="department">Department User</option>
                                            <option value="admin">Admin</option>
                                        </select>
                                    </div>
                                    @error('role')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-3" id="departmentBox" style="display:none;">
                                    <label for="complaint_against_id" class="form-label">Department / Section</label>
                                    <div class="input-icon-group">
                                        <i class="bi bi-building-fill"></i>
                                        <select name="complaint_against_id" id="complaint_against_id" class="form-select">
                                            <option value="">Select Department</option>
                                            @foreach($departments as $dept)
                                                <option value="{{ $dept->id }}">{{ $dept->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">Password</label>
                                    <div class="input-icon-group">
                                        <i class="bi bi-lock-fill"></i>
                                        <input type="password"
                                            id="password"
                                            class="form-control @error('password') is-invalid @enderror"
                                            name="password"
                                            placeholder="Create a password"
                                            required>
                                        <button type="button" class="toggle-password" data-target="password" tabindex="-1" aria-label="Show password">
                                            <i class="bi bi-eye-fill"></i>
                                        </button>
                                    </div>
                                    @error('password')
                                        <span class="invalid-feedback d-block">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="mb-4">
                                    <label for="password_confirmation" class="form-label">Confirm Password</label>
                                    <div class="input-icon-group">
                                        <i class="bi bi-lock-fill"></i>
                                        <input type="password"
                                            id="password_confirmation"
                                            class="form-control"
                                            name="password_confirmation"
                                            placeholder="Re-enter password"
                                            required>
                                        <button type="button" class="toggle-password" data-target="password_confirmation" tabindex="-1" aria-label="Show password">
                                            <i class="bi bi-eye-fill"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="form-check admin-check mb-4 d-flex align-items-center gap-2">
                                    <input class="form-check-input mt-0" type="checkbox" name="is_admin" value="1" id="is_admin">
                                    <label class="form-check-label" for="is_admin">
                                        <i class="bi bi-shield-lock-fill me-1 text-danger"></i>
                                        Grant Administrator privileges
                                    </label>
                                </div>

                                <div class="d-grid">
                                    <button type="submit" class="btn btn-register">
                                        <i class="bi bi-person-plus-fill me-1"></i> Register
                                    </button>
                                </div>
                            </form>

                            <div class="login-link">
                                Already have an account? <a href="{{ route('login') }}">Sign in</a>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('role').addEventListener('change', function () {
        document.getElementById('departmentBox').style.display = (this.value === 'department') ? 'block' : 'none';
    });

    document.querySelectorAll('.toggle-password').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const input = document.getElementById(this.dataset.target);
            const isHidden = input.type === 'password';
            input.type = isHidden ? 'text' : 'password';
            this.innerHTML = isHidden
                ? '<i class="bi bi-eye-slash-fill"></i>'
                : '<i class="bi bi-eye-fill"></i>';
            this.setAttribute('aria-label', isHidden ? 'Hide password' : 'Show password');
        });
    });
</script>

@endsection