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

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

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

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

    .avatar-preview-wrapper img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid #E8E8E8;
    }

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

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

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

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

    .rating-select {
        padding: 6px 0;
    }

    .rating-select .form-control-custom {
        font-size: 14px;
    }

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

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

    select.form-control-custom {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        padding-right: 36px;
    }

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

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

    .toggle-switch-custom {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 8px 0;
    }

    .toggle-switch-custom .switch {
        position: relative;
        width: 48px;
        height: 26px;
        flex-shrink: 0;
    }

    .toggle-switch-custom .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .toggle-switch-custom .switch .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #E8E8E8;
        transition: all 0.4s ease;
        border-radius: 26px;
    }

    .toggle-switch-custom .switch .slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 4px;
        bottom: 4px;
        background: #FFFFFF;
        transition: all 0.4s ease;
        border-radius: 50%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .toggle-switch-custom .switch input:checked+.slider {
        background: linear-gradient(135deg, #C1121F, #780000);
    }

    .toggle-switch-custom .switch input:checked+.slider::before {
        transform: translateX(22px);
    }

    .toggle-switch-custom .switch input:focus+.slider {
        box-shadow: 0 0 0 3px rgba(193, 18, 31, 0.15);
    }

    .toggle-switch-custom .status-text {
        font-size: 14px;
        font-weight: 500;
        color: #4A5568;
    }

    .toggle-switch-custom .status-text.active {
        color: #16A34A;
    }

    .toggle-switch-custom .status-text.inactive {
        color: #DC2626;
    }

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

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

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

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

        .avatar-preview-wrapper {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }
</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

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

<div class="form-card-header">
    <h4>
        <i class="bi bi-chat-quote"></i>
        {{ $formTitle }}
    </h4>
    <a href="{{ route('admin.testimonials.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="testimonialForm">
    @csrf
    @if($isEdit)
    @method('PUT')
    @endif

    <div class="row">
        <!-- ===== LEFT COLUMN ===== -->
        <div class="col-lg-8">

            <!-- Client Information -->
            <div class="form-section">
                <div class="section-header">
                    <i class="bi bi-person"></i>
                    <h5>Client Information</h5>
                </div>

                <!-- Name -->
                <div class="form-group-custom">
                    <label>Client Name <span class="required">*</span></label>
                    <input type="text"
                        name="name"
                        class="form-control-custom @error('name') is-invalid @enderror"
                        value="{{ old('name', $testimonial->name ?? '') }}"
                        placeholder="Enter client name"
                        required>
                    @error('name')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Designation</label>
                            <input type="text"
                                name="designation"
                                class="form-control-custom @error('designation') is-invalid @enderror"
                                value="{{ old('designation', $testimonial->designation ?? '') }}"
                                placeholder="e.g., CEO">
                            @error('designation')
                            <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Company</label>
                            <input type="text"
                                name="company"
                                class="form-control-custom @error('company') is-invalid @enderror"
                                value="{{ old('company', $testimonial->company ?? '') }}"
                                placeholder="e.g., Google">
                            @error('company')
                            <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Content -->
                <div class="form-group-custom">
                    <label>Testimonial <span class="required">*</span></label>
                    <textarea name="content"
                        rows="5"
                        class="form-control-custom @error('content') is-invalid @enderror"
                        placeholder="Write the testimonial here..."
                        required>{{ old('content', $testimonial->content ?? '') }}</textarea>
                    @error('content')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Platform -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group-custom">
                            <label>Platform</label>
                            <select name="platform" class="form-control-custom @error('platform') is-invalid @enderror">
                                <option value="">Select Platform</option>
                                <option value="google" {{ old('platform', $testimonial->platform ?? '') == 'google' ? 'selected' : '' }}>Google</option>
                                <option value="facebook" {{ old('platform', $testimonial->platform ?? '') == 'facebook' ? 'selected' : '' }}>Facebook</option>
                                <option value="yelp" {{ old('platform', $testimonial->platform ?? '') == 'yelp' ? 'selected' : '' }}>Yelp</option>
                                <option value="trustpilot" {{ old('platform', $testimonial->platform ?? '') == 'trustpilot' ? 'selected' : '' }}>Trustpilot</option>
                                <option value="other" {{ old('platform', $testimonial->platform ?? '') == 'other' ? 'selected' : '' }}>Other</option>
                            </select>
                            @error('platform')
                            <span class="error-text">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group-custom" style="margin-bottom: 0;">
                            <label>Platform Icon</label>
                            <input type="text"
                                name="platform_icon"
                                class="form-control-custom @error('platform_icon') is-invalid @enderror"
                                value="{{ old('platform_icon', $testimonial->platform_icon ?? '') }}"
                                placeholder="e.g., bi bi-google">
                            @error('platform_icon')
                            <span class="error-text">{{ $message }}</span>
                            @enderror
                            <span class="form-hint">Bootstrap icon class (e.g., bi bi-google)</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- SEO Section -->
            <div class="form-section">
                <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"
                        class="form-control-custom @error('meta_title') is-invalid @enderror"
                        value="{{ old('meta_title', $testimonial->meta_title ?? '') }}"
                        placeholder="SEO title (max 60 chars)">
                    @error('meta_title')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

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

        <!-- ===== RIGHT COLUMN ===== -->
        <div class="col-lg-4">

            <!-- Avatar -->
            <div class="form-section">
                <div class="section-header">
                    <i class="bi bi-person-circle"></i>
                    <h5>Avatar</h5>
                </div>

                <div class="form-group-custom" style="margin-bottom: 0;">
                    <input type="file"
                        name="avatar"
                        id="avatarInput"
                        class="form-control-custom @error('avatar') is-invalid @enderror"
                        accept="image/*"
                        style="display: none;"
                        onchange="previewAvatar(this)">
                    <div id="avatarPreview">
                        @if(isset($testimonial) && $testimonial->avatar)
                        <div class="avatar-preview-wrapper">
                            <img src="{{ asset('storage/' . $testimonial->avatar) }}" alt="Avatar">
                            <div>
                                <div class="file-name">Current Avatar</div>
                                <div class="file-size">Click below to change</div>
                            </div>
                            <button type="button" class="remove-file" onclick="removeAvatar()">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                        @else
                        <div class="file-upload-area" onclick="document.getElementById('avatarInput').click()">
                            <i class="bi bi-cloud-upload"></i>
                            <p>Click to upload avatar</p>
                            <small>PNG, JPG, WEBP (Max 2MB)</small>
                        </div>
                        @endif
                    </div>
                    @error('avatar')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                    <span class="form-hint">Recommended: Square image, max 2MB</span>
                </div>
            </div>

            <!-- Rating & Status -->
            <div class="form-section">
                <div class="section-header">
                    <i class="bi bi-star"></i>
                    <h5>Rating &amp; Status</h5>
                </div>

                <!-- Rating -->
                <div class="form-group-custom">
                    <label>Rating <span class="required">*</span></label>
                    <select name="rating" class="form-control-custom @error('rating') is-invalid @enderror" required>
                        <option value="5" {{ old('rating', $testimonial->rating ?? 5) == 5 ? 'selected' : '' }}>⭐⭐⭐⭐⭐ (5)</option>
                        <option value="4" {{ old('rating', $testimonial->rating ?? 5) == 4 ? 'selected' : '' }}>⭐⭐⭐⭐ (4)</option>
                        <option value="3" {{ old('rating', $testimonial->rating ?? 5) == 3 ? 'selected' : '' }}>⭐⭐⭐ (3)</option>
                        <option value="2" {{ old('rating', $testimonial->rating ?? 5) == 2 ? 'selected' : '' }}>⭐⭐ (2)</option>
                        <option value="1" {{ old('rating', $testimonial->rating ?? 5) == 1 ? 'selected' : '' }}>⭐ (1)</option>
                    </select>
                    @error('rating')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Status -->
                <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', $testimonial->status ?? 'draft') == 'draft' ? 'selected' : '' }}>Draft</option>
                        <option value="published" {{ old('status', $testimonial->status ?? 'draft') == 'published' ? 'selected' : '' }}>Published</option>
                    </select>
                    @error('status')
                    <span class="error-text">{{ $message }}</span>
                    @enderror
                </div>

                <!-- Featured -->
                <div class="form-group-custom">
                    <div style="display: flex; align-items: center; gap: 12px; padding-top: 6px;">
                        <input type="hidden" name="is_featured" value="0">
                        <input type="checkbox"
                            name="is_featured"
                            id="is_featured"
                            value="1"
                            {{ old('is_featured', $testimonial->is_featured ?? 0) ? 'checked' : '' }}
                            style="width: 18px; height: 18px; accent-color: #C1121F; cursor: pointer;">
                        <label for="is_featured" style="font-size: 13px; font-weight: 500; color: #1A1A2E; cursor: pointer;">
                            <i class="bi bi-star" style="color: #F59E0B;"></i> Featured Testimonial
                        </label>
                    </div>
                    <span class="form-hint">Featured testimonials appear on the homepage</span>
                </div>

                <!-- Sort Order -->
                <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', $testimonial->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>


    <!-- ===== 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($testimonial) && $testimonial->exists)
        {{-- EDIT MODE --}}
        @if($testimonial->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 Testimonial
        </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 Testimonial
        </button>
        @endif

        <a href="{{ route('admin.testimonials.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';

        // ============================================
        // AVATAR PREVIEW
        // ============================================
        window.previewAvatar = function(input) {
            const previewContainer = document.getElementById('avatarPreview');
            const file = input.files[0];

            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    previewContainer.innerHTML = `
                        <div class="avatar-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="removeAvatar()">
                                <i class="bi bi-x-circle"></i>
                            </button>
                        </div>
                    `;
                };
                reader.readAsDataURL(file);
            }
        };

        // ============================================
        // REMOVE AVATAR
        // ============================================
        window.removeAvatar = function() {
            const previewContainer = document.getElementById('avatarPreview');
            const imageInput = document.getElementById('avatarInput');

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

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

        // ============================================
        // FORM VALIDATION
        // ============================================
        const form = document.getElementById('testimonialForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                const name = document.querySelector('input[name="name"]');
                if (name && !name.value.trim()) {
                    e.preventDefault();
                    name.classList.add('is-invalid');
                    alert('Please enter client name.');
                    name.focus();
                }
            });

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

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