@extends('layouts.app')

@section('title', 'New Booking')

@section('content')
    <div class="d-flex align-items-center mb-4">
        <a href="{{ route('bookings.index') }}" class="btn btn-outline-secondary me-3"><i class="bi bi-arrow-left"></i></a>
        <h1 class="h3 mb-0"><i class="bi bi-calendar-plus me-2"></i>New Booking</h1>
    </div>

    <div class="card">
        <div class="card-body">
            <form method="POST" action="{{ route('bookings.store') }}">
                @csrf

                <div class="row g-3">
                    {{-- Project --}}
                    <div class="col-md-6">
                        <label for="project_id" class="form-label fw-semibold">Project <span
                                class="text-danger">*</span></label>
                        <select name="project_id" id="project_id"
                            class="form-select @error('project_id') is-invalid @enderror" required>
                            <option value="">Select Project</option>
                            @foreach ($projects as $proj)
                                <option value="{{ $proj->id }}" {{ old('project_id', $selectedProjectId) == $proj->id ? 'selected' : '' }}>
                                    {{ $proj->project_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('project_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Flat --}}
                    <div class="col-md-6">
                        <label for="flat_id" class="form-label fw-semibold">Flat <span class="text-danger">*</span></label>
                        <select name="flat_id" id="flat_id" class="form-select @error('flat_id') is-invalid @enderror"
                            required>
                            <option value="">Select Available Flat</option>
                            @foreach ($flats as $flat)
                                <option value="{{ $flat->id }}" {{ old('flat_id') == $flat->id ? 'selected' : '' }}>
                                    {{ $flat->flat_number }} — {{ $flat->building->name ?? '' }}
                                    ({{ ucfirst($flat->flat_type) }}, {{ number_format($flat->flat_size) }}
                                    {{ $flat->size_unit }})
                                    — ৳{{ number_format($flat->flat_price) }}
                                </option>
                            @endforeach
                        </select>
                        @error('flat_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        <div class="form-text">Only available flats for the selected project are shown.</div>
                    </div>

                    {{-- Customer --}}
                    <div class="col-md-6">
                        <label for="customer_id" class="form-label fw-semibold">Customer <span
                                class="text-danger">*</span></label>
                        <select name="customer_id" id="customer_id"
                            class="form-select @error('customer_id') is-invalid @enderror" required>
                            <option value="">Select Customer</option>
                            @foreach ($customers as $cust)
                                <option value="{{ $cust->id }}" {{ old('customer_id') == $cust->id ? 'selected' : '' }}>
                                    {{ $cust->name }} — {{ $cust->mobile }}
                                </option>
                            @endforeach
                        </select>
                        @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Booking Date --}}
                    <div class="col-md-3">
                        <label for="booking_date" class="form-label fw-semibold">Booking Date <span
                                class="text-danger">*</span></label>
                        <input type="date" name="booking_date" id="booking_date"
                            class="form-control @error('booking_date') is-invalid @enderror"
                            value="{{ old('booking_date', date('Y-m-d')) }}" required>
                        @error('booking_date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Booking Amount --}}
                    <div class="col-md-3">
                        <label for="booking_amount" class="form-label fw-semibold">Booking Amount (৳) <span
                                class="text-danger">*</span></label>
                        <input type="number" name="booking_amount" id="booking_amount" step="0.01" min="0"
                            class="form-control @error('booking_amount') is-invalid @enderror"
                            value="{{ old('booking_amount') }}" required>
                        @error('booking_amount') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Payment Method --}}
                    <div class="col-md-6">
                        <label for="payment_method_id" class="form-label">Payment Method</label>
                        <select name="payment_method_id" id="payment_method_id"
                            class="form-select @error('payment_method_id') is-invalid @enderror">
                            <option value="">Select Method</option>
                            @foreach ($paymentMethods as $pm)
                                <option value="{{ $pm->id }}" {{ old('payment_method_id') == $pm->id ? 'selected' : '' }}>
                                    {{ $pm->method_name }} ({{ ucfirst($pm->type) }})
                                </option>
                            @endforeach
                        </select>
                        @error('payment_method_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    {{-- Notes --}}
                    <div class="col-md-6">
                        <label for="notes" class="form-label">Notes</label>
                        <textarea name="notes" id="notes" rows="2" class="form-control @error('notes') is-invalid @enderror"
                            placeholder="Optional notes...">{{ old('notes') }}</textarea>
                        @error('notes') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                </div>

                <hr>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i> Create Booking
                </button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const projectSelect = document.getElementById('project_id');
    const flatSelect    = document.getElementById('flat_id');

    projectSelect.addEventListener('change', function () {
        const projectId = this.value;

        // Clear current flat options
        flatSelect.innerHTML = '<option value="">Loading flats...</option>';
        flatSelect.disabled = true;

        if (!projectId) {
            flatSelect.innerHTML = '<option value="">Select a project first</option>';
            flatSelect.disabled = false;
            return;
        }

        fetch(`{{ route('api.flats-available') }}?project_id=${projectId}`)
            .then(response => response.json())
            .then(flats => {
                flatSelect.innerHTML = '<option value="">Select Available Flat</option>';

                if (flats.length === 0) {
                    flatSelect.innerHTML = '<option value="">No available flats for this project</option>';
                } else {
                    flats.forEach(flat => {
                        const buildingName = flat.building ? flat.building.building_name : '';
                        const flatType = flat.flat_type ? flat.flat_type.charAt(0).toUpperCase() + flat.flat_type.slice(1) : '';
                        const flatSize = flat.flat_size ? Number(flat.flat_size).toLocaleString() : '0';
                        const flatPrice = flat.flat_price ? Number(flat.flat_price).toLocaleString() : '0';

                        const option = document.createElement('option');
                        option.value = flat.id;
                        option.textContent = `${flat.flat_number} — ${buildingName} (${flatType}, ${flatSize} ${flat.size_unit || 'sft'}) — ৳${flatPrice}`;
                        flatSelect.appendChild(option);
                    });
                }

                flatSelect.disabled = false;
            })
            .catch(error => {
                console.error('Error fetching flats:', error);
                flatSelect.innerHTML = '<option value="">Error loading flats</option>';
                flatSelect.disabled = false;
            });
    });
});
</script>
@endpush