@extends('layouts.app')

@section('title', session('locale','en') === 'fr' ? 'Créer une annonce' : 'Create Listing')
@section('page-title', session('locale','en') === 'fr' ? 'Créer une annonce' : 'Create Listing')

@section('content')

@php
    $lang = session('locale', 'en');

    $t = [
        'en' => [
            'seller_panel' => 'SELLER PANEL',
            'title' => 'Create a New Listing',
            'subtitle' => 'Choose a listing type and complete only the fields that apply.',
            'back' => '← Back to Dashboard',

            'basic' => 'Basic Information',
            'basic_help' => 'Start with a title and choose the correct category.',
            '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',

            'photos' => 'Photos',
            'photos_help' => 'Upload up to 4 clear photos. The first photo will be the main photo.',
            'choose_photos' => 'Choose Photos',
            'photos_selected' => 'photos selected',
            'remove_all' => 'Remove All',
            'main_photo' => 'Main Photo',

            'video' => 'Video',
            'video_help' => 'Upload a short video or add a YouTube link.',
            'upload_video' => 'Upload Video',
            'youtube' => 'YouTube Link',

            'common' => '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.',
            'insert_link' => 'Insert link',
            'remove_link' => 'Remove link',
            'clear_format' => 'Clear formatting',

            'clothing_details' => 'Clothing Details',
            'clothing_help' => 'Add size, color, material and clothing type.',
            'clothing_type' => 'Clothing Type',
            'size' => 'Size',
            'brand' => 'Brand',
            'color' => 'Color',
            'material' => 'Material',
            'condition' => 'Condition',

            'new' => 'New',
            'like_new' => 'Like New',
            'good' => 'Good',
            'used' => 'Used',

            'shoe_details' => 'Shoe Details',
            'shoe_help' => 'Add shoe type, size, width and material.',
            'shoe_type' => 'Shoe Type',
            'shoe_size' => 'Shoe Size',
            'shoe_width' => 'Shoe Width',

            'service_details' => 'Service Details',
            'service_help' => 'Describe the service, pricing method and availability.',
            'service_type' => 'Service Type',
            'pricing_type' => 'Pricing Type',
            'fixed_price' => 'Fixed Price',
            'hourly' => 'Hourly',
            'starting_from' => 'Starting From',
            'duration' => 'Estimated Duration',
            'service_area' => 'Service Area',
            'availability' => 'Availability',

            'cancel' => 'Cancel',
            'save' => 'Publish Listing',
            'uploading' => 'Publishing...',

            'only_4' => 'You can upload up to 4 photos.',
            'invalid_image' => 'Only JPG, PNG and WebP images are allowed.',
            'large_image' => 'Each photo must be smaller than 4 MB.',

            'invalid_video' => 'Please select MP4, MOV or WebM.',
            'large_video' => 'Video must be smaller than 30 MB.',

            'optional' => 'OPTIONAL',
        ],

        'fr' => [
            'seller_panel' => 'PANNEAU VENDEUR',
            'title' => 'Créer une nouvelle annonce',
            'subtitle' => 'Choisissez un type d’annonce et remplissez seulement les champs nécessaires.',
            'back' => '← Retour au tableau de bord',

            'basic' => 'Informations principales',
            'basic_help' => 'Commencez par un titre et choisissez la bonne catégorie.',
            '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',

            'photos' => 'Photos',
            'photos_help' => 'Ajoutez jusqu’à 4 photos. La première sera la photo principale.',
            'choose_photos' => 'Choisir des photos',
            'photos_selected' => 'photos sélectionnées',
            'remove_all' => 'Tout supprimer',
            'main_photo' => 'Photo principale',

            'video' => 'Vidéo',
            'video_help' => 'Téléversez une courte vidéo ou ajoutez un lien YouTube.',
            'upload_video' => 'Téléverser une vidéo',
            'youtube' => 'Lien YouTube',

            'common' => '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.',
            'insert_link' => 'Insérer un lien',
            'remove_link' => 'Supprimer le lien',
            'clear_format' => 'Effacer la mise en forme',

            'clothing_details' => 'Détails du vêtement',
            'clothing_help' => 'Ajoutez la taille, la couleur, la matière et le type.',
            'clothing_type' => 'Type de vêtement',
            'size' => 'Taille',
            'brand' => 'Marque',
            'color' => 'Couleur',
            'material' => 'Matière',
            'condition' => 'État',

            'new' => 'Neuf',
            'like_new' => 'Comme neuf',
            'good' => 'Bon',
            'used' => 'Usagé',

            'shoe_details' => 'Détails des chaussures',
            'shoe_help' => 'Ajoutez le type, la pointure, la largeur et la matière.',
            'shoe_type' => 'Type de chaussure',
            'shoe_size' => 'Pointure',
            'shoe_width' => 'Largeur',

            'service_details' => 'Détails du service',
            'service_help' => 'Décrivez le service, la tarification et la disponibilité.',
            'service_type' => 'Type de service',
            'pricing_type' => 'Type de tarification',
            'fixed_price' => 'Prix fixe',
            'hourly' => 'À l’heure',
            'starting_from' => 'À partir de',
            'duration' => 'Durée estimée',
            'service_area' => 'Zone de service',
            'availability' => 'Disponibilité',

            'cancel' => 'Annuler',
            'save' => 'Publier l’annonce',
            'uploading' => 'Publication...',

            'only_4' => 'Vous pouvez ajouter jusqu’à 4 photos.',
            'invalid_image' => 'Seules les images JPG, PNG et WebP sont acceptées.',
            'large_image' => 'Chaque photo doit être inférieure à 4 Mo.',

            'invalid_video' => 'Veuillez choisir une vidéo MP4, MOV ou WebM.',
            'large_video' => 'La vidéo doit être inférieure à 30 Mo.',

            'optional' => 'FACULTATIF',
        ],
    ];

    $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'],
    ];
