@extends('layouts.app')

@section('title', 'Post a Free Ad - ClassiAds')

@section('content')
    <div class="ad-posting-wrapper">
        {{-- Hero Header with Gradient --}}
        <div class="posting-header">
            <div class="container">
                <div class="header-content">
                    <h1 class="header-title">📢 Post a Free Ad</h1>
                    <p class="header-subtitle">Reach thousands of potential buyers in your area</p>
                    <div class="header-progress">
                        <div class="progress-steps">
                            <span class="step active">1. Details</span>
                            <span class="step">2. Photos</span>
                            <span class="step">3. Publish</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Google Ads Area with better styling --}}
          <!-- Top Ad Zone -->
         <div class="row my-3">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-4155905641018537"
                 data-ad-slot="9487563407"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>

        <div class="container py-4">
            <div class="row g-4">
                {{-- Left Sidebar Ads --}}
                <div class="col-lg-2 order-2 order-lg-1">
                @section('leftads')
                     <!-- Top Ad Zone -->
         <div class="row my-3">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-4155905641018537"
                 data-ad-slot="9487563407"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
                @endsection
            </div>

            {{-- Main Content --}}
            <div class="col-lg-8 order-1 order-lg-2">
                <div class="main-form-card">
                    {{-- Consolidated Error Display with Animation --}}
                    @if ($errors->any())
                        <div class="alert-modern alert-danger">
                            <div class="alert-icon">
                                <i class="fas fa-exclamation-circle"></i>
                            </div>
                            <div class="alert-content">
                                <h5 class="alert-title">Please fix the following errors:</h5>
                                <ul class="alert-list">
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                            <button type="button" class="alert-close" onclick="this.parentElement.remove()">×</button>
                        </div>
                    @endif

                    {{-- Success Alert --}}
                    @if (session('success'))
                        <div class="alert-modern alert-success" id="successAlert">
                            <div class="alert-icon">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <div class="alert-content">
                                <h5 class="alert-title">Success!</h5>
                                <p>{{ session('success') }}</p>
                            </div>
                        </div>
                    @endif

                    <form id="adForm" action="{{ route('ads.store') }}" method="POST" enctype="multipart/form-data"
                        class="modern-form">
                        @csrf

                        {{-- Category Section --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-tags"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Category</h3>
                                    <p class="section-subtitle">Select the most appropriate category for your item</p>
                                </div>
                            </div>

                            <div class="category-grid">
                                {{-- Main Category --}}
                                <div class="category-selector">
                                    <label class="selector-label">Main Category</label>
                                    <div class="custom-select-wrapper">
                                        <input list="categories_main"
                                            class="custom-select-input @error('main_category_id') is-invalid @enderror"
                                            id="main_category" placeholder="Search main category..."
                                            value="{{ old('main_category_name') }}">
                                        <i class="fas fa-chevron-down select-arrow"></i>
                                    </div>
                                    <datalist id="categories_main">
                                        @foreach ($mainCategory as $category)
                                            <option value="{{ $category->name }}" data-id="{{ $category->id }}">
                                            </option>
                                        @endforeach
                                    </datalist>
                                    <input type="hidden" id="main_category_id" name="main_category_id"
                                        value="{{ old('main_category_id') }}">
                                    @error('main_category_id')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Sub Category --}}
                                <div class="category-selector">
                                    <label class="selector-label">Sub Category</label>
                                    <div class="custom-select-wrapper">
                                        <input list="categories_sub"
                                            class="custom-select-input @error('subcategory_id') is-invalid @enderror"
                                            id="subcategory" placeholder="Select subcategory">
                                        <i class="fas fa-chevron-down select-arrow"></i>
                                    </div>
                                    <datalist id="categories_sub"></datalist>
                                    <input type="hidden" id="subcategory_id" name="subcategory_id"
                                        value="{{ old('subcategory_id') }}">
                                    @error('subcategory_id')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div>

                                {{-- Sub-Sub Category
                                <div class="category-selector">
                                    <label class="selector-label">Sub-Sub Category</label>
                                    <div class="custom-select-wrapper">
                                        <input list="categories_sub_sub"
                                            class="custom-select-input @error('sub_subcategory_id') is-invalid @enderror"
                                            id="sub_subcategory" placeholder="Select sub-subcategory">
                                        <i class="fas fa-chevron-down select-arrow"></i>
                                    </div>
                                    <datalist id="categories_sub_sub"></datalist>
                                    <input type="hidden" id="sub_subcategory_id" name="sub_subcategory_id"
                                        value="{{ old('sub_subcategory_id') }}">
                                    @error('sub_subcategory_id')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div> --}}
                            </div>
                        </div>

                        {{-- Image Upload Section --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-camera"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Photos</h3>
                                    <p class="section-subtitle">Upload up to 10 images (first image will be the cover)
                                    </p>
                                </div>
                            </div>

                            <div class="upload-area" onclick="triggerFileInput()">
                                <input type="file" name="images[]" accept="image/*" multiple id="extraFileInput"
                                    style="display: none;" onchange="handleImageUpload(this)">
                                <div class="upload-content">
                                    <i class="fas fa-cloud-upload-alt upload-icon"></i>
                                    <h4 class="upload-title">Click to upload images</h4>
                                    <p class="upload-hint">or drag and drop</p>
                                    <span class="upload-badge">JPG, PNG, GIF up to 10MB</span>
                                </div>
                            </div>

                            <div id="image-preview-container" class="image-preview-grid"></div>

                            @error('images')
                                <div class="error-message">{{ $message }}</div>
                            @enderror
                            <p class="field-note">📸 You may upload up to 10 images at a time</p>
                        </div>

                        {{-- Brand and Condition --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-box"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Product Details</h3>
                                    <p class="section-subtitle">Tell buyers about the brand and condition</p>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Brand</label>
                                    <select class="modern-select @error('brand') is-invalid @enderror" name="brand">
                                        <option value="" disabled selected>Select a brand</option>
                                        @foreach ($brands as $brand)
                                            <option value="{{ $brand->id }}"
                                                {{ old('brand') == $brand->id ? 'selected' : '' }}>
                                                {{ $brand->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('brand')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label">Condition</label>
                                    <select class="modern-select @error('condition') is-invalid @enderror"
                                        name="condition">
                                        <option value="" disabled selected>Select condition</option>
                                        <option value="new" {{ old('condition') == 'new' ? 'selected' : '' }}>✨ New
                                        </option>
                                        <option value="used" {{ old('condition') == 'used' ? 'selected' : '' }}>🔄
                                            Used</option>
                                        <option value="refurbished"
                                            {{ old('condition') == 'refurbished' ? 'selected' : '' }}>🔧 Refurbished
                                        </option>
                                    </select>
                                    @error('condition')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Title, Description, Location --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-pencil-alt"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Ad Details</h3>
                                    <p class="section-subtitle">Write a compelling title and description</p>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Ad Title</label>
                                <input type="text" class="modern-input @error('title') is-invalid @enderror"
                                    placeholder="e.g., iPhone 13 Pro Max - 256GB - Like New" name="title"
                                    value="{{ old('title') }}">
                                @error('title')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label class="form-label">Description</label>
                                <textarea id="description" name="description" class="modern-textarea @error('description') is-invalid @enderror"
                                    placeholder="Describe your item in detail... (max 5000 characters)" maxlength="5000" rows="6">{{ old('description') }}</textarea>
                                <div class="char-counter" id="charCounter">0/5000 characters</div>
                                @error('description')
                                    <div class="error-message">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="location-section">
                                <h4 class="subsection-title">📍 Location</h4>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <select class="modern-select @error('location_city') is-invalid @enderror"
                                            name="location_city">
                                            <option value="" disabled selected>Select state</option>
                                            @foreach ($locations as $location)
                                                <option value="{{ $location->name }}"
                                                    {{ old('location_city') == $location->name ? 'selected' : '' }}>
                                                    {{ $location->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('location_city')
                                            <div class="error-message">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text"
                                            class="modern-input @error('postal_code') is-invalid @enderror"
                                            placeholder="Postal Code" name="postal_code"
                                            value="{{ old('postal_code') }}">
                                        @error('postal_code')
                                            <div class="error-message">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text"
                                            class="modern-input @error('address') is-invalid @enderror"
                                            placeholder="Street Address" name="address"
                                            value="{{ old('address') }}">
                                        @error('address')
                                            <div class="error-message">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Price Section --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-tag"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Price</h3>
                                    <p class="section-subtitle">Set your price or offer it for free</p>
                                </div>
                            </div>

                            <div class="price-input-wrapper">
                                <span class="currency-symbol">£</span>
                                <input type="number"
                                    class="modern-input price-input @error('price') is-invalid @enderror"
                                    placeholder="0.00" name="price" id="price" value="{{ old('price') }}">
                            </div>

                            <div class="free-checkbox">
                                <label class="checkbox-container">
                                    <input type="checkbox" id="is_free" name="is_free" value="1"
                                        {{ old('is_free') ? 'checked' : '' }}>
                                    <span class="checkmark"></span>
                                    <span class="checkbox-label">This item is free</span>
                                </label>
                            </div>

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

                        {{-- Seller Info --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-user"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Seller Information</h3>
                                    <p class="section-subtitle">How can buyers reach you?</p>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label class="form-label">Your Name</label>
                                    <input type="text"
                                        class="modern-input @error('seller_name') is-invalid @enderror"
                                        placeholder="John Doe" name="seller_name" value="{{ old('seller_name') }}">
                                    @error('seller_name')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Phone Number</label>
                                    <input type="tel"
                                        class="modern-input @error('seller_phone') is-invalid @enderror"
                                        placeholder="+44 123 456 7890" name="seller_phone"
                                        value="{{ old('seller_phone') }}">
                                    @error('seller_phone')
                                        <div class="error-message">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!--<div class="contact-preference mt-3">-->
                            <!--    <label class="switch-container">-->
                            <!--        <input type="checkbox" name="contact_via_email" id="showPhone"-->
                            <!--            {{ old('contact_via_email') ? 'checked' : '' }}>-->
                            <!--        <span class="switch-slider"></span>-->
                            <!--        <span class="switch-label">Hide phone number, use email instead</span>-->
                            <!--    </label>-->
                            <!--</div>-->
                        </div>

                        {{-- Tags Section --}}
                        <div class="form-section">
                            <div class="section-header">
                                <div class="section-icon">
                                    <i class="fas fa-hashtag"></i>
                                </div>
                                <div>
                                    <h3 class="section-title">Tags</h3>
                                    <p class="section-subtitle">Select up to 5 tags to help buyers find your ad</p>
                                </div>
                            </div>

                            <div class="tags-container" id="tag-container">
                                @foreach ($tags as $tag)
                                    <label class="tag-checkbox">
                                        <input type="checkbox" name="tags[]" value="{{ $tag->id }}"
                                            id="tag_{{ $tag->id }}"
                                            {{ in_array($tag->id, old('tags', [])) ? 'checked' : '' }}>
                                        <span class="tag-label">{{ $tag->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <small class="tags-help">✨ You can select up to 5 tags</small>
                            @error('tags')
                                <div class="error-message">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Submit Button --}}
                        <div class="form-actions">
                            <button type="submit" class="submit-btn">
                                <span class="btn-text">Post Ad</span>
                                <i class="fas fa-arrow-right"></i>
                            </button>
                            <p class="form-terms">By posting, you agree to our <a href="#">Terms of Service</a>
                                and <a href="#">Privacy Policy</a></p>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Right Sidebar Ads --}}
            <div class="col-lg-2 order-3">
                @section('rightads')
                    <div class="sidebar-ads right-ads">
                      <!-- Top Ad Zone -->
         <div class="row my-3">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-4155905641018537"
                 data-ad-slot="9487563407"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
                @endsection
            </div>
        </div>
    </div>
</div>

{{-- Custom Error Display --}}
<div id="errorMessage" class="custom-error-toast" style="display: none;"></div>

@endsection

@section('scripts')
<script>
    // Image Upload Handler
    function triggerFileInput() {
        document.getElementById('extraFileInput').click();
    }

    function handleImageUpload(input) {
        const previewContainer = document.getElementById('image-preview-container');
        const files = input.files;

        previewContainer.innerHTML = '';

        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();

            reader.onload = function(e) {
                const previewItem = document.createElement('div');
                previewItem.className = 'preview-item';

                const img = document.createElement('img');
                img.src = e.target.result;
                img.alt = 'Preview';

                const removeBtn = document.createElement('button');
                removeBtn.className = 'remove-preview';
                removeBtn.innerHTML = '×';
                removeBtn.type = 'button';
                removeBtn.onclick = function() {
                    previewItem.remove();
                };

                previewItem.appendChild(img);
                previewItem.appendChild(removeBtn);
                previewContainer.appendChild(previewItem);
            };

            reader.readAsDataURL(file);
        }
    }

    // Category Selection Handlers
    function resolveCategoryId(inputId, datalistId, hiddenInputId) {
        const input = document.getElementById(inputId).value;
        const options = document.querySelectorAll(`#${datalistId} option`);
        let selectedId = '';

        options.forEach(option => {
            if (option.value === input) {
                selectedId = option.getAttribute('data-id');
            }
        });

        const hiddenInput = document.getElementById(hiddenInputId);
        hiddenInput.value = selectedId;
        return selectedId;
    }

    function loadTags(categoryId) {
        if (categoryId) {
            fetch(`/get-tags-by-category/${categoryId}`)
                .then(response => response.json())
                .then(data => {
                    const tagContainer = document.getElementById('tag-container');
                    tagContainer.innerHTML = '';

                    data.forEach(tag => {
                        const label = document.createElement('label');
                        label.className = 'tag-checkbox';

                        const checkbox = document.createElement('input');
                        checkbox.type = 'checkbox';
                        checkbox.name = 'tags[]';
                        checkbox.value = tag.id;
                        checkbox.id = 'tag_' + tag.id;

                        const span = document.createElement('span');
                        span.className = 'tag-label';
                        span.textContent = tag.name;

                        label.appendChild(checkbox);
                        label.appendChild(span);
                        tagContainer.appendChild(label);
                    });

                    // Re-attach tag limit listener
                    attachTagLimitListener();
                });
        }
    }

    // Main Category
    document.getElementById('main_category').addEventListener('input', function() {
        const selectedId = resolveCategoryId('main_category', 'categories_main', 'main_category_id');
        if (selectedId) {
            fetch(`/api/categories/${selectedId}`)
                .then(response => response.json())
                .then(data => {
                    const subList = document.getElementById('categories_sub');
                    subList.innerHTML = '';
                    data.forEach(sub => {
                        const option = document.createElement('option');
                        option.value = sub.name;
                        option.setAttribute('data-id', sub.id);
                        subList.appendChild(option);
                    });
                });

            loadTags(selectedId);
        }
    });

    // Sub Category
    document.getElementById('subcategory').addEventListener('input', function() {
        const selectedId = resolveCategoryId('subcategory', 'categories_sub', 'subcategory_id');
        if (selectedId) {
            fetch(`/api/categories/${selectedId}`)
                .then(response => response.json())
                .then(data => {
                    const subSubList = document.getElementById('categories_sub_sub');
                    subSubList.innerHTML = '';
                    data.forEach(subSub => {
                        const option = document.createElement('option');
                        option.value = subSub.name;
                        option.setAttribute('data-id', subSub.id);
                        subSubList.appendChild(option);
                    });
                });

            loadTags(selectedId);
        }
    });

    // Sub-Sub Category
    document.getElementById('sub_subcategory').addEventListener('input', function() {
        const selectedId = resolveCategoryId('sub_subcategory', 'categories_sub_sub', 'sub_subcategory_id');
        if (selectedId) {
            loadTags(selectedId);
        }
    });

    // Tag Limit (max 5)
    function attachTagLimitListener() {
        document.querySelectorAll('input[name="tags[]"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const checkedCheckboxes = document.querySelectorAll('input[name="tags[]"]:checked')
                    .length;

                if (checkedCheckboxes > 5) {
                    alert('You can only select up to 5 tags!');
                    this.checked = false;
                }
            });
        });
    }

    // Price and Free Checkbox Logic
    document.addEventListener("DOMContentLoaded", function() {
        let priceInput = document.getElementById("price");
        let freeCheckbox = document.getElementById("is_free");

        priceInput.addEventListener("input", function() {
            if (priceInput.value && parseFloat(priceInput.value) > 0) {
                freeCheckbox.checked = false;
            }
        });

        freeCheckbox.addEventListener("change", function() {
            if (this.checked) {
                priceInput.value = '';
                priceInput.disabled = true;
            } else {
                priceInput.disabled = false;
            }
        });

        // Initialize on page load
        if (freeCheckbox.checked) {
            priceInput.disabled = true;
        }

        // Character Counter
        const description = document.getElementById('description');
        const charCounter = document.getElementById('charCounter');

        description.addEventListener('input', function() {
            const remaining = this.value.length;
            charCounter.textContent = `${remaining}/5000 characters`;

            if (remaining > 4500) {
                charCounter.style.color = '#dc3545';
            } else if (remaining > 4000) {
                charCounter.style.color = '#fd7e14';
            } else {
                charCounter.style.color = '#6c757d';
            }
        });

        // Auto-hide success alert
        setTimeout(function() {
            let alertBox = document.getElementById('successAlert');
            if (alertBox) {
                alertBox.style.opacity = '0';
                setTimeout(() => alertBox.remove(), 500);
            }
        }, 5000);
    });

    // Form Validation
    document.getElementById('adForm').addEventListener('submit', function(e) {
        let form = e.target;
        let errorToast = document.getElementById('errorMessage');
        errorToast.innerHTML = '';
        errorToast.style.display = 'none';

        let requiredFields = [
            'title', 'brand', 'location_city', 'postal_code',
            'seller_name', 'seller_phone', 'address',
        ];

        let files = document.getElementById('extraFileInput').files;
        let errors = [];

        // Check required fields
        requiredFields.forEach(function(fieldName) {
            let field = form.querySelector(`[name="${fieldName}"]`);
            if (field && !field.value.trim()) {
                let fieldLabel = fieldName.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                errors.push(`${fieldLabel} is required.`);
            }
        });

        // Price validation
        let price = form.querySelector('[name="price"]').value.trim();
        let isFree = document.getElementById('is_free').checked;

        if (!price && !isFree) {
            errors.push('Please enter a price or mark the item as free.');
        }

        // Image validation
        if (!files.length) {
            errors.push('Please upload at least one image.');
        }

        if (errors.length > 0) {
            e.preventDefault();
            errorToast.innerHTML = errors.join('<br>');
            errorToast.style.display = 'block';

            // Scroll to error
            errorToast.scrollIntoView({
                behavior: 'smooth',
                block: 'center'
            });

            // Auto hide after 5 seconds
            setTimeout(() => {
                errorToast.style.display = 'none';
            }, 5000);

            return false;
        }
    });

    // Initialize tag limit on page load
    attachTagLimitListener();
</script>


@endsection

@section('styles')
<style>
    /* Modern CSS Styles */
    .ad-posting-wrapper {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        min-height: 100vh;
        padding-bottom: 3rem;
    }

    /* Header Styles */
    .posting-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 3rem 0;
        margin-bottom: 2rem;
        color: white;
        position: relative;
        overflow: hidden;
    }

    .posting-header::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
        animation: rotate 30s linear infinite;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    .header-content {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .header-title {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 1rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .header-subtitle {
        font-size: 1.1rem;
        opacity: 0.9;
        margin-bottom: 2rem;
    }

    .progress-steps {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .step {
        position: relative;
        padding: 0.5rem 1rem;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50px;
        font-size: 0.9rem;
        color: white;
    }

    .step.active {
        background: white;
        color: #667eea;
        font-weight: 600;
    }

    /* Google Ads Container */
    .google-ads-container {
        margin: 1rem 0 2rem;
    }

    .ads-placeholder {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        border-radius: 16px;
        padding: 1rem;
        text-align: center;
        position: relative;
        border: 2px dashed #dee2e6;
    }

    .ads-text {
        font-size: 1rem;
        color: #6c757d;
        font-weight: 500;
    }

    .ads-badge {
        position: absolute;
        top: -10px;
        right: 20px;
        background: #0d6efd;
        color: white;
        padding: 0.25rem 1rem;
        border-radius: 50px;
        font-size: 0.8rem;
        font-weight: 600;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Main Form Card */
    .main-form-card {
        background: white;
        border-radius: 24px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(30px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Form Sections */
    .form-section {
        padding: 2rem;
        border-bottom: 1px solid #e9ecef;
        transition: all 0.3s ease;
    }

    .form-section:hover {
        background: #f8fafc;
    }

    .section-header {
        display: flex;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .section-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 1.5rem;
    }

    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.25rem;
    }

    .section-subtitle {
        color: #64748b;
        font-size: 0.95rem;
        margin: 0;
    }

    /* Category Grid */
    .category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }

    .category-selector {
        position: relative;
    }

    .selector-label {
        display: block;
        margin-bottom: 0.5rem;
        color: #475569;
        font-weight: 500;
        font-size: 0.95rem;
    }

    .custom-select-wrapper {
        position: relative;
    }

    .custom-select-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: white;
    }

    .custom-select-input:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .select-arrow {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        pointer-events: none;
    }

    /* Image Upload Area */
    .upload-area {
        border: 3px dashed #cbd5e1;
        border-radius: 24px;
        padding: 3rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #f8fafc;
    }

    .upload-area:hover {
        border-color: #667eea;
        background: #f1f5f9;
        transform: translateY(-2px);
    }

    .upload-icon {
        font-size: 3rem;
        color: #667eea;
        margin-bottom: 1rem;
    }

    .upload-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        margin-bottom: 0.5rem;
    }

    .upload-hint {
        color: #64748b;
        margin-bottom: 1rem;
    }

    .upload-badge {
        display: inline-block;
        padding: 0.25rem 1rem;
        background: #e2e8f0;
        border-radius: 50px;
        font-size: 0.85rem;
        color: #475569;
    }

    .image-preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .preview-item {
        position: relative;
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

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

    .remove-preview {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 24px;
        height: 24px;
        background: rgba(220, 53, 69, 0.9);
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        transition: all 0.3s ease;
    }

    .remove-preview:hover {
        background: #dc3545;
        transform: scale(1.1);
    }

    /* Modern Inputs */
    .modern-input,
    .modern-select,
    .modern-textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        font-size: 1rem;
        transition: all 0.3s ease;
        background: white;
    }

    .modern-input:focus,
    .modern-select:focus,
    .modern-textarea:focus {
        border-color: #667eea;
        outline: none;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    .modern-input.is-invalid,
    .modern-select.is-invalid,
    .modern-textarea.is-invalid {
        border-color: #dc3545;
    }

    .modern-select {
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1rem;
    }

    .modern-textarea {
        resize: vertical;
        min-height: 120px;
    }

    /* Price Input */
    .price-input-wrapper {
        position: relative;
        max-width: 300px;
    }

    .currency-symbol {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 1.25rem;
        font-weight: 600;
        color: #1e293b;
        z-index: 1;
    }

    .price-input {
        padding-left: 2.5rem !important;
    }

    /* Checkbox Styles */
    .checkbox-container {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 1rem;
        user-select: none;
    }

    .checkbox-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkmark {
        position: relative;
        height: 24px;
        width: 24px;
        background-color: #fff;
        border: 2px solid #e2e8f0;
        border-radius: 6px;
        margin-right: 10px;
        transition: all 0.3s ease;
    }

    .checkbox-container:hover input~.checkmark {
        border-color: #667eea;
    }

    .checkbox-container input:checked~.checkmark {
        background-color: #667eea;
        border-color: #667eea;
    }

    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    .checkbox-container input:checked~.checkmark:after {
        display: block;
    }

    .checkbox-container .checkmark:after {
        left: 7px;
        top: 3px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .checkbox-label {
        color: #475569;
    }

    /* Toggle Switch */
    .switch-container {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

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

    .switch-slider {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 26px;
        background-color: #e2e8f0;
        border-radius: 34px;
        margin-right: 10px;
        transition: all 0.3s ease;
    }

    .switch-slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        border-radius: 50%;
        transition: 0.3s;
    }

    .switch-container input:checked+.switch-slider {
        background-color: #667eea;
    }

    .switch-container input:checked+.switch-slider:before {
        transform: translateX(24px);
    }

    .switch-label {
        color: #475569;
        font-size: 0.95rem;
    }

    /* Tags Container */
    .tags-container {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .tag-checkbox {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
    }

    .tag-checkbox input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .tag-label {
        padding: 0.5rem 1rem;
        background: #f1f5f9;
        border-radius: 50px;
        font-size: 0.9rem;
        color: #475569;
        transition: all 0.3s ease;
        border: 2px solid transparent;
    }

    .tag-checkbox input:checked+.tag-label {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    }

    .tag-checkbox:hover .tag-label {
        background: #e2e8f0;
    }

    .tags-help {
        color: #6c757d;
        font-size: 0.85rem;
        display: block;
        margin-top: 0.5rem;
    }

    /* Character Counter */
    .char-counter {
        text-align: right;
        font-size: 0.85rem;
        color: #6c757d;
        margin-top: 0.25rem;
    }

    /* Error Messages */
    .error-message {
        color: #dc3545;
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }

    /* Custom Error Toast */
    .custom-error-toast {
        position: fixed;
        top: 20px;
        right: 20px;
        max-width: 400px;
        padding: 1rem;
        background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        color: white;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(220, 53, 69, 0.3);
        z-index: 9999;
        animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Alert Modern */
    .alert-modern {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
        border-radius: 16px;
        margin-bottom: 1.5rem;
        position: relative;
        animation: slideDown 0.3s ease-out;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .alert-modern.alert-danger {
        background: linear-gradient(135deg, #fff5f5 0%, #ffe3e3 100%);
        border-left: 4px solid #dc3545;
    }

    .alert-modern.alert-success {
        background: linear-gradient(135deg, #f0fff4 0%, #dcffe4 100%);
        border-left: 4px solid #28a745;
    }

    .alert-icon {
        width: 32px;
        height: 32px;
        background: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .alert-danger .alert-icon {
        color: #dc3545;
    }

    .alert-success .alert-icon {
        color: #28a745;
    }

    .alert-content {
        flex: 1;
    }

    .alert-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .alert-danger .alert-title {
        color: #c82333;
    }

    .alert-success .alert-title {
        color: #28a745;
    }

    .alert-list {
        margin: 0;
        padding-left: 1.5rem;
        color: #6c757d;
    }

    .alert-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #adb5bd;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }

    .alert-close:hover {
        color: #495057;
    }

    /* Submit Button */
    .form-actions {
        padding: 2rem;
        text-align: center;
    }

    .submit-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border: none;
        padding: 1rem 3rem;
        border-radius: 50px;
        font-size: 1.25rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    }

    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
    }

    .submit-btn:active {
        transform: translateY(0);
    }

    .btn-text {
        letter-spacing: 0.5px;
    }

    .form-terms {
        margin-top: 1.5rem;
        font-size: 0.9rem;
        color: #6c757d;
    }

    .form-terms a {
        color: #667eea;
        text-decoration: none;
    }

    .form-terms a:hover {
        text-decoration: underline;
    }

    /* Sidebar Ads */
    .sidebar-ads {
        position: sticky;
        top: 2rem;
    }

    .ads-card {
        background: white;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    }

    .ads-card-header {
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        padding: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }

    .ads-label {
        font-size: 0.85rem;
        font-weight: 600;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .ads-card-body {
        padding: 0;
    }

    .ads-card-body img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Field Note */
    .field-note {
        font-size: 0.9rem;
        color: #6c757d;
        margin-top: 0.5rem;
        margin-bottom: 0;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .header-title {
            font-size: 2rem;
        }

        .progress-steps {
            gap: 1rem;
            flex-wrap: wrap;
        }

        .form-section {
            padding: 1.5rem;
        }

        .category-grid {
            grid-template-columns: 1fr;
        }

        .section-icon {
            width: 40px;
            height: 40px;
            font-size: 1.25rem;
        }

        .upload-area {
            padding: 2rem;
        }

        .custom-error-toast {
            left: 20px;
            right: 20px;
            max-width: none;
        }
    }

    @media (max-width: 576px) {
        .header-title {
            font-size: 1.5rem;
        }

        .header-subtitle {
            font-size: 1rem;
        }

        .step {
            padding: 0.25rem 0.75rem;
            font-size: 0.8rem;
        }

        .form-section {
            padding: 1rem;
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .submit-btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
@endsection