@extends('layouts.app')

@section('content')
<style>
    .image-preview-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 15px;
    }

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

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

    .image-preview-item .remove-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;
    }

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

    .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;
    }
</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 Room</h5>
                </div>

                <div class="card-body" style="padding: 30px;">
                    @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.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Property -->
                        <div class="form-group">
                            <label for="property_id">Property (Villa/Hotel) <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 $p)
                                    <option value="{{ $p->property_id }}" {{ old('property_id') == $p->property_id ? 'selected' : '' }}>
                                        {{ $p->nama_property }} ({{ ucfirst($p->jenis) }} - {{ $p->kota }})
                                    </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') }}" 
                                           placeholder="Example: Deluxe Room" 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') }}" 
                                           placeholder="500000" 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') }}" 
                                           placeholder="2" 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', 1) }}" 
                                           placeholder="3" 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" 
                                      placeholder="Room description...">{{ old('deskripsi') }}</textarea>
                            @error('deskripsi')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Foto Upload -->
                        <div class="form-group">
                            <label>Room Photos <span class="text-danger">*</span> <small class="text-muted">(Max 10 photos)</small></label>
                            
                            <div class="upload-box" onclick="document.getElementById('fotos').click()">
                                <i class="fas fa-cloud-upload-alt"></i>
                                <p class="mb-0"><strong>Click or Drag & Drop to Upload Photos</strong></p>
                                <small class="text-muted">Format: JPG, JPEG, PNG, WEBP. Max: 50MB per photo.</small>
                            </div>

                            <input type="file" 
                                   id="fotos" 
                                   name="fotos[]" 
                                   accept="image/*" 
                                   multiple 
                                   style="display: none;" 
                                   onchange="previewImages(event)"
                                   required>

                            <div id="imagePreview" class="image-preview-container"></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>

                        <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') == 'available' ? 'selected' : '' }}>Available</option>
                                <option value="unavailable" {{ old('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> Save 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>
let selectedFiles = [];

function previewImages(event) {
    const files = Array.from(event.target.files);
    const container = document.getElementById('imagePreview');
    
    if (selectedFiles.length + files.length > 10) {
        alert('Maximum 10 photos allowed!');
        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 = 'image-preview-item';
            div.innerHTML = `
                <img src="${e.target.result}" alt="Preview">
                <button type="button" class="remove-btn" onclick="removeImage(${selectedFiles.length - 1})">
                    <i class="fas fa-times"></i>
                </button>
            `;
            container.appendChild(div);
        };
        reader.readAsDataURL(file);
    });

    updateFileInput();
}

function removeImage(index) {
    selectedFiles.splice(index, 1);
    renderPreviews();
    updateFileInput();
}

function renderPreviews() {
    const container = document.getElementById('imagePreview');
    container.innerHTML = '';

    selectedFiles.forEach((file, index) => {
        const reader = new FileReader();
        reader.onload = function(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>
            `;
            container.appendChild(div);
        };
        reader.readAsDataURL(file);
    });
}

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