@endphp


<div class="listing-page">

    {{-- ====================================================== --}}
    {{-- HERO --}}
    {{-- ====================================================== --}}

    <div class="hero-card">

        <div>
            <span>{{ $tr['seller_panel'] }}</span>

            <h1>{{ $tr['title'] }}</h1>

            <p>{{ $tr['subtitle'] }}</p>
        </div>

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

    </div>


    {{-- ====================================================== --}}
    {{-- VALIDATION ERRORS --}}
    {{-- ====================================================== --}}

    @if($errors->any())

        <div class="validation-box">

            <strong>
                {{ $lang === 'fr'
                    ? 'Veuillez corriger les erreurs :'
                    : 'Please correct these errors:'
                }}
            </strong>

            <ul>

                @foreach($errors->all() as $error)

                    <li>{{ $error }}</li>

                @endforeach

            </ul>

        </div>

    @endif


    {{-- ====================================================== --}}
    {{-- MAIN FORM --}}
    {{-- ====================================================== --}}

    <form
        id="listingForm"
        method="POST"
        action="{{ route('product.store') }}"
        enctype="multipart/form-data"
        class="listing-form"
    >

        @csrf


        {{-- ================================================== --}}
        {{-- 01 BASIC INFORMATION --}}
        {{-- ================================================== --}}

        <section class="form-section">

            <div class="section-title">

                <span>01</span>

                <div>
                    <h2>{{ $tr['basic'] }}</h2>
                    <p>{{ $tr['basic_help'] }}</p>
                </div>

            </div>


            <div class="form-grid">

                <div class="field">

                    <label for="title">
                        {{ $tr['listing_title'] }}
                    </label>

                    <input
                        id="title"
                        name="title"
                        value="{{ old('title') }}"
                        required
                        maxlength="255"
                        placeholder="Nike jacket, winter boots, tailoring service..."
                    >

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

                </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') === $value ? 'selected' : '' }}
                            >
                                {{ $label }}
                            </option>

                        @endforeach

                    </select>

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

                </div>

            </div>


            <div id="categoryHint" class="category-hint">

                <span class="hint-icon">
                    ✦
                </span>

                <p>
                    {{ $lang === 'fr'
                        ? 'Choisissez une catégorie pour afficher les champs adaptés.'
                        : 'Choose a category to display the correct fields.'
                    }}
                </p>

            </div>

        </section>


        {{-- ================================================== --}}
        {{-- 02 PHOTOS --}}
        {{-- ================================================== --}}

        <section class="form-section">

            <div class="section-title">

                <span>02</span>

                <div>

                    <h2>
                        {{ $tr['photos'] }}
                    </h2>

                    <p>
                        {{ $tr['photos_help'] }}
                    </p>

                </div>

            </div>


            <div class="field">

                {{-- UPLOAD AREA --}}

                <div class="photo-upload-box">

                    <input
                        type="file"
                        id="photos"
                        name="photos[]"
                        accept="image/jpeg,image/png,image/webp"
                        multiple
                        required
                    >

                    <div class="photo-upload-content">

                        <div class="photo-upload-icon">
                            📷
                        </div>

                        <strong>
                            {{ $tr['choose_photos'] }}
                        </strong>

                        <span>
                            JPG / PNG / WebP
                            ·
                            {{ $lang === 'fr' ? 'Maximum 4 photos' : 'Maximum 4 photos' }}
                            ·
                            {{ $lang === 'fr' ? '4 Mo chacune' : '4 MB each' }}
                        </span>

                        <small>
                            {{ $lang === 'fr'
                                ? 'Vous pouvez revenir et ajouter les photos une par une.'
                                : 'You can reopen the picker and add photos one by one.'
                            }}
                        </small>

                    </div>

                </div>


                {{-- SELECTED PHOTO INFORMATION --}}

                <div
                    id="photoInformation"
                    class="photo-information"
                    style="display:none;"
                >

                    <div>

                        <strong id="photoCount">
                            0 / 4
                        </strong>

                        <span>
                            {{ $tr['photos_selected'] }}
                        </span>

                    </div>


                    <button
                        type="button"
                        id="clearAllPhotos"
                        class="clear-photos-btn"
                    >
                        {{ $tr['remove_all'] }}
                    </button>

                </div>


                {{-- PREVIEW --}}

                <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>


        {{-- ================================================== --}}
        {{-- 03 VIDEO --}}
        {{-- ================================================== --}}

        <section class="form-section">

            <div class="section-title">

                <span>03</span>

                <div>

                    <div class="optional-badge">
                        {{ $tr['optional'] }}
                    </div>

                    <h2>
                        {{ $tr['video'] }}
                    </h2>

                    <p>
                        {{ $tr['video_help'] }}
                    </p>

                </div>

            </div>


            <div class="choice-grid">

                <button
                    type="button"
                    class="choice-button active"
                    data-video-choice="upload"
                    onclick="selectVideoType('upload')"
                >

                    <span>
                        ⬆
                    </span>

                    <div>

                        <strong>
                            {{ $tr['upload_video'] }}
                        </strong>

                        <small>
                            MP4, MOV, WebM · 30 MB
                        </small>

                    </div>

                </button>


                <button
                    type="button"
                    class="choice-button"
                    data-video-choice="youtube"
                    onclick="selectVideoType('youtube')"
                >

                    <span class="youtube-icon">
                        ▶
                    </span>

                    <div>

                        <strong>
                            {{ $tr['youtube'] }}
                        </strong>

                        <small>
                            youtube.com / youtu.be
                        </small>

                    </div>

                </button>

            </div>


            {{-- VIDEO UPLOAD --}}

            <div
                id="videoUploadBox"
                class="video-box"
            >

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


                <div
                    id="videoPreviewBox"
                    class="video-preview"
                >

                    <video
                        id="videoPreview"
                        controls
                        playsinline
                    ></video>

                    <button
                        type="button"
                        onclick="removeVideo()"
                    >
                        ×
                    </button>

                </div>


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

            </div>


            {{-- YOUTUBE --}}

            <div
                id="youtubeBox"
                class="video-box hidden"
            >

                <div class="youtube-input">

                    <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="youtubePreviewBox"
                    class="youtube-preview"
                >

                    <iframe
                        id="youtubePreview"
                        src=""
                        allowfullscreen
                    ></iframe>

                </div>


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

            </div>

        </section>


        {{-- ================================================== --}}
        {{-- CLOTHING --}}
        {{-- ================================================== --}}

        <section
            id="clothingSection"
            class="form-section dynamic-section hidden"
        >

            <div class="section-title clothing-title">

                <span>04</span>

                <div>

                    <h2>
                        {{ $tr['clothing_details'] }}
                    </h2>

                    <p>
                        {{ $tr['clothing_help'] }}
                    </p>

                </div>

            </div>


            <div class="form-grid three">

                <div class="field">

                    <label>
                        {{ $tr['clothing_type'] }}
                    </label>

                    <input
                        name="clothing_type"
                        value="{{ old('clothing_type') }}"
                        placeholder="Jacket, dress, shirt, pants..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['size'] }}
                    </label>

                    <input
                        name="size"
                        value="{{ old('size') }}"
                        placeholder="XS, S, M, L, XL"
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['brand'] }}
                    </label>

                    <input
                        name="brand"
                        value="{{ old('brand') }}"
                        placeholder="Nike, Zara, H&M..."
                    >

                </div>

            </div>


            <div class="form-grid three">

                <div class="field">

                    <label>
                        {{ $tr['color'] }}
                    </label>

                    <input
                        name="color"
                        value="{{ old('color') }}"
                        placeholder="Black, blue..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['material'] }}
                    </label>

                    <input
                        name="material"
                        value="{{ old('material') }}"
                        placeholder="Cotton, wool, leather..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['condition'] }}
                    </label>

                    <select name="condition">

                        <option value="">
                            -
                        </option>

                        @foreach([
                            'New' => $tr['new'],
                            'Like New' => $tr['like_new'],
                            'Good' => $tr['good'],
                            'Used' => $tr['used']
                        ] as $value => $label)

                            <option
                                value="{{ $value }}"
                                {{ old('condition') === $value ? 'selected' : '' }}
                            >
                                {{ $label }}
                            </option>

                        @endforeach

                    </select>

                </div>

            </div>

        </section>


        {{-- ================================================== --}}
        {{-- SHOES --}}
        {{-- ================================================== --}}

        <section
            id="shoeSection"
            class="form-section dynamic-section hidden"
        >

            <div class="section-title shoe-title">

                <span>04</span>

                <div>

                    <h2>
                        {{ $tr['shoe_details'] }}
                    </h2>

                    <p>
                        {{ $tr['shoe_help'] }}
                    </p>

                </div>

            </div>


            <div class="form-grid three">

                <div class="field">

                    <label>
                        {{ $tr['shoe_type'] }}
                    </label>

                    <input
                        name="shoe_type"
                        value="{{ old('shoe_type') }}"
                        placeholder="Sneakers, boots, heels..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['shoe_size'] }}
                    </label>

                    <input
                        name="size"
                        value="{{ old('size') }}"
                        placeholder="US 9 / EU 42"
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['shoe_width'] }}
                    </label>

                    <input
                        name="shoe_width"
                        value="{{ old('shoe_width') }}"
                        placeholder="Regular, wide..."
                    >

                </div>

            </div>


            <div class="form-grid three">

                <div class="field">

                    <label>
                        {{ $tr['brand'] }}
                    </label>

                    <input
                        name="brand"
                        value="{{ old('brand') }}"
                        placeholder="Nike, Adidas..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['color'] }}
                    </label>

                    <input
                        name="color"
                        value="{{ old('color') }}"
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['condition'] }}
                    </label>

                    <select name="condition">

                        <option value="">
                            -
                        </option>

                        @foreach([
                            'New' => $tr['new'],
                            'Like New' => $tr['like_new'],
                            'Good' => $tr['good'],
                            'Used' => $tr['used']
                        ] as $value => $label)

                            <option
                                value="{{ $value }}"
                                {{ old('condition') === $value ? 'selected' : '' }}
                            >
                                {{ $label }}
                            </option>

                        @endforeach

                    </select>

                </div>

            </div>

        </section>


        {{-- ================================================== --}}
        {{-- SERVICES --}}
        {{-- ================================================== --}}

        <section
            id="serviceSection"
            class="form-section dynamic-section hidden"
        >

            <input
                type="hidden"
                name="condition"
                value="Service"
            >


            <div class="section-title service-title">

                <span>04</span>

                <div>

                    <h2>
                        {{ $tr['service_details'] }}
                    </h2>

                    <p>
                        {{ $tr['service_help'] }}
                    </p>

                </div>

            </div>


            <div class="form-grid">

                <div class="field">

                    <label>
                        {{ $tr['service_type'] }}
                    </label>

                    <input
                        name="brand"
                        value="{{ old('brand') }}"
                        placeholder="Tailoring, alterations, cleaning, repair..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['pricing_type'] }}
                    </label>

                    <select name="pricing_type">

                        <option
                            value="Fixed"
                            {{ old('pricing_type') === 'Fixed' ? 'selected' : '' }}
                        >
                            {{ $tr['fixed_price'] }}
                        </option>


                        <option
                            value="Hourly"
                            {{ old('pricing_type') === 'Hourly' ? 'selected' : '' }}
                        >
                            {{ $tr['hourly'] }}
                        </option>


                        <option
                            value="Starting From"
                            {{ old('pricing_type') === 'Starting From' ? 'selected' : '' }}
                        >
                            {{ $tr['starting_from'] }}
                        </option>

                    </select>

                </div>

            </div>


            <div class="form-grid three">

                <div class="field">

                    <label>
                        {{ $tr['duration'] }}
                    </label>

                    <input
                        name="size"
                        value="{{ old('size') }}"
                        placeholder="1 hour, 2 days..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['service_area'] }}
                    </label>

                    <input
                        name="service_area"
                        value="{{ old('service_area') }}"
                        placeholder="Montreal, Laval..."
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['availability'] }}
                    </label>

                    <input
                        name="availability"
                        value="{{ old('availability') }}"
                        placeholder="Mon–Fri, evenings..."
                    >

                </div>

            </div>

        </section>


        {{-- ================================================== --}}
        {{-- 05 PRICE & CONTACT --}}
        {{-- ================================================== --}}

        <section class="form-section">

            <div class="section-title">

                <span>05</span>

                <div>

                    <h2>
                        {{ $tr['common'] }}
                    </h2>

                    <p>
                        {{ $lang === 'fr'
                            ? 'Ajoutez le prix, la localisation et les coordonnées publiques.'
                            : 'Add price, location and public contact information.'
                        }}
                    </p>

                </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') }}"
                        required
                        placeholder="25.00"
                    >

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

                </div>


                <div class="field">

                    <label>
                        {{ $tr['discount_price'] }}
                    </label>

                    <input
                        type="number"
                        step="0.01"
                        min="0"
                        name="discount_price"
                        value="{{ old('discount_price') }}"
                        placeholder="20.00"
                    >

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

                </div>


                <div class="field">

                    <label>
                        {{ $tr['status'] }}
                    </label>

                    <select name="status">

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

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

                    </select>

                </div>

            </div>


            {{-- LOCATION --}}

            <div class="field">

                <label>
                    {{ $tr['location'] }}
                </label>

                <input
                    name="location"
                    value="{{ old('location') }}"
                    placeholder="Montreal, Laval, Toronto..."
                >

            </div>


            {{-- CONTACT --}}

            <div class="form-grid">

                <div class="field">

                    <label>
                        {{ $tr['phone'] }}
                    </label>

                    <input
                        name="phone_number"
                        value="{{ old('phone_number') }}"
                        placeholder="+1 514 555 1234"
                    >

                </div>


                <div class="field">

                    <label>
                        {{ $tr['whatsapp'] }}
                    </label>

                    <input
                        name="whatsapp"
                        value="{{ old('whatsapp') }}"
                        placeholder="+1 514 555 1234"
                    >

                </div>

            </div>


            {{-- ================================================== --}}
            {{-- DESCRIPTION EDITOR --}}
            {{-- ================================================== --}}

            <div class="field rich-description-field">

                <label for="descriptionEditor">
                    {{ $tr['description'] }}
                </label>

                <small class="description-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"
                            id="addDescriptionLink"
                            class="link-tool"
                            title="{{ $tr['insert_link'] }}"
                        >
                            🔗 Link
                        </button>


                        <button
                            type="button"
                            data-command="unlink"
                            title="{{ $tr['remove_link'] }}"
                        >
                            Unlink
                        </button>


                        <button
                            type="button"
                            data-command="removeFormat"
                            title="{{ $tr['clear_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"
                    maxlength="5000"
                >{{ old('description') }}</textarea>


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

            </div>

        </section>


        {{-- ================================================== --}}
        {{-- ACTION BUTTONS --}}
        {{-- ================================================== --}}

        <div class="form-actions">

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

            <button
                id="submitButton"
                type="submit"
            >
                {{ $tr['save'] }}
            </button>

        </div>

    </form>

