@extends('customer.layouts.app')

@section('title', 'Add Service Booking')

@section('content')
<div class="module-heading heading-actions">
    <div><span class="eyebrow green">Schedule service</span><h1>Add Service Booking</h1><p>Select an approved quotation and your preferred visit schedule.</p></div>
    <a class="secondary-button" href="{{ route('customer.bookings.index') }}"><i class="fa-solid fa-arrow-left"></i> Back</a>
</div>

@if($errors->any())<div class="alert alert-error"><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif

<section class="module-card form-card">
    @if($quotations->isEmpty())
        <div class="module-empty"><i class="fa-regular fa-file-circle-check"></i><h2>No approved quotation available</h2><p>A booking can be added after a quotation is approved, and each quotation can be booked once.</p><a class="secondary-button" href="{{ route('customer.quotations.index') }}">View quotations</a></div>
    @else
        <form method="POST" action="{{ route('customer.bookings.store') }}" enctype="multipart/form-data">
            @csrf
            <div class="booking-form-grid">
                <div class="field full">
                    <label for="quotation_id">Approved quotation *</label>
                    <select id="quotation_id" name="quotation_id" required>
                        <option value="">Select a quotation</option>
                        @foreach($quotations as $quotation)
                            <option value="{{ $quotation->id }}" {{ (int)old('quotation_id', $selectedQuotationId) === $quotation->id ? 'selected' : '' }}>{{ $quotation->quotation_number }} — &#8377;{{ number_format($quotation->total_amount, 2) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field"><label for="service_date">Preferred date *</label><input id="service_date" name="service_date" type="date" min="{{ now()->format('Y-m-d') }}" value="{{ old('service_date') }}" required></div>
                <div class="field"><label for="service_time">Preferred time</label><input id="service_time" name="service_time" type="time" value="{{ old('service_time') }}"></div>
                <div class="field full"><label for="service_address">Service address *</label><textarea id="service_address" name="service_address" rows="3" required>{{ old('service_address', trim(collect([auth()->user()->address, auth()->user()->city, auth()->user()->state, auth()->user()->pincode])->filter()->implode(', '))) }}</textarea></div>
                <div class="field full"><label for="remarks">Problem description / remarks</label><textarea id="remarks" name="remarks" rows="4" placeholder="Describe the pest issue, affected rooms or any access instructions">{{ old('remarks') }}</textarea></div>
                <div class="field full">
                    <label for="bookingImages">Booking images <span class="optional-label">Optional — maximum 5</span></label>
                    <label class="upload-box" for="bookingImages"><i class="fa-solid fa-cloud-arrow-up"></i><strong>Choose up to 5 images</strong><span>JPEG, PNG or WebP · maximum 5 MB each</span></label>
                    <input class="hidden-file" id="bookingImages" name="images[]" type="file" accept="image/jpeg,image/png,image/webp" multiple>
                    <div class="image-preview-grid" id="imagePreview"></div>
                    <p class="file-error" id="fileError"></p>
                </div>
            </div>
            <div class="form-submit"><button class="primary-link" type="submit"><i class="fa-regular fa-calendar-check"></i> Submit booking</button></div>
        </form>
    @endif
</section>

<script>
    const imageInput = document.getElementById('bookingImages');
    const preview = document.getElementById('imagePreview');
    const fileError = document.getElementById('fileError');
    imageInput?.addEventListener('change', function () {
        preview.innerHTML = '';
        fileError.textContent = '';
        if (this.files.length > 5) {
            this.value = '';
            fileError.textContent = 'You can upload a maximum of 5 images.';
            return;
        }
        [...this.files].forEach((file) => {
            const item = document.createElement('div');
            const image = document.createElement('img');
            image.src = URL.createObjectURL(file);
            image.alt = file.name;
            item.appendChild(image);
            preview.appendChild(item);
        });
    });
</script>
@endsection