@extends('layouts.front.app')

@section('title', 'My Profile - 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">My Profile</li>
                </ol>
            </nav>
        </div>
    </section>

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

                <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);">My Profile</h2>
                        <p class="text-muted mx-auto mb-2" style="max-width: 700px; font-size: 0.95rem;">
                            Update your personal details. Your email is the unique identifier for your account and cannot be changed here.
                        </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-id-card me-2 text-gold"></i>Personal Information
                    </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"><i class="fa-solid fa-circle-exclamation me-2"></i>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('user.profile.update') }}" method="POST" enctype="multipart/form-data" autocomplete="off" novalidate>
                        @csrf

                        {{-- Avatar block --}}
                        <div class="text-center mb-4">
                            <div class="profile-avatar-wrap mx-auto" id="avatarWrap" role="button" tabindex="0" aria-label="Change profile picture">
                                <img id="avatarPreview"
                                     src="{{ $user->image ? asset($user->image) : asset('theme/front/assets/img/user-default.svg') }}"
                                     alt="Profile picture"
                                     class="profile-avatar-img" />
                                <span class="profile-avatar-overlay">
                                    <i class="fa-solid fa-camera"></i>
                                    <span class="ms-2">Change</span>
                                </span>
                            </div>
                            <input type="file" id="imageInput" name="image" accept="image/jpeg,image/png,image/webp" class="d-none">
                            <small class="text-muted d-block mt-2"><i class="fa-solid fa-circle-info me-1 opacity-75"></i>JPG, PNG or WEBP. Max 512&nbsp;KB.</small>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="first_name">First Name</label>
                                <div class="input-group cp-input-group">
                                    <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-user"></i></span>
                                    <input class="form-control cp-input" id="first_name" name="first_name" type="text" required maxlength="250"
                                           value="{{ old('first_name', $user->first_name) }}" />
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="last_name">Last Name</label>
                                <div class="input-group cp-input-group">
                                    <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-user"></i></span>
                                    <input class="form-control cp-input" id="last_name" name="last_name" type="text" maxlength="250"
                                           value="{{ old('last_name', $user->last_name) }}" />
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="email_display">Email <span class="text-muted text-lowercase fw-normal">(cannot be changed)</span></label>
                            <div class="input-group cp-input-group cp-input-group-disabled">
                                <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-lock"></i></span>
                                <input class="form-control cp-input" id="email_display" type="email" value="{{ $user->email }}" disabled readonly />
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-4">
                                <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="dob">Date of Birth</label>
                                <div class="input-group cp-input-group">
                                    <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-calendar-days"></i></span>
                                    <input class="form-control cp-input js-datepicker" id="dob" name="dob" type="text"
                                           placeholder="dd-mm-yyyy" autocomplete="off"
                                           data-alt-format="d-m-Y" data-max-date="today"
                                           value="{{ old('dob', optional($user->dob)->format('Y-m-d')) }}" />
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="city">City</label>
                                <div class="input-group cp-input-group">
                                    <span class="input-group-text cp-leading-icon"><i class="fa-solid fa-city"></i></span>
                                    <input class="form-control cp-input" id="city" name="city" type="text" maxlength="200"
                                           value="{{ old('city', $user->city) }}" />
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label small fw-bold text-uppercase text-muted cp-label" for="address">Address</label>
                            <div class="input-group cp-input-group">
                                <span class="input-group-text cp-leading-icon align-items-start pt-3"><i class="fa-solid fa-location-dot"></i></span>
                                <textarea class="form-control cp-input" id="address" name="address" rows="3" maxlength="1000">{{ old('address', $user->address) }}</textarea>
                            </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-floppy-disk me-2"></i>Save Changes
                            </button>
                            <a href="{{ route('welcome') }}" 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-input-group-disabled {
        background-color: #f8fafc;
        opacity: 0.85;
    }

    .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-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;
    }

    .profile-avatar-wrap {
        position: relative;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        border: 3px solid #e2e8f0;
        background: #f8fafc;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .profile-avatar-wrap:hover,
    .profile-avatar-wrap:focus-visible {
        border-color: var(--legal-gold);
        transform: scale(1.02);
        outline: none;
    }
    .profile-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .profile-avatar-overlay {
        position: absolute;
        inset: auto 0 0 0;
        background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.85) 100%);
        color: #fff;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 0.6rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .profile-avatar-wrap:hover .profile-avatar-overlay,
    .profile-avatar-wrap:focus-visible .profile-avatar-overlay {
        opacity: 1;
    }

    /* 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-group-disabled {
        background-color: #1e293b;
    }
    [data-bs-theme="dark"] .cp-input {
        color: #f1f5f9;
    }
    [data-bs-theme="dark"] .cp-input::placeholder {
        color: #64748b;
    }
    [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"] .profile-avatar-wrap {
        background: #1e293b;
        border-color: #334155;
    }
    [data-bs-theme="dark"] .cp-card:hover {
        box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4) !important;
    }
</style>
@endpush

@push('scripts')
<script>
    (function () {
        var wrap = document.getElementById('avatarWrap');
        var input = document.getElementById('imageInput');
        var preview = document.getElementById('avatarPreview');
        if (!wrap || !input || !preview) return;

        function openPicker() { input.click(); }
        wrap.addEventListener('click', openPicker);
        wrap.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPicker(); }
        });

        input.addEventListener('change', function () {
            var file = this.files && this.files[0];
            if (!file) return;
            var reader = new FileReader();
            reader.onload = function (e) { preview.src = e.target.result; };
            reader.readAsDataURL(file);
        });
    })();
</script>
@endpush