</div>


{{-- ========================================================== --}}
{{-- LOADING --}}
{{-- ========================================================== --}}

<div
    id="loadingOverlay"
    class="loading-overlay"
>

    <div class="loading-card">

        <div class="loader"></div>

        <h2>
            {{ $tr['uploading'] }}
        </h2>

    </div>

</div>


<style>

* {
    box-sizing: border-box;
}


/* ============================================================
   PAGE
   ============================================================ */

.listing-page {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}


/* ============================================================
   HERO
   ============================================================ */

.hero-card {
    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);
}


.hero-card span {
    display: inline-flex;

    padding: 8px 14px;

    border-radius: 999px;

    background: rgba(255,255,255,.16);

    font-size: 12px;
    font-weight: 950;
}


.hero-card h1 {
    margin: 18px 0 8px;

    font-size: clamp(31px,5vw,45px);
    font-weight: 950;
}


.hero-card p {
    margin: 0;

    color: #c7d2fe;

    font-weight: 600;
}


.hero-card > a {
    height: fit-content;

    padding: 14px 20px;

    border-radius: 16px;

    background: #fff;

    color: #111827;

    text-decoration: none;

    font-weight: 950;
}


/* ============================================================
   ERRORS
   ============================================================ */

.validation-box {
    margin-bottom: 20px;
    padding: 20px;

    border: 1px solid #fecaca;
    border-radius: 18px;

    background: #fef2f2;

    color: #991b1b;
}


