@extends('layouts.admin')

@section('title', 'Edit Property Deal')

@push('styles')
    <style>
        :root {
            --psg-pink: #F95CA8;
            --psg-blue: #1E4072;
            --bg-light: #F8F9FC;
        }

        .admin-form-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .form-card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            overflow: hidden;
        }

        .form-card-header {
            background: var(--psg-blue);
            color: white;
            padding: 20px 30px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .form-card-body {
            padding: 30px;
        }

        .form-section-title {
            color: var(--psg-pink);
            font-weight: 800;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #EEE;
            padding-bottom: 10px;
        }

        .admin-label {
            display: block;
            font-weight: 700;
            color: #444;
            font-size: 0.8rem;
            margin-bottom: 8px;
            text-transform: uppercase;
        }

        .admin-input {
            width: 100%;
            padding: 12px 18px;
            border: 1px solid #E3E6F0;
            border-radius: 10px;
            background: var(--bg-light);
            transition: all 0.3s;
            font-weight: 500;
            color: #4E5E7A;
        }

        .admin-input:focus {
            background: white;
            border-color: var(--psg-pink);
            outline: none;
            box-shadow: 0 0 0 4px rgba(249, 92, 168, 0.05);
        }

        .admin-input:read-only {
            background: #EDF0F5;
            cursor: not-allowed;
            color: #888;
        }

        .calc-box {
            background: #F0F4F8;
            border-radius: 12px;
            padding: 20px;
            border-left: 5px solid var(--psg-pink);
        }

        .calc-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--psg-blue);
            margin: 0;
        }

        .calc-label {
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            color: #888;
            margin-bottom: 5px;
            display: block;
        }

        .upload-area {
            border: 2px dashed #E3E6F0;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            background: var(--bg-light);
            cursor: pointer;
            transition: 0.3s;
        }

        .upload-area:hover, .upload-area.drag-over {
            border-color: var(--psg-pink);
            background: rgba(249, 92, 168, 0.03);
        }

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

        .preview-box {
            aspect-ratio: 1;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid #EEE;
            position: relative;
        }

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

        .sticky-footer {
            position: sticky;
            bottom: 20px;
            background: white;
            padding: 20px 40px;
            border-radius: 50px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
            border: 1px solid #EEE;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
        }

        .feature-item {
            background: #F8F9FC;
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #E3E6F0;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: 0.2s;
        }

        .feature-item:hover {
            border-color: var(--psg-pink);
        }

        .feature-item input {
            cursor: pointer;
        }

        .text-pink { color: var(--psg-pink); }
    </style>
@endpush

