@extends('backend.app')

@section('content')
    <!-- Custom styling to create a premium, clean design matching the beige/cream palette -->
    <style>
        :root {
            --theme-bg: #f4eee3;
            --theme-card-bg: #ffffff;
            --theme-primary: #12223c;
            --theme-accent: #c2a683;
            --theme-border: #e8e4db;
            --theme-text-dark: #2c2f35;
            --theme-text-muted: #7e838c;
            --theme-success: #2e7d32;
        }

        .wizard-page-container {
            background-color: var(--theme-bg);
            padding: 2rem;
            border-radius: 16px;
            margin-bottom: 2rem;
        }

        .premium-card {
            background-color: var(--theme-card-bg);
            border: 1px solid var(--theme-border);
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
            padding: 2.5rem;
            margin-bottom: 1.5rem;
        }

        .card-title-main {
            font-size: 1.35rem;
            font-weight: 700;
            color: var(--theme-primary);
            margin-bottom: 0.25rem;
        }

        .card-subtitle-main {
            font-size: 0.85rem;
            color: var(--theme-text-muted);
            margin-bottom: 2rem;
        }

        /* Wizard Step Navigation Bar */
        .wizard-steps-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3rem;
            padding: 0 1rem;
        }

        .wizard-step {
            display: flex;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            text-decoration: none;
        }

        .wizard-step-circle {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #ffffff;
            border: 2px solid var(--theme-border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.9rem;
            color: var(--theme-text-dark);
            transition: all 0.3s ease;
        }

        .wizard-step-title {
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 1px;
            color: var(--theme-text-muted);
            text-transform: uppercase;
            white-space: nowrap;
        }

        .wizard-step-line {
            flex-grow: 1;
            height: 2px;
            background-color: var(--theme-border);
            margin: 0 15px;
            transition: all 0.3s ease;
        }

        /* Active & Completed States */
        .wizard-step.active .wizard-step-circle {
            border-color: var(--theme-primary);
            background-color: var(--theme-primary);
            color: #ffffff;
            box-shadow: 0 0 0 4px rgba(18, 34, 60, 0.1);
        }

        .wizard-step.active .wizard-step-title {
            color: var(--theme-primary);
        }

        .wizard-step.completed .wizard-step-circle {
            border-color: var(--theme-success);
            background-color: var(--theme-success);
            color: #ffffff;
        }

        .wizard-step.completed .wizard-step-title {
            color: var(--theme-success);
        }

        .wizard-step-line.completed {
            background-color: var(--theme-success);
        }

        .wizard-step-line.active {
            background-color: var(--theme-primary);
        }

        /* Photo Upload Container */
        .photo-upload-container {
            display: flex;
            align-items: center;
            border: 1px dashed var(--theme-accent);
            border-radius: 12px;
            background-color: #fbf9f6;
            padding: 1.5rem;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            gap: 15px;
            min-height: 100px;
        }

        .photo-upload-container:hover {
            border-color: var(--theme-primary);
            background-color: #f6f4ed;
        }

        .photo-upload-icon-box {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            background-color: #ffffff;
            border: 1px solid var(--theme-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--theme-accent);
            font-size: 1.3rem;
            flex-shrink: 0;
        }

        .photo-upload-text {
            display: flex;
            flex-direction: column;
            text-align: left;
        }

        .photo-upload-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--theme-primary);
        }

        .photo-upload-sub {
            font-size: 0.75rem;
            color: var(--theme-text-muted);
            margin-top: 2px;
        }

        .photo-upload-container input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            z-index: 10;
        }

        .preview-container {
            display: none;
            align-items: center;
            gap: 15px;
            width: 100%;
            z-index: 5;
        }

        .preview-image {
            width: 60px;
            height: 60px;
            border-radius: 8px;
            object-fit: cover;
            border: 1px solid var(--theme-border);
        }

        /* Premium Form Controls */
        .form-control, .form-select {
            border: 1px solid var(--theme-border);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            background-color: #fbf9f6;
            color: var(--theme-text-dark);
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--theme-accent);
            box-shadow: 0 0 0 3px rgba(194, 166, 131, 0.15);
            background-color: #ffffff;
        }

        .form-label {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--theme-text-dark);
            margin-bottom: 0.4rem;
        }

        /* Drag and Drop Zone (Gallery) */
        .drag-drop-zone {
            border: 2px dashed var(--theme-accent);
            border-radius: 12px;
            background-color: #fbf9f6;
            padding: 2.5rem 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .drag-drop-zone:hover {
            border-color: var(--theme-primary);
            background-color: #f6f4ed;
        }

        .drag-drop-zone input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .drag-drop-icon {
            font-size: 2.5rem;
            color: var(--theme-accent);
            margin-bottom: 10px;
        }

        /* Navigation Buttons */
        .btn-cancel-link {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--theme-text-dark);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: color 0.2s ease;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .btn-cancel-link:hover {
            color: var(--theme-primary);
        }

        .btn-prev-step-premium {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--theme-text-dark);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: color 0.2s ease;
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .btn-prev-step-premium:hover {
            color: var(--theme-primary);
        }

        .btn-next-step-premium {
            background-color: var(--theme-primary);
            color: #ffffff;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 0.75rem 2rem;
            border-radius: 30px;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(18, 34, 60, 0.15);
        }

        .btn-next-step-premium:hover {
            background-color: #0b1527;
            box-shadow: 0 6px 15px rgba(18, 34, 60, 0.25);
            color: #ffffff;
        }

        /* Privacy Selection Cards */
        .privacy-card {
            border: 2px solid var(--theme-border);
            border-radius: 12px;
            padding: 1.75rem;
            cursor: pointer;
            transition: all 0.3s ease;
            height: 100%;
            background-color: #faf9f6;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .privacy-card:hover {
            border-color: var(--theme-accent);
            background-color: #fcfbfa;
        }

        .privacy-card.selected {
            border-color: var(--theme-primary);
            background-color: #f5f3eb;
            box-shadow: 0 5px 15px rgba(18, 34, 60, 0.05);
        }

        .privacy-icon {
            font-size: 2.2rem;
            color: var(--theme-accent);
            flex-shrink: 0;
        }

        .privacy-card.selected .privacy-icon {
            color: var(--theme-primary);
        }

        .privacy-text {
            text-align: left;
        }

        .privacy-title {
            font-size: 1rem;
            font-weight: 700;
            color: var(--theme-primary);
            margin-bottom: 2px;
        }

        .privacy-description {
            font-size: 0.8rem;
            color: var(--theme-text-muted);
            margin: 0;
        }

        /* Gallery Grid styling */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 15px;
            margin-top: 20px;
        }

        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--theme-border);
            box-shadow: 0 3px 6px rgba(0,0,0,0.05);
            aspect-ratio: 1;
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .gallery-item-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            background-color: rgba(211, 47, 47, 0.9);
            color: #fff;
            border: none;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            transition: background-color 0.2s ease;
        }

        .gallery-item-remove:hover {
            background-color: rgba(211, 47, 47, 1);
        }

        /* Email list badges */
        .invited-email-item {
            display: inline-flex;
            align-items: center;
            background-color: #f1ede4;
            color: var(--theme-primary);
            font-weight: 600;
            font-size: 0.85rem;
            padding: 0.4rem 0.8rem;
            border-radius: 30px;
            margin-right: 8px;
            margin-bottom: 8px;
            border: 1px solid var(--theme-border);
        }

        .invited-email-item .remove-email {
            background: none;
            border: none;
            color: #d32f2f;
            margin-left: 6px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
    </style>

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
                <h4 class="mb-sm-0">All Memorials</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                        <li class="breadcrumb-item active">Edit Memorial</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="wizard-page-container">
                <!-- Step Progress Header -->
                <div class="wizard-steps-container">
                    <div class="wizard-step active" data-step="1">
                        <div class="wizard-step-circle">1</div>
                        <div class="wizard-step-title">BASIC INFORMATION</div>
                    </div>
                    <div class="wizard-step-line" data-step="1"></div>
                    <div class="wizard-step" data-step="2">
                        <div class="wizard-step-circle">2</div>
                        <div class="wizard-step-title">BIOGRAPHY</div>
                    </div>
                    <div class="wizard-step-line" data-step="2"></div>
                    <div class="wizard-step" data-step="3">
                        <div class="wizard-step-circle">3</div>
                        <div class="wizard-step-title">TRIBUTE</div>
                    </div>
                    <div class="wizard-step-line" data-step="3"></div>
                    <div class="wizard-step" data-step="4">
                        <div class="wizard-step-circle">4</div>
                        <div class="wizard-step-title">GALLERY</div>
                    </div>
                    <div class="wizard-step-line" data-step="4"></div>
                    <div class="wizard-step" data-step="5">
                        <div class="wizard-step-circle">5</div>
                        <div class="wizard-step-title">PRIVACY</div>
                    </div>
                    <div class="wizard-step-line" data-step="5"></div>
                    <div class="wizard-step" data-step="6">
                        <div class="wizard-step-circle">6</div>
                        <div class="wizard-step-title">FAMILY ACCESS</div>
                    </div>
                </div>

                <form action="{{ route('admin.memories.update', $memory->id) }}" method="POST" enctype="multipart/form-data" id="memoryWizardForm">
                    @csrf

                    <!-- STEP 1: Basic Information -->
                    <div class="step-panel" id="step-panel-1">
                        <!-- Card 1: Their name and place -->
                        <div class="premium-card mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-4">
                                <h3 class="card-title-main" style="margin: 0;">Their name and place</h3>
                                <button type="button" class="btn btn-primary btn-sm translate-all-trigger" style="background-color: var(--theme-primary); border: none; border-radius: 20px; padding: 0.5rem 1.2rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;">
                                    <i class="ri-translate-2"></i> Auto-Translate All Fields (Gemini)
                                </button>
                            </div>
                            <p class="card-subtitle-main" style="margin-top: -1.5rem; margin-bottom: 2rem;">The simple, beautiful details.</p>

                            <ul class="nav nav-tabs mb-3" id="namePlaceTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="nameplace-en-tab" data-bs-toggle="tab" data-bs-target="#nameplace-en" type="button" role="tab" aria-controls="nameplace-en" aria-selected="true">English</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="nameplace-fr-tab" data-bs-toggle="tab" data-bs-target="#nameplace-fr" type="button" role="tab" aria-controls="nameplace-fr" aria-selected="false">French</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="nameplace-gr-tab" data-bs-toggle="tab" data-bs-target="#nameplace-gr" type="button" role="tab" aria-controls="nameplace-gr" aria-selected="false">German</button>
                                </li>
                            </ul>

                            <div class="tab-content mb-4" id="namePlaceTabsContent">
                                <div class="tab-pane fade show active" id="nameplace-en" role="tabpanel" aria-labelledby="nameplace-en-tab">
                                    <div class="row">
                                        <div class="col-md-4 mb-4">
                                            <label for="name_en" class="form-label">Full name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" id="name_en" name="name/en" value="{{ old('name/en', $memory->{'name/en'}) }}" placeholder="Eleanor Whitfield" required>
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <label for="city_en" class="form-label">City</label>
                                            <input type="text" class="form-control" id="city_en" name="city/en" value="{{ old('city/en', $memory->{'city/en'}) }}" placeholder="Provence">
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <label for="country_en" class="form-label">Country</label>
                                            <input type="text" class="form-control" id="country_en" name="country/en" value="{{ old('country/en', $memory->{'country/en'}) }}" placeholder="France">
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="nameplace-fr" role="tabpanel" aria-labelledby="nameplace-fr-tab">
                                    <div class="row">
                                        <div class="col-md-4 mb-4">
                                            <label for="name_fr" class="form-label">Full name</label>
                                            <input type="text" class="form-control" id="name_fr" name="name/fr" value="{{ old('name/fr', $memory->{'name/fr'}) }}" placeholder="Eleanor Whitfield">
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <label for="city_fr" class="form-label">City</label>
                                            <input type="text" class="form-control" id="city_fr" name="city/fr" value="{{ old('city/fr', $memory->{'city/fr'}) }}" placeholder="Provence">
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <label for="country_fr" class="form-label">Country</label>
                                            <input type="text" class="form-control" id="country_fr" name="country/fr" value="{{ old('country/fr', $memory->{'country/fr'}) }}" placeholder="France">
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="nameplace-gr" role="tabpanel" aria-labelledby="nameplace-gr-tab">
                                    <div class="row">
                                        <div class="col-md-4 mb-4">
                                            <label for="name_gr" class="form-label">Full name</label>
                                            <input type="text" class="form-control" id="name_gr" name="name/gr" value="{{ old('name/gr', $memory->{'name/gr'}) }}" placeholder="Eleanor Whitfield">
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <label for="city_gr" class="form-label">City</label>
                                            <input type="text" class="form-control" id="city_gr" name="city/gr" value="{{ old('city/gr', $memory->{'city/gr'}) }}" placeholder="Provence">
                                        </div>
                                        <div class="col-md-4 mb-4">
                                            <label for="country_gr" class="form-label">Country</label>
                                            <input type="text" class="form-control" id="country_gr" name="country/gr" value="{{ old('country/gr', $memory->{'country/gr'}) }}" placeholder="France">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-3 mb-4">
                                    <label for="dob" class="form-label">Date of birth</label>
                                    <input type="date" class="form-control" id="dob" name="dob/en" value="{{ old('dob/en', $memory->{'dob/en'}) }}">
                                </div>
                                <div class="col-md-3 mb-4">
                                    <label for="dod" class="form-label">Date of passing</label>
                                    <input type="date" class="form-control" id="dod" name="dod/en" value="{{ old('dod/en', $memory->{'dod/en'}) }}">
                                </div>
                                <div class="col-md-3 mb-4">
                                    <label for="family_account_id" class="form-label">Select Family <span class="text-danger">*</span></label>
                                    <select class="form-select @error('family_account_id') is-invalid @enderror" id="family_account_id" name="family_account_id" required>
                                        <option value="">Select Family Account</option>
                                        @foreach ($familyAccounts as $account)
                                            <option value="{{ $account->id }}" {{ old('family_account_id', $memory->family_account_id) == $account->id ? 'selected' : '' }}>
                                                {{ $account->{'name/en'} ?? 'N/A' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('family_account_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-3 mb-4">
                                    <label for="qr_type" class="form-label">QR Type <span class="text-danger">*</span></label>
                                    <select class="form-select @error('qr_type') is-invalid @enderror" id="qr_type" name="qr_type" required>
                                        <option value="none" {{ old('qr_type', $memory->qr_type) == 'none' ? 'selected' : '' }}>None</option>
                                        <option value="single" {{ old('qr_type', $memory->qr_type) == 'single' ? 'selected' : '' }}>Single QR</option>
                                        <option value="family" {{ old('qr_type', $memory->qr_type) == 'family' ? 'selected' : '' }}>Family QR</option>
                                    </select>
                                    @error('qr_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Profile photo</label>
                                    <div class="photo-upload-container">
                                        @if(!empty($memory->profile_photo))
                                            <div class="photo-upload-icon-box" style="display: none;">
                                                <i class="ri-image-add-line"></i>
                                            </div>
                                            <div class="photo-upload-text" style="display: none;">
                                                <span class="photo-upload-title">Click to upload</span>
                                                <span class="photo-upload-sub">A portrait. Square. simple.</span>
                                            </div>
                                            <input type="file" name="profile_photo" class="file-uploader-input" accept="image/*">
                                            <div class="preview-container" style="display: flex;">
                                                <img src="{{ file_exists(public_path($memory->profile_photo)) ? asset($memory->profile_photo) : asset('storage/' . $memory->profile_photo) }}" class="preview-image" alt="Profile Preview">
                                            </div>
                                        @else
                                            <div class="photo-upload-icon-box">
                                                <i class="ri-image-add-line"></i>
                                            </div>
                                            <div class="photo-upload-text">
                                                <span class="photo-upload-title">Click to upload</span>
                                                <span class="photo-upload-sub">A portrait. Square. simple.</span>
                                            </div>
                                            <input type="file" name="profile_photo" class="file-uploader-input" accept="image/*">
                                            <div class="preview-container">
                                                <img src="" class="preview-image" alt="Profile Preview">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label class="form-label">Cover photo</label>
                                    <div class="photo-upload-container">
                                        @if(!empty($memory->cover_photo))
                                            <div class="photo-upload-icon-box" style="display: none;">
                                                <i class="ri-image-add-line"></i>
                                            </div>
                                            <div class="photo-upload-text" style="display: none;">
                                                <span class="photo-upload-title">Click to upload</span>
                                                <span class="photo-upload-sub">A landscape that holds their world.</span>
                                            </div>
                                            <input type="file" name="cover_photo" class="file-uploader-input" accept="image/*">
                                            <div class="preview-container" style="display: flex;">
                                                <img src="{{ file_exists(public_path($memory->cover_photo)) ? asset($memory->cover_photo) : asset('storage/' . $memory->cover_photo) }}" class="preview-image" alt="Cover Preview">
                                            </div>
                                        @else
                                            <div class="photo-upload-icon-box">
                                                <i class="ri-image-add-line"></i>
                                            </div>
                                            <div class="photo-upload-text">
                                                <span class="photo-upload-title">Click to upload</span>
                                                <span class="photo-upload-sub">A landscape that holds their world.</span>
                                            </div>
                                            <input type="file" name="cover_photo" class="file-uploader-input" accept="image/*">
                                            <div class="preview-container">
                                                <img src="" class="preview-image" alt="Cover Preview">
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Card 2: Cemetery Geolocation -->
                        <div class="premium-card">
                            <h3 class="card-title-main" style="margin-bottom: 1.5rem;">Cemetery Geolocation</h3>

                            <ul class="nav nav-tabs mb-3" id="cemeteryTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="cemetery-en-tab" data-bs-toggle="tab" data-bs-target="#cemetery-en" type="button" role="tab" aria-controls="cemetery-en" aria-selected="true">English</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="cemetery-fr-tab" data-bs-toggle="tab" data-bs-target="#cemetery-fr" type="button" role="tab" aria-controls="cemetery-fr" aria-selected="false">French</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="cemetery-gr-tab" data-bs-toggle="tab" data-bs-target="#cemetery-gr" type="button" role="tab" aria-controls="cemetery-gr" aria-selected="false">German</button>
                                </li>
                            </ul>

                            <div class="tab-content mb-4" id="cemeteryTabsContent">
                                <div class="tab-pane fade show active" id="cemetery-en" role="tabpanel" aria-labelledby="cemetery-en-tab">
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <label for="cemetery_name_en" class="form-label">Cemetery name</label>
                                            <input type="text" class="form-control" id="cemetery_name_en" name="cemetery_name/en" value="{{ old('cemetery_name/en', $memory->{'cemetery_name/en'}) }}" placeholder="Cemetery name">
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <label for="cemetery_city_en" class="form-label">Cemetery City</label>
                                            <input type="text" class="form-control" id="cemetery_city_en" name="cemetery_city/en" value="{{ old('cemetery_city/en', $memory->{'cemetery_city/en'}) }}" placeholder="City">
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="cemetery-fr" role="tabpanel" aria-labelledby="cemetery-fr-tab">
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <label for="cemetery_name_fr" class="form-label">Cemetery name</label>
                                            <input type="text" class="form-control" id="cemetery_name_fr" name="cemetery_name/fr" value="{{ old('cemetery_name/fr', $memory->{'cemetery_name/fr'}) }}" placeholder="Cemetery name">
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <label for="cemetery_city_fr" class="form-label">Cemetery City</label>
                                            <input type="text" class="form-control" id="cemetery_city_fr" name="cemetery_city/fr" value="{{ old('cemetery_city/fr', $memory->{'cemetery_city/fr'}) }}" placeholder="City">
                                        </div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="cemetery-gr" role="tabpanel" aria-labelledby="cemetery-gr-tab">
                                    <div class="row">
                                        <div class="col-md-6 mb-4">
                                            <label for="cemetery_name_gr" class="form-label">Cemetery name</label>
                                            <input type="text" class="form-control" id="cemetery_name_gr" name="cemetery_name/gr" value="{{ old('cemetery_name/gr', $memory->{'cemetery_name/gr'}) }}" placeholder="Cemetery name">
                                        </div>
                                        <div class="col-md-6 mb-4">
                                            <label for="cemetery_city_gr" class="form-label">Cemetery City</label>
                                            <input type="text" class="form-control" id="cemetery_city_gr" name="cemetery_city/gr" value="{{ old('cemetery_city/gr', $memory->{'cemetery_city/gr'}) }}" placeholder="City">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-4">
                                    <label for="longitude" class="form-label">Longitude</label>
                                    <input type="text" class="form-control" id="longitude" name="longitude" value="{{ old('longitude', $memory->longitude) }}" placeholder="Longitude">
                                </div>
                                <div class="col-md-6 mb-4">
                                    <label for="latitude" class="form-label">latitude</label>
                                    <input type="text" class="form-control" id="latitude" name="latitude" value="{{ old('latitude', $memory->latitude) }}" placeholder="latitude">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 2: Biography -->
                    <div class="step-panel d-none" id="step-panel-2">
                        <div class="premium-card">
                            <h3 class="card-title-main">Biography</h3>
                            <p class="card-subtitle-main">A story of their life, achievements and memories.</p>
                            
                            <ul class="nav nav-tabs mb-3" id="biographyTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="bio-en-tab" data-bs-toggle="tab" data-bs-target="#bio-en" type="button" role="tab" aria-controls="bio-en" aria-selected="true">English</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="bio-fr-tab" data-bs-toggle="tab" data-bs-target="#bio-fr" type="button" role="tab" aria-controls="bio-fr" aria-selected="false">French</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="bio-gr-tab" data-bs-toggle="tab" data-bs-target="#bio-gr" type="button" role="tab" aria-controls="bio-gr" aria-selected="false">German</button>
                                </li>
                            </ul>
                            
                            <div class="tab-content" id="biographyTabsContent">
                                <div class="tab-pane fade show active" id="bio-en" role="tabpanel" aria-labelledby="bio-en-tab">
                                    <textarea class="form-control" id="biography_en" name="biography/en" rows="12" placeholder="Add biography in English...">{{ old('biography/en', $memory->{'biography/en'}) }}</textarea>
                                </div>
                                <div class="tab-pane fade" id="bio-fr" role="tabpanel" aria-labelledby="bio-fr-tab">
                                    <textarea class="form-control" id="biography_fr" name="biography/fr" rows="12" placeholder="Add biography in French...">{{ old('biography/fr', $memory->{'biography/fr'}) }}</textarea>
                                </div>
                                <div class="tab-pane fade" id="bio-gr" role="tabpanel" aria-labelledby="bio-gr-tab">
                                    <textarea class="form-control" id="biography_gr" name="biography/gr" rows="12" placeholder="Add biography in German...">{{ old('biography/gr', $memory->{'biography/gr'}) }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 3: Tribute -->
                    <div class="step-panel d-none" id="step-panel-3">
                        <div class="premium-card">
                            <h3 class="card-title-main">Tribute of love</h3>
                            <p class="card-subtitle-main">Write a tribute that will be displayed on the memorial page.</p>
                            
                            <ul class="nav nav-tabs mb-3" id="tributeTabs" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="tribute-en-tab" data-bs-toggle="tab" data-bs-target="#tribute-en" type="button" role="tab" aria-controls="tribute-en" aria-selected="true">English</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tribute-fr-tab" data-bs-toggle="tab" data-bs-target="#tribute-fr" type="button" role="tab" aria-controls="tribute-fr" aria-selected="false">French</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tribute-gr-tab" data-bs-toggle="tab" data-bs-target="#tribute-gr" type="button" role="tab" aria-controls="tribute-gr" aria-selected="false">German</button>
                                </li>
                            </ul>
                            
                            <div class="tab-content" id="tributeTabsContent">
                                <div class="tab-pane fade show active" id="tribute-en" role="tabpanel" aria-labelledby="tribute-en-tab">
                                    <textarea class="form-control" id="tribute_en" name="tribute/en" rows="10" placeholder="Write a tribute in English...">{{ old('tribute/en', $memory->{'tribute/en'}) }}</textarea>
                                </div>
                                <div class="tab-pane fade" id="tribute-fr" role="tabpanel" aria-labelledby="tribute-fr-tab">
                                    <textarea class="form-control" id="tribute_fr" name="tribute/fr" rows="10" placeholder="Write a tribute in French...">{{ old('tribute/fr', $memory->{'tribute/fr'}) }}</textarea>
                                </div>
                                <div class="tab-pane fade" id="tribute-gr" role="tabpanel" aria-labelledby="tribute-gr-tab">
                                    <textarea class="form-control" id="tribute_gr" name="tribute/gr" rows="10" placeholder="Write a tribute in German...">{{ old('tribute/gr', $memory->{'tribute/gr'}) }}</textarea>
                                </div>
                            </div>

                            <div class="mt-4">
                                <label class="form-label" style="font-weight: 700; color: var(--theme-primary); font-size: 1rem;">Add photo</label>
                                <div class="photo-upload-container">
                                    @if(!empty($memory->tribute_photo))
                                        <div class="photo-upload-icon-box" style="display: none;">
                                            <i class="ri-image-add-line"></i>
                                        </div>
                                        <div class="photo-upload-text" style="display: none;">
                                            <span class="photo-upload-title">Click to upload</span>
                                            <span class="photo-upload-sub">The photo will be displayed next to the tribute.</span>
                                        </div>
                                        <input type="file" name="tribute_photo" class="file-uploader-input" accept="image/*">
                                        <div class="preview-container" style="display: flex;">
                                            <img src="{{ file_exists(public_path($memory->tribute_photo)) ? asset($memory->tribute_photo) : asset('storage/' . $memory->tribute_photo) }}" class="preview-image" alt="Tribute Photo Preview">
                                        </div>
                                    @else
                                        <div class="photo-upload-icon-box">
                                            <i class="ri-image-add-line"></i>
                                        </div>
                                        <div class="photo-upload-text">
                                            <span class="photo-upload-title">Click to upload</span>
                                            <span class="photo-upload-sub">The photo will be displayed next to the tribute.</span>
                                        </div>
                                        <input type="file" name="tribute_photo" class="file-uploader-input" accept="image/*">
                                        <div class="preview-container">
                                            <img src="" class="preview-image" alt="Tribute Photo Preview">
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 4: Gallery -->
                    <div class="step-panel d-none" id="step-panel-4">
                        <div class="premium-card">
                            <h3 class="card-title-main">A gallery of memories</h3>
                            <p class="card-subtitle-main">Upload photos that capture the beautiful moments of their life.</p>
                            <div class="mb-4">
                                <div class="drag-drop-zone">
                                    <i class="ri-gallery-upload-line drag-drop-icon"></i>
                                    <p class="mb-1 fw-bold">Click to upload</p>
                                    <p class="text-muted small">You can upload multiple files.</p>
                                    <input type="file" name="gallery[]" id="gallery-input" multiple accept="image/*">
                                </div>
                                <div class="gallery-grid" id="gallery-preview-grid">
                                    <!-- Preloaded existing gallery photos -->
                                    @if(!empty($memory->gallery) && is_array($memory->gallery))
                                        @foreach($memory->gallery as $image)
                                            <div class="gallery-item">
                                                <img src="{{ file_exists(public_path($image)) ? asset($image) : asset('storage/' . $image) }}" alt="Gallery Image">
                                                <input type="hidden" name="existing_gallery[]" value="{{ $image }}">
                                                <button type="button" class="gallery-item-remove"><i class="ri-close-line"></i></button>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 5: Privacy Settings -->
                    <div class="step-panel d-none" id="step-panel-5">
                        <div class="premium-card">
                            <h3 class="card-title-main text-center mb-1">Who can see</h3>
                            <p class="text-center text-muted small mb-4">Choose who can access this memorial page.</p>
                            <input type="hidden" name="privacy" id="privacy-input" value="{{ old('privacy', $memory->privacy ?? 'public') }}">

                            <div class="row justify-content-center">
                                <div class="col-md-5 mb-3">
                                    <div class="privacy-card {{ (old('privacy', $memory->privacy ?? 'public') == 'public') ? 'selected' : '' }}" data-value="public">
                                        <i class="ri-global-line privacy-icon"></i>
                                        <div class="privacy-text">
                                            <h5 class="privacy-title">Public</h5>
                                            <p class="privacy-description">Anyone can search and view this memorial card.</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-5 mb-3">
                                    <div class="privacy-card {{ (old('privacy', $memory->privacy ?? 'public') == 'private') ? 'selected' : '' }}" data-value="private">
                                        <i class="ri-lock-line privacy-icon"></i>
                                        <div class="privacy-text">
                                            <h5 class="privacy-title">Private</h5>
                                            <p class="privacy-description">Only invited family members can search and view this memorial card.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- STEP 6: Family Access -->
                    <div class="step-panel d-none" id="step-panel-6">
                        <div class="premium-card">
                            <h3 class="card-title-main">Family Access</h3>
                            <p class="card-subtitle-main">Invite other family members to contribute to this memorial page.</p>
                            
                            <div class="row align-items-end mb-3">
                                <div class="col-md-8">
                                    <label for="invite-email-input" class="form-label">Email address</label>
                                    <input type="email" class="form-control" id="invite-email-input" placeholder="Enter email address...">
                                </div>
                                <div class="col-md-4 mt-2 mt-md-0">
                                    <button type="button" class="btn btn-primary w-100" id="btn-add-email" style="height: calc(2.7rem + 2px); border-radius: 8px; font-weight: 600; background-color: var(--theme-primary); border: none;">
                                        Send Magic Link
                                    </button>
                                </div>
                            </div>

                            <div class="mt-4">
                                <h6 class="fw-bold mb-2" style="color: var(--theme-primary);">Invited emails:</h6>
                                <div id="invited-emails-container">
                                    <!-- Preloaded existing invited emails -->
                                    @if(!empty($memory->invited_emails) && is_array($memory->invited_emails))
                                        @foreach($memory->invited_emails as $email)
                                            <span class="invited-email-item">
                                                {{ $email }}
                                                <input type="hidden" name="invited_emails[]" value="{{ $email }}">
                                                <button type="button" class="remove-email"><i class="ri-close-circle-fill"></i></button>
                                            </span>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Controls -->
                    <div class="d-flex justify-content-between align-items-center mt-5 pt-3">
                        <a href="{{ route('admin.memories.index') }}" class="btn-cancel-link" id="btn-cancel">
                            <i class="ri-arrow-left-line"></i> Cancel
                        </a>
                        <button type="button" class="btn-prev-step-premium d-none" id="btn-prev-step">
                            <i class="ri-arrow-left-line"></i> Back
                        </button>
                        <button type="button" class="btn-next-step-premium" id="btn-next-step">
                            Continue <i class="ri-arrow-right-line"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            var currentStep = 1;
            var totalSteps = 6;

            // Handle step indicator and panels visibility
            function showStep(step) {
                $('.step-panel').addClass('d-none');
                $('#step-panel-' + step).removeClass('d-none');

                $('.wizard-step').removeClass('active completed');
                $('.wizard-step-line').removeClass('active completed');

                for (var i = 1; i <= totalSteps; i++) {
                    var stepEl = $('.wizard-step[data-step="' + i + '"]');
                    var lineEl = $('.wizard-step-line[data-step="' + (i - 1) + '"]');
                    
                    if (i < step) {
                        stepEl.addClass('completed');
                        if (lineEl.length) lineEl.addClass('completed');
                    } else if (i === step) {
                        stepEl.addClass('active');
                    }
                }

                // Update buttons layout
                if (step === 1) {
                    $('#btn-cancel').removeClass('d-none');
                    $('#btn-prev-step').addClass('d-none');
                } else {
                    $('#btn-cancel').addClass('d-none');
                    $('#btn-prev-step').removeClass('d-none');
                }

                if (step === totalSteps) {
                    $('#btn-next-step').html('Update Memorial <i class="ri-arrow-right-line"></i>');
                } else {
                    $('#btn-next-step').html('Continue <i class="ri-arrow-right-line"></i>');
                }
            }

            // Step click navigation (only allow previous or completed steps)
            $('.wizard-step').on('click', function() {
                var step = parseInt($(this).data('step'));
                if (step < currentStep || $(this).hasClass('completed')) {
                    currentStep = step;
                    showStep(currentStep);
                }
            });

            // Next step button trigger
            $('#btn-next-step').on('click', function() {
                // Perform validation for step 1
                if (currentStep === 1) {
                    var familyAcc = $('#family_account_id').val();
                    var name = $('#name_en').val();
                    if (!name) {
                        alert('Please enter a Full name.');
                        return;
                    }
                    if (!familyAcc) {
                        alert('Please select a Family Account.');
                        return;
                    }
                }

                if (currentStep < totalSteps) {
                    currentStep++;
                    showStep(currentStep);
                } else {
                    // Submit form
                    $('#memoryWizardForm').submit();
                }
            });

            // Previous step button trigger
            $('#btn-prev-step').on('click', function() {
                if (currentStep > 1) {
                    currentStep--;
                    showStep(currentStep);
                }
            });

            // File uploading preview logic
            $(document).on('change', '.file-uploader-input', function() {
                var input = this;
                var container = $(this).closest('.photo-upload-container');
                var previewContainer = container.find('.preview-container');
                var previewImage = container.find('.preview-image');
                
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function(e) {
                        previewImage.attr('src', e.target.result);
                        previewContainer.css('display', 'flex');
                        container.find('.photo-upload-icon-box, .photo-upload-text').hide();
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            });

            // Privacy settings selector cards logic
            $('.privacy-card').on('click', function() {
                $('.privacy-card').removeClass('selected');
                $(this).addClass('selected');
                $('#privacy-input').val($(this).data('value'));
            });

            // Multiple image uploads (Gallery) preview logic
            $('#gallery-input').on('change', function(e) {
                var files = e.target.files;
                var grid = $('#gallery-preview-grid');

                for (var i = 0; i < files.length; i++) {
                    (function(file) {
                        var reader = new FileReader();
                        reader.onload = function(event) {
                            var itemHtml = `
                                <div class="gallery-item" data-name="${file.name}">
                                    <img src="${event.target.result}" alt="Gallery Image">
                                    <button type="button" class="gallery-item-remove"><i class="ri-close-line"></i></button>
                                </div>
                            `;
                            grid.append(itemHtml);
                        };
                        reader.readAsDataURL(file);
                    })(files[i]);
                }
            });

            $(document).on('click', '.gallery-item-remove', function() {
                $(this).closest('.gallery-item').remove();
            });

            // Invite family emails logic
            $('#btn-add-email').on('click', function() {
                var emailInput = $('#invite-email-input');
                var emailVal = emailInput.val().trim();

                if (!emailVal) return;

                // Simple regex validation
                var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(emailVal)) {
                    alert('Please enter a valid email address.');
                    return;
                }

                // Check if already added
                var exists = false;
                $('#invited-emails-container input').each(function() {
                    if ($(this).val() === emailVal) {
                        exists = true;
                    }
                });

                if (exists) {
                    alert('This email is already added.');
                    return;
                }

                var badgeHtml = `
                    <span class="invited-email-item">
                        ${emailVal}
                        <input type="hidden" name="invited_emails[]" value="${emailVal}">
                        <button type="button" class="remove-email"><i class="ri-close-circle-fill"></i></button>
                    </span>
                `;

                $('#invited-emails-container').append(badgeHtml);
                emailInput.val('');
            });

            $(document).on('click', '.remove-email', function() {
                $(this).closest('.invited-email-item').remove();
            });

            // Trigger click on enter key for email input
            $('#invite-email-input').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    $('#btn-add-email').click();
                }
            });

            // Auto-Translate All trigger binding
            $(document).on('click', '.translate-all-trigger', function(e) {
                e.preventDefault();
                var btn = $(this);
                
                // Gather batch data
                var batch = {};
                var fieldsMap = {
                    'name': { source: '#name_en', targets: { fr: '#name_fr', gr: '#name_gr' } },
                    'city': { source: '#city_en', targets: { fr: '#city_fr', gr: '#city_gr' } },
                    'country': { source: '#country_en', targets: { fr: '#country_fr', gr: '#country_gr' } },
                    'cemetery_name': { source: '#cemetery_name_en', targets: { fr: '#cemetery_name_fr', gr: '#cemetery_name_gr' } },
                    'cemetery_city': { source: '#cemetery_city_en', targets: { fr: '#cemetery_city_fr', gr: '#cemetery_city_gr' } },
                    'biography': { source: '#biography_en', targets: { fr: '#biography_fr', gr: '#biography_gr' } },
                    'tribute': { source: '#tribute_en', targets: { fr: '#tribute_fr', gr: '#tribute_gr' } }
                };

                var hasData = false;
                $.each(fieldsMap, function(key, info) {
                    var val = $(info.source).val().trim();
                    if (val) {
                        batch[key] = val;
                        hasData = true;
                    }
                });

                if (!hasData) {
                    alert('Please enter text in at least one English field (Name, Biography, etc.) first.');
                    return;
                }

                btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Translating...');

                $.ajax({
                    url: "{{ route('admin.translate') }}",
                    method: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        batch: batch
                    },
                    success: function(response) {
                        if (response.success) {
                            $.each(fieldsMap, function(key, info) {
                                if (response.translations.fr && response.translations.fr[key]) {
                                    $(info.targets.fr).val(response.translations.fr[key]);
                                }
                                if (response.translations.gr && response.translations.gr[key]) {
                                    $(info.targets.gr).val(response.translations.gr[key]);
                                }
                            });
                        } else {
                            alert('Translation error: ' + response.message);
                        }
                    },
                    error: function(xhr) {
                        var msg = xhr.responseJSON && xhr.responseJSON.message ? xhr.responseJSON.message : 'An error occurred during translation.';
                        alert(msg);
                    },
                    complete: function() {
                        btn.prop('disabled', false).html('<i class="ri-translate-2"></i> Auto-Translate All Fields (Gemini)');
                    }
                });
            });
        });
    </script>
@endpush