.validation-box ul {
    margin-bottom: 0;
}


.error {
    display: block;

    margin-top: 8px;

    color: #dc2626;

    font-weight: 800;
}


/* ============================================================
   FORM
   ============================================================ */

.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 {
    margin-bottom: 25px;
    padding: 28px;

    border: 1px solid #e2e8f0;
    border-radius: 28px;

    background:
        radial-gradient(
            circle at top right,
            rgba(79,70,229,.05),
            transparent 42%
        ),
        #fff;
}


/* ============================================================
   SECTION TITLES
   ============================================================ */

.section-title {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    margin-bottom: 24px;
}


.section-title > 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-title h2 {
    margin: 0 0 5px;

    color: #0f172a;

    font-size: 23px;
    font-weight: 950;
}


.section-title p {
    margin: 0;

    color: #64748b;

    font-weight: 600;
}


.clothing-title > span {
    background: #ecfdf5;
    color: #047857;
}


.shoe-title > span {
    background: #eff6ff;
    color: #1d4ed8;
}


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


/* ============================================================
   GRID
   ============================================================ */

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


/* ============================================================
   INPUTS
   ============================================================ */

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

    outline: none;

    background: #f8fafc;

    color: #0f172a;

    font: inherit;
    font-weight: 700;

    transition: .2s;
}


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


