@extends('layouts.app')

@section('title', session('locale', 'en') === 'fr' ? 'Modifier l’annonce' : 'Edit Listing')
@section('page-title', session('locale', 'en') === 'fr' ? 'Modifier l’annonce' : 'Edit Listing')

@section('content')

@php
    $lang = session('locale', 'en'); 
  
    $t = [ 
        'en' => [
            'seller_panel' => 'SELLER PANEL',
            'page_title' => 'Edit Listing',
            'subtitle' => 'Update the listing and the form will show the correct fields for its category.',
            'back' => '← Back to Dashboard',
            'current_photos' => 'Current Photos',
            'replace_photos' => 'Replace Photos',
            'replace_photos_help' => 'Leave empty to keep the current photos. Maximum 4.',
            'current_video' => 'Current Video',
            'remove_current_video' => 'Remove current video',
            'replace_video' => 'Replace Video',
            'video_help' => 'Upload a new video or paste a YouTube link.',
            'optional' => 'OPTIONAL',
            'upload_video' => 'Upload Video',
            'youtube_link' => 'YouTube Link',
            'basic_info' => 'Basic Information',
            'listing_title' => 'Listing Title',
            'category' => 'Category',
            'choose_category' => 'Choose a category',
            'men' => 'Men',
            'women' => 'Women',
            'kids' => 'Kids',
            'shoes' => 'Shoes',
            'bags' => 'Bags',
            'accessories' => 'Accessories',
            'services' => 'Services',
            'clothing_details' => 'Clothing Details',
            'shoe_details' => 'Shoe Details',
            'service_details' => 'Service Details',
            'clothing_type' => 'Clothing Type',
            'shoe_type' => 'Shoe Type',
            'service_type' => 'Service Type',
            'brand' => 'Brand',
            'size' => 'Size',
            'shoe_size' => 'Shoe Size',
            'shoe_width' => 'Shoe Width',
            'color' => 'Color',
            'material' => 'Material',
            'condition' => 'Condition',
            'pricing_type' => 'Pricing Type',
            'fixed_price' => 'Fixed Price',
            'hourly' => 'Hourly',
            'starting_from' => 'Starting From',
            'duration' => 'Estimated Duration',
            'availability' => 'Availability',
            'service_area' => 'Service Area',
            'price_contact' => 'Price & Contact',
            'price' => 'Price',
            'discount_price' => 'Discount Price',
            'status' => 'Status',
            'available' => 'Available',
            'sold' => 'Sold',
            'location' => 'Location',
            'phone' => 'Phone Number',
            'whatsapp' => 'WhatsApp',
            'description' => 'Description',
            'description_help' => 'Format your description and add professional clickable links.',
            'link_text' => 'Link text',
            'link_url' => 'Link URL',
            'insert_link' => 'Insert link',
            'remove_format' => 'Clear formatting',
            'new' => 'New',
            'like_new' => 'Like New',
            'good' => 'Good',
            'used' => 'Used',
            'cancel' => 'Cancel',
            'update' => 'Update Listing',
            'updating' => 'Updating...',
            'please_wait' => 'Please wait while your changes are saved.',
            'only_4' => 'You can upload a maximum of 4 photos.',
            'invalid_video' => 'Please select an MP4, MOV or WebM video.',
            'large_video' => 'The video must be smaller than 30 MB.',
        ],
        'fr' => [
            'seller_panel' => 'PANNEAU VENDEUR',
            'page_title' => 'Modifier l’annonce',
            'subtitle' => 'Modifiez l’annonce et le formulaire affichera les bons champs selon sa catégorie.',
            'back' => '← Retour au tableau de bord',
            'current_photos' => 'Photos actuelles',
            'replace_photos' => 'Remplacer les photos',
            'replace_photos_help' => 'Laissez vide pour conserver les photos actuelles. Maximum 4.',
            'current_video' => 'Vidéo actuelle',
            'remove_current_video' => 'Supprimer la vidéo actuelle',
            'replace_video' => 'Remplacer la vidéo',
            'video_help' => 'Téléversez une nouvelle vidéo ou ajoutez un lien YouTube.',
            'optional' => 'FACULTATIF',
            'upload_video' => 'Téléverser une vidéo',
            'youtube_link' => 'Lien YouTube',
            'basic_info' => 'Informations principales',
            'listing_title' => 'Titre de l’annonce',
            'category' => 'Catégorie',
            'choose_category' => 'Choisir une catégorie',
            'men' => 'Hommes',
            'women' => 'Femmes',
            'kids' => 'Enfants',
            'shoes' => 'Chaussures',
            'bags' => 'Sacs',
            'accessories' => 'Accessoires',
            'services' => 'Services',
            'clothing_details' => 'Détails du vêtement',
            'shoe_details' => 'Détails des chaussures',
            'service_details' => 'Détails du service',
            'clothing_type' => 'Type de vêtement',
            'shoe_type' => 'Type de chaussure',
            'service_type' => 'Type de service',
            'brand' => 'Marque',
            'size' => 'Taille',
            'shoe_size' => 'Pointure',
            'shoe_width' => 'Largeur',
            'color' => 'Couleur',
            'material' => 'Matière',
            'condition' => 'État',
            'pricing_type' => 'Type de tarification',
            'fixed_price' => 'Prix fixe',
            'hourly' => 'À l’heure',
            'starting_from' => 'À partir de',
            'duration' => 'Durée estimée',
            'availability' => 'Disponibilité',
            'service_area' => 'Zone de service',
            'price_contact' => 'Prix et contact',
            'price' => 'Prix',
            'discount_price' => 'Prix réduit',
            'status' => 'Statut',
            'available' => 'Disponible',
            'sold' => 'Vendu',
            'location' => 'Localisation',
            'phone' => 'Numéro de téléphone',
            'whatsapp' => 'WhatsApp',
            'description' => 'Description',
            'description_help' => 'Mettez la description en forme et ajoutez des liens cliquables professionnels.',
            'link_text' => 'Texte du lien',
            'link_url' => 'Adresse du lien',
            'insert_link' => 'Insérer le lien',
            'remove_format' => 'Effacer la mise en forme',
            'new' => 'Neuf',
            'like_new' => 'Comme neuf',
            'good' => 'Bon',
            'used' => 'Usagé',
            'cancel' => 'Annuler',
            'update' => 'Mettre à jour',
            'updating' => 'Mise à jour...',
            'please_wait' => 'Veuillez patienter pendant l’enregistrement.',
            'only_4' => 'Vous pouvez ajouter un maximum de 4 photos.',
            'invalid_video' => 'Veuillez sélectionner une vidéo MP4, MOV ou WebM.',
            'large_video' => 'La vidéo doit être inférieure à 30 Mo.',
        ],
    ];

    $tr = $t[$lang] ?? $t['en'];

    $categoryLabels = [
        'Men' => $tr['men'],
        'Women' => $tr['women'],
        'Kids' => $tr['kids'],
        'Shoes' => $tr['shoes'],
        'Bags' => $tr['bags'],
        'Accessories' => $tr['accessories'],
        'Services' => $tr['services'],
    ];

    $images = is_array($product->images)
        ? $product->images
        : json_decode($product->images ?? '[]', true);

    $images = is_array($images) ? $images : [];

    $youtubeId = null;

    if ($product->video_url) {
        preg_match(
            '/(?:youtube\.com\/(?:watch\?v=|shorts\/|embed\/)|youtu\.be\/)([^&?\/]+)/',
            $product->video_url,
            $matches
        );

        $youtubeId = $matches[1] ?? null;
    }
