@extends('layouts.front.app')

@section('title', 'Change Password - JotiJournal')

@section('content')
    <section class="breadcrumb-section">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a class="text-muted text-decoration-none" href="{{ route('welcome') }}">Home</a></li>
                    <li aria-current="page" class="breadcrumb-item active text-dark">Change Password</li>
                </ol>
            </nav>
        </div>
    </section>

    <main class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-9">

                <div class="row mb-4 animate-up">
                    <div class="col-12 text-center">
                        <h2 class="h3 font-serif mb-2" style="color: var(--legal-blue);">Change Password</h2>
                        <p class="text-muted mx-auto mb-2" style="max-width: 700px; font-size: 0.95rem;">
                            Keep your judicial research account protected with a strong, regularly rotated password.
                        </p>
                        <div class="header-line mx-auto"></div>
                    </div>
                </div>

                <div class="bg-white p-4 p-md-5 rounded-4 shadow-sm border border-light cp-card">
                    <h3 class="font-serif fw-bold mb-4 text-dark mt-2">
                        <i class="fa-solid fa-shield-halved me-2 text-gold"></i>Update Your Password
                    </h3>

                    @if (session('status'))
                        <div class="alert small py-2 mb-4 border-0 cp-alert-success">
                            <i class="fa-solid fa-circle-check me-2"></i>{{ session('status') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert small py-2 mb-4 border-0 cp-alert-error">
                            <ul class="mb-0 list-unstyled">
                                @foreach ($errors->all() as $error)
                                    <li class="mb-1 last:mb-0"><i class="fa-solid fa-circle-exclamation me-2"></i>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('user.change_password.update') }}" method="POST" autocomplete="off" novalidate>
                        @csrf

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="current_password">Current Password</label>
                            <div class="input-group cp-input-group">
                                <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-lock"></i></span>
                                <input class="form-control cp-input" id="current_password" name="current_password" placeholder="Enter your current password" required type="password" autocomplete="current-password" />
                                <span class="input-group-text cp-toggle password-toggle" data-target="current_password">
                                    <i class="fa-regular fa-eye"></i>
                                </span>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="password">New Password</label>
                            <div class="input-group cp-input-group">
                                <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-key"></i></span>
                                <input class="form-control cp-input" id="password" name="password" placeholder="At least 8 characters" required type="password" autocomplete="new-password" minlength="8" />
                                <span class="input-group-text cp-toggle password-toggle" data-target="password">
                                    <i class="fa-regular fa-eye"></i>
                                </span>
                            </div>
                            <small class="text-muted d-block mt-2"><i class="fa-solid fa-circle-info me-1 opacity-75"></i>Use 8 or more characters. A mix of letters, numbers and symbols is recommended.</small>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="password_confirmation">Confirm New Password</label>
                            <div class="input-group cp-input-group">
                                <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-check-double"></i></span>
                                <input class="form-control cp-input" id="password_confirmation" name="password_confirmation" placeholder="Re-enter the new password" required type="password" autocomplete="new-password" minlength="8" />
                                <span class="input-group-text cp-toggle password-toggle" data-target="password_confirmation">
                                    <i class="fa-regular fa-eye"></i>
                                </span>
                            </div>
                        </div>

                        <div class="d-flex flex-column flex-sm-row gap-2 mt-4 pt-2">
                            <button class="btn cp-btn-primary flex-grow-1" type="submit">
                                <i class="fa-solid fa-shield me-2"></i>Update Password
                            </button>
                            <a href="{{ url()->previous() }}" class="btn cp-btn-ghost">
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('styles')
<style>
    .cp-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .cp-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08) !important;
    }

    .cp-label {
        letter-spacing: 0.06em;
    }

    .cp-input-group {
        border-radius: 10px;
        overflow: hidden;
        border: 1.5px solid #e2e8f0;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .cp-input-group:focus-within {
        border-color: var(--legal-gold);
        box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.12);
    }

    .cp-leading-icon {
        background-color: transparent;
        border: none;
        color: var(--legal-gold);
        padding-left: 1rem;
        padding-right: 0.5rem;
    }

    .cp-input {
        border: none !important;
        background-color: transparent;
        padding: 0.85rem 0.5rem;
        box-shadow: none !important;
    }
    .cp-input:focus {
        background-color: transparent;
        box-shadow: none !important;
    }

    .cp-toggle {
        background-color: transparent;
        border: none;
        color: var(--legal-slate);
        cursor: pointer;
        padding-left: 0.5rem;
        padding-right: 1rem;
        transition: color 0.2s ease;
    }
    .cp-toggle:hover {
        color: var(--legal-gold);
    }

    .cp-btn-primary {
        background-color: var(--legal-blue);
        color: #fff;
        padding: 0.85rem 1.25rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        border-radius: 10px;
        border: none;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .cp-btn-primary:hover {
        background-color: #000;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
    }

    .cp-btn-ghost {
        background-color: transparent;
        color: var(--legal-slate);
        padding: 0.85rem 1.25rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-weight: 700;
        border-radius: 10px;
        border: 1.5px solid #e2e8f0;
        transition: all 0.2s ease;
    }
    .cp-btn-ghost:hover {
        border-color: var(--legal-gold);
        color: var(--legal-gold);
    }

    .cp-alert-success {
        background-color: rgba(34, 197, 94, 0.08);
        color: #16a34a;
        border-radius: 10px;
    }
    .cp-alert-error {
        background-color: rgba(239, 68, 68, 0.06);
        color: #dc2626;
        border-radius: 10px;
    }

    /* Dark-mode parity with the rest of the theme */
    [data-bs-theme="dark"] .cp-input-group {
        border-color: #334155;
        background-color: #0f172a;
    }
    [data-bs-theme="dark"] .cp-input-group:focus-within {
        border-color: var(--legal-gold);
        box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.18);
    }
    [data-bs-theme="dark"] .cp-input {
        color: #f1f5f9;
    }
    [data-bs-theme="dark"] .cp-input::placeholder {
        color: #64748b;
    }
    [data-bs-theme="dark"] .cp-toggle {
        color: #94a3b8;
    }
    [data-bs-theme="dark"] .cp-btn-ghost {
        border-color: #334155;
        color: #cbd5e1;
    }
    [data-bs-theme="dark"] .cp-btn-ghost:hover {
        border-color: var(--legal-gold);
        color: var(--legal-gold);
    }
    [data-bs-theme="dark"] .cp-card:hover {
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
    }
</style>
@endpush

@push('scripts')
<script>
    document.querySelectorAll('.password-toggle').forEach(function (toggle) {
        toggle.addEventListener('click', function () {
            var input = document.getElementById(this.dataset.target);
            var icon = this.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                icon.classList.replace('fa-eye', 'fa-eye-slash');
            } else {
                input.type = 'password';
                icon.classList.replace('fa-eye-slash', 'fa-eye');
            }
        });
    });
</script>
@endpush