.field textarea {
    min-height: 150px;

    resize: vertical;
}


/* ============================================================
   PHOTO UPLOAD
   ============================================================ */

.photo-upload-box {
    position: relative;

    overflow: hidden;

    min-height: 165px;

    border: 2px dashed #cbd5e1;
    border-radius: 22px;

    background:
        radial-gradient(
            circle at top right,
            rgba(79,70,229,.10),
            transparent 40%
        ),
        #f8fafc;

    transition: .25s ease;
}


.photo-upload-box:hover {
    border-color: #6366f1;

    background: #eef2ff;

    transform: translateY(-1px);
}


.photo-upload-box input[type="file"] {
    position: absolute;

    inset: 0;

    z-index: 5;

    width: 100%;
    height: 100%;

    opacity: 0;

    cursor: pointer;
}


.photo-upload-content {
    min-height: 165px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px;

    text-align: center;

    pointer-events: none;
}


.photo-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 13px;

    border-radius: 18px;

    background: #eef2ff;

    font-size: 27px;
}


.photo-upload-content strong {
    color: #0f172a;

    font-size: 17px;
    font-weight: 950;
}


.photo-upload-content span {
    margin-top: 7px;

    color: #64748b;

    font-size: 12px;
    font-weight: 750;
}


.photo-upload-content small {
    margin-top: 6px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 700;
}


/* ============================================================
   PHOTO INFO
   ============================================================ */

.photo-information {
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-top: 18px;
    padding: 13px 16px;

    border: 1px solid #e0e7ff;
    border-radius: 16px;

    background: #eef2ff;

    color: #4338ca;
}


.photo-information strong {
    font-weight: 950;
}


.photo-information span {
    margin-left: 5px;

    font-size: 12px;
    font-weight: 750;
}


.clear-photos-btn {
    padding: 8px 13px;

    border: 0;
    border-radius: 10px;

    background: #fff;

    color: #dc2626;

    font-size: 11px;
    font-weight: 950;

    cursor: pointer;
}


/* ============================================================
   PHOTO PREVIEW
   ============================================================ */

.preview-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 14px;

    margin-top: 18px;
}


.preview-card {
    position: relative;

    height: 185px;

    overflow: hidden;

    border: 2px solid #e2e8f0;
    border-radius: 19px;

    background: #f1f5f9;

    box-shadow:
        0 10px 25px rgba(15,23,42,.08);
}


.preview-card:first-child {
    border-color: #6366f1;

    box-shadow:
        0 0 0 3px rgba(99,102,241,.10),
        0 12px 30px rgba(79,70,229,.14);
}


.preview-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(15,23,42,.04),
            transparent 45%,
            rgba(15,23,42,.70)
        );

    pointer-events: none;
}


.remove-photo-button {
    position: absolute;

    z-index: 10;

    top: 9px;
    right: 9px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(220,38,38,.95);

    color: #fff;

    font-size: 22px;
    font-weight: 950;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(0,0,0,.25);

    transition: .2s;
}


.remove-photo-button:hover {
    transform: scale(1.08);

    background: #b91c1c;
}


.photo-number {
    position: absolute;

    z-index: 4;

    top: 10px;
    left: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background: rgba(15,23,42,.82);

    color: white;

    font-size: 11px;
    font-weight: 950;

    backdrop-filter: blur(8px);
}


.main-photo-badge {
    position: absolute;

    z-index: 4;

    bottom: 38px;
    left: 10px;

    padding: 7px 10px;

    border-radius: 999px;

    background: rgba(79,70,229,.95);

    color: white;

    font-size: 10px;
    font-weight: 950;

    backdrop-filter: blur(8px);
}


.photo-file-name {
    position: absolute;

    z-index: 4;

    right: 10px;
    bottom: 10px;
    left: 10px;

    overflow: hidden;

    color: white;

    font-size: 10px;
    font-weight: 850;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ============================================================
   CATEGORY HINT
   ============================================================ */

.category-hint {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 22px;
    padding: 16px;

    border: 1px dashed #cbd5e1;
    border-radius: 18px;

    background: #f8fafc;

    color: #64748b;
}


.category-hint p {
    margin: 0;

    font-weight: 700;
}


.hint-icon {
    color: #4f46e5;

    font-size: 20px;
}


/* ============================================================
   VIDEO TYPE
   ============================================================ */

.choice-grid {
    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 14px;
}


.choice-button {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 18px;

    border: 2px solid #e2e8f0;
    border-radius: 20px;

    background: #f8fafc;

    text-align: left;

    cursor: pointer;
}


.choice-button.active {
    border-color: #4f46e5;

    background: #eef2ff;
}


.choice-button > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 47px;

    width: 47px;
    height: 47px;

    border-radius: 15px;

    background: #fff;

    color: #4f46e5;

    font-size: 20px;
}


.choice-button strong,
.choice-button small {
    display: block;
}


.choice-button strong {
    font-weight: 950;
}


.choice-button small {
    margin-top: 4px;

    color: #64748b;
}


.youtube-icon {
    color: #dc2626 !important;
}


.video-box {
    margin-top: 20px;
}


#video {
    width: 100%;

    padding: 20px;

    border: 2px dashed #cbd5e1;
    border-radius: 18px;

    background: #f8fafc;

    cursor: pointer;
}


.hidden {
    display: none !important;
}


/* ============================================================
   VIDEO PREVIEW
   ============================================================ */

