@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-upload-container.dragover {
        background: #e3f2fd;
        border-color: #2196F3;
    }

    .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-plus-circle"></i> Add New Property</h5>
                </div>

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

                        <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') }}" 
                                   placeholder="Example: Villa Valito" 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="">-- Select Type --</option>
                                <option value="villa" {{ old('jenis') == 'villa' ? 'selected' : '' }}>Villa</option>
                                <option value="hotel" {{ old('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" 
                                      placeholder="Jl. Raya Ubud No. 123">{{ old('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') }}" 
                                   placeholder="Bali">
                            @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') }}" 
                                   placeholder="0361234567">
                            @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" 
                                      placeholder="Property description...">{{ old('deskripsi') }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Multiple Image Upload -->
                        <div class="form-group">
                            <label>Property Images (Max 10 images)</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 / 10 images</span>
                            <small class="form-text text-muted d-block mt-2">Format: JPG, JPEG, PNG, WEBP. Max: 50MB per image</small>
                            @error('images.*')
                                <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Image Preview Grid -->
                        <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') == 'active' ? 'selected' : '' }}>Active</option>
                                <option value="inactive" {{ old('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> Save
                            </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 = [];

    // Click to browse
    dropZone.addEventListener('click', () => imageInput.click());

    // Drag and drop
    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);
    });

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

    function handleFiles(files) {
        const maxFiles = 10;
        const newFiles = Array.from(files).filter(file => file.type.startsWith('image/'));
        
        if (selectedFiles.length + newFiles.length > maxFiles) {
            alert(`Maximum ${maxFiles} 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} / 10 images`;
    }

    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();
    };
});
</script>
@endsection