@php
$isEdit = isset($service) && $service->exists && $service->id;
$formAction = $isEdit
? route('admin.services.update', $service->id)
: route('admin.services.store');
$formMethod = $isEdit ? 'PUT' : 'POST';
$formTitle = $isEdit ? 'Edit Service' : 'Create Service';
$submitText = $isEdit ? 'Update Service' : 'Save Service';

// ✅ Safe decode function
function safeDecode($data) {
if (is_null($data)) {
return [];
}
if (is_array($data)) {
return $data;
}
if (is_string($data)) {
$decoded = json_decode($data, true);
return is_array($decoded) ? $decoded : [];
}
return [];
}

// ✅ Use safeDecode for all JSON fields
$serviceCards = safeDecode($service->service_cards ?? null);
$processSteps = safeDecode($service->process_steps ?? null);
$faqs = safeDecode($service->faqs ?? null);
$whyChooseUs = safeDecode($service->why_choose_us ?? null);
$packages = safeDecode($service->packages ?? null);
$customSections = safeDecode($service->custom_sections ?? null);
$galleryImages = safeDecode($service->gallery_images ?? null);
@endphp

<style>
    /* ============================================
       SERVICE FORM - REDSPIDER THEME
    ============================================ */

    .form-section .form-group-custom:last-child {
        margin-bottom: 0;
    }

    .form-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
        padding-bottom: 16px;
        border-bottom: 1px solid #E8E8E8;
    }

    .form-card-header h4 {
        font-size: 18px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .form-card-header h4 i {
        color: #C1121F;
    }

    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        background: #F8F9FA;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        transition: all 0.3s ease;
    }

    .btn-back:hover {
        background: rgba(193, 18, 31, 0.06);
        border-color: rgba(193, 18, 31, 0.2);
        color: #C1121F;
        transform: translateX(-2px);
    }

    .form-section {
        background: #FAFBFC;
        border-radius: 14px;
        padding: 20px 24px;
        border: 1px solid #F0F0F0;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }

    .form-section:hover {
        border-color: rgba(193, 18, 31, 0.08);
    }

    .section-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .section-header i {
        font-size: 18px;
        color: #C1121F;
    }

    .section-header h5 {
        font-size: 15px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
    }

    .section-header .badge-optional {
        margin-left: auto;
        padding: 2px 12px;
        border-radius: 12px;
        background: #E8E8E8;
        color: #6B7280;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .section-header .btn-add {
        margin-left: auto;
        padding: 4px 14px;
        border-radius: 8px;
        background: rgba(193, 18, 31, 0.08);
        border: 1px solid rgba(193, 18, 31, 0.1);
        color: #C1121F;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: 'Poppins', sans-serif;
    }

    .section-header .btn-add:hover {
        background: rgba(193, 18, 31, 0.15);
        border-color: rgba(193, 18, 31, 0.2);
        transform: translateY(-1px);
    }

    .section-header .btn-add i {
        font-size: 14px;
        color: #C1121F;
    }

    .form-group-custom {
        margin-bottom: 18px;
    }

    .form-group-custom label {
        display: block;
        font-size: 13px;
        font-weight: 600;
        color: #1A1A2E;
        margin-bottom: 6px;
    }

    .form-group-custom label .required {
        color: #DC2626;
        margin-left: 2px;
    }

    .form-control-custom {
        width: 100%;
        padding: 10px 14px;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        font-size: 14px;
        font-family: 'Poppins', sans-serif;
        color: #1A1A2E;
        background: #FFFFFF;
        transition: all 0.3s ease;
        outline: none;
    }

    .form-control-custom:focus {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .form-control-custom.is-invalid {
        border-color: #DC2626;
    }

    .form-control-custom.is-invalid:focus {
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.06);
    }

    .form-control-custom::placeholder {
        color: #9CA3AF;
        font-size: 13px;
    }

    textarea.form-control-custom {
        resize: vertical;
        min-height: 80px;
    }

    .form-hint {
        display: block;
        font-size: 12px;
        color: #6B7280;
        margin-top: 4px;
    }

    .error-text {
        display: block;
        color: #DC2626;
        font-size: 12px;
        margin-top: 4px;
    }

    .input-with-prefix {
        display: flex;
        align-items: center;
        border: 1.5px solid #E8E8E8;
        border-radius: 10px;
        background: #FFFFFF;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .input-with-prefix:focus-within {
        border-color: #C1121F;
        box-shadow: 0 0 0 4px rgba(193, 18, 31, 0.06);
    }

    .input-with-prefix .prefix {
        padding: 10px 12px;
        background: #F8F9FA;
        color: #6B7280;
        font-size: 13px;
        font-weight: 500;
        border-right: 1px solid #E8E8E8;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .input-with-prefix .form-control-custom {
        border: none !important;
        border-radius: 0 !important;
        padding: 10px 14px;
    }

    .input-with-prefix .form-control-custom:focus {
        box-shadow: none !important;
    }

    .slug-preview {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 4px 12px;
        background: #F8F9FA;
        border-radius: 6px;
        border: 1px solid #E8E8E8;
        font-size: 13px;
        font-family: 'Poppins', sans-serif;
        color: #6B7280;
        margin-top: 6px;
    }

    .slug-preview code {
        color: #C1121F;
        font-weight: 600;
        background: transparent;
        padding: 0;
    }

    .btn-regenerate {
        background: none;
        border: none;
        color: #6B7280;
        cursor: pointer;
        padding: 2px 8px;
        font-size: 12px;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    .btn-regenerate:hover {
        color: #C1121F;
    }

    .image-preview-wrapper {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
        padding: 12px 16px;
        background: #F8F9FA;
        border-radius: 10px;
        border: 1px solid #E8E8E8;
        margin-top: 8px;
    }

    .image-preview-wrapper img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #E8E8E8;
    }

    .image-preview-wrapper .file-name {
        font-size: 13px;
        color: #1A1A2E;
        font-weight: 500;
    }

    .image-preview-wrapper .file-size {
        font-size: 12px;
        color: #6B7280;
    }

    .image-preview-wrapper .remove-file {
        background: none;
        border: none;
        color: #DC2626;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .image-preview-wrapper .remove-file:hover {
        transform: scale(1.2);
    }

    .file-upload-area {
        border: 2px dashed #E8E8E8;
        border-radius: 10px;
        padding: 24px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #FAFBFC;
    }

    .file-upload-area:hover {
        border-color: #C1121F;
        background: rgba(193, 18, 31, 0.02);
    }

    .file-upload-area i {
        font-size: 32px;
        color: #C1121F;
        opacity: 0.4;
        display: block;
        margin-bottom: 8px;
    }

    .file-upload-area p {
        font-size: 14px;
        color: #6B7280;
        margin: 0;
    }

    .file-upload-area small {
        font-size: 12px;
        color: #9CA3AF;
    }

    .repeater-item {
        background: #FFFFFF;
        border-radius: 10px;
        border: 1px solid #E8E8E8;
        padding: 14px 16px;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }

    .repeater-item:hover {
        border-color: rgba(193, 18, 31, 0.15);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
    }

    .repeater-item .item-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .repeater-item .item-header .item-index {
        font-size: 12px;
        font-weight: 600;
        color: #6B7280;
    }

    .repeater-item .item-header .btn-remove {
        background: none;
        border: none;
        color: #DC2626;
        cursor: pointer;
        padding: 4px 8px;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    .repeater-item .item-header .btn-remove:hover {
        transform: scale(1.2);
    }

    .empty-state-text {
        text-align: center;
        color: #6B7280;
        padding: 20px;
    }

    .empty-state-text i {
        font-size: 32px;
        display: block;
        margin-bottom: 8px;
        opacity: 0.3;
    }

    .form-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #E8E8E8;
    }

    .btn-submit {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 28px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
    }

    .btn-submit:active {
        transform: scale(0.96);
    }

    .btn-cancel {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
        text-decoration: none;
    }

    .btn-cancel:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

    .btn-reset-custom {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: transparent;
        border: 1px solid #E8E8E8;
        color: #4A5568;
    }

    .btn-reset-custom:hover {
        background: #F8F9FA;
        border-color: #D1D5DB;
    }

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

    .gallery-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid #E8E8E8;
    }

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

    .gallery-item .gallery-remove {
        position: absolute;
        top: 4px;
        right: 4px;
        background: rgba(220, 38, 38, 0.9);
        border: none;
        color: #FFFFFF;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .gallery-item .gallery-remove:hover {
        transform: scale(1.1);
        background: #DC2626;
    }

    @media (max-width: 576px) {
        .form-section {
            padding: 14px 16px;
        }

        .form-card-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .form-actions {
            flex-direction: column;
        }

        .form-actions .btn-submit,
        .form-actions .btn-cancel,
        .form-actions .btn-reset-custom {
            width: 100%;
            justify-content: center;
        }

        .image-preview-wrapper {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .gallery-grid {
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        }

        .gallery-item img {
            height: 80px;
        }

        .repeater-item .row {
            gap: 8px;
        }
    }
</style>

<!-- ============================================
   ALERT MESSAGES
============================================ -->

@if ($errors->any())
<div class="alert-box alert-error" style="margin-bottom: 20px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>
        <strong>Validation Errors!</strong>
        <ul style="margin: 4px 0 0 20px; padding: 0;">
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

@if (session('success'))
<div class="alert-box alert-success" style="margin-bottom: 20px;">
    <i class="bi bi-check-circle-fill"></i>
    <span>{{ session('success') }}</span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

@if (session('error'))
<div class="alert-box alert-error" style="margin-bottom: 20px;">
    <i class="bi bi-exclamation-circle-fill"></i>
    <span>{{ session('error') }}</span>
    <button type="button" class="alert-close-btn" onclick="this.closest('.alert-box').remove()">
        <i class="bi bi-x"></i>
    </button>
</div>
@endif

<!-- ============================================
   FORM CARD
============================================ -->



<div class="form-card-header">
    <h4>
        <i class="bi bi-briefcase"></i>
        {{ $formTitle }}
    </h4>
    <a href="{{ route('admin.services.index') }}" class="btn-back">
        <i class="bi bi-arrow-left"></i> Back to List
    </a>
</div>

<!-- ===== FORM START ===== -->
<form action="{{ $formAction }}" method="POST" enctype="multipart/form-data" id="serviceForm">
    @csrf
    @if($isEdit)
    @method('PUT')
    @endif

    <!-- ===== BASIC INFORMATION ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-info-circle"></i>
            <h5>Basic Information</h5>
        </div>

        <div class="row">
            <div class="col-md-8">
                <div class="form-group-custom">
                    <label>Title <span class="required">*</span></label>
                    <input type="text"
                        name="title"
                        id="title"
                        class="form-control-custom @error('title') is-invalid @enderror"
                        value="{{ old('title', $service->title ?? '') }}"
                        placeholder="Enter service title"
                        required>
                    @error('title')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group-custom">
                    <label>Slug</label>
                    <div class="input-with-prefix">
                        <span class="prefix">{{ url('/') }}/services/</span>
                        <input type="text"
                            name="slug"
                            id="slug"
                            class="form-control-custom @error('slug') is-invalid @enderror"
                            value="{{ old('slug', $service->slug ?? '') }}"
                            placeholder="service-slug"
                            data-auto-generated="{{ isset($service) && $service->slug ? 'false' : 'true' }}">
                    </div>
                    @error('slug')
                    <span class="error-text">{{ $message }}</span>
                    @enderror

                    <div class="slug-preview">
                        <i class="bi bi-link"></i>
                        Preview: <code id="slugPreview">
                            @if(isset($service) && $service->slug)
                            {{ $service->slug }}
                            @else
                            auto-generated
                            @endif
                        </code>
                        <button type="button" class="btn-regenerate" onclick="generateSlug()">
                            <i class="bi bi-arrow-repeat"></i> Regenerate
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group-custom">
            <label>Short Description</label>
            <textarea name="short_description"
                rows="3"
                class="form-control-custom @error('short_description') is-invalid @enderror"
                placeholder="Brief description for service listing">{{ old('short_description', $service->short_description ?? '') }}</textarea>
            @error('short_description')
            <span class="error-text">{{ $message }}</span>
            @enderror
            <span class="form-hint">Maximum 500 characters. This appears in service listings.</span>
        </div>

        <div class="form-group-custom" style="margin-bottom: 0;">
            <label>Full Description</label>
            <textarea name="description"
                rows="10"
                class="form-control-custom @error('description') is-invalid @enderror"
                placeholder="Detailed description of the service">{{ old('description', $service->description ?? '') }}</textarea>
            @error('description')
            <span class="error-text">{{ $message }}</span>
            @enderror
        </div>
    </div>

    <!-- ===== HERO SECTION ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-image"></i>
            <h5>Hero Section</h5>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group-custom">
                    <label>Hero Title</label>
                    <input type="text"
                        name="hero_title"
                        class="form-control-custom @error('hero_title') is-invalid @enderror"
                        value="{{ old('hero_title', $service->hero_title ?? '') }}"
                        placeholder="Hero section title">
                    @error('hero_title')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group-custom">
                    <label>Hero Subtitle</label>
                    <textarea name="hero_subtitle"
                        rows="3"
                        class="form-control-custom @error('hero_subtitle') is-invalid @enderror"
                        placeholder="Hero section subtitle/description">{{ old('hero_subtitle', $service->hero_subtitle ?? '') }}</textarea>
                    @error('hero_subtitle')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Video URL (YouTube/Vimeo)</label>
                    <input type="url"
                        name="hero_video_url"
                        class="form-control-custom @error('hero_video_url') is-invalid @enderror"
                        value="{{ old('hero_video_url', $service->hero_video_url ?? '') }}"
                        placeholder="https://youtube.com/embed/...">
                    @error('hero_video_url')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Hero Image</label>
                    <input type="file"
                        name="hero_image"
                        id="heroImage"
                        class="form-control-custom @error('hero_image') is-invalid @enderror"
                        accept="image/*"
                        style="display: none;"
                        onchange="previewHeroImage(this)">
                    <div id="heroImagePreview">
                        @if(isset($service) && $service->hero_image)
                        <div class="image-preview-wrapper">
                            <img src="{{ asset('storage/' . $service->hero_image) }}" alt="Hero Image">
                            <div>
                                <div class="file-name">Current Image</div>
                                <div class="file-size">Click below to change</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeHeroImage()">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                        @else
                        <div class="file-upload-area" onclick="document.getElementById('heroImage').click()">
                            <i class="bi bi-cloud-upload"></i>
                            <p>Click to upload hero image</p>
                            <small>PNG, JPG, WEBP (Max 2MB)</small>
                        </div>
                        @endif
                    </div>
                    @error('hero_image')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Max 2MB. Allowed: jpeg, png, jpg, gif, webp</span>
                </div>
            </div>
        </div>
    </div>

    <!-- ===== SERVICE CARDS ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-grid-3x3-gap-fill"></i>
            <h5>Service Cards</h5>
            <button type="button" class="btn-add" onclick="addServiceCard()">
                <i class="bi bi-plus-circle"></i> Add Card
            </button>
        </div>

        <div id="serviceCardsContainer">
            @php
            $oldServiceCards = old('service_cards', $serviceCards);
            @endphp
            @if(!empty($oldServiceCards) && is_array($oldServiceCards))
            @foreach($oldServiceCards as $index => $card)
            <div class="repeater-item">
                <div class="item-header">
                    <span class="item-index">Card #{{ $loop->iteration }}</span>
                    <button type="button" class="btn-remove" onclick="removeItem(this)">
                        <i class="bi bi-trash3"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <input type="text" name="service_cards[{{ $index }}][icon]"
                            class="form-control-custom" placeholder="Icon (e.g., bi bi-laptop)"
                            value="{{ $card['icon'] ?? '' }}">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="service_cards[{{ $index }}][title]"
                            class="form-control-custom" placeholder="Card Title"
                            value="{{ $card['title'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="service_cards[{{ $index }}][description]"
                            class="form-control-custom" placeholder="Card Description"
                            value="{{ $card['description'] ?? '' }}">
                    </div>
                </div>
            </div>
            @endforeach
            @else
            <div class="empty-state-text" id="serviceCardsEmpty">
                <i class="bi bi-plus-circle"></i>
                Click "Add Card" to add service cards.
            </div>
            @endif
        </div>
    </div>

    <!-- ===== PROCESS STEPS ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-list-ol"></i>
            <h5>Process Steps</h5>
            <button type="button" class="btn-add" onclick="addProcessStep()">
                <i class="bi bi-plus-circle"></i> Add Step
            </button>
        </div>

        <div id="processStepsContainer">
            @php
            $oldProcessSteps = old('process_steps', $processSteps);
            @endphp
            @if(!empty($oldProcessSteps) && is_array($oldProcessSteps))
            @foreach($oldProcessSteps as $index => $step)
            <div class="repeater-item">
                <div class="item-header">
                    <span class="item-index">Step #{{ $loop->iteration }}</span>
                    <button type="button" class="btn-remove" onclick="removeItem(this)">
                        <i class="bi bi-trash3"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-5">
                        <input type="text" name="process_steps[{{ $index }}][title]"
                            class="form-control-custom" placeholder="Step Title"
                            value="{{ $step['title'] ?? '' }}">
                    </div>
                    <div class="col-md-7">
                        <input type="text" name="process_steps[{{ $index }}][description]"
                            class="form-control-custom" placeholder="Step Description"
                            value="{{ $step['description'] ?? '' }}">
                    </div>
                </div>
            </div>
            @endforeach
            @else
            <div class="empty-state-text" id="processStepsEmpty">
                <i class="bi bi-plus-circle"></i>
                Click "Add Step" to add process steps.
            </div>
            @endif
        </div>
    </div>

    <!-- ===== WHY CHOOSE US ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-check-circle"></i>
            <h5>Why Choose Us</h5>
            <button type="button" class="btn-add" onclick="addWhyChoose()">
                <i class="bi bi-plus-circle"></i> Add Point
            </button>
        </div>

        <div id="whyChooseContainer">
            @php
            $oldWhyChoose = old('why_choose_us', $whyChooseUs);
            @endphp
            @if(!empty($oldWhyChoose) && is_array($oldWhyChoose))
            @foreach($oldWhyChoose as $index => $item)
            <div class="repeater-item">
                <div class="item-header">
                    <span class="item-index">Point #{{ $loop->iteration }}</span>
                    <button type="button" class="btn-remove" onclick="removeItem(this)">
                        <i class="bi bi-trash3"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <input type="text" name="why_choose_us[{{ $index }}][icon]"
                            class="form-control-custom" placeholder="Icon"
                            value="{{ $item['icon'] ?? '' }}">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="why_choose_us[{{ $index }}][title]"
                            class="form-control-custom" placeholder="Title"
                            value="{{ $item['title'] ?? '' }}">
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="why_choose_us[{{ $index }}][description]"
                            class="form-control-custom" placeholder="Description"
                            value="{{ $item['description'] ?? '' }}">
                    </div>
                </div>
            </div>
            @endforeach
            @else
            <div class="empty-state-text" id="whyChooseEmpty">
                <i class="bi bi-plus-circle"></i>
                Click "Add Point" to add why choose us items.
            </div>
            @endif
        </div>
    </div>

    <!-- ===== FAQs ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-question-circle"></i>
            <h5>FAQs</h5>
            <button type="button" class="btn-add" onclick="addFaq()">
                <i class="bi bi-plus-circle"></i> Add FAQ
            </button>
        </div>

        <div id="faqsContainer">
            @php
            $oldFaqs = old('faqs', $faqs);
            @endphp
            @if(!empty($oldFaqs) && is_array($oldFaqs))
            @foreach($oldFaqs as $index => $faq)
            <div class="repeater-item">
                <div class="item-header">
                    <span class="item-index">FAQ #{{ $loop->iteration }}</span>
                    <button type="button" class="btn-remove" onclick="removeItem(this)">
                        <i class="bi bi-trash3"></i>
                    </button>
                </div>
                <div class="row">
                    <div class="col-md-5">
                        <input type="text" name="faqs[{{ $index }}][question]"
                            class="form-control-custom" placeholder="Question"
                            value="{{ $faq['question'] ?? '' }}">
                    </div>
                    <div class="col-md-7">
                        <input type="text" name="faqs[{{ $index }}][answer]"
                            class="form-control-custom" placeholder="Answer"
                            value="{{ $faq['answer'] ?? '' }}">
                    </div>
                </div>
            </div>
            @endforeach
            @else
            <div class="empty-state-text" id="faqsEmpty">
                <i class="bi bi-plus-circle"></i>
                Click "Add FAQ" to add frequently asked questions.
            </div>
            @endif
        </div>
    </div>

    <!-- ===== GALLERY IMAGES ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-images"></i>
            <h5>Gallery Images</h5>
        </div>

        <div class="form-group-custom" style="margin-bottom: 0;">
            <input type="file"
                name="gallery_images[]"
                class="form-control-custom @error('gallery_images.*') is-invalid @enderror"
                accept="image/*"
                multiple
                style="padding: 10px;">
            @error('gallery_images.*')
            <span class="error-text">{{ $message }}</span>
            @enderror
            <span class="form-hint">Max 2MB each. Allowed: jpeg, png, jpg, gif, webp. You can select multiple images.</span>
        </div>

        @if(!empty($galleryImages))
        <div class="gallery-grid" id="existingGallery">
            @foreach($galleryImages as $image)
            <div class="gallery-item" id="gallery-item-{{ md5($image) }}">
                <img src="{{ asset('storage/' . $image) }}" alt="Gallery Image">
                <button type="button" class="gallery-remove" onclick="removeGalleryImage('{{ $image }}', this)">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            @endforeach
        </div>
        <input type="hidden" name="existing_gallery" id="existingGalleryData" value="{{ json_encode($galleryImages) }}">
        @endif
    </div>

    <!-- ===== CTA SECTION ===== -->
    <div class="form-section">
        <div class="section-header">
            <i class="bi bi-megaphone"></i>
            <h5>Call to Action</h5>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group-custom">
                    <label>CTA Button Text</label>
                    <input type="text"
                        name="cta_text"
                        class="form-control-custom @error('cta_text') is-invalid @enderror"
                        value="{{ old('cta_text', $service->cta_text ?? '') }}"
                        placeholder="e.g., Get Started">
                    @error('cta_text')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>CTA Button URL</label>
                    <input type="url"
                        name="cta_url"
                        class="form-control-custom @error('cta_url') is-invalid @enderror"
                        value="{{ old('cta_url', $service->cta_url ?? '') }}"
                        placeholder="https://...">
                    @error('cta_url')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>
    </div>

    <!-- ===== STATUS & SEO ===== -->
    <div class="row">
        <div class="col-md-6">
            <div class="form-section" style="height: 100%;">
                <div class="section-header">
                    <i class="bi bi-toggle-on"></i>
                    <h5>Status</h5>
                </div>

                <div class="form-group-custom">
                    <label>Status <span class="required">*</span></label>
                    <select name="status" class="form-control-custom @error('status') is-invalid @enderror" required>
                        <option value="draft" {{ old('status', $service->status ?? 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="published" {{ old('status', $service->status ?? 'draft') == 'published' ? 'selected' : '' }}>Published</option>
                    </select>
                    @error('status')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Sort Order</label>
                    <input type="number"
                        name="sort_order"
                        class="form-control-custom @error('sort_order') is-invalid @enderror"
                        value="{{ old('sort_order', $service->sort_order ?? 0) }}"
                        placeholder="0"
                        min="0">
                    @error('sort_order')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Lower numbers appear first.</span>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="form-section" style="height: 100%;">
                <div class="section-header">
                    <i class="bi bi-search"></i>
                    <h5>SEO Settings</h5>
                    <span class="badge-optional">Optional</span>
                </div>

                <div class="form-group-custom">
                    <label>Meta Title</label>
                    <input type="text"
                        name="meta_title"
                        id="meta_title"
                        class="form-control-custom @error('meta_title') is-invalid @enderror"
                        value="{{ old('meta_title', $service->meta_title ?? '') }}"
                        placeholder="SEO title (max 60 chars)">
                    <span class="form-hint" id="metaTitleCount">0 / 60 characters</span>
                    @error('meta_title')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group-custom">
                    <label>Meta Description</label>
                    <textarea name="meta_description"
                        id="meta_description"
                        rows="2"
                        class="form-control-custom @error('meta_description') is-invalid @enderror"
                        placeholder="SEO description (max 160 chars)">{{ old('meta_description', $service->meta_description ?? '') }}</textarea>
                    <span class="form-hint" id="metaDescCount">0 / 160 characters</span>
                    @error('meta_description')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <label>Meta Keywords</label>
                    <input type="text"
                        name="meta_keywords"
                        class="form-control-custom @error('meta_keywords') is-invalid @enderror"
                        value="{{ old('meta_keywords', $service->meta_keywords ?? '') }}"
                        placeholder="SEO keywords (comma separated)">
                    @error('meta_keywords')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>
            </div>
        </div>
    </div>



    <!-- ===== FORM ACTIONS ===== -->
    <div class="form-actions">
        @php
        $user = Auth::guard('admin')->user();
        $isAdmin = $user && ($user->id == 1 || $user->role_id == 2);
        $isUser = $user && $user->id != 1 && $user->role_id != 2;
        @endphp

        @if(isset($service) && $service->exists)
        {{-- EDIT MODE --}}
        @if($service->isLocked())
        <button type="button" class="btn btn-secondary" disabled>
            <i class="bi bi-lock"></i> Locked - Under Review
        </button>
        @else
        @if($isAdmin)
        <button type="submit" class="btn-submit">
            <i class="bi bi-save"></i> Update Service
        </button>
        @elseif($isUser)
        <button type="submit" class="btn-submit" style="background: #f59e0b; border-color: #f59e0b;" name="submit_action" value="review">
            <i class="bi bi-send"></i> Submit for Review
        </button>
        <small class="text-muted d-block mt-1">Your changes will be sent for approval.</small>
        @endif
        @endif
        @else
        {{-- CREATE MODE --}}
        <button type="submit" class="btn-submit">
            <i class="bi bi-save"></i> Save Service
        </button>
        @endif

        <a href="{{ route('admin.services.index') }}" class="btn-cancel">
            <i class="bi bi-x-circle"></i> Cancel
        </a>
        <button type="reset" class="btn-reset-custom">
            <i class="bi bi-arrow-counterclockwise"></i> Reset
        </button>
    </div>



</form>


<!-- ============================================
   SCRIPT
============================================ -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // SLUG GENERATION
        // ============================================
        const titleInput = document.getElementById('title');
        const slugInput = document.getElementById('slug');
        const slugPreview = document.getElementById('slugPreview');

        if (titleInput && slugInput) {
            titleInput.addEventListener('input', function() {
                if (!slugInput.value || slugInput.dataset.autoGenerated === 'true') {
                    const slug = generateSlugFromText(this.value);
                    slugInput.value = slug;
                    slugInput.dataset.autoGenerated = 'true';
                    updateSlugPreview(slug);
                }
            });

            if (!slugInput.value) {
                slugInput.dataset.autoGenerated = 'true';
            }
        }

        window.updateSlugPreview = function(slug) {
            if (slugPreview) {
                slugPreview.textContent = slug || 'auto-generated';
            }
        };

        window.generateSlug = function() {
            if (titleInput && titleInput.value) {
                const slug = generateSlugFromText(titleInput.value);
                slugInput.value = slug;
                slugInput.dataset.autoGenerated = 'true';
                updateSlugPreview(slug);
            } else {
                alert('Please enter a title first to generate slug.');
                titleInput.focus();
            }
        };

        function generateSlugFromText(text) {
            return text
                .toLowerCase()
                .replace(/[^a-z0-9]+/g, '-')
                .replace(/^-+|-+$/g, '');
        }

        // ============================================
        // HERO IMAGE PREVIEW
        // ============================================
        window.previewHeroImage = function(input) {
            const previewContainer = document.getElementById('heroImagePreview');
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewContainer.innerHTML = `
                        <div class="image-preview-wrapper">
                            <img src="${e.target.result}" alt="Preview">
                            <div>
                                <div class="file-name">${file.name}</div>
                                <div class="file-size">${(file.size / 1024).toFixed(1)} KB</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeHeroImage()">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
            }
        };

        window.removeHeroImage = function() {
            const previewContainer = document.getElementById('heroImagePreview');
            const imageInput = document.getElementById('heroImage');

            if (previewContainer) {
                previewContainer.innerHTML = `
                    <div class="file-upload-area" onclick="document.getElementById('heroImage').click()">
                        <i class="bi bi-cloud-upload"></i>
                        <p>Click to upload hero image</p>
                        <small>PNG, JPG, WEBP (Max 2MB)</small>
                    </div>
                `;
            }

            if (imageInput) {
                imageInput.value = '';
            }
        };

        // ============================================
        // REPEATER FUNCTIONS
        // ============================================
        window.addServiceCard = function() {
            addRepeaterItem('serviceCardsContainer', 'service_cards', 'serviceCardsEmpty', 'Card');
        };

        window.addProcessStep = function() {
            addRepeaterItem('processStepsContainer', 'process_steps', 'processStepsEmpty', 'Step');
        };

        window.addWhyChoose = function() {
            addRepeaterItem('whyChooseContainer', 'why_choose_us', 'whyChooseEmpty', 'Point');
        };

        window.addFaq = function() {
            addRepeaterItem('faqsContainer', 'faqs', 'faqsEmpty', 'FAQ');
        };

        function addRepeaterItem(containerId, name, emptyId, label) {
            const container = document.getElementById(containerId);
            const emptyMsg = document.getElementById(emptyId);
            if (emptyMsg) emptyMsg.style.display = 'none';

            const index = container.querySelectorAll('.repeater-item').length;
            const html = `
                <div class="repeater-item">
                    <div class="item-header">
                        <span class="item-index">${label} #${index + 1}</span>
                        <button type="button" class="btn-remove" onclick="removeItem(this)">
                            <i class="bi bi-trash3"></i>
                        </button>
                    </div>
                    <div class="row">
                        ${getRepeaterFields(name, index)}
                    </div>
                </div>
            `;
            container.insertAdjacentHTML('beforeend', html);
        }

        function getRepeaterFields(name, index) {
            const fields = {
                'service_cards': `
                    <div class="col-md-2">
                        <input type="text" name="${name}[${index}][icon]" class="form-control-custom" placeholder="Icon">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="${name}[${index}][title]" class="form-control-custom" placeholder="Title">
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="${name}[${index}][description]" class="form-control-custom" placeholder="Description">
                    </div>
                `,
                'process_steps': `
                    <div class="col-md-5">
                        <input type="text" name="${name}[${index}][title]" class="form-control-custom" placeholder="Step Title">
                    </div>
                    <div class="col-md-7">
                        <input type="text" name="${name}[${index}][description]" class="form-control-custom" placeholder="Step Description">
                    </div>
                `,
                'why_choose_us': `
                    <div class="col-md-2">
                        <input type="text" name="${name}[${index}][icon]" class="form-control-custom" placeholder="Icon">
                    </div>
                    <div class="col-md-4">
                        <input type="text" name="${name}[${index}][title]" class="form-control-custom" placeholder="Title">
                    </div>
                    <div class="col-md-6">
                        <input type="text" name="${name}[${index}][description]" class="form-control-custom" placeholder="Description">
                    </div>
                `,
                'faqs': `
                    <div class="col-md-5">
                        <input type="text" name="${name}[${index}][question]" class="form-control-custom" placeholder="Question">
                    </div>
                    <div class="col-md-7">
                        <input type="text" name="${name}[${index}][answer]" class="form-control-custom" placeholder="Answer">
                    </div>
                `
            };
            return fields[name] || '';
        }

        window.removeItem = function(btn) {
            if (!confirm('Are you sure you want to remove this item?')) return;

            const item = btn.closest('.repeater-item');
            const container = item.parentElement;
            item.remove();

            // Re-index
            const items = container.querySelectorAll('.repeater-item');
            items.forEach(function(el, idx) {
                const inputs = el.querySelectorAll('input');
                inputs.forEach(function(input) {
                    const name = input.getAttribute('name');
                    if (name) {
                        const newName = name.replace(/\[\d+\]/, '[' + idx + ']');
                        input.setAttribute('name', newName);
                    }
                });
                const indexLabel = el.querySelector('.item-index');
                if (indexLabel) {
                    const label = indexLabel.textContent.split('#')[0].trim();
                    indexLabel.textContent = label + ' #' + (idx + 1);
                }
            });

            const emptyMsg = container.querySelector('[id$="Empty"]');
            if (items.length === 0 && emptyMsg) {
                emptyMsg.style.display = 'block';
            }
        };

        // ============================================
        // GALLERY IMAGE REMOVE
        // ============================================
        window.removeGalleryImage = function(imagePath, btn) {
            if (!confirm('Are you sure you want to remove this image?')) return;

            const serviceId = '{{ $service->id ?? 0 }}';
            if (!serviceId) {
                alert('Please save the service first to manage gallery images.');
                return;
            }

            const formData = new FormData();
            formData.append('_token', '{{ csrf_token() }}');
            formData.append('image', imagePath);
            formData.append('_method', 'DELETE');

            fetch('{{ url("admin/services") }}/' + serviceId + '/gallery-image', {
                    method: 'POST',
                    body: formData
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(data) {
                    if (data.success) {
                        const item = btn.closest('.gallery-item');
                        if (item) item.remove();

                        const hidden = document.getElementById('existingGalleryData');
                        if (hidden) {
                            let images = JSON.parse(hidden.value || '[]');
                            images = images.filter(function(img) {
                                return img !== imagePath;
                            });
                            hidden.value = JSON.stringify(images);
                        }
                        alert('Image removed successfully!');
                    } else {
                        alert('Failed to remove image: ' + data.message);
                    }
                })
                .catch(function(error) {
                    alert('An error occurred while removing image.');
                    console.error('Error:', error);
                });
        };

        // ============================================
        // META CHARACTER COUNTERS
        // ============================================
        const metaTitle = document.getElementById('meta_title');
        const metaTitleCount = document.getElementById('metaTitleCount');
        const metaDesc = document.getElementById('meta_description');
        const metaDescCount = document.getElementById('metaDescCount');

        if (metaTitle && metaTitleCount) {
            metaTitle.addEventListener('input', function() {
                const count = this.value.length;
                metaTitleCount.textContent = count + ' / 60 characters';
                metaTitleCount.style.color = count > 60 ? '#DC2626' : '#6B7280';
            });
            setTimeout(function() {
                metaTitle.dispatchEvent(new Event('input'));
            }, 100);
        }

        if (metaDesc && metaDescCount) {
            metaDesc.addEventListener('input', function() {
                const count = this.value.length;
                metaDescCount.textContent = count + ' / 160 characters';
                metaDescCount.style.color = count > 160 ? '#DC2626' : '#6B7280';
            });
            setTimeout(function() {
                metaDesc.dispatchEvent(new Event('input'));
            }, 100);
        }

        // ============================================
        // FORM VALIDATION
        // ============================================
        const form = document.getElementById('serviceForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                const title = document.getElementById('title');
                if (title && !title.value.trim()) {
                    e.preventDefault();
                    title.classList.add('is-invalid');
                    alert('Please enter a service title.');
                    title.focus();
                }
            });

            document.querySelectorAll('.form-control-custom').forEach(function(input) {
                input.addEventListener('input', function() {
                    this.classList.remove('is-invalid');
                });
            });
        }

        console.log('✅ Service Form loaded successfully!');
    });
</script>