.video-preview {
    position: relative;

    display: none;

    margin-top: 18px;

    overflow: hidden;

    border-radius: 20px;

    background: #000;
}


.video-preview.show {
    display: block;
}


.video-preview video {
    display: block;

    width: 100%;

    max-height: 500px;
}


.video-preview button {
    position: absolute;

    top: 12px;
    right: 12px;

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #dc2626;

    color: #fff;

    font-size: 22px;

    cursor: pointer;
}


/* ============================================================
   YOUTUBE
   ============================================================ */

.youtube-input {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 17px;

    border: 1px solid #e2e8f0;
    border-radius: 18px;

    background: #f8fafc;
}


.youtube-input span {
    color: #dc2626;
}


.youtube-input input {
    width: 100%;

    padding: 17px 0;

    border: 0;

    outline: 0;

    background: transparent;

    font-weight: 700;
}


.youtube-preview {
    display: none;

    margin-top: 18px;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    border-radius: 20px;

    background: #000;
}


.youtube-preview.show {
    display: block;
}


.youtube-preview iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


/* ============================================================
   DYNAMIC SECTIONS
   ============================================================ */

.dynamic-section {
    animation: sectionIn .28s ease;
}


@keyframes sectionIn {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform: none;
    }

}


/* ============================================================
   DESCRIPTION
   ============================================================ */

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

    outline: none;

    background: #fff;

    color: #0f172a;

    font: inherit;
    font-weight: 600;
    line-height: 1.75;

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


/* ============================================================
   ACTIONS
   ============================================================ */

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

    cursor: pointer;

    box-shadow:
        0 15px 35px rgba(79,70,229,.28);
}


.form-actions button:disabled {
    opacity: .7;

    cursor: wait;
}


