@extends('layouts.app')

@section('content')
<style>
    .image-upload-container {
        border: 3px dashed #D4AF37;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        background: #f8f9fa;
        transition: all 0.3s;
        cursor: pointer;
    }

    .image-upload-container:hover {
        background: #fff;
        border-color: #2D4356;
    }

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

    .image-preview-item {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

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

    .image-preview-item .remove-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background: #f5576c;
        color: white;
        border: none;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .image-preview-item .remove-btn:hover {
        background: #d32f2f;
        transform: scale(1.1);
    }

    .image-count-badge {
        display: inline-block;
        background: linear-gradient(135deg, #D4AF37 0%, #c49b2e 100%);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: 600;
        margin-top: 10px;
    }
</style>

<div class="container" style="padding: 120px 0 80px;">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card" style="border-radius: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.1);">
                <div class="card-header" style="background: linear-gradient(135deg, #2D4356 0%, #8B7355 100%); color: white; border-radius: 20px 20px 0 0;">
                    <h5 class="mb-0"><i class="fas fa-edit"></i> Edit Property</h5>
                </div>

                <div class="card-body" style="padding: 30px;">
                    <form action="{{ route('admin.property.update', $property->property_id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <div class="form-group">
                            <label for="nama_property">Property Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('nama_property') is-invalid @enderror" 
                                   id="nama_property" name="nama_property" value="{{ old('nama_property', $property->nama_property) }}" required>
                            @error('nama_property')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="jenis">Property Type <span class="text-danger">*</span></label>
                            <select class="form-control @error('jenis') is-invalid @enderror" id="jenis" name="jenis" required>
                                <option value="villa" {{ old('jenis', $property->jenis) == 'villa' ? 'selected' : '' }}>Villa</option>
                                <option value="hotel" {{ old('jenis', $property->jenis) == 'hotel' ? 'selected' : '' }}>Hotel</option>
                            </select>
                            @error('jenis')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="alamat">Address</label>
                            <textarea class="form-control @error('alamat') is-invalid @enderror" 
                                      id="alamat" name="alamat" rows="2">{{ old('alamat', $property->alamat) }}</textarea>
                            @error('alamat')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="kota">City</label>
                            <input type="text" class="form-control @error('kota') is-invalid @enderror" 
                                   id="kota" name="kota" value="{{ old('kota', $property->kota) }}">
                            @error('kota')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="telepon">Phone Number</label>
                            <input type="text" class="form-control @error('telepon') is-invalid @enderror" 
                                   id="telepon" name="telepon" value="{{ old('telepon', $property->telepon) }}">
                            @error('telepon')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="deskripsi">Description</label>
                            <textarea class="form-control @error('deskripsi') is-invalid @enderror" 
                                      id="deskripsi" name="deskripsi" rows="4">{{ old('deskripsi', $property->deskripsi) }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Existing Images -->
                        @if($property->images && count($property->images) > 0)
                        <div class="form-group">
                            <label>Current Images</label>
                            <div class="image-preview-grid">
                                @foreach($property->images as $index => $image)
                                <div class="image-preview-item">
                                    <img src="{{ asset('storage/' . $image) }}" alt="Property Image">
                                    <label class="remove-btn" style="cursor: pointer;">
                                        <input type="checkbox" name="delete_images[]" value="{{ $image }}" style="display: none;">
                                        <i class="fas fa-times"></i>
                                    </label>
                                </div>
                                @endforeach
                            </div>
                            <small class="form-text text-muted">Check images to delete</small>
                        </div>
                        @endif

                        <!-- Add New Images -->
                        <div class="form-group">
                            <label>Add New Images (Max {{ 10 - (count($property->images ?? [])) }} more)</label>
                            <div class="image-upload-container" id="dropZone">
                                <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                                <h5>Drag & Drop Images Here</h5>
                                <p class="text-muted">or click to browse</p>
                                <input type="file" id="imageInput" name="images[]" multiple accept="image/*" style="display: none;">
                            </div>
                            <span class="image-count-badge" id="imageCount">0 images selected</span>
                            <small class="form-text text-muted d-block mt-2">Format: JPG, JPEG, PNG, WEBP. Max: 50MB per image</small>
                        </div>

                        <!-- New Image Preview -->
                        <div class="image-preview-grid" id="imagePreview"></div>

                        <div class="form-group">
                            <label for="status">Status <span class="text-danger">*</span></label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                                <option value="active" {{ old('status', $property->status) == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('status', $property->status) == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary" style="background: linear-gradient(135deg, #D4AF37 0%, #c49b2e 100%); border: none; padding: 12px 30px; border-radius: 25px;">
                                <i class="fas fa-save"></i> Update
                            </button>
                            <a href="{{ route('admin.property.index') }}" class="btn btn-secondary" style="padding: 12px 30px; border-radius: 25px;">
                                <i class="fas fa-times"></i> Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const dropZone = document.getElementById('dropZone');
    const imageInput = document.getElementById('imageInput');
    const imagePreview = document.getElementById('imagePreview');
    const imageCount = document.getElementById('imageCount');
    let selectedFiles = [];

    const maxNewImages = {{ 10 - (count($property->images ?? [])) }};

    dropZone.addEventListener('click', () => imageInput.click());

    dropZone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    });

    dropZone.addEventListener('dragleave', () => {
        dropZone.classList.remove('dragover');
    });

    dropZone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        handleFiles(e.dataTransfer.files);
    });

    imageInput.addEventListener('change', (e) => {
        handleFiles(e.target.files);
    });

    function handleFiles(files) {
        const newFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
        
        if (selectedFiles.length + newFiles.length > maxNewImages) {
            alert(`Maximum ${maxNewImages} more images allowed!`);
            return;
        }

        selectedFiles = selectedFiles.concat(newFiles);
        updatePreview();
        updateFileInput();
    }

    function updatePreview() {
        imagePreview.innerHTML = '';
        selectedFiles.forEach((file, index) => {
            const reader = new FileReader();
            reader.onload = (e) => {
                const div = document.createElement('div');
                div.className = 'image-preview-item';
                div.innerHTML = `
                    <img src="${e.target.result}" alt="Preview">
                    <button type="button" class="remove-btn" onclick="removeImage(${index})">
                        <i class="fas fa-times"></i>
                    </button>
                `;
                imagePreview.appendChild(div);
            };
            reader.readAsDataURL(file);
        });
        imageCount.textContent = `${selectedFiles.length} images selected`;
    }

    function updateFileInput() {
        const dataTransfer = new DataTransfer();
        selectedFiles.forEach(file => dataTransfer.items.add(file));
        imageInput.files = dataTransfer.files;
    }

    window.removeImage = function(index) {
        selectedFiles.splice(index, 1);
        updatePreview();
        updateFileInput();
    };

    // Delete checkbox styling
    document.querySelectorAll('input[name="delete_images[]"]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const label = this.closest('.remove-btn');
            if (this.checked) {
                label.style.background = '#d32f2f';
                label.querySelector('i').className = 'fas fa-check';
            } else {
                label.style.background = '#f5576c';
                label.querySelector('i').className = 'fas fa-times';
            }
        });
    });
});
</script>
@endsection