@extends('admin.layout')

@section('title', 'Edit Ballroom')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-building me-2"></i>Edit Ballroom
        </h1>
        <a href="{{ route('admin.ballrooms.index') }}" class="btn btn-outline-secondary">
            <i class="fas fa-arrow-left me-1"></i>Kembali
        </a>
    </div>

    <!-- Form Card -->
    <div class="card shadow">
        <div class="card-body">
            <form action="{{ route('admin.ballrooms.update', $ballroom) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                
                <div class="row">
                    <!-- Basic Information -->
                    <div class="col-lg-8">
                        <h5 class="mb-3">Informasi Dasar</h5>
                        <div class="mb-3">
                            <label for="hotel_id" class="form-label">Hotel <span class="text-danger">*</span></label>
                            <select class="form-select @error('hotel_id') is-invalid @enderror" id="hotel_id" name="hotel_id" required>
                                <option value="">Pilih Hotel</option>
                                @foreach($hotels as $hotel)
                                    <option value="{{ $hotel->id }}" {{ old('hotel_id', $ballroom->hotel_id) == $hotel->id ? 'selected' : '' }}>
                                        {{ $hotel->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('hotel_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Nama Ballroom <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name', $ballroom->name) }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Deskripsi</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="4">{{ old('description', $ballroom->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="capacity" class="form-label">Kapasitas <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('capacity') is-invalid @enderror" 
                                       id="capacity" name="capacity" value="{{ old('capacity', $ballroom->capacity) }}" required>
                                @error('capacity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="area_sqm" class="form-label">Luas (m²) <span class="text-danger">*</span></label>
                                <input type="number" step="0.01" class="form-control @error('area_sqm') is-invalid @enderror" 
                                       id="area_sqm" name="area_sqm" value="{{ old('area_sqm', $ballroom->area_sqm) }}" required>
                                @error('area_sqm')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label for="base_price_per_hour" class="form-label">Harga per Jam <span class="text-danger">*</span></label>
                                <input type="number" step="1000" class="form-control @error('base_price_per_hour') is-invalid @enderror" 
                                       id="base_price_per_hour" name="base_price_per_hour" value="{{ old('base_price_per_hour', $ballroom->base_price_per_hour) }}" required>
                                @error('base_price_per_hour')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="maximum_capacity" class="form-label">Kapasitas Maksimum <span class="text-danger">*</span></label>
                                <input type="number" class="form-control @error('maximum_capacity') is-invalid @enderror" 
                                       id="maximum_capacity" name="maximum_capacity" value="{{ old('maximum_capacity', $ballroom->maximum_capacity) }}" required>
                                @error('maximum_capacity')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="base_price_per_day" class="form-label">Harga per Hari <span class="text-danger">*</span></label>
                                <input type="number" step="1000" class="form-control @error('base_price_per_day') is-invalid @enderror" 
                                       id="base_price_per_day" name="base_price_per_day" value="{{ old('base_price_per_day', $ballroom->base_price_per_day) }}" required>
                                @error('base_price_per_day')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="price_per_pax" class="form-label">Harga per Pax</label>
                                <input type="number" step="1000" class="form-control @error('price_per_pax') is-invalid @enderror" 
                                       id="price_per_pax" name="price_per_pax" value="{{ old('price_per_pax', $ballroom->price_per_pax) }}">
                                @error('price_per_pax')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Settings -->
                    <div class="col-lg-4">
                        <h5 class="mb-3">Pengaturan</h5>
                        
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1" 
                                       {{ old('is_active', $ballroom->is_active) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Aktif
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="images" class="form-label">Gambar Baru</label>
                            <input type="file" class="form-control @error('images') is-invalid @enderror" 
                                   id="images" name="images[]" multiple accept="image/*">
                            <small class="form-text text-muted">Pilih beberapa gambar ballroom (kosongkan jika tidak ingin mengubah)</small>
                            @error('images')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Current Images -->
                        @if($ballroom->images && count($ballroom->images) > 0)
                            <div class="mb-3">
                                <label class="form-label">Gambar Saat Ini</label>
                                <div class="row g-2">
                                    @foreach($ballroom->images as $index => $image)
                                        @php(
                                            $src = (is_string($image) && (str_starts_with($image, 'http://') || str_starts_with($image, 'https://')))
                                                ? $image
                                                : (file_exists(public_path('storage/'.$image))
                                                    ? asset('storage/'.$image)
                                                    : 'https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=800&q=80&auto=format&fit=crop')
                                        )
                                        <div class="col-6">
                                            <div class="position-relative">
                                                <img src="{{ $src }}" class="img-thumbnail" alt="Gamballroom">
                                                <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 remove-image" 
                                                        data-index="{{ $index }}">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Facilities -->
                <div class="row mt-4">
                    <div class="col-12">
                        <h5 class="mb-3">Fasilitas</h5>
                        <div id="facilities-container">
                            @if($ballroom->facilities && count($ballroom->facilities) > 0)
                                @foreach($ballroom->facilities as $facility)
                                    <div class="input-group mb-2">
                                        <input type="text" class="form-control" name="facilities[]" value="{{ $facility }}" placeholder="Nama fasilitas">
                                        <button type="button" class="btn btn-outline-danger remove-facility">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                @endforeach
                            @else
                                <div class="input-group mb-2">
                                    <input type="text" class="form-control" name="facilities[]" placeholder="Nama fasilitas">
                                    <button type="button" class="btn btn-outline-danger remove-facility" style="display: none;">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            @endif
                        </div>
                        <button type="button" id="add-facility" class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-plus me-1"></i>Tambah Fasilitas
                        </button>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="row mt-4">
                    <div class="col-12">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-save me-1"></i>Update Ballroom
                        </button>
                        <a href="{{ route('admin.ballrooms.index') }}" class="btn btn-outline-secondary">
                            Batal
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
$(document).ready(function() {
    // Add facility functionality
    $('#add-facility').click(function() {
        const facilityHtml = `
            <div class="input-group mb-2">
                <input type="text" class="form-control" name="facilities[]" placeholder="Nama fasilitas">
                <button type="button" class="btn btn-outline-danger remove-facility">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        $('#facilities-container').append(facilityHtml);
        updateRemoveButtons();
    });

    // Remove facility functionality
    $(document).on('click', '.remove-facility', function() {
        $(this).closest('.input-group').remove();
        updateRemoveButtons();
    });

    // Remove image functionality
    $('.remove-image').click(function() {
        const index = $(this).data('index');
        // Add hidden input to mark image for removal
        $(this).closest('form').append(`<input type="hidden" name="remove_images[]" value="${index}">`);
        $(this).closest('.col-6').remove();
    });

    // Update remove buttons visibility
    function updateRemoveButtons() {
        const facilityCount = $('#facilities-container .input-group').length;
        $('.remove-facility').toggle(facilityCount > 1);
    }

    // Initial setup
    updateRemoveButtons();
});
</script>
@endpush
@endsection