/* ============================================================
   LOADING
   ============================================================ */

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

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {

    .hero-card {
        flex-direction: column;
    }


    .hero-card > a {
        width: 100%;

        text-align: center;
    }


    .form-grid,
    .form-grid.three,
    .choice-grid {
        grid-template-columns: 1fr;
    }


    .preview-grid {
        grid-template-columns:
            repeat(2,minmax(0,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;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 520px) {

    .hero-card {
        padding: 25px 20px;

        border-radius: 25px;
    }


    .listing-form {
        padding: 13px;

        border-radius: 24px;
    }


    .form-section {
        padding: 17px;

        border-radius: 21px;
    }


    .section-title {
        flex-direction: column;
    }


    .preview-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 10px;
    }


    .preview-card {
        height: 150px;
    }


    .photo-information {
        align-items: flex-start;
        flex-direction: column;
    }


    .choice-button {
        padding: 14px;
    }

}

</style>


<script>

/* ============================================================
   GLOBAL
   ============================================================ */

const currentLang = @json($lang);


const messages = {

    en: {
        only4:
            'You can upload up to 4 photos.',

        invalidImage:
            'Only JPG, PNG and WebP images are allowed.',

        largeImage:
            'Each photo must be smaller than 4 MB.',

        invalidVideo:
            'Please select MP4, MOV or WebM.',

        largeVideo:
            'Video must be smaller than 30 MB.',

        uploading:
            'Publishing...',

        mainPhoto:
            'Main Photo'
    },


    fr: {
        only4:
            'Vous pouvez ajouter jusqu’à 4 photos.',

        invalidImage:
            'Seules les images JPG, PNG et WebP sont acceptées.',

        largeImage:
            'Chaque photo doit être inférieure à 4 Mo.',

        invalidVideo:
            'Veuillez choisir une vidéo MP4, MOV ou WebM.',

        largeVideo:
            'La vidéo doit être inférieure à 30 Mo.',

        uploading:
            'Publication...',

        mainPhoto:
            'Photo principale'
    }

};


let videoObjectUrl = null;


/* ============================================================
   CATEGORY
   ============================================================ */

function updateCategoryFields() {

    const category =
        document.getElementById('category').value;


    const clothing =
        document.getElementById('clothingSection');


    const shoes =
        document.getElementById('shoeSection');


    const service =
        document.getElementById('serviceSection');


    const hint =
        document.getElementById('categoryHint');


    [clothing, shoes, service].forEach(section => {

        section.classList.add('hidden');


        section
            .querySelectorAll(
                'input, select, textarea'
            )
            .forEach(field => {

                field.disabled = true;

            });

    });


    const showSection = section => {

        section.classList.remove('hidden');


        section
            .querySelectorAll(
                'input, select, textarea'
            )
            .forEach(field => {

                field.disabled = false;

            });


        hint.classList.add('hidden');

    };


    const clothingCategories = [
        'Men',
        'Women',
        'Kids',
        'Bags',
        'Accessories'
    ];


    if (
        clothingCategories.includes(category)
    ) {

        showSection(clothing);

    }

    else if (
        category === 'Shoes'
    ) {

        showSection(shoes);

    }

    else if (
        category === 'Services'
    ) {

        showSection(service);

    }

    else {

        hint.classList.remove('hidden');

    }

}


/* ============================================================
   MULTIPLE PHOTOS
   ============================================================ */

let selectedPhotos = [];


const photoInput =
    document.getElementById('photos');


const photoPreview =
    document.getElementById('photoPreview');


const photoInformation =
    document.getElementById('photoInformation');


const photoCount =
    document.getElementById('photoCount');


const clearAllPhotos =
    document.getElementById('clearAllPhotos');


photoInput.addEventListener(
    'change',
    function (event) {

        const newFiles =
            Array.from(
                event.target.files || []
            );


        newFiles.forEach(file => {

            /* ---------------------------------------------
               FILE TYPE
               --------------------------------------------- */

            const allowedTypes = [
                'image/jpeg',
                'image/png',
                'image/webp'
            ];


            if (
                !allowedTypes.includes(file.type)
            ) {

                alert(
                    messages[currentLang]
                        .invalidImage
                );

                return;

            }


            /* ---------------------------------------------
               FILE SIZE
               --------------------------------------------- */

            if (
                file.size >
                4 * 1024 * 1024
            ) {

                alert(
                    file.name +
                    '\n\n' +
                    messages[currentLang]
                        .largeImage
                );

                return;

            }


            /* ---------------------------------------------
               DUPLICATE
               --------------------------------------------- */

            const duplicate =
                selectedPhotos.some(
                    existingFile =>

                        existingFile.name ===
                        file.name &&

                        existingFile.size ===
                        file.size &&

                        existingFile.lastModified ===
                        file.lastModified
                );


            if (duplicate) {

                return;

            }


            /* ---------------------------------------------
               MAX 4
               --------------------------------------------- */

            if (
                selectedPhotos.length >= 4
            ) {

                alert(
                    messages[currentLang]
                        .only4
                );

                return;

            }


            selectedPhotos.push(file);

        });


        updatePhotoInput();

        renderPhotoPreview();

    }
);


/* ============================================================
   UPDATE THE REAL FILE INPUT
   ============================================================ */

function updatePhotoInput() {

    const dataTransfer =
        new DataTransfer();


    selectedPhotos.forEach(file => {

        dataTransfer.items.add(file);

    });


    photoInput.files =
        dataTransfer.files;

}


/* ============================================================
   RENDER PHOTOS
   ============================================================ */

function renderPhotoPreview() {

    photoPreview.innerHTML = '';


    photoCount.textContent =
        selectedPhotos.length +
        ' / 4';


    if (
        selectedPhotos.length > 0
    ) {

        photoInformation.style.display =
            'flex';

    }

    else {

        photoInformation.style.display =
            'none';

    }


    selectedPhotos.forEach(
        (file, index) => {

            const reader =
                new FileReader();


            reader.onload =
                function (event) {

                    /* CARD */

                    const card =
                        document.createElement(
                            'div'
                        );


                    card.className =
                        'preview-card';


                    /* IMAGE */

                    const image =
                        document.createElement(
                            'img'
                        );


                    image.src =
                        event.target.result;


                    image.alt =
                        file.name;


                    card.appendChild(image);


                    /* OVERLAY */

                    const overlay =
                        document.createElement(
                            'div'
                        );


                    overlay.className =
                        'photo-overlay';


                    card.appendChild(
                        overlay
                    );


                    /* NUMBER */

                    const number =
                        document.createElement(
                            'span'
                        );


                    number.className =
                        'photo-number';


                    number.textContent =
                        index + 1;


                    card.appendChild(
                        number
                    );


                    /* MAIN PHOTO */

                    if (index === 0) {

                        const mainBadge =
                            document.createElement(
                                'span'
                            );


                        mainBadge.className =
                            'main-photo-badge';


                        mainBadge.textContent =
                            '★ ' +
                            messages[currentLang]
                                .mainPhoto;


                        card.appendChild(
                            mainBadge
                        );

                    }


                    /* REMOVE */

                    const removeButton =
                        document.createElement(
                            'button'
                        );


                    removeButton.type =
                        'button';


                    removeButton.className =
                        'remove-photo-button';


                    removeButton.innerHTML =
                        '×';


                    removeButton.addEventListener(
                        'click',
                        function () {

                            removeSelectedPhoto(
                                index
                            );

                        }
                    );


                    card.appendChild(
                        removeButton
                    );


                    /* FILE NAME */

                    const filename =
                        document.createElement(
                            'div'
                        );


                    filename.className =
                        'photo-file-name';


                    filename.textContent =
                        file.name;


                    card.appendChild(
                        filename
                    );


                    photoPreview.appendChild(
                        card
                    );

                };


            reader.readAsDataURL(file);

        }
    );

}


/* ============================================================
   REMOVE ONE PHOTO
   ============================================================ */

function removeSelectedPhoto(index) {

    selectedPhotos.splice(
        index,
        1
    );


    updatePhotoInput();

    renderPhotoPreview();

}


/* ============================================================
   REMOVE ALL PHOTOS
   ============================================================ */

clearAllPhotos.addEventListener(
    'click',
    function () {

        selectedPhotos = [];


        photoInput.value = '';


        updatePhotoInput();

        renderPhotoPreview();

    }
);


/* ============================================================
   DESCRIPTION SANITIZER
   ============================================================ */

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',
            '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();

}


/* ============================================================
   DESCRIPTION SYNC
   ============================================================ */

function syncRichDescription() {

    const editor =
        document.getElementById(
            'descriptionEditor'
        );


    const storage =
        document.getElementById(
            'description'
        );


    storage.value =
        sanitizeEditorHtml(
            editor.innerHTML
        );

}


/* ============================================================
   DESCRIPTION EDITOR
   ============================================================ */

function initializeRichEditor() {

    const editor =
        document.getElementById(
            'descriptionEditor'
        );


    const storage =
        document.getElementById(
            'description'
        );


    const savedValue =
        storage.value || '';


    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();


                let url =
                    window.prompt(

                        currentLang === 'fr'
                            ? 'Adresse du lien (https://...)'
                            : 'Link URL (https://...)',

                        '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;'
                    );


                const safeText =
                    pastedText
                        .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();

            }

        }
    );

}


/* ============================================================
   VIDEO TYPE
   ============================================================ */

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();

    }

}


/* ============================================================
   VIDEO PREVIEW
   ============================================================ */

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);


    const preview =
        document.getElementById(
            'videoPreview'
        );


    preview.src =
        videoObjectUrl;


    document
        .getElementById(
            'videoPreviewBox'
        )
        .classList
        .add('show');

}


/* ============================================================
   REMOVE VIDEO
   ============================================================ */

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(
            'videoPreviewBox'
        )
        .classList
        .remove('show');

}


/* ============================================================
   YOUTUBE ID
   ============================================================ */

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;

}


/* ============================================================
   YOUTUBE PREVIEW
   ============================================================ */

