@extends('backend.app')

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

@push('style')
    <!-- Media Upload Styles & Layout -->
    <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;
    }

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

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

    .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">Create 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">Create</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.store') }}" method="POST">
                    @csrf

                    @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="mb-0 mt-2">
                                @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') }}" placeholder="Property title">
                            @error('title') <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;">
                                    @foreach($propertyTypes as $type)
                                        <option value="{{ $type->id }}" @selected(old('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') == $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') == 'pending')>Pending</option>
                                <option value="available" @selected(old('status', 'available') == 'available')>Available</option>
                                <option value="under_contract" @selected(old('status') == 'under_contract')>Under Contract</option>
                                <option value="sold" @selected(old('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', 'sales') == 'sales')>Sales</option>
                                <option value="raffle" @selected(old('sales_type') == 'raffle')>Raffle</option>
                                <option value="live" @selected(old('sales_type') == 'live')>Live</option>
                            </select>
                            @error('sales_type') <span class="text-danger">{{ $message }}</span> @enderror
                        </div> --}}
                        <input type="hidden" name="sales_type" value="raffle">

                        <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') == $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') }}" 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') }}" 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', 0) }}">
                            @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', 0) }}">
                            @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', 0) }}">
                            @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') }}" 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') }}" 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">Full Address</label>
                            <input type="text" name="address" id="address" class="form-control" value="{{ old('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') }}" 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') }}" 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') }}" 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') }}" 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') }}</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>
                        </div>

                        <!-- Images Upload Area -->
                        <div class="mb-3 col-md-6">
                            <label class="form-label font-weight-bold">Property Images (Multiple)</label>
                            <div class="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 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 Upload Area -->
                        <div class="mb-3 col-md-6">
                            <label class="form-label font-weight-bold">Property Video (Single)</label>
                            <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>

                    <button type="submit" class="btn btn-primary">Submit</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>
                        </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>
                        </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>
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 form = document.getElementById('media-inputs-container');
    let fileIndex = 0;

    // Helper: Trigger file dialog
    imagesDropzone.addEventListener('click', () => imagesInput.click());
    videoDropzone.addEventListener('click', () => videoInput.click());

    // Drag and Drop Events
    ['dragenter', 'dragover'].forEach(eventName => {
        imagesDropzone.addEventListener(eventName, (e) => {
            e.preventDefault();
            imagesDropzone.classList.add('dragover');
        }, false);
        videoDropzone.addEventListener(eventName, (e) => {
            e.preventDefault();
            videoDropzone.classList.add('dragover');
        }, false);
    });

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

    imagesDropzone.addEventListener('drop', (e) => {
        const dt = e.dataTransfer;
        const files = dt.files;
        handleImageFiles(files);
    });

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

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

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

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

    function handleVideoFile(file) {
        if (!file.type.startsWith('video/')) {
            alert('Please upload a video file only.');
            return;
        }
        // Enforce single video — clear existing preview and any hidden input
        videoPreviewGrid.innerHTML = '';
        const mediaContainer = document.getElementById('media-inputs-container');
        mediaContainer.querySelectorAll('.uploaded-video-input').forEach(el => el.remove());

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

    function uploadFile(file, type, previewGrid) {
        const currentIdx = fileIndex++;

        // 1. Create Preview Card with Progress Bar
        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);
        }

        // Add progress bar container
        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);

        // 2. 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(response => {
            if (!response.ok) {
                throw new Error('Failed to get S3 signed URL from server.');
            }
            return response.json();
        })
        .then(data => {
            if (!data.success) {
                throw new Error(data.message || 'Presigned URL generation failed.');
            }

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

            // 3. Upload raw binary directly to S3
            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) {
                    // Success! Remove progress container
                    progressContainer.remove();

                    // Add Badge
                    const badge = document.createElement('span');
                    badge.className = 'media-badge';

                    if (type === 'image') {
                        // Check if this is the first image in preview grid to mark as thumbnail
                        const imageCards = imagesPreviewGrid.querySelectorAll('.media-preview-card');
                        const isFirst = imageCards.length === 1 || (imageCards.length > 1 && imageCards[0].id === `media-card-${currentIdx}`);

                        if (isFirst) {
                            badge.innerText = 'thumbnail';
                            badge.classList.add('thumbnail-badge');
                        } else {
                            badge.innerText = 'gallery';
                        }
                    } else {
                        badge.innerText = 'video';
                    }
                    card.appendChild(badge);

                    // Add 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', () => {
                        card.remove();
                        const hiddenInput = document.getElementById(`media-input-${currentIdx}`);
                        if (hiddenInput) hiddenInput.remove();

                        // Re-evaluate thumbnail badges for remaining images
                        reEvaluateThumbnails();
                    });
                    card.appendChild(removeBtn);

                    // Create 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
                    });
                    form.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(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';
        }

        // Add Remove Button so user can discard failed card
        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'card-remove-btn';
        removeBtn.innerHTML = '<i class="fe fe-x"></i>';
        removeBtn.addEventListener('click', () => card.remove());
        card.appendChild(removeBtn);
    }

    function reEvaluateThumbnails() {
        const imageCards = imagesPreviewGrid.querySelectorAll('.media-preview-card');
        imageCards.forEach((imgCard, index) => {
            let badge = imgCard.querySelector('.media-badge');
            if (!badge) {
                badge = document.createElement('span');
                badge.className = 'media-badge';
                imgCard.appendChild(badge);
            }
            if (index === 0) {
                badge.innerText = 'thumbnail';
                badge.classList.add('thumbnail-badge');
            } else {
                badge.innerText = 'gallery';
                badge.classList.remove('thumbnail-badge');
            }
        });
    }
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    /* --- 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');

    function getCsrfToken() {
        return document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    }

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

    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