@section('content')
<div class="admin-form-container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 class="fw-bold">Edit Property Deal</h2>
            <p class="text-muted">Modify existing deal information and media.</p>
        </div>
        <a href="{{ route('admin.available-properties.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
            <i class="bi bi-arrow-left me-2"></i>Back to List
        </a>
    </div>

    <form action="{{ route('admin.available-properties.update', $property->id) }}" method="POST" enctype="multipart/form-data" id="property-form">
        @csrf
        @method('PUT')

        @if ($errors->any())
            <div class="alert alert-danger rounded-4 border-0 shadow-sm p-4 mb-4">
                <h6 class="fw-bold text-danger"><i class="bi bi-exclamation-triangle-fill me-2"></i> Fix errors:</h6>
                <ul class="mb-0 small">
                    @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        <!-- Card 1: Deal Basics -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-speedometer2"></i> Deal Strategy & Pricing
            </div>
            <div class="form-card-body">
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Deal Type</label>
                        <select name="deal_type" id="deal_type" class="admin-input" required>
                            <option value="Below Market Value" {{ $property->deal_type == 'Below Market Value' ? 'selected' : '' }}>Below Market Value (BMV)</option>
                            <option value="Refurbishment project" {{ $property->deal_type == 'Refurbishment project' ? 'selected' : '' }}>Refurbishment Project</option>
                            <option value="Rental Yield" {{ $property->deal_type == 'Rental Yield' ? 'selected' : '' }}>Rental Yield / BTL</option>
                            <option value="HMO" {{ $property->deal_type == 'HMO' ? 'selected' : '' }}>HMO</option>
                            <option value="Development opportunity" {{ $property->deal_type == 'Development opportunity' ? 'selected' : '' }}>Development Opportunity</option>
                            <option value="Other" {{ $property->deal_type == 'Other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Marketing Purpose</label>
                        <select name="marketing_purpose_id" class="admin-input" required>
                            @foreach($marketingPurposes as $purpose)
                                <option value="{{ $purpose->id }}" {{ $property->marketing_purpose_id == $purpose->id ? 'selected' : '' }}>{{ $purpose->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Assignable Contract Available?</label>
                        <select name="assignable_contract" class="admin-input">
                            <option value="No" {{ $property->assignable_contract == 'No' ? 'selected' : '' }}>No</option>
                            <option value="Yes" {{ $property->assignable_contract == 'Yes' ? 'selected' : '' }}>Yes</option>
                        </select>
                    </div>
                </div>

                <div class="form-section-title mt-5">Financial Calculations</div>
                <div class="row g-4 mb-4">
                    <div class="col-md-4">
                        <label class="admin-label">Vendor Sale Price (£)</label>
                        <input type="number" name="price" id="vendor-price" class="admin-input" value="{{ $property->price }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Fees (2% or Min 5000)</label>
                        <input type="text" id="fees-display" class="admin-input" readonly value="£{{ number_format($property->psg_fees) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Portal Sale Price (£)</label>
                        <input type="text" id="portal-price-display" class="admin-input" readonly value="£{{ number_format($property->portal_sale_price) }}">
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Market Value (Min)</label>
                        <input type="number" name="market_value_min" id="mv-min" class="admin-input" value="{{ $property->market_value_min }}">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Market Value (Max)</label>
                        <input type="number" name="market_value_max" id="mv-max" class="admin-input" value="{{ $property->market_value_max }}">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Average Market Value</label>
                        <input type="text" id="mv-avg-display" class="admin-input" readonly value="£{{ number_format($property->market_value_avg) }}">
                    </div>
                </div>

                <div class="row mt-4">
                    <div class="col-md-4">
                        <div class="calc-box">
                            <span class="calc-label text-muted">Min Discount</span>
                            <h3 class="calc-value text-blue" id="min-discount-display" style="font-size: 1.5rem;">0%</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="calc-box">
                            <span class="calc-label text-muted">Max Discount</span>
                            <h3 class="calc-value text-blue" id="max-discount-display" style="font-size: 1.5rem;">0%</h3>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="calc-box" style="background: var(--psg-pink); color: white;">
                            <span class="calc-label" style="color: rgba(255,255,255,0.8)">Avg Investor Discount</span>
                            <h3 class="calc-value" id="discount-display">{{ number_format($property->discount_percentage, 1) }}%</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 2: Property Details -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-house-door"></i> Property Specifications
            </div>
            <div class="form-card-body">
                <div class="row g-4 mb-5">
                    <div class="col-md-8">
                        <label class="admin-label">Property Title / Headline</label>
                        <input type="text" name="headline" class="admin-input" value="{{ $property->headline }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Cash Buyers Only?</label>
                        <select name="is_cash_buy" class="admin-input">
                            <option value="0" {{ $property->is_cash_buy == 0 ? 'selected' : '' }}>No</option>
                            <option value="1" {{ $property->is_cash_buy == 1 ? 'selected' : '' }}>Yes</option>
                        </select>
                    </div>
                </div>

                <div class="form-section-title">Address & Location</div>
                <div class="row g-4 mb-4">
                    <div class="col-md-8">
                        <label class="admin-label">Search Full Address (Google Maps)</label>
                        <input type="text" id="google-search" name="location" class="admin-input" value="{{ $property->location }}">
                        <input type="hidden" name="latitude" id="lat" value="{{ $property->latitude }}">
                        <input type="hidden" name="longitude" id="lng" value="{{ $property->longitude }}">
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Door / Unit Number</label>
                        <input type="text" name="door_number" class="admin-input" value="{{ $property->door_number }}">
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">City / Town</label>
                        <input type="text" name="city" id="city" class="admin-input" value="{{ $property->city }}">
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Post Code</label>
                        <input type="text" name="postcode" id="postcode" class="admin-input" value="{{ $property->postcode }}">
                    </div>
                </div>

                <div class="form-section-title">Structure & Features</div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Property Category</label>
                        <select name="property_category" id="prop_category" class="admin-input">
                            @foreach($propertyCategories as $cat)
                                <option value="{{ $cat->name }}" {{ $property->property_category == $cat->name ? 'selected' : '' }}>{{ $cat->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Property Type</label>
                        <select name="property_type_id" id="prop_type_select" class="admin-input" data-selected="{{ $property->property_type_id }}">
                            @foreach($propertyTypes as $type)
                                <option value="{{ $type->id }}" data-category="{{ $type->propertyCategory ? $type->propertyCategory->name : 'N/A' }}" {{ $property->property_type_id == $type->id ? 'selected' : '' }}>{{ $type->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Detachment / Unit Type</label>
                        <select name="unit_type_id" id="unit_type_select" class="admin-input" data-selected="{{ $property->unit_type_id }}">
                            <option value="">N/A</option>
                            @foreach($unitTypes as $u)
                                <option value="{{ $u->id }}" data-parent="{{ $u->property_type_id }}" {{ $property->unit_type_id == $u->id ? 'selected' : '' }}>{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">No. of Bedrooms</label>
                        <select name="bedrooms" class="admin-input">
                            @for($i=0; $i<=10; $i++) <option value="{{$i}}" {{ $property->bedrooms == $i ? 'selected' : '' }}>{{$i}} Beds</option> @endfor
                            <option value="10+" {{ $property->bedrooms == '10+' ? 'selected' : '' }}>10+ Beds</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">No. of Bathrooms</label>
                        <select name="bathrooms" class="admin-input">
                            @for($i=0; $i<=5; $i++) <option value="{{$i}}" {{ $property->bathrooms == $i ? 'selected' : '' }}>{{$i}} Baths</option> @endfor
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="admin-label">Internal Area (Sq Ft)</label>
                        <input type="number" name="area_sq_ft" class="admin-input" value="{{ $property->area_sq_ft }}">
                    </div>
                </div>

                <div class="form-section-title mt-5">Tenure & Deadlines</div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="admin-label">Tenure</label>
                        <select name="tenure_type" id="tenure" class="admin-input">
                            <option value="Freehold" {{ $property->tenure_type == 'Freehold' ? 'selected' : '' }}>Freehold</option>
                            <option value="Leasehold" {{ $property->tenure_type == 'Leasehold' ? 'selected' : '' }}>Leasehold</option>
                        </select>
                    </div>
                    <div class="col-md-4" id="lease-years-box" style="{{ $property->tenure_type == 'Leasehold' ? '' : 'display:none;' }}">
                        <label class="admin-label">Lease Years Remaining</label>
                        <input type="number" name="lease_years_remaining" class="admin-input" value="{{ $property->lease_years_remaining }}">
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Exchange Deadline</label>
                        <select name="exchange_deadline" class="admin-input">
                            <option value="14 days" {{ $property->exchange_deadline == '14 days' ? 'selected' : '' }}>14 Days</option>
                            <option value="within 28 days" {{ $property->exchange_deadline == 'within 28 days' ? 'selected' : '' }}>Within 28 Days</option>
                            <option value="6 weeks" {{ $property->exchange_deadline == '6 weeks' ? 'selected' : '' }}>6 Weeks</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Completion Deadline</label>
                        <select name="completion_deadline" class="admin-input">
                            <option value="14 days" {{ $property->completion_deadline == '14 days' ? 'selected' : '' }}>14 Days</option>
                            <option value="within 28 days" {{ $property->completion_deadline == 'within 28 days' ? 'selected' : '' }}>Within 28 Days</option>
                            <option value="6 weeks" {{ $property->completion_deadline == '6 weeks' ? 'selected' : '' }}>6 Weeks</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Card 3: Media & Description -->
        <div class="form-card">
            <div class="form-card-header">
                <i class="bi bi-card-text"></i> Property Description & Media
            </div>
            <div class="form-card-body">
                <div class="admin-form-group mb-5">
                    <label class="admin-label">Property Description</label>
                    <textarea name="full_description" id="description-editor" class="admin-input">{!! $property->full_description !!}</textarea>
                </div>

                <div class="form-section-title">Amenities & Key Features</div>
                <div class="feature-grid mb-5">
                    @foreach($features as $f)
                        <label class="feature-item">
                            <input type="checkbox" name="features[]" value="{{ $f->id }}" {{ in_array($f->id, $selectedFeatures) ? 'checked' : '' }}>
                            <span class="small fw-bold">{{ $f->name }}</span>
                        </label>
                    @endforeach
                </div>

                <div class="form-section-title">Media Uploads</div>
                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="admin-label">Main Thumbnail</label>
                        <div class="upload-area" id="thumb-drop">
                            <i class="bi bi-cloud-arrow-up fs-2 text-pink"></i>
                            <p class="mb-0 small fw-bold">Click or drop to replace</p>
                            <input type="file" name="thumbnail" id="thumb-input" class="d-none" accept="image/*">
                            <div id="thumb-preview" class="preview-grid">
                                @if($property->thumbnail)
                                    <div class="preview-box"><img src="{{ asset('storage/' . $property->thumbnail) }}"></div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="admin-label">Gallery Images</label>
                        <div class="upload-area" id="gallery-drop">
                            <i class="bi bi-images fs-2 text-pink"></i>
                            <p class="mb-0 small fw-bold">Click or drop to replace all</p>
                            <input type="file" name="gallery_images[]" id="gallery-input" class="d-none" multiple accept="image/*">
                            <div id="gallery-preview" class="preview-grid">
                                @if($property->gallery_images)
                                    @foreach($property->gallery_images as $img)
                                        <div class="preview-box"><img src="{{ asset('storage/' . $img) }}"></div>
                                    @endforeach
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sticky Footer -->
        <div class="sticky-footer">
            <div class="d-flex align-items-center gap-4">
                <div class="text-start">
                    <span class="small text-muted text-uppercase fw-bold">Portal Sale Price</span>
                    <h3 class="fw-black mb-0 text-pink" id="footer-price-display">£{{ number_format($property->portal_sale_price) }}</h3>
                </div>
            </div>
            <div class="d-flex gap-3">
                <a href="{{ route('admin.available-properties.index') }}" class="btn btn-outline-secondary px-5 py-3 rounded-pill fw-bold">Cancel</a>
                <button type="submit" class="btn btn-dark px-5 py-3 rounded-pill fw-bold" style="background: var(--psg-blue)">Update Deal</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDtagAWzRL7h2Safzk7EwKK0x6v42RlsdI&libraries=places"></script>
<script>
    ClassicEditor.create(document.querySelector('#description-editor')).catch(console.error);

    function initMap() {
        const input = document.getElementById('google-search');
        if(!input) return;
        const autocomplete = new google.maps.places.Autocomplete(input, { componentRestrictions: { country: "gb" } });
        autocomplete.addListener('place_changed', function() {
            const place = autocomplete.getPlace();
            if (place.geometry) {
                document.getElementById('lat').value = place.geometry.location.lat();
                document.getElementById('lng').value = place.geometry.location.lng();
                place.address_components.forEach(comp => {
                    if (comp.types.includes('locality')) document.getElementById('city').value = comp.long_name;
                    if (comp.types.includes('postal_code')) document.getElementById('postcode').value = comp.long_name;
                });
            }
        });
    }
    google.maps.event.addDomListener(window, 'load', initMap);

    // Dynamic Cascading Dropdowns: Category -> Property Type -> Unit Type
    const catSelect = document.getElementById('prop_category');
    const typeSelect = document.getElementById('prop_type_select');
    const unitSelect = document.getElementById('unit_type_select');
    
    const typeOptions = Array.from(typeSelect.options);
    const unitOptions = Array.from(unitSelect.options);

    function updatePropertyTypes() {
        const cat = catSelect.value;
        const selectedTypeId = typeSelect.getAttribute('data-selected');
        
        typeSelect.innerHTML = '';
        typeOptions.forEach(opt => {
            if (opt.getAttribute('data-category') === cat) {
                const cloned = opt.cloneNode(true);
                if (cloned.value == selectedTypeId) cloned.selected = true;
                typeSelect.appendChild(cloned);
            }
        });
        updateUnitTypes(); // Cascading update
    }

    function updateUnitTypes() {
        const parentId = typeSelect.value;
        const selectedUnitId = unitSelect.getAttribute('data-selected');
        
        unitSelect.innerHTML = '<option value="">N/A</option>';
        unitOptions.forEach(opt => {
            if (opt.getAttribute('data-parent') == parentId) {
                const cloned = opt.cloneNode(true);
                if (cloned.value == selectedUnitId) cloned.selected = true;
                unitSelect.appendChild(cloned);
            }
        });
    }

    catSelect.addEventListener('change', updatePropertyTypes);
    typeSelect.addEventListener('change', updateUnitTypes);
    
    // Initial calls
    updatePropertyTypes();

    const vPrice = document.getElementById('vendor-price');
    const mvMin = document.getElementById('mv-min');
    const mvMax = document.getElementById('mv-max');

    function runCalcs() {
        const v = parseFloat(vPrice.value) || 0;
        const fee = Math.max(v * 0.02, 5000);
        const portal = v + fee;
        document.getElementById('fees-display').value = '£' + fee.toLocaleString();
        document.getElementById('portal-price-display').value = '£' + portal.toLocaleString();
        document.getElementById('footer-price-display').textContent = '£' + portal.toLocaleString();

        const mi = parseFloat(mvMin.value) || 0;
        const ma = parseFloat(mvMax.value) || 0;
        const avg = (mi + ma) / 2;

        if (mi > 0 && portal > 0) {
            const minDisc = ((mi - portal) / mi) * 100;
            document.getElementById('min-discount-display').textContent = Math.max(0, minDisc).toFixed(1) + '%';
        } else {
            document.getElementById('min-discount-display').textContent = '0%';
        }

        if (ma > 0 && portal > 0) {
            const maxDisc = ((ma - portal) / ma) * 100;
            document.getElementById('max-discount-display').textContent = Math.max(0, maxDisc).toFixed(1) + '%';
        } else {
            document.getElementById('max-discount-display').textContent = '0%';
        }

        if (avg > 0 && portal > 0) {
            document.getElementById('mv-avg-display').value = '£' + avg.toLocaleString();
            const disc = ((avg - portal) / avg) * 100;
            const shownDisc = Math.max(0, disc).toFixed(1) + '%';
            document.getElementById('discount-display').textContent = shownDisc;
        } else {
            document.getElementById('mv-avg-display').value = '';
            document.getElementById('discount-display').textContent = '0%';
        }
    }
    [vPrice, mvMin, mvMax].forEach(el => el.addEventListener('input', runCalcs));
    runCalcs();

    document.getElementById('tenure').addEventListener('change', (e) => {
        document.getElementById('lease-years-box').style.display = e.target.value === 'Leasehold' ? 'block' : 'none';
    });

    // Reuse drag drop logic from create...
    function setupDragDrop(areaId, inputId, previewId, isMulti = false) {
        const area = document.getElementById(areaId);
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        area.onclick = () => input.click();
        ['dragover', 'dragleave', 'drop'].forEach(evt => {
            area.addEventListener(evt, e => {
                e.preventDefault();
                evt === 'dragover' ? area.classList.add('drag-over') : area.classList.remove('drag-over');
                if (evt === 'drop') {
                    input.files = e.dataTransfer.files;
                    handleFiles(input.files, preview, isMulti);
                }
            });
        });
        input.onchange = () => handleFiles(input.files, preview, isMulti);
    }
    function handleFiles(files, preview, isMulti) {
        if (!isMulti) preview.innerHTML = ''; else preview.innerHTML = '';
        Array.from(files).forEach(file => {
            const reader = new FileReader();
            reader.onload = e => {
                const div = document.createElement('div');
                div.className = 'preview-box';
                div.innerHTML = `<img src="${e.target.result}">`;
                preview.appendChild(div);
            }
            reader.readAsDataURL(file);
        });
    }
    setupDragDrop('thumb-drop', 'thumb-input', 'thumb-preview');
    setupDragDrop('gallery-drop', 'gallery-input', 'gallery-preview', true);
</script>
@endpush