function previewYouTube(url) {

    const id =
        getYouTubeId(url);


    if (!id) {

        return clearYouTube();

    }


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


    document
        .getElementById(
            'youtubePreviewBox'
        )
        .classList
        .add('show');

}


/* ============================================================
   CLEAR YOUTUBE
   ============================================================ */

function clearYouTube() {

    document
        .getElementById(
            'youtubePreview'
        )
        .src = '';


    document
        .getElementById(
            'youtubePreviewBox'
        )
        .classList
        .remove('show');

}


/* ============================================================
   PAGE READY
   ============================================================ */

document.addEventListener(
    'DOMContentLoaded',
    () => {

        updateCategoryFields();

        initializeRichEditor();


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


        if (oldUrl) {

            selectVideoType(
                'youtube'
            );


            previewYouTube(
                oldUrl
            );

        }


        /* ====================================================
           FORM SUBMIT
           ==================================================== */

        document
            .getElementById(
                'listingForm'
            )
            .addEventListener(
                'submit',
                function (event) {

                    /*
                    |--------------------------------------------------------------------------
                    | MAKE SURE PHOTOS ARE PRESENT
                    |--------------------------------------------------------------------------
                    */

                    if (
                        selectedPhotos.length < 1
                    ) {

                        event.preventDefault();


                        alert(
                            currentLang === 'fr'
                                ? 'Veuillez ajouter au moins une photo.'
                                : 'Please add at least one photo.'
                        );


                        return;

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | UPDATE INPUT ONE LAST TIME
                    |--------------------------------------------------------------------------
                    */

                    updatePhotoInput();


                    /*
                    |--------------------------------------------------------------------------
                    | DESCRIPTION
                    |--------------------------------------------------------------------------
                    */

                    syncRichDescription();


                    const category =
                        document.getElementById(
                            'category'
                        ).value;


                    const description =
                        document.getElementById(
                            'description'
                        );


                    const extra = [];


                    /*
                    |--------------------------------------------------------------------------
                    | CLOTHING EXTRA DETAILS
                    |--------------------------------------------------------------------------
                    */

                    if (
                        [
                            'Men',
                            'Women',
                            'Kids',
                            'Bags',
                            'Accessories'
                        ].includes(category)
                    ) {

                        const type =
                            this
                                .querySelector(
                                    'input[name="clothing_type"]'
                                )
                                ?.value
                                .trim();


                        const color =
                            this
                                .querySelector(
                                    '#clothingSection input[name="color"]'
                                )
                                ?.value
                                .trim();


                        const material =
                            this
                                .querySelector(
                                    'input[name="material"]'
                                )
                                ?.value
                                .trim();


                        if (type) {

                            extra.push(
                                'Type: ' + type
                            );

                        }


                        if (color) {

                            extra.push(
                                'Color: ' + color
                            );

                        }


                        if (material) {

                            extra.push(
                                'Material: ' +
                                material
                            );

                        }

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | SHOES EXTRA DETAILS
                    |--------------------------------------------------------------------------
                    */

                    if (
                        category === 'Shoes'
                    ) {

                        const type =
                            this
                                .querySelector(
                                    'input[name="shoe_type"]'
                                )
                                ?.value
                                .trim();


                        const width =
                            this
                                .querySelector(
                                    'input[name="shoe_width"]'
                                )
                                ?.value
                                .trim();


                        const color =
                            this
                                .querySelector(
                                    '#shoeSection input[name="color"]'
                                )
                                ?.value
                                .trim();


                        if (type) {

                            extra.push(
                                'Shoe type: ' +
                                type
                            );

                        }


                        if (width) {

                            extra.push(
                                'Width: ' +
                                width
                            );

                        }


                        if (color) {

                            extra.push(
                                'Color: ' +
                                color
                            );

                        }

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | SERVICES EXTRA DETAILS
                    |--------------------------------------------------------------------------
                    */

                    if (
                        category ===
                        'Services'
                    ) {

                        const pricing =
                            this
                                .querySelector(
                                    'select[name="pricing_type"]'
                                )
                                ?.value;


                        const area =
                            this
                                .querySelector(
                                    'input[name="service_area"]'
                                )
                                ?.value
                                .trim();


                        const availability =
                            this
                                .querySelector(
                                    'input[name="availability"]'
                                )
                                ?.value
                                .trim();


                        if (pricing) {

                            extra.push(
                                'Pricing: ' +
                                pricing
                            );

                        }


                        if (area) {

                            extra.push(
                                'Service area: ' +
                                area
                            );

                        }


                        if (availability) {

                            extra.push(
                                'Availability: ' +
                                availability
                            );

                        }

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | ADD EXTRA DETAILS TO DESCRIPTION
                    |--------------------------------------------------------------------------
                    */

                    if (
                        extra.length
                    ) {

                        const detailsHtml =
                            '<p><strong>' +

                            (
                                currentLang === 'fr'
                                    ? 'Détails supplémentaires :'
                                    : 'Additional details:'
                            ) +

                            '</strong><br>' +

                            extra
                                .map(
                                    item =>
                                        item
                                            .replace(
                                                /&/g,
                                                '&amp;'
                                            )
                                            .replace(
                                                /</g,
                                                '&lt;'
                                            )
                                            .replace(
                                                />/g,
                                                '&gt;'
                                            )
                                )
                                .join('<br>') +

                            '</p>';


                        if (
                            !description.value
                                .includes(
                                    detailsHtml
                                )
                        ) {

                            description.value =
                                description.value

                                    ? description.value +
                                      detailsHtml

                                    : detailsHtml;

                        }

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | LOADING
                    |--------------------------------------------------------------------------
                    */

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


                    const button =
                        document.getElementById(
                            'submitButton'
                        );


                    button.disabled =
                        true;


                    button.innerText =
                        messages[currentLang]
                            .uploading;

                }
            );

    }
);

</script>

@endsection