@extends('backend.app')

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

@push('style')
    <style>
    .media-upload-zone {
        border: 2px dashed #dce1e6;
        border-radius: 12px;
        background: #f8f9fa;
        padding: 30px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    .media-upload-zone:hover, .media-upload-zone.dragover {
        border-color: #0d6efd;
        background: rgba(13, 110, 253, 0.04);
        transform: translateY(-2px);
    }

    .upload-zone-content {
        pointer-events: none;
    }

    .upload-zone-icon {
        font-size: 38px;
        color: #0d6efd;
        margin-bottom: 12px;
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .media-upload-zone:hover .upload-zone-icon {
        transform: scale(1.1);
    }

    .upload-zone-text {
        font-size: 14px;
        color: #495057;
        margin-bottom: 4px;
        font-weight: 500;
    }

    .upload-zone-text span {
        color: #0d6efd;
        text-decoration: underline;
    }

    .upload-zone-subtext {
        font-size: 11px;
        color: #868e96;
    }

    .media-preview-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 16px;
    }

    .media-preview-card {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid #e9ecef;
        background: #fff;
        box-shadow: 0 4px 6px rgba(0,0,0,0.04);
        height: 130px;
        display: flex;
        flex-direction: column;
        transition: opacity 0.3s ease, box-shadow 0.2s ease;
    }

    .media-preview-card.sortable-chosen {
        box-shadow: 0 8px 16px rgba(13, 110, 253, 0.2);
        border-color: #0d6efd;
    }

    .media-preview-card.sortable-ghost {
        opacity: 0.4;
        border: 2px dashed #0d6efd;
    }

    .media-preview-card.marked-delete {
        opacity: 0.35;
        filter: grayscale(1);
        border-color: #dc3545;
    }

    .media-preview-card img, .media-preview-card video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .media-preview-card .card-remove-btn {
        position: absolute;
        top: 6px;
        right: 6px;
        background: rgba(220, 53, 69, 0.9);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        font-size: 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s ease, transform 0.2s ease;
        z-index: 10;
    }

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

    .media-preview-card .media-badge {
        position: absolute;
        bottom: 6px;
        left: 6px;
        background: rgba(33, 37, 41, 0.8);
        color: #fff;
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 4px;
        font-weight: 500;
        z-index: 9;
        text-transform: capitalize;
    }

    .media-preview-card .media-badge.thumbnail-badge {
        background: rgba(25, 135, 84, 0.9);
    }

    .media-preview-card .drag-handle {
        position: absolute;
        top: 6px;
        left: 6px;
        background: rgba(33, 37, 41, 0.6);
        color: #fff;
        border: none;
        border-radius: 4px;
        width: 24px;
        height: 24px;
        font-size: 12px;
        cursor: grab;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
    }

    .upload-progress-container {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        z-index: 8;
    }

    .upload-progress-container span {
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 4px;
        color: #495057;
        text-align: center;
    }

    .progress-bar-wrapper {
        height: 6px;
        width: 100%;
        background-color: #e9ecef;
        border-radius: 3px;
        overflow: hidden;
    }

    .progress-bar-fill {
        height: 100%;
        background-image: linear-gradient(45deg, #0d6efd, #0b5ed7);
        width: 0%;
        transition: width 0.1s linear;
    }

    .delete-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(220, 53, 69, 0.15);
        z-index: 11;
        pointer-events: none;
    }

    .delete-overlay i {
        font-size: 28px;
        color: #dc3545;
        opacity: 0.7;
    }

    .add-type-btn {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 6px 6px 0;
        border: 1px solid #dce1e6;
        background: #fff;
        color: #0d6efd;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .add-type-btn:hover {
        background: #0d6efd;
        color: #fff;
        border-color: #0d6efd;
    }

    .input-group-wrapper {
        display: flex;
        gap: 0;
    }

    .input-group-wrapper select {
        border-radius: 6px 0 0 6px;
    }
    </style>
@endpush

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">Edit Property</h1>
    </div>
    <div class="ms-auto pageheader-btn">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.property.index') }}">Properties</a></li>
            <li class="breadcrumb-item active" aria-current="page">Edit</li>
        </ol>
    </div>
</div>

<div class="row">
    <div class="col-lg-12">
        <div class="card box-shadow-0">
            <div class="card-body">
                <form action="{{ route('admin.property.update', $data->id) }}" method="POST">
                    @csrf
                    @method('PUT')

                    @if(session('t-success'))
                        <div class="alert alert-solid alert-success d-flex align-items-center" role="alert">
                            <i class="fe fe-check-circle me-2"></i> {{ session('t-success') }}
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-solid alert-danger d-flex align-items-center" role="alert">
                            <i class="fe fe-alert-circle me-2"></i> {{ session('error') }}
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-solid alert-danger" role="alert">
                            <strong><i class="fe fe-alert-circle me-1"></i> Please fix the following errors:</strong>
                            <ul class="mt-2 mb-0">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="row">
                        <div class="mb-3 col-md-6">
                            <label for="title" class="form-label">Title</label>
                            <input type="text" name="title" id="title" class="form-control" value="{{ old('title', $data->title) }}" placeholder="Property title">
                            @error('title') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>


                        {{-- <div class="mb-3 col-md-4">
                            <label for="agent_id" class="form-label">Agent</label>
                            <select name="agent_id" id="agent_id" class="form-control">
                                <option value="">Select Agent</option>
                                @foreach($agents as $agent)
                                    <option value="{{ $agent->id }}" @selected(old('agent_id', $data->agent_id) == $agent->id)>{{ $agent->name }}</option>
                                @endforeach
                            </select>
                            @error('agent_id') <span class="text-danger">{{ $message }}</span> @enderror
                        </div> --}}

                        <div class="mb-3 col-md-4">
                            <label for="property_type_id" class="form-label">Property Type</label>
                            <div class="input-group-wrapper">
                                <select name="property_type_id" id="property_type_id" class="form-control" style="flex:1; border-radius:6px 0 0 6px;">
                                    <option value="">Select Type</option>
                                    @foreach($propertyTypes as $type)
                                        <option value="{{ $type->id }}" @selected(old('property_type_id', $data->property_type_id) == $type->id)>{{ $type->name }}</option>
                                    @endforeach
                                </select>
                                <button type="button" class="add-type-btn" data-bs-toggle="modal" data-bs-target="#propertyTypeModal" title="Add Property Type">
                                    <i class="fe fe-plus"></i>
                                </button>
                            </div>
                            @error('property_type_id') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        {{-- <div class="mb-3 col-md-4">
                            <label for="tag_id" class="form-label">Tag</label>
                            <select name="tag_id" id="tag_id" class="form-control">
                                <option value="">Select Tag</option>
                                @foreach($tags as $tag)
                                    <option value="{{ $tag->id }}" @selected(old('tag_id', $data->tag_id) == $tag->id)>{{ $tag->name }}</option>
                                @endforeach
                            </select>
                            @error('tag_id') <span class="text-danger">{{ $message }}</span> @enderror
                        </div> --}}

                        <input type="hidden" name="=tag_id" value="1">

                        <div class="mb-3 col-md-3">
                            <label for="status" class="form-label">Status</label>
                            <select name="status" id="status" class="form-control">
                                <option value="pending" @selected(old('status', $data->status) == 'pending')>Pending</option>
                                <option value="available" @selected(old('status', $data->status) == 'available')>Available</option>
                                <option value="under_contract" @selected(old('status', $data->status) == 'under_contract')>Under Contract</option>
                                <option value="sold" @selected(old('status', $data->status) == 'sold')>Sold</option>
                            </select>
                            @error('status') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="sales_type" class="form-label">Sales Type</label>
                            <select name="sales_type" id="sales_type" class="form-control">
                                <option value="sales" @selected(old('sales_type', $data->sales_type) == 'sales')>Sales</option>
                                <option value="raffle" @selected(old('sales_type', $data->sales_type) == 'raffle')>Raffle</option>
                                <option value="live" @selected(old('sales_type', $data->sales_type) == 'live')>Live</option>
                            </select>
                            @error('sales_type') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="house_type" class="form-label">House Type</label>
                            <div class="input-group-wrapper">
                                <select name="house_type" id="house_type" class="form-control" style="flex:1; border-radius:6px 0 0 6px;">
                                    <option value="">Select House Type</option>
                                    @foreach($houseTypes as $type)
                                        <option value="{{ $type->name }}" @selected(old('house_type', $data->house_type) == $type->name)>{{ ucfirst($type->name) }}</option>
                                    @endforeach
                                </select>
                                <button type="button" class="add-type-btn" data-bs-toggle="modal" data-bs-target="#houseTypeModal" title="Add House Type">
                                    <i class="fe fe-plus"></i>
                                </button>
                            </div>
                            @error('house_type') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="price" class="form-label">Price</label>
                            <input type="number" step="0.01" name="price" id="price" class="form-control" value="{{ old('price', $data->price) }}" placeholder="0.00">
                            @error('price') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        {{-- <div class="mb-3 col-md-3">
                            <label for="discount_price" class="form-label">Discount Price</label>
                            <input type="number" step="0.01" name="discount_price" id="discount_price" class="form-control" value="{{ old('discount_price', $data->discount_price) }}" placeholder="0.00">
                            @error('discount_price') <span class="text-danger">{{ $message }}</span> @enderror
                        </div> --}}

                        <div class="mb-3 col-md-3">
                            <label for="bedrooms" class="form-label">Bedrooms</label>
                            <input type="number" name="bedrooms" id="bedrooms" class="form-control" value="{{ old('bedrooms', $data->bedrooms) }}">
                            @error('bedrooms') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="bathrooms" class="form-label">Bathrooms</label>
                            <input type="number" name="bathrooms" id="bathrooms" class="form-control" value="{{ old('bathrooms', $data->bathrooms) }}">
                            @error('bathrooms') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="area" class="form-label">Area (sqft)</label>
                            <input type="number" name="area" id="area" class="form-control" value="{{ old('area', $data->area) }}">
                            @error('area') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="latitude" class="form-label">Latitude</label>
                            <input type="number" step="0.00000001" name="latitude" id="latitude" class="form-control" value="{{ old('latitude', $data->latitude) }}" placeholder="0">
                            @error('latitude') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="longitude" class="form-label">Longitude</label>
                            <input type="number" step="0.00000001" name="longitude" id="longitude" class="form-control" value="{{ old('longitude', $data->longitude) }}" placeholder="0">
                            @error('longitude') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-6">
                            <label for="address" class="form-label">Address</label>
                            <input type="text" name="address" id="address" class="form-control" value="{{ old('address', $data->address) }}" placeholder="Address">
                            @error('address') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="city" class="form-label">City</label>
                            <input type="text" name="city" id="city" class="form-control" value="{{ old('city', $data->city) }}" placeholder="City">
                            @error('city') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="state" class="form-label">State</label>
                            <input type="text" name="state" id="state" class="form-control" value="{{ old('state', $data->state) }}" placeholder="State">
                            @error('state') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="zip_code" class="form-label">Zip Code</label>
                            <input type="text" name="zip_code" id="zip_code" class="form-control" value="{{ old('zip_code', $data->zip_code) }}" placeholder="Zip Code">
                            @error('zip_code') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-3">
                            <label for="country" class="form-label">Country</label>
                            <input type="text" name="country" id="country" class="form-control" value="{{ old('country', $data->country) }}" placeholder="Country">
                            @error('country') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>

                        <div class="mb-3 col-md-12">
                            <label for="description" class="form-label">Description</label>
                            <textarea name="description" id="description" rows="5" class="form-control summernote" placeholder="Property description">{{ old('description', $data->description) }}</textarea>
                            @error('description') <span class="text-danger">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    <div class="mt-4 mb-4 row">
                        <div class="col-md-12">
                            <h4 class="pb-2 mb-3 border-bottom">Property Media</h4>
                            <p class="mb-3 text-muted small">Drag images to reorder. First image is the thumbnail. Click <i class="fe fe-x"></i> to remove existing media. Upload new files below.</p>
                        </div>

                        <!-- Images -->
                        <div class="mb-3 col-md-6">
                            <label class="form-label font-weight-bold">Property Images</label>

                            @php $existingImages = $data->gallery->where('type', 'image')->sortBy('order'); @endphp
                            @if($existingImages->count() > 0)
                                <div class="media-preview-grid sortable-images" id="existing-images-grid">
                                    @foreach($existingImages as $media)
                                        <div class="media-preview-card" data-media-id="{{ $media->id }}">
                                            <img src="{{ $media->url }}" alt="Property Image">
                                            <span class="drag-handle" title="Drag to reorder"><i class="fe fe-move"></i></span>
                                            <span class="media-badge {{ $media->name == 'thumbnail' ? 'thumbnail-badge' : '' }}">{{ $media->name == 'thumbnail' ? 'thumbnail' : 'gallery' }}</span>
                                            <button type="button" class="card-remove-btn" title="Remove this image" onclick="markExistingForDelete(this, {{ $media->id }})">
                                                <i class="fe fe-x"></i>
                                            </button>
                                            <input type="hidden" name="media_order[{{ $media->id }}]" value="{{ $media->order ?? $loop->index }}" class="media-order-input">
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <p class="mb-2 text-muted small">No images yet. Upload below.</p>
                            @endif

                            <div class="mt-3 media-upload-zone" id="images-dropzone">
                                <div class="upload-zone-content">
                                    <i class="fe fe-image upload-zone-icon"></i>
                                    <p class="upload-zone-text">Drag & drop new images here or <span>browse</span></p>
                                    <span class="upload-zone-subtext">Supported formats: JPEG, PNG, WEBP (Max 20MB)</span>
                                </div>
                                <input type="file" id="images-input" multiple accept="image/*" class="d-none">
                            </div>
                            <div class="mt-3 media-preview-grid" id="images-preview-grid"></div>
                        </div>

                        <!-- Video -->
                        <div class="mb-3 col-md-6">
                            <label class="form-label font-weight-bold">Property Video</label>

                            @php $existingVideo = $data->gallery->where('type', 'video')->first(); @endphp
                            @if($existingVideo)
                                <div class="mb-3 media-preview-grid" id="existing-video-grid">
                                    <div class="media-preview-card" data-media-id="{{ $existingVideo->id }}" id="existing-video-card">
                                        <video controls>
                                            <source src="{{ $existingVideo->url }}" type="video/mp4">
                                            Your browser does not support the video tag.
                                        </video>
                                        <span class="media-badge">video</span>
                                        <button type="button" class="card-remove-btn" title="Remove this video" onclick="markExistingVideoForDelete(this, {{ $existingVideo->id }})">
                                            <i class="fe fe-x"></i>
                                        </button>
                                        <input type="hidden" name="media_order[{{ $existingVideo->id }}]" value="{{ $existingVideo->order ?? 0 }}" class="media-order-input">
                                    </div>
                                </div>
                            @else
                                <p class="mb-2 text-muted small" id="no-video-msg">No video yet. Upload below.</p>
                            @endif

                            <div class="media-upload-zone" id="video-dropzone">
                                <div class="upload-zone-content">
                                    <i class="fe fe-video upload-zone-icon"></i>
                                    <p class="upload-zone-text">Drag & drop a video here or <span>browse</span></p>
                                    <span class="upload-zone-subtext">Supported formats: MP4, MOV, WEBM (Max 100MB)</span>
                                </div>
                                <input type="file" id="video-input" accept="video/*" class="d-none">
                            </div>
                            <div class="mt-3 media-preview-grid" id="video-preview-grid"></div>
                        </div>
                    </div>

                    <div id="media-inputs-container"></div>
                    <div id="delete-media-container"></div>

                    <button type="submit" class="btn btn-primary">Update</button>
                    <a href="{{ route('admin.property.index') }}" class="btn btn-secondary">Cancel</a>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Property Type Create Modal -->
<div class="modal fade" id="propertyTypeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add Property Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="propertyTypeForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="pt_name" class="form-label">Name</label>
                        <input type="text" id="pt_name" name="name" class="form-control" placeholder="Enter property type name" required>
                        <div class="invalid-feedback" id="pt_name_error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="pt_status" class="form-label">Status</label>
                        <select id="pt_status" name="status" class="form-control">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="pt_submit_btn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- House Type Create Modal -->
<div class="modal fade" id="houseTypeModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add House Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="houseTypeForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="ht_name" class="form-label">Name</label>
                        <input type="text" id="ht_name" name="name" class="form-control" placeholder="Enter house type name" required>
                        <div class="invalid-feedback" id="ht_name_error"></div>
                    </div>
                    <div class="mb-3">
                        <label for="ht_status" class="form-label">Status</label>
                        <select id="ht_status" name="status" class="form-control">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="ht_submit_btn">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const imagesDropzone = document.getElementById('images-dropzone');
    const imagesInput = document.getElementById('images-input');
    const imagesPreviewGrid = document.getElementById('images-preview-grid');

    const videoDropzone = document.getElementById('video-dropzone');
    const videoInput = document.getElementById('video-input');
    const videoPreviewGrid = document.getElementById('video-preview-grid');

    const mediaInputsContainer = document.getElementById('media-inputs-container');
    const deleteMediaContainer = document.getElementById('delete-media-container');
    let fileIndex = 0;

    // ── SortableJS for existing images ──
    const existingGrid = document.getElementById('existing-images-grid');
    if (existingGrid) {
        new Sortable(existingGrid, {
            animation: 200,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            chosenClass: 'sortable-chosen',
            onEnd: function () {
                updateMediaOrder();
                reEvaluateThumbnails();
            }
        });
    }

    function updateMediaOrder() {
        const grid = document.getElementById('existing-images-grid');
        if (!grid) return;
        const cards = grid.querySelectorAll('.media-preview-card');
        cards.forEach(function (card, index) {
            const input = card.querySelector('.media-order-input');
            if (input) {
                input.value = index;
            }
        });
    }

    function reEvaluateThumbnails() {
        const grid = document.getElementById('existing-images-grid');
        if (!grid) return;
        const cards = grid.querySelectorAll('.media-preview-card:not(.marked-delete)');
        cards.forEach(function (card, index) {
            const badge = card.querySelector('.media-badge');
            if (!badge) return;
            if (index === 0) {
                badge.innerText = 'thumbnail';
                badge.classList.add('thumbnail-badge');
            } else {
                badge.innerText = 'gallery';
                badge.classList.remove('thumbnail-badge');
            }
        });
    }

    // ── Helper: trigger file dialog ──
    imagesDropzone.addEventListener('click', function () { imagesInput.click(); });
    videoDropzone.addEventListener('click', function () { videoInput.click(); });

    // ── Drag and drop events ──
    ['dragenter', 'dragover'].forEach(function (eventName) {
        imagesDropzone.addEventListener(eventName, function (e) {
            e.preventDefault();
            imagesDropzone.classList.add('dragover');
        });
        videoDropzone.addEventListener(eventName, function (e) {
            e.preventDefault();
            videoDropzone.classList.add('dragover');
        });
    });

    ['dragleave', 'drop'].forEach(function (eventName) {
        imagesDropzone.addEventListener(eventName, function (e) {
            e.preventDefault();
            imagesDropzone.classList.remove('dragover');
        });
        videoDropzone.addEventListener(eventName, function (e) {
            e.preventDefault();
            videoDropzone.classList.remove('dragover');
        });
    });

    imagesDropzone.addEventListener('drop', function (e) {
        handleImageFiles(e.dataTransfer.files);
    });

    videoDropzone.addEventListener('drop', function (e) {
        if (e.dataTransfer.files.length > 0) {
            handleVideoFile(e.dataTransfer.files[0]);
        }
    });

    imagesInput.addEventListener('change', function (e) {
        handleImageFiles(e.target.files);
    });

    videoInput.addEventListener('change', function (e) {
        if (e.target.files.length > 0) {
            handleVideoFile(e.target.files[0]);
        }
    });

    // ── Image handling ──
    function handleImageFiles(files) {
        Array.from(files).forEach(function (file) {
            if (!file.type.startsWith('image/')) {
                alert('Please upload image files only.');
                return;
            }
            uploadFile(file, 'image', imagesPreviewGrid);
        });
    }

    // ── Video handling ──
    function handleVideoFile(file) {
        if (!file.type.startsWith('video/')) {
            alert('Please upload a video file only.');
            return;
        }
        // If there's an existing video that hasn't been marked for delete yet, mark it
        const existingCard = document.getElementById('existing-video-card');
        if (existingCard && !existingCard.classList.contains('marked-delete')) {
            const mediaId = existingCard.dataset.mediaId;
            if (mediaId) {
                addDeleteInput(mediaId);
                existingCard.classList.add('marked-delete');
                const overlay = document.createElement('div');
                overlay.className = 'delete-overlay';
                overlay.innerHTML = '<i class="fe fe-slash"></i>';
                existingCard.appendChild(overlay);
                const badge = existingCard.querySelector('.media-badge');
                if (badge) badge.innerText = 'replaced';
            }
        }
        // Enforce single new video
        videoPreviewGrid.innerHTML = '';
        mediaInputsContainer.querySelectorAll('.uploaded-video-input').forEach(function (el) { el.remove(); });

        uploadFile(file, 'video', videoPreviewGrid);
    }

    // ── Mark existing media for delete ──
    window.markExistingForDelete = function (btn, mediaId) {
        const card = btn.closest('.media-preview-card');
        if (card.classList.contains('marked-delete')) return;

        addDeleteInput(mediaId);
        card.classList.add('marked-delete');
        const overlay = document.createElement('div');
        overlay.className = 'delete-overlay';
        overlay.innerHTML = '<i class="fe fe-slash"></i>';
        card.appendChild(overlay);
        const badge = card.querySelector('.media-badge');
        if (badge) badge.innerText = 'removed';
        btn.disabled = true;
        btn.style.opacity = '0.5';

        reEvaluateThumbnails();
    };

    window.markExistingVideoForDelete = function (btn, mediaId) {
        const card = btn.closest('.media-preview-card');
        if (card.classList.contains('marked-delete')) return;

        addDeleteInput(mediaId);
        card.classList.add('marked-delete');
        const overlay = document.createElement('div');
        overlay.className = 'delete-overlay';
        overlay.innerHTML = '<i class="fe fe-slash"></i>';
        card.appendChild(overlay);
        const badge = card.querySelector('.media-badge');
        if (badge) badge.innerText = 'removed';
        btn.disabled = true;
        btn.style.opacity = '0.5';
    };

    function addDeleteInput(mediaId) {
        const existing = document.getElementById('delete-input-' + mediaId);
        if (existing) return;

        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'delete_media[]';
        input.id = 'delete-input-' + mediaId;
        input.value = mediaId;
        deleteMediaContainer.appendChild(input);
    }

    // ── Upload file via presigned URL ──
    function uploadFile(file, type, previewGrid) {
        const currentIdx = fileIndex++;

        // Create preview card with progress
        const card = document.createElement('div');
        card.className = 'media-preview-card';
        card.id = 'media-card-' + currentIdx;

        if (type === 'image') {
            const img = document.createElement('img');
            img.src = URL.createObjectURL(file);
            card.appendChild(img);
        } else {
            const videoIcon = document.createElement('div');
            videoIcon.style.display = 'flex';
            videoIcon.style.alignItems = 'center';
            videoIcon.style.justifyContent = 'center';
            videoIcon.style.height = '100%';
            videoIcon.style.background = '#e9ecef';
            videoIcon.innerHTML = '<i class="fe fe-video" style="font-size: 32px; color: #6c757d;"></i>';
            card.appendChild(videoIcon);
        }

        const progressContainer = document.createElement('div');
        progressContainer.className = 'upload-progress-container';
        progressContainer.innerHTML =
            '<span class="progress-percent">0%</span>' +
            '<div class="progress-bar-wrapper">' +
                '<div class="progress-bar-fill" id="progress-fill-' + currentIdx + '"></div>' +
            '</div>';
        card.appendChild(progressContainer);

        previewGrid.appendChild(card);

        // Fetch presigned URL
        fetch('{{ route("admin.property.get_signed_url") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                filename: file.name,
                content_type: file.type,
                type: type
            })
        })
        .then(function (response) {
            if (!response.ok) throw new Error('Failed to get S3 signed URL from server.');
            return response.json();
        })
        .then(function (data) {
            if (!data.success) throw new Error(data.message || 'Presigned URL generation failed.');

            const uploadUrl = data.upload_url;
            const filePath = data.file_path;

            // Upload to S3 via XHR
            const xhr = new XMLHttpRequest();
            xhr.open('PUT', uploadUrl, true);
            xhr.setRequestHeader('Content-Type', file.type);

            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    const percent = Math.round((e.loaded / e.total) * 100);
                    const fill = document.getElementById('progress-fill-' + currentIdx);
                    if (fill) fill.style.width = percent + '%';
                    const text = card.querySelector('.progress-percent');
                    if (text) text.innerText = percent + '%';
                }
            };

            xhr.onload = function () {
                if (xhr.status === 200 || xhr.status === 204) {
                    progressContainer.remove();

                    // Badge
                    const badge = document.createElement('span');
                    badge.className = 'media-badge';
                    if (type === 'image') {
                        const imageCards = imagesPreviewGrid.querySelectorAll('.media-preview-card');
                        const existingImageCards = existingGrid ? existingGrid.querySelectorAll('.media-preview-card:not(.marked-delete)') : [];
                        const isFirst = (existingImageCards.length === 0 && imageCards.length === 1);
                        if (isFirst) {
                            badge.innerText = 'thumbnail';
                            badge.classList.add('thumbnail-badge');
                        } else {
                            badge.innerText = 'gallery';
                        }
                    } else {
                        badge.innerText = 'video';
                    }
                    card.appendChild(badge);

                    // Remove button
                    const removeBtn = document.createElement('button');
                    removeBtn.type = 'button';
                    removeBtn.className = 'card-remove-btn';
                    removeBtn.innerHTML = '<i class="fe fe-x"></i>';
                    removeBtn.addEventListener('click', function () {
                        card.remove();
                        const hiddenInput = document.getElementById('media-input-' + currentIdx);
                        if (hiddenInput) hiddenInput.remove();
                    });
                    card.appendChild(removeBtn);

                    // Hidden form input
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = 'media_files[]';
                    input.id = 'media-input-' + currentIdx;
                    if (type === 'video') {
                        input.className = 'uploaded-video-input';
                    }
                    input.value = JSON.stringify({
                        path: filePath,
                        type: type
                    });
                    mediaInputsContainer.appendChild(input);
                } else {
                    handleUploadError(card, 'Upload to S3 failed. HTTP Status: ' + xhr.status);
                }
            };

            xhr.onerror = function () {
                handleUploadError(card, 'Network error during S3 upload.');
            };

            xhr.send(file);
        })
        .catch(function (err) {
            handleUploadError(card, err.message);
        });
    }

    function handleUploadError(card, message) {
        console.error(message);
        const progressPercent = card.querySelector('.progress-percent');
        if (progressPercent) {
            progressPercent.innerText = 'Error';
            progressPercent.style.color = '#dc3545';
        }
        const fill = card.querySelector('.progress-bar-fill');
        if (fill) {
            fill.style.backgroundImage = 'none';
            fill.style.backgroundColor = '#dc3545';
        }

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'card-remove-btn';
        removeBtn.innerHTML = '<i class="fe fe-x"></i>';
        removeBtn.addEventListener('click', function () { card.remove(); });
        card.appendChild(removeBtn);
    }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    function getCsrfToken() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    }

    function closeModal(el) {
        var closeBtn = el.querySelector('.btn-close');
        if (closeBtn) closeBtn.click();
    }

    /* --- Property Type Modal --- */
    var ptForm = document.getElementById('propertyTypeForm');
    var ptSubmitBtn = document.getElementById('pt_submit_btn');
    var ptModalEl = document.getElementById('propertyTypeModal');
    var ptNameInput = document.getElementById('pt_name');
    var ptNameError = document.getElementById('pt_name_error');

    if (ptForm) {
        ptForm.addEventListener('submit', function (e) {
            e.preventDefault();
            ptSubmitBtn.disabled = true;
            ptSubmitBtn.innerHTML = 'Saving...';

            var fd = new FormData(this);
            fd.append('_token', getCsrfToken());

            fetch('{{ route("admin.property_type.store") }}', {
                method: 'POST',
                body: fd
            })
            .then(function (response) {
                if (!response.ok) {
                    return response.json().then(function (err) { throw err; });
                }
                return response.json();
            })
            .then(function (res) {
                if (res.success) {
                    var select = document.getElementById('property_type_id');
                    var opt = document.createElement('option');
                    opt.value = res.data ? res.data.id : ptNameInput.value;
                    opt.textContent = ptNameInput.value;
                    select.appendChild(opt);
                    select.value = opt.value;

                    closeModal(ptModalEl);
                    ptForm.reset();
                    if (window.toastr) toastr.success(res.message);
                }
            })
            .catch(function (err) {
                if (err.errors && err.errors.name) {
                    ptNameInput.classList.add('is-invalid');
                    ptNameError.textContent = err.errors.name[0];
                }
                if (window.toastr) toastr.error(err.message || 'Something went wrong.');
            })
            .finally(function () {
                ptSubmitBtn.disabled = false;
                ptSubmitBtn.textContent = 'Save';
            });
        });
    }

    if (ptModalEl) {
        ptModalEl.addEventListener('hidden.bs.modal', function () {
            ptForm.reset();
            ptNameInput.classList.remove('is-invalid');
            ptNameError.textContent = '';
        });
    }

    /* --- House Type Modal --- */
    var htForm = document.getElementById('houseTypeForm');
    var htSubmitBtn = document.getElementById('ht_submit_btn');
    var htModalEl = document.getElementById('houseTypeModal');
    var htNameInput = document.getElementById('ht_name');
    var htNameError = document.getElementById('ht_name_error');

    if (htForm) {
        htForm.addEventListener('submit', function (e) {
            e.preventDefault();
            htSubmitBtn.disabled = true;
            htSubmitBtn.innerHTML = 'Saving...';

            var fd = new FormData(this);
            fd.append('_token', getCsrfToken());

            fetch('{{ route("admin.house_type.store") }}', {
                method: 'POST',
                body: fd
            })
            .then(function (response) {
                if (!response.ok) {
                    return response.json().then(function (err) { throw err; });
                }
                return response.json();
            })
            .then(function (res) {
                if (res.success) {
                    var name = htNameInput.value;
                    var select = document.getElementById('house_type');
                    var opt = document.createElement('option');
                    opt.value = name;
                    opt.textContent = name.charAt(0).toUpperCase() + name.slice(1);
                    select.appendChild(opt);
                    select.value = name;

                    closeModal(htModalEl);
                    htForm.reset();
                    if (window.toastr) toastr.success(res.message);
                }
            })
            .catch(function (err) {
                if (err.errors && err.errors.name) {
                    htNameInput.classList.add('is-invalid');
                    htNameError.textContent = err.errors.name[0];
                }
                if (window.toastr) toastr.error(err.message || 'Something went wrong.');
            })
            .finally(function () {
                htSubmitBtn.disabled = false;
                htSubmitBtn.textContent = 'Save';
            });
        });
    }

    if (htModalEl) {
        htModalEl.addEventListener('hidden.bs.modal', function () {
            htForm.reset();
            htNameInput.classList.remove('is-invalid');
            htNameError.textContent = '';
        });
    }
});
</script>
@endsection