@extends('admin.layout')

@section('title', 'Admin Profile & Security')

@section('content')
<div class="container-fluid p-0">
    <!-- Header Section -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h2 class="fw-bold font-heading mb-1 text-dark">
                <i class="bi bi-shield-lock-fill text-warning me-2"></i> Profile & Security Settings
            </h2>
            <p class="text-muted small mb-0">
                Manage your admin username, change password securely, and customize the admin access URL.
            </p>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary rounded-pill px-4 fw-semibold shadow-sm">
                <i class="bi bi-arrow-left me-1"></i> Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('profile_success'))
        <div class="alert alert-success alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-check-circle-fill me-2 fs-5"></i>
            {{ session('profile_success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('password_success'))
        <div class="alert alert-success alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-shield-check me-2 fs-5"></i>
            {{ session('password_success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('prefix_success'))
        <div class="alert alert-success alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
            <i class="bi bi-link-45deg me-2 fs-5"></i>
            {{ session('prefix_success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row g-4">
        <!-- Column 1: Profile & Username Info -->
        <div class="col-lg-5">
            <!-- Admin User Summary Card -->
            <div class="card border-0 rounded-4 shadow-sm mb-4 text-center p-4">
                <div class="card-body p-0">
                    <div class="mx-auto mb-3 admin-avatar-pill bg-warning text-dark fs-3 fw-bold" style="width: 76px; height: 76px; border: 3px solid #E2E8F0;">
                        {{ strtoupper(substr($user->name ?? 'A', 0, 1)) }}
                    </div>
                    <h5 class="fw-bold text-dark font-heading mb-1">{{ $user->name }}</h5>
                    <p class="text-muted small mb-2">{{ $user->email }}</p>
                    <div class="d-flex justify-content-center gap-2">
                        <span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-2 fw-semibold text-uppercase">
                            <i class="bi bi-person-badge me-1"></i> {{ $user->role ?? 'admin' }}
                        </span>
                        <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2 fw-semibold">
                            <i class="bi bi-check2-circle me-1"></i> {{ ucfirst($user->status ?? 'active') }}
                        </span>
                    </div>
                </div>
            </div>

            <!-- Edit Username & Email Form Card -->
            <div class="card border-0 rounded-4 shadow-sm mb-4">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h5 class="fw-bold text-dark mb-1 font-heading">
                        <i class="bi bi-person-fill-gear text-primary me-2"></i> Account Details
                    </h5>
                    <p class="text-muted small mb-0">Change your display name and login email.</p>
                </div>
                <div class="card-body p-4">
                    <form action="{{ route('admin.profile.update') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label for="name" class="form-label fw-semibold small text-dark">
                                Username / Admin Name <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 text-muted">
                                    <i class="bi bi-person"></i>
                                </span>
                                <input type="text"
                                       class="form-control border-start-0 @error('name') is-invalid @enderror"
                                       id="name"
                                       name="name"
                                       value="{{ old('name', $user->name) }}"
                                       required>
                                @error('name')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="email" class="form-label fw-semibold small text-dark">
                                Email Address <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 text-muted">
                                    <i class="bi bi-envelope"></i>
                                </span>
                                <input type="email"
                                       class="form-control border-start-0 @error('email') is-invalid @enderror"
                                       id="email"
                                       name="email"
                                       value="{{ old('email', $user->email) }}"
                                       required>
                                @error('email')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <button type="submit" class="btn btn-warning w-100 rounded-pill fw-semibold py-2 shadow-sm text-white" style="background-color: var(--iq-orange); border: none;">
                            <i class="bi bi-check2-circle me-1"></i> Save Account Details
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Column 2: Change Password & Admin URL Customization -->
        <div class="col-lg-7">
            <!-- 1. Change Password (Requires Old Password) -->
            <div class="card border-0 rounded-4 shadow-sm mb-4">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <h5 class="fw-bold text-dark mb-1 font-heading">
                        <i class="bi bi-key-fill text-warning me-2"></i> Change Password
                    </h5>
                    <p class="text-muted small mb-0">For your security, you must verify your current password before saving a new one.</p>
                </div>

                <div class="card-body p-4">
                    <div class="alert alert-light border rounded-3 p-3 mb-4 d-flex align-items-center gap-3">
                        <div class="text-warning fs-3">
                            <i class="bi bi-shield-exclamation"></i>
                        </div>
                        <div class="small text-muted">
                            <strong class="text-dark">Security Requirement:</strong> Please enter your current (old) password to authenticate. New passwords must be at least 8 characters long.
                        </div>
                    </div>

                    <form action="{{ route('admin.profile.password') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- 1. Current / Old Password -->
                        <div class="mb-3">
                            <label for="current_password" class="form-label fw-semibold small text-dark">
                                Current (Old) Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 text-muted">
                                    <i class="bi bi-lock-fill"></i>
                                </span>
                                <input type="password"
                                       class="form-control border-start-0 border-end-0 @error('current_password') is-invalid @enderror"
                                       id="current_password"
                                       name="current_password"
                                       placeholder="Enter your current password"
                                       required>
                                <button class="btn btn-outline-secondary border-start-0 toggle-password-btn"
                                        type="button"
                                        data-target="current_password"
                                        tabindex="-1">
                                    <i class="bi bi-eye"></i>
                                </button>
                                @error('current_password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <hr class="my-4 text-muted opacity-25">

                        <!-- 2. New Password -->
                        <div class="mb-3">
                            <label for="password" class="form-label fw-semibold small text-dark">
                                New Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 text-muted">
                                    <i class="bi bi-shield-lock"></i>
                                </span>
                                <input type="password"
                                       class="form-control border-start-0 border-end-0 @error('password') is-invalid @enderror"
                                       id="password"
                                       name="password"
                                       placeholder="Enter new password (min. 8 characters)"
                                       required>
                                <button class="btn btn-outline-secondary border-start-0 toggle-password-btn"
                                        type="button"
                                        data-target="password"
                                        tabindex="-1">
                                    <i class="bi bi-eye"></i>
                                </button>
                                @error('password')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text small text-muted">Must be at least 8 characters long and different from current password.</div>
                        </div>

                        <!-- 3. Confirm New Password -->
                        <div class="mb-4">
                            <label for="password_confirmation" class="form-label fw-semibold small text-dark">
                                Confirm New Password <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light border-end-0 text-muted">
                                    <i class="bi bi-shield-check"></i>
                                </span>
                                <input type="password"
                                       class="form-control border-start-0 border-end-0"
                                       id="password_confirmation"
                                       name="password_confirmation"
                                       placeholder="Confirm your new password"
                                       required>
                                <button class="btn btn-outline-secondary border-start-0 toggle-password-btn"
                                        type="button"
                                        data-target="password_confirmation"
                                        tabindex="-1">
                                    <i class="bi bi-eye"></i>
                                </button>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2">
                            <button type="submit" class="btn btn-warning rounded-pill px-4 fw-semibold shadow-sm text-white" style="background-color: var(--iq-orange); border: none;">
                                <i class="bi bi-check2-circle me-1"></i> Update Password
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 2. Admin URL Prefix Customization Card -->
            <div class="card border-0 rounded-4 shadow-sm">
                <div class="card-header bg-white border-0 pt-4 px-4 pb-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="fw-bold text-dark mb-1 font-heading">
                                <i class="bi bi-link-45deg text-success me-2"></i> Custom Admin URL Prefix
                            </h5>
                            <p class="text-muted small mb-0">Change the URL path used to access this admin control panel.</p>
                        </div>
                        <span class="badge bg-success-subtle text-success rounded-pill px-3 py-2 fw-semibold">
                            Active: /{{ $adminPrefix }}
                        </span>
                    </div>
                </div>

                <div class="card-body p-4">
                    <div class="alert alert-warning-subtle border-0 rounded-3 p-3 mb-4 d-flex align-items-center gap-3">
                        <div class="text-warning fs-3">
                            <i class="bi bi-shield-lock"></i>
                        </div>
                        <div class="small text-dark">
                            <strong>Security Protection:</strong> Changing this slug obscures your admin dashboard and login page from bots scanning default <code>/admin</code> URLs.
                        </div>
                    </div>

                    <form action="{{ route('admin.profile.prefix') }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="mb-3">
                            <label for="admin_prefix" class="form-label fw-semibold small text-dark">
                                Admin URL Slug <span class="text-danger">*</span>
                            </label>
                            <div class="input-group">
                                <span class="input-group-text bg-light text-muted font-monospace small">
                                    {{ url('/') }}/
                                </span>
                                <input type="text"
                                       class="form-control font-monospace @error('admin_prefix') is-invalid @enderror"
                                       id="admin_prefix"
                                       name="admin_prefix"
                                       value="{{ old('admin_prefix', $adminPrefix) }}"
                                       placeholder="e.g. portal, manage, secret-panel"
                                       required>
                                @error('admin_prefix')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-text small text-muted mt-2">
                                New URL Preview: <span class="badge bg-light text-primary border font-monospace" id="previewUrl">{{ url('/') }}/{{ $adminPrefix }}</span>
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 mt-4">
                            <button type="submit" class="btn btn-dark rounded-pill px-4 fw-semibold shadow-sm">
                                <i class="bi bi-arrow-repeat me-1"></i> Update Admin URL
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    // Password visibility toggle helper
    document.querySelectorAll('.toggle-password-btn').forEach(button => {
        button.addEventListener('click', function () {
            const targetId = this.getAttribute('data-target');
            const input = document.getElementById(targetId);
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.remove('bi-eye');
                icon.classList.add('bi-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.remove('bi-eye-slash');
                icon.classList.add('bi-eye');
            }
        });
    });

    // Real-time URL preview helper
    const prefixInput = document.getElementById('admin_prefix');
    const previewUrl = document.getElementById('previewUrl');
    const baseUrl = "{{ url('/') }}";

    if (prefixInput && previewUrl) {
        prefixInput.addEventListener('input', function () {
            const cleanVal = this.value.trim().toLowerCase().replace(/[^a-z0-9_-]/g, '');
            previewUrl.textContent = baseUrl + '/' + (cleanVal ? cleanVal : '...');
        });
    }
</script>
@endpush