@extends('layouts.app')

@section('content')
<style>
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

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

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gallery-item .delete-btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background: #f5576c;
        color: white;
        border: none;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        cursor: pointer;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .gallery-item .delete-btn:hover {
        background: #d32f2f;
        transform: scale(1.1);
    }

    .gallery-item .badge-primary {
        position: absolute;
        bottom: 5px;
        left: 5px;
        background: #2D4356;
    }

    .upload-box {
        border: 3px dashed #D4AF37;
        border-radius: 15px;
        padding: 30px;
        text-align: center;
        background: #f8f9fa;
        cursor: pointer;
        transition: all 0.3s;
    }

    .upload-box:hover {
        background: #ffffff;
        border-color: #2D4356;
    }

    .upload-box i {
        font-size: 2.5rem;
        color: #8B7355;
        margin-bottom: 10px;
    }

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

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

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

    .new-preview-item .remove-btn {
        position: absolute;
        top: 3px;
        right: 3px;
        background: #f5576c;
        color: white;
        border: none;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        cursor: pointer;
        font-size: 12px;
    }
</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 Room</h5>
                </div>

                <div class="card-body" style="padding: 30px;">
                    @if(session('success'))
                        <div class="alert alert-success mb-4" style="border-radius: 10px;">
                            <i class="fas fa-check-circle"></i> {{ session('success') }}
                        </div>
                    @endif

                    @if($errors->any())
                        <div class="alert alert-danger mb-4" style="border-radius: 10px;">
                            <strong>Error!</strong> Please check the inputs below.
                            <ul class="mb-0 mt-2 pl-3">
                                @foreach($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

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

                        <!-- Property -->
                        <div class="form-group">
                            <label for="property_id">Property <span class="text-danger">*</span></label>
                            <select class="form-control @error('property_id') is-invalid @enderror" 
                                    id="property_id" name="property_id" required>
                                <option value="">-- Select Property --</option>
                                @foreach($properties as $property)
                                    <option value="{{ $property->property_id }}" 
                                            {{ old('property_id', $kamar->property_id) == $property->property_id ? 'selected' : '' }}>
                                        {{ $property->nama_property }} ({{ ucfirst($property->jenis) }})
                                    </option>
                                @endforeach
                            </select>
                            @error('property_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tipe_kamar">Room Type <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('tipe_kamar') is-invalid @enderror" 
                                           id="tipe_kamar" name="tipe_kamar" 
                                           value="{{ old('tipe_kamar', $kamar->tipe_kamar) }}" required>
                                    @error('tipe_kamar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="harga_per_malam">Price Per Night (Rp) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('harga_per_malam') is-invalid @enderror" 
                                           id="harga_per_malam" name="harga_per_malam" 
                                           value="{{ old('harga_per_malam', $kamar->harga_per_malam) }}" required min="0">
                                    @error('harga_per_malam')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="kapasitas">Capacity (Guests) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control @error('kapasitas') is-invalid @enderror" 
                                           id="kapasitas" name="kapasitas" 
                                           value="{{ old('kapasitas', $kamar->kapasitas) }}" required min="1">
                                    @error('kapasitas')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="jumlah_kamar">
                                        Total Units <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" class="form-control @error('jumlah_kamar') is-invalid @enderror" 
                                           id="jumlah_kamar" name="jumlah_kamar" 
                                           value="{{ old('jumlah_kamar', $kamar->jumlah_kamar) }}" required min="1" max="100">
                                    @error('jumlah_kamar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </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', $kamar->deskripsi) }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Gallery Management -->
                        <div class="form-group">
                            <label><i class="fas fa-images"></i> Room Photos</label>
                            
                            @if($kamar->galleries && $kamar->galleries->count() > 0)
                                <div class="alert alert-light border mb-3" style="border-radius: 10px;">
                                    <i class="fas fa-info-circle text-primary"></i> 
                                    Current Photos: <strong>{{ $kamar->galleries->count() }}</strong> / 10 maximum
                                </div>

                                <div class="gallery-grid">
                                    @foreach($kamar->galleries as $index => $gallery)
                                        <div class="gallery-item" id="gallery-{{ $gallery->gallery_id }}">
                                            <img src="{{ asset('storage/' . $gallery->foto_path) }}" alt="Photo {{ $index + 1 }}">
                                            
                                            @if($index === 0)
                                                <span class="badge badge-primary">Main Photo</span>
                                            @endif
                                            
                                            <button type="button" 
                                                    class="delete-btn" 
                                                    onclick="deleteExistingPhoto({{ $gallery->gallery_id }})">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    @endforeach
                                </div>
                            @else
                                <div class="alert alert-warning mb-3" style="border-radius: 10px;">
                                    <i class="fas fa-exclamation-triangle"></i> No photos uploaded yet. Please upload at least 1 photo.
                                </div>
                            @endif

                            @php
                                $currentCount = $kamar->galleries ? $kamar->galleries->count() : 0;
                                $remainingSlots = 10 - $currentCount;
                            @endphp

                            @if($remainingSlots > 0)
                                <div class="mt-3">
                                    <label>Add New Photos <small class="text-muted">({{ $remainingSlots }} slots remaining)</small></label>
                                    
                                    <div class="upload-box" onclick="document.getElementById('newFotos').click()">
                                        <i class="fas fa-cloud-upload-alt"></i>
                                        <p class="mb-0"><strong>Click to Upload New Photos</strong></p>
                                        <small class="text-muted">JPG, JPEG, PNG, WEBP. Max 50MB per file.</small>
                                    </div>

                                    <input type="file" 
                                           id="newFotos" 
                                           name="fotos[]" 
                                           accept="image/*" 
                                           multiple 
                                           style="display: none;" 
                                           onchange="previewNewImages(event, {{ $remainingSlots }})">

                                    <div id="newImagePreview" class="new-image-preview"></div>

                                    @error('fotos')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                    @error('fotos.*')
                                        <small class="text-danger d-block mt-1">{{ $message }}</small>
                                    @enderror
                                </div>
                            @endif
                        </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="available" {{ old('status', $kamar->status) == 'available' ? 'selected' : '' }}>Available</option>
                                <option value="unavailable" {{ old('status', $kamar->status) == 'unavailable' ? 'selected' : '' }}>Unavailable</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 Room
                            </button>
                            <a href="{{ route('admin.kamar.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>
function deleteExistingPhoto(galleryId) {
    if (!confirm('Are you sure you want to delete this photo?')) return;

    const galleryItem = document.getElementById(`gallery-${galleryId}`);
    galleryItem.style.opacity = '0.5';
    galleryItem.style.pointerEvents = 'none';

    fetch(`{{ url('/admin/kamar/photo') }}/${galleryId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '{{ csrf_token() }}',
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        credentials: 'same-origin'
    })
    .then(response => {
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        return response.json();
    })
    .then(data => {
        if (data.success) {
            galleryItem.style.transition = 'all 0.3s';
            galleryItem.style.transform = 'scale(0)';
            setTimeout(() => {
                galleryItem.remove();
                setTimeout(() => location.reload(), 800);
            }, 300);
        } else {
            alert('Failed to delete photo: ' + (data.message || 'Unknown error'));
            galleryItem.style.opacity = '1';
            galleryItem.style.pointerEvents = 'auto';
        }
    })
    .catch(error => {
        alert('Error deleting photo: ' + error.message);
        galleryItem.style.opacity = '1';
        galleryItem.style.pointerEvents = 'auto';
    });
}

let selectedFiles = [];

function previewNewImages(event, maxSlots) {
    const files = Array.from(event.target.files);
    const container = document.getElementById('newImagePreview');
    
    if (selectedFiles.length + files.length > maxSlots) {
        alert(`Maximum ${maxSlots} new photos allowed!`);
        event.target.value = '';
        return;
    }

    files.forEach((file, index) => {
        if (file.size > 52428800) {
            alert(`File ${file.name} is too large (max 50MB)`);
            return;
        }

        selectedFiles.push(file);
        
        const reader = new FileReader();
        reader.onload = function(e) {
            const div = document.createElement('div');
            div.className = 'new-preview-item';
            div.innerHTML = `
                <img src="${e.target.result}" alt="Preview">
                <button type="button" class="remove-btn" onclick="removeNewImage(${selectedFiles.length - 1})">
                    <i class="fas fa-times"></i>
                </button>
            `;
            container.appendChild(div);
        };
        reader.readAsDataURL(file);
    });

    updateFileInput();
}

function removeNewImage(index) {
    selectedFiles.splice(index, 1);
    renderNewPreviews();
    updateFileInput();
}

function renderNewPreviews() {
    const container = document.getElementById('newImagePreview');
    container.innerHTML = '';

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

function updateFileInput() {
    const dataTransfer = new DataTransfer();
    selectedFiles.forEach(file => dataTransfer.items.add(file));
    document.getElementById('newFotos').files = dataTransfer.files;
}
</script>
@endsection