@endphp

<div class="listing-page">

    <div class="listing-hero">
        <div>
            <span>{{ $tr['seller_panel'] }}</span>
            <h1>{{ $tr['page_title'] }}</h1>
            <p>{{ $tr['subtitle'] }}</p>
        </div>

        <a href="{{ route('dashboard') }}">
            {{ $tr['back'] }}
        </a>
    </div>

    @if($errors->any())
        <div class="validation-summary">
            <strong>
                {{ $lang === 'fr'
                    ? 'Veuillez corriger les erreurs suivantes :'
                    : 'Please correct the following errors:' }}
            </strong>

            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form
        id="listingForm"
        method="POST"
        action="{{ route('product.update', $product->id) }}"
        enctype="multipart/form-data"
        class="listing-form"
    >
        @csrf
        @method('PUT')

        <input type="hidden" id="brand" name="brand" value="{{ old('brand', $product->brand) }}">
        <input type="hidden" id="size" name="size" value="{{ old('size', $product->size) }}">
        <input type="hidden" id="condition" name="condition" value="{{ old('condition', $product->condition) }}">

        <section class="form-section">
            <div class="section-heading">
                <span>01</span>
                <div>
                    <h2>{{ $tr['current_photos'] }}</h2>
                    <p>{{ $tr['replace_photos_help'] }}</p>
                </div>
            </div>

            <div class="preview-grid current-grid">
                @forelse($images as $image)
                    <div class="preview-card">
                        <img src="{{ asset('storage/' . $image) }}" alt="{{ $product->title }}">
                    </div>
                @empty
                    <div class="empty-box">No photos</div>
                @endforelse
            </div>

            <div class="field">
                <label for="photos">{{ $tr['replace_photos'] }}</label>

                <input
                    type="file"
                    id="photos"
                    name="photos[]"
                    accept="image/jpeg,image/png,image/webp"
                    multiple
                    onchange="previewImages(event)"
                >

                <div id="photoPreview" class="preview-grid"></div>

                @error('photos')
                    <small class="error">{{ $message }}</small>
                @enderror

                @error('photos.*')
                    <small class="error">{{ $message }}</small>
                @enderror
            </div>
        </section>

        @if($product->video_path || $product->video_url)
            <section class="form-section">
                <div class="section-heading">
                    <span>02</span>
                    <div>
                        <h2>{{ $tr['current_video'] }}</h2>
                    </div>
                </div>

                <label class="remove-video-check">
                    <input
                        type="checkbox"
                        name="remove_video"
                        value="1"
                        {{ old('remove_video') ? 'checked' : '' }}
                    >
                    {{ $tr['remove_current_video'] }}
                </label>

                @if($product->video_path)
                    <video class="current-video" controls playsinline>
                        <source src="{{ asset('storage/' . $product->video_path) }}">
                    </video>
                @elseif($youtubeId)
                    <div class="youtube-current">
                        <iframe
                            src="https://www.youtube.com/embed/{{ $youtubeId }}"
                            allowfullscreen
                        ></iframe>
                    </div>
                @endif
            </section>
        @endif

        <section class="form-section">
            <div class="section-heading">
                <span>03</span>
                <div>
                    <div class="optional-badge">{{ $tr['optional'] }}</div>
                    <h2>{{ $tr['replace_video'] }}</h2>
                    <p>{{ $tr['video_help'] }}</p>
                </div>
            </div>

            <div class="video-choice">
                <button
                    type="button"
                    class="video-choice-button active"
                    data-video-choice="upload"
                    onclick="selectVideoType('upload')"
                >
                    <span class="video-choice-icon">⬆</span>
                    <span>
                        <strong>{{ $tr['upload_video'] }}</strong>
                        <small>MP4, MOV, WebM · 30 MB</small>
                    </span>
                </button>

                <button
                    type="button"
                    class="video-choice-button"
                    data-video-choice="youtube"
                    onclick="selectVideoType('youtube')"
                >
                    <span class="video-choice-icon youtube-icon">▶</span>
                    <span>
                        <strong>{{ $tr['youtube_link'] }}</strong>
                        <small>youtube.com / youtu.be</small>
                    </span>
                </button>
            </div>

            <div id="videoUploadBox" class="video-input-box">
                <input
                    type="file"
                    id="video"
                    name="video"
                    accept="video/mp4,video/quicktime,video/webm"
                    onchange="previewVideo(event)"
                >

                <div id="videoPreviewContainer" class="video-preview-container">
                    <video id="videoPreview" controls playsinline></video>
                    <button type="button" onclick="removeVideo()">×</button>
                </div>
            </div>

            <div id="youtubeBox" class="video-input-box hidden">
                <div class="youtube-input-wrapper">
                    <span>▶</span>
                    <input
                        type="url"
                        id="video_url"
                        name="video_url"
                        value="{{ old('video_url') }}"
                        placeholder="https://www.youtube.com/watch?v=..."
                        oninput="previewYouTube(this.value)"
                    >
                </div>

                <div id="youtubePreviewContainer" class="youtube-preview-container">
                    <iframe id="youtubePreview" src="" allowfullscreen></iframe>
                </div>
            </div>
        </section>

        <section class="form-section">
            <div class="section-heading">
                <span>04</span>
                <div>
                    <h2>{{ $tr['basic_info'] }}</h2>
                </div>
            </div>

            <div class="form-grid">
                <div class="field">
                    <label for="title">{{ $tr['listing_title'] }}</label>
                    <input
                        id="title"
                        name="title"
                        value="{{ old('title', $product->title) }}"
                        required
                    >
                </div>

                <div class="field">
                    <label for="category">{{ $tr['category'] }}</label>

                    <select
                        id="category"
                        name="category"
                        required
                        onchange="updateCategoryFields()"
                    >
                        <option value="">{{ $tr['choose_category'] }}</option>

                        @foreach($categoryLabels as $value => $label)
                            <option
                                value="{{ $value }}"
                                {{ old('category', $product->category) === $value ? 'selected' : '' }}
                            >
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </section>

        <section id="clothingSection" class="form-section dynamic-section hidden">
            <div class="section-heading clothing-heading">
                <span>05</span>
                <div><h2>{{ $tr['clothing_details'] }}</h2></div>
            </div>

            <div class="form-grid three">
                <div class="field">
                    <label>{{ $tr['clothing_type'] }}</label>
                    <input id="clothing_type" placeholder="Jacket, dress, shirt...">
                </div>

                <div class="field">
                    <label>{{ $tr['brand'] }}</label>
                    <input id="clothing_brand" value="{{ old('brand', $product->brand) }}">
                </div>

                <div class="field">
                    <label>{{ $tr['size'] }}</label>
                    <input id="clothing_size" value="{{ old('size', $product->size) }}">
                </div>
            </div>

            <div class="form-grid three">
                <div class="field">
                    <label>{{ $tr['color'] }}</label>
                    <input id="clothing_color">
                </div>

                <div class="field">
                    <label>{{ $tr['material'] }}</label>
                    <input id="clothing_material">
                </div>

                <div class="field">
                    <label>{{ $tr['condition'] }}</label>

                    <select id="clothing_condition">
                        @foreach(['New' => $tr['new'], 'Like New' => $tr['like_new'], 'Good' => $tr['good'], 'Used' => $tr['used']] as $value => $label)
                            <option
                                value="{{ $value }}"
                                {{ old('condition', $product->condition) === $value ? 'selected' : '' }}
                            >
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </section>

        <section id="shoeSection" class="form-section dynamic-section hidden">
            <div class="section-heading shoe-heading">
                <span>05</span>
                <div><h2>{{ $tr['shoe_details'] }}</h2></div>
            </div>

            <div class="form-grid three">
                <div class="field">
                    <label>{{ $tr['shoe_type'] }}</label>
                    <input id="shoe_type">
                </div>

                <div class="field">
                    <label>{{ $tr['brand'] }}</label>
                    <input id="shoe_brand" value="{{ old('brand', $product->brand) }}">
                </div>

                <div class="field">
                    <label>{{ $tr['shoe_size'] }}</label>
                    <input id="shoe_size" value="{{ old('size', $product->size) }}">
                </div>
            </div>

            <div class="form-grid three">
                <div class="field">
                    <label>{{ $tr['shoe_width'] }}</label>
                    <input id="shoe_width">
                </div>

                <div class="field">
                    <label>{{ $tr['material'] }}</label>
                    <input id="shoe_material">
                </div>

                <div class="field">
                    <label>{{ $tr['condition'] }}</label>

                    <select id="shoe_condition">
                        @foreach(['New' => $tr['new'], 'Like New' => $tr['like_new'], 'Good' => $tr['good'], 'Used' => $tr['used']] as $value => $label)
                            <option
                                value="{{ $value }}"
                                {{ old('condition', $product->condition) === $value ? 'selected' : '' }}
                            >
                                {{ $label }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </section>

        <section id="serviceSection" class="form-section dynamic-section hidden">
            <div class="section-heading service-heading">
                <span>05</span>
                <div><h2>{{ $tr['service_details'] }}</h2></div>
            </div>

            <div class="form-grid">
                <div class="field">
                    <label>{{ $tr['service_type'] }}</label>
                    <input id="service_type" value="{{ old('brand', $product->brand) }}">
                </div>

                <div class="field">
                    <label>{{ $tr['pricing_type'] }}</label>

                    <select id="pricing_type">
                        <option value="Fixed Price">{{ $tr['fixed_price'] }}</option>
                        <option value="Hourly">{{ $tr['hourly'] }}</option>
                        <option value="Starting From">{{ $tr['starting_from'] }}</option>
                    </select>
                </div>
            </div>

            <div class="form-grid three">
                <div class="field">
                    <label>{{ $tr['duration'] }}</label>
                    <input id="service_duration" value="{{ old('size', $product->size) }}">
                </div>

                <div class="field">
                    <label>{{ $tr['availability'] }}</label>
                    <input id="service_availability">
                </div>

                <div class="field">
                    <label>{{ $tr['service_area'] }}</label>
                    <input id="service_area">
                </div>
            </div>
        </section>

        <section class="form-section">
            <div class="section-heading">
                <span>06</span>
                <div><h2>{{ $tr['price_contact'] }}</h2></div>
            </div>

            <div class="form-grid three">
                <div class="field">
                    <label>{{ $tr['price'] }}</label>
                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="price"
                        value="{{ old('price', $product->price) }}"
                        required
                    >
                </div>

                <div class="field">
                    <label>{{ $tr['discount_price'] }}</label>
                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="discount_price"
                        value="{{ old('discount_price', $product->discount_price) }}"
                    >
                </div>

                <div class="field">
                    <label>{{ $tr['status'] }}</label>

                    <select name="status">
                        <option
                            value="available"
                            {{ old('status', $product->status) === 'available' ? 'selected' : '' }}
                        >
                            {{ $tr['available'] }}
                        </option>

                        <option
                            value="sold"
                            {{ old('status', $product->status) === 'sold' ? 'selected' : '' }}
                        >
                            {{ $tr['sold'] }}
                        </option>
                    </select>
                </div>
            </div>

            <div class="field">
                <label>{{ $tr['location'] }}</label>
                <input
                    name="location"
                    value="{{ old('location', $product->location) }}"
                >
            </div>

            <div class="form-grid">
                <div class="field">
                    <label>{{ $tr['phone'] }}</label>
                    <input
                        name="phone_number"
                        value="{{ old('phone_number', $product->phone_number) }}"
                    >
                </div>

                <div class="field">
                    <label>{{ $tr['whatsapp'] }}</label>
                    <input
                        name="whatsapp"
                        value="{{ old('whatsapp', $product->whatsapp) }}"
                    >
                </div>
            </div>

            <div class="field rich-description-field">
                <label for="descriptionEditor">{{ $tr['description'] }}</label>
                <small class="field-help">{{ $tr['description_help'] }}</small>

                <div class="rich-editor-shell">
                    <div class="rich-toolbar" role="toolbar" aria-label="{{ $tr['description'] }}">
                        <button type="button" data-command="bold" title="Bold"><strong>B</strong></button>
                        <button type="button" data-command="italic" title="Italic"><em>I</em></button>
                        <button type="button" data-command="underline" title="Underline"><u>U</u></button>
                        <button type="button" data-command="strikeThrough" title="Strikethrough"><s>S</s></button>

                        <span class="toolbar-divider"></span>

                        <button type="button" data-command="insertUnorderedList" title="Bullet list">• List</button>
                        <button type="button" data-command="insertOrderedList" title="Numbered list">1. List</button>
                        <button type="button" data-block="blockquote" title="Quote">❝</button>

                        <span class="toolbar-divider"></span>

                        <button type="button" data-command="subscript" title="Subscript">X<sub>2</sub></button>
                        <button type="button" data-command="superscript" title="Superscript">X<sup>2</sup></button>
                        <button type="button" id="addDescriptionLink" class="link-tool" title="{{ $tr['insert_link'] }}">🔗 Link</button>
                        <button type="button" data-command="unlink" title="Remove link">Unlink</button>
                        <button type="button" data-command="removeFormat" title="{{ $tr['remove_format'] }}">Tx</button>
                    </div>

                    <div
                        id="descriptionEditor"
                        class="rich-editor"
                        contenteditable="true"
                        role="textbox"
                        aria-multiline="true"
                        data-placeholder="{{ $lang === 'fr' ? 'Décrivez clairement votre article ou service…' : 'Clearly describe your item or service…' }}"
                    ></div>
                </div>

                <textarea
                    id="description"
                    name="description"
                    class="rich-editor-storage"
                    rows="6"
                >{{ old('description', $product->description) }}</textarea>

                @error('description')
                    <small class="error">{{ $message }}</small>
                @enderror
            </div>
        </section>

        <div class="form-actions">
            <a href="{{ route('dashboard') }}">{{ $tr['cancel'] }}</a>
            <button id="submitButton" type="submit">{{ $tr['update'] }}</button>
        </div>
    </form>
</div>

<div id="loadingOverlay" class="loading-overlay">
    <div class="loading-card">
        <div class="loader"></div>
        <h2>{{ $tr['updating'] }}</h2>
        <p>{{ $tr['please_wait'] }}</p>
    </div>
</div>

<style>
*{box-sizing:border-box}
.listing-page{width:100%;max-width:1120px;margin:0 auto}
.listing-hero{display:flex;justify-content:space-between;gap:24px;padding:36px;margin-bottom:28px;border-radius:34px;color:#fff;background:radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 36%),linear-gradient(135deg,#4f46e5,#111827);box-shadow:0 25px 60px rgba(79,70,229,.24)}
.listing-hero span{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:950}
.listing-hero h1{margin:18px 0 8px;font-size:clamp(31px,5vw,45px);font-weight:950}
.listing-hero p{margin:0;color:#c7d2fe;font-weight:600}
.listing-hero>a{height:fit-content;padding:14px 20px;border-radius:16px;background:#fff;color:#111827;text-decoration:none;font-weight:950}
.validation-summary{padding:20px;margin-bottom:20px;border:1px solid #fecaca;border-radius:18px;background:#fef2f2;color:#991b1b}
.listing-form{padding:32px;border:1px solid #e5e7eb;border-radius:34px;background:#fff;box-shadow:0 20px 45px rgba(15,23,42,.07)}
.form-section{padding:28px;margin-bottom:25px;border:1px solid #e2e8f0;border-radius:28px;background:#fff}
.section-heading{display:flex;gap:14px;margin-bottom:24px}
.section-heading>span{display:flex;align-items:center;justify-content:center;flex:0 0 45px;width:45px;height:45px;border-radius:15px;background:#eef2ff;color:#4f46e5;font-weight:950}
.section-heading h2{margin:0 0 5px;font-size:23px;font-weight:950}.section-heading p{margin:0;color:#64748b}
.clothing-heading>span{background:#ecfdf5;color:#047857}.shoe-heading>span{background:#eff6ff;color:#1d4ed8}.service-heading>span{background:#ecfeff;color:#0e7490}
.optional-badge{display:inline-flex;margin-bottom:7px;padding:5px 10px;border-radius:999px;background:#eef2ff;color:#4f46e5;font-size:10px;font-weight:950}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:21px;margin-top:22px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{margin-top:22px}.form-grid .field{margin-top:0}.field label{display:block;margin-bottom:9px;color:#334155;font-weight:950}
.field input,.field select,.field textarea{width:100%;padding:16px 18px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;font:inherit;font-weight:700;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#4f46e5;background:#fff;box-shadow:0 0 0 5px rgba(79,70,229,.11)}
#photos,#video{width:100%;padding:20px;border:2px dashed #cbd5e1;border-radius:18px;background:#f8fafc}
.preview-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px}.preview-card{height:175px;overflow:hidden;border:2px solid #e2e8f0;border-radius:18px}.preview-card img{width:100%;height:100%;object-fit:cover}
.empty-box{grid-column:1/-1;padding:30px;border:1px dashed #cbd5e1;border-radius:18px;text-align:center;color:#64748b}
.remove-video-check{display:inline-flex;align-items:center;gap:9px;margin-bottom:16px;color:#dc2626;font-weight:900}.current-video{display:block;width:100%;max-height:520px;border-radius:20px;background:#000}.youtube-current{overflow:hidden;aspect-ratio:16/9;border-radius:20px}.youtube-current iframe{width:100%;height:100%;border:0}
.video-choice{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.video-choice-button{display:flex;align-items:center;gap:13px;padding:18px;border:2px solid #e2e8f0;border-radius:20px;background:#f8fafc;text-align:left}.video-choice-button.active{border-color:#4f46e5;background:#eef2ff}.video-choice-icon{display:flex;align-items:center;justify-content:center;width:47px;height:47px;border-radius:15px;background:#fff;color:#4f46e5}.youtube-icon{color:#dc2626}
.video-choice-button strong,.video-choice-button small{display:block}.video-choice-button small{margin-top:4px;color:#64748b}
.video-input-box{margin-top:20px}.youtube-input-wrapper{display:flex;align-items:center;gap:12px;padding:0 17px;border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc}.youtube-input-wrapper input{width:100%;padding:17px 0;border:0;background:transparent;outline:0}
.video-preview-container{position:relative;display:none;overflow:hidden;margin-top:18px;border-radius:20px;background:#000}.video-preview-container.show{display:block}.video-preview-container video{width:100%;max-height:500px}.video-preview-container button{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:#dc2626;color:#fff;font-size:22px}
.youtube-preview-container{display:none;overflow:hidden;margin-top:18px;aspect-ratio:16/9;border-radius:20px;background:#000}.youtube-preview-container.show{display:block}.youtube-preview-container iframe{width:100%;height:100%;border:0}
.hidden{display:none!important}.form-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:30px}.form-actions a,.form-actions button{padding:15px 27px;border-radius:18px;font-weight:950}.form-actions a{background:#f1f5f9;color:#334155;text-decoration:none}.form-actions button{border:0;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}
.rich-description-field .field-help{display:block;margin:-2px 0 12px;color:#64748b;font-weight:650}
.rich-editor-shell{overflow:hidden;border:1px solid #e2e8f0;border-radius:20px;background:#fff;transition:.2s}
.rich-editor-shell:focus-within{border-color:#4f46e5;box-shadow:0 0 0 5px rgba(79,70,229,.11)}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:7px;padding:11px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.rich-toolbar button{min-width:38px;height:38px;padding:0 11px;border:1px solid #dbe2ea;border-radius:10px;background:#fff;color:#334155;font:inherit;font-size:13px;font-weight:900;cursor:pointer}
.rich-toolbar button:hover,.rich-toolbar button.active{border-color:#4f46e5;background:#eef2ff;color:#4338ca}
.rich-toolbar .link-tool{color:#2563eb}
.toolbar-divider{width:1px;height:28px;margin:5px 2px;background:#dbe2ea}
.rich-editor{min-height:210px;padding:18px;background:#fff;color:#0f172a;font:inherit;font-weight:600;line-height:1.75;outline:none;overflow-wrap:anywhere}
.rich-editor:empty:before{content:attr(data-placeholder);color:#94a3b8;pointer-events:none}
.rich-editor a{color:#2563eb;text-decoration:underline;font-weight:850}
.rich-editor blockquote{margin:14px 0;padding:12px 16px;border-left:4px solid #6366f1;border-radius:0 12px 12px 0;background:#eef2ff;color:#3730a3}
.rich-editor ul,.rich-editor ol{padding-left:25px}
.rich-editor-storage{display:none!important}
.error{display:block;margin-top:8px;color:#dc2626;font-weight:800}
.loading-overlay{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.76);backdrop-filter:blur(8px)}.loading-card{width:90%;max-width:390px;padding:35px;border-radius:28px;background:#fff;text-align:center}.loader{width:65px;height:65px;margin:0 auto 20px;border:7px solid #e0e7ff;border-top-color:#4f46e5;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:850px){.listing-hero{flex-direction:column}.listing-hero>a{width:100%;text-align:center}.form-grid,.form-grid.three,.video-choice{grid-template-columns:1fr}.preview-grid{grid-template-columns:repeat(2,1fr)}.listing-form{padding:20px}.form-section{padding:21px}.form-actions{flex-direction:column}.form-actions a,.form-actions button{width:100%;text-align:center}}
@media(max-width:520px){.listing-hero{padding:25px 20px;border-radius:25px}.listing-form{padding:13px;border-radius:24px}.form-section{padding:17px;border-radius:21px}.section-heading{flex-direction:column}.preview-card{height:140px}}
</style>

<script>
const currentLang = @json($lang);

const messages = {
    en: {
        only4: 'You can upload a maximum of 4 photos.',
        invalidVideo: 'Please select an MP4, MOV or WebM video.',
        largeVideo: 'The video must be smaller than 30 MB.',
        updating: 'Updating...'
    },
    fr: {
        only4: 'Vous pouvez ajouter un maximum de 4 photos.',
        invalidVideo: 'Veuillez sélectionner une vidéo MP4, MOV ou WebM.',
        largeVideo: 'La vidéo doit être inférieure à 30 Mo.',
        updating: 'Mise à jour...'
    }
};

let videoObjectUrl = null;

function disableSection(section) {
    section.classList.add('hidden');
    section.querySelectorAll('input, select, textarea').forEach(field => field.disabled = true);
}

function enableSection(section) {
    section.classList.remove('hidden');
    section.querySelectorAll('input, select, textarea').forEach(field => field.disabled = false);
}

function updateCategoryFields() {
    const category = document.getElementById('category').value;
    const clothing = document.getElementById('clothingSection');
    const shoes = document.getElementById('shoeSection');
    const service = document.getElementById('serviceSection');

    [clothing, shoes, service].forEach(disableSection);

    if (['Men', 'Women', 'Kids', 'Bags', 'Accessories'].includes(category)) {
        enableSection(clothing);
    } else if (category === 'Shoes') {
        enableSection(shoes);
    } else if (category === 'Services') {
        enableSection(service);
    }
}

function syncCategoryValues() {
    const category = document.getElementById('category').value;
    const brand = document.getElementById('brand');
    const size = document.getElementById('size');
    const condition = document.getElementById('condition');
    const description = document.getElementById('description');
    const original = description.value.trim();
    const details = [];

    if (['Men', 'Women', 'Kids', 'Bags', 'Accessories'].includes(category)) {
        brand.value = document.getElementById('clothing_brand').value.trim();
        size.value = document.getElementById('clothing_size').value.trim();
        condition.value = document.getElementById('clothing_condition').value;

        const type = document.getElementById('clothing_type').value.trim();
        const color = document.getElementById('clothing_color').value.trim();
        const material = document.getElementById('clothing_material').value.trim();

        if (type) details.push('Type: ' + type);
        if (color) details.push('Color: ' + color);
        if (material) details.push('Material: ' + material);
    }

    if (category === 'Shoes') {
        brand.value = document.getElementById('shoe_brand').value.trim();
        size.value = document.getElementById('shoe_size').value.trim();
        condition.value = document.getElementById('shoe_condition').value;

        const type = document.getElementById('shoe_type').value.trim();
        const width = document.getElementById('shoe_width').value.trim();
        const material = document.getElementById('shoe_material').value.trim();

        if (type) details.push('Shoe type: ' + type);
        if (width) details.push('Width: ' + width);
        if (material) details.push('Material: ' + material);
    }

    if (category === 'Services') {
        brand.value = document.getElementById('service_type').value.trim();
        size.value = document.getElementById('service_duration').value.trim();
        condition.value = 'Service';

        const pricing = document.getElementById('pricing_type').value;
        const availability = document.getElementById('service_availability').value.trim();
        const area = document.getElementById('service_area').value.trim();

        if (pricing) details.push('Pricing: ' + pricing);
        if (availability) details.push('Availability: ' + availability);
        if (area) details.push('Service area: ' + area);
    }

    const detailText = details.join('\n');

    if (detailText && !original.includes(detailText)) {
        description.value = original ? original + '\n\n' + detailText : detailText;
    }
}


function sanitizeEditorHtml(html) {
    const template = document.createElement('template');
    template.innerHTML = html;

    const allowedTags = new Set([
        'P', 'BR', 'STRONG', 'B', 'EM', 'I', 'U', 'S',
        'UL', 'OL', 'LI', 'BLOCKQUOTE', 'A', 'SUB', 'SUP', 'DIV'
    ]);

    template.content.querySelectorAll('*').forEach(element => {
        if (!allowedTags.has(element.tagName)) {
            element.replaceWith(...element.childNodes);
            return;
        }

        [...element.attributes].forEach(attribute => {
            if (element.tagName === 'A' && ['href', 'target', 'rel'].includes(attribute.name)) {
                return;
            }

            element.removeAttribute(attribute.name);
        });

        if (element.tagName === 'A') {
            const href = (element.getAttribute('href') || '').trim();

            if (!/^https?:\/\//i.test(href) && !/^mailto:/i.test(href) && !/^tel:/i.test(href)) {
                element.removeAttribute('href');
            } else {
                element.setAttribute('target', '_blank');
                element.setAttribute('rel', 'noopener noreferrer nofollow');
            }
        }
    });

    return template.innerHTML.trim();
}

function syncRichDescription() {
    const editor = document.getElementById('descriptionEditor');
    const storage = document.getElementById('description');

    storage.value = sanitizeEditorHtml(editor.innerHTML);
}

function initializeRichEditor() {
    const editor = document.getElementById('descriptionEditor');
    const storage = document.getElementById('description');
    const savedValue = storage.value || '';

    // Existing plain-text descriptions remain readable; saved rich HTML is restored.
    if (/<[a-z][\s\S]*>/i.test(savedValue)) {
        editor.innerHTML = sanitizeEditorHtml(savedValue);
    } else {
        editor.innerText = savedValue;
    }

    document.querySelectorAll('.rich-toolbar [data-command]').forEach(button => {
        button.addEventListener('click', function () {
            editor.focus();
            document.execCommand(this.dataset.command, false, null);
            syncRichDescription();
        });
    });

    document.querySelectorAll('.rich-toolbar [data-block]').forEach(button => {
        button.addEventListener('click', function () {
            editor.focus();
            document.execCommand('formatBlock', false, this.dataset.block);
            syncRichDescription();
        });
    });

    document.getElementById('addDescriptionLink').addEventListener('click', function () {
        editor.focus();

        const selectedText = window.getSelection().toString().trim();
        const label = currentLang === 'fr' ? 'Adresse du lien (https://...)' : 'Link URL (https://...)';
        let url = window.prompt(label, 'https://');

        if (!url) return;

        url = url.trim();

        if (!/^(https?:\/\/|mailto:|tel:)/i.test(url)) {
            url = 'https://' + url;
        }

        if (selectedText) {
            document.execCommand('createLink', false, url);
        } else {
            const linkText = window.prompt(
                currentLang === 'fr' ? 'Texte à afficher' : 'Text to display',
                url
            );

            if (!linkText) return;

            const safeUrl = url.replace(/"/g, '&quot;');
            const safeText = linkText
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;');

            document.execCommand(
                'insertHTML',
                false,
                '<a href="' + safeUrl + '" target="_blank" rel="noopener noreferrer nofollow">' +
                    safeText +
                '</a>'
            );
        }

        syncRichDescription();
    });

    editor.addEventListener('input', syncRichDescription);
    editor.addEventListener('blur', syncRichDescription);

    editor.addEventListener('paste', function (event) {
        const pastedText = (event.clipboardData || window.clipboardData).getData('text/plain').trim();

        if (/^https?:\/\/\S+$/i.test(pastedText)) {
            event.preventDefault();

            const safeUrl = pastedText.replace(/"/g, '&quot;');
            document.execCommand(
                'insertHTML',
                false,
                '<a href="' + safeUrl + '" target="_blank" rel="noopener noreferrer nofollow">' +
                    pastedText.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') +
                '</a>'
            );

            syncRichDescription();
        }
    });
}

function previewImages(event) {
    const files = Array.from(event.target.files || []);
    const preview = document.getElementById('photoPreview');

    preview.innerHTML = '';

    if (files.length > 4) {
        alert(messages[currentLang].only4);
        event.target.value = '';
        return;
    }

    files.forEach(file => {
        const reader = new FileReader();

        reader.onload = e => {
            const card = document.createElement('div');
            const image = document.createElement('img');

            card.className = 'preview-card';
            image.src = e.target.result;

            card.appendChild(image);
            preview.appendChild(card);
        };

        reader.readAsDataURL(file);
    });
}

function selectVideoType(type) {
    const uploadBox = document.getElementById('videoUploadBox');
    const youtubeBox = document.getElementById('youtubeBox');

    document.querySelectorAll('[data-video-choice]').forEach(button => {
        button.classList.toggle('active', button.dataset.videoChoice === type);
    });

    if (type === 'upload') {
        uploadBox.classList.remove('hidden');
        youtubeBox.classList.add('hidden');
        document.getElementById('video_url').value = '';
        clearYouTube();
    } else {
        uploadBox.classList.add('hidden');
        youtubeBox.classList.remove('hidden');
        removeVideo();
    }
}

function previewVideo(event) {
    const file = event.target.files[0];

    if (!file) return removeVideo();

    if (!['video/mp4', 'video/quicktime', 'video/webm'].includes(file.type)) {
        alert(messages[currentLang].invalidVideo);
        event.target.value = '';
        return;
    }

    if (file.size > 30 * 1024 * 1024) {
        alert(messages[currentLang].largeVideo);
        event.target.value = '';
        return;
    }

    if (videoObjectUrl) URL.revokeObjectURL(videoObjectUrl);

    videoObjectUrl = URL.createObjectURL(file);

    document.getElementById('videoPreview').src = videoObjectUrl;
    document.getElementById('videoPreviewContainer').classList.add('show');
}

function removeVideo() {
    const input = document.getElementById('video');
    const preview = document.getElementById('videoPreview');

    if (videoObjectUrl) URL.revokeObjectURL(videoObjectUrl);

    videoObjectUrl = null;
    input.value = '';
    preview.removeAttribute('src');
    preview.load();

    document.getElementById('videoPreviewContainer').classList.remove('show');
}

function getYouTubeId(url) {
    const patterns = [
        /youtube\.com\/watch\?(?:.*&)?v=([^&]+)/i,
        /youtube\.com\/shorts\/([^?&/]+)/i,
        /youtube\.com\/embed\/([^?&/]+)/i,
        /youtu\.be\/([^?&/]+)/i
    ];

    for (const pattern of patterns) {
        const match = String(url).match(pattern);
        if (match && match[1]) return match[1];
    }

    return null;
}

function previewYouTube(url) {
    const id = getYouTubeId(url);

    if (!id) return clearYouTube();

    document.getElementById('youtubePreview').src =
        'https://www.youtube.com/embed/' + encodeURIComponent(id);

    document.getElementById('youtubePreviewContainer').classList.add('show');
}

function clearYouTube() {
    document.getElementById('youtubePreview').src = '';
    document.getElementById('youtubePreviewContainer').classList.remove('show');
}

document.addEventListener('DOMContentLoaded', function () {
    updateCategoryFields();
    initializeRichEditor();

    const oldYouTube = document.getElementById('video_url').value;

    if (oldYouTube) {
        selectVideoType('youtube');
        previewYouTube(oldYouTube);
    }

    document.getElementById('listingForm').addEventListener('submit', function () {
        syncRichDescription();
        syncCategoryValues();

        document.getElementById('loadingOverlay').style.display = 'flex';

        const button = document.getElementById('submitButton');
        button.disabled = true;
        button.innerText = messages[currentLang].updating;
    });
});
</script>

@endsection