@extends('admin.layout')

@section('title', 'Tambah 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>Tambah Ballroom Baru
        </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.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <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') == $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') }}" 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') }}</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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}">
                                @error('price_per_pax')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </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', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    Aktif
                                </label>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="images" class="form-label">Gambar</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</small>
                            @error('images')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Facilities -->
                <div class="row mt-4">
                    <div class="col-12">
                        <h5 class="mb-3">Fasilitas</h5>
                        <div id="facilities-container">
                            <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>
                        </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>Simpan 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();
    });

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

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