@extends('frontend.layouts.master')
@section('title')
Unbound Bangladesh | Service Request
@endsection
@section('content')
<section class="tours-hero bg-success text-white py-5">
    <div class="container">
        <h1 class="display-4 fw-bold mb-3 text-center">Service Request</h1>
    </div>
</section>
<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <div class="container">
        <div class="d-flex align-items-center text-white">
            <i class="bi bi-house-door me-2"></i>
            <a href="{{ route('home.home') }}" class="text-white text-decoration-none me-2">Home</a>
            <span class="me-2">•</span>
            <span>Service Request</span>
        </div>
    </div>
</nav>

<section class="checkout-content py-5">
    <div class="container">
        <!-- Request for Service Form -->
        <div class="row">
            <div class="col-lg-12">
                <div class="bg-white p-4 rounded">
                    <h3 class="mb-4 fw-bold">Request for Service</h3>
                    <form id="serviceRequestForm" method="POST" action="{{ route('home.service.store') }}">
                        @csrf
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="preferredDate" class="form-label fw-semibold">Preferred Date</label>
                                <input type="hidden" name='service_date' id='service_date'>
                                <input type="hidden" name='til_date' id='til_date'>
                                <input type="text" class="form-control" id="preferredDate"
                                    placeholder="Select date range" required readonly>
                            </div>
                            <div class="col-md-6">
                                <label for="serviceType" class="form-label fw-semibold">Service Type</label>
                                <select class="form-select" id="serviceType" name='service_type_id' required>
                                    <option value="">Select</option>
                                    @foreach ($serviceTypes as $serviceType)
                                    <option value="{{ $serviceType->id }}">{{ $serviceType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="destination" class="form-label fw-semibold">Destination</label>
                            <select class="form-select" id="destination" name='travel_point_id' required>
                                <option value="">Select</option>
                                @foreach ($destinations as $destination)
                                <option value="{{ $destination->id }}">{{ $destination->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-semibold">No. of Persons</label>
                            <div class="row">
                                <div class="col-md-6">
                                    <label for="adults" class="form-label">Adults</label>
                                    <select class="form-select" id="adults" required name='number_of_adults'>
                                        <option value="">Select</option>
                                        <option value="1">1 Adult</option>
                                        <option value="2">2 Adults</option>
                                        <option value="3">3 Adults</option>
                                        <option value="4">4 Adults</option>
                                        <option value="5">5+ Adults</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="kids" class="form-label">Kids</label>
                                    <select class="form-select" id="kids" name='number_of_kids'>
                                        <option value="">Select</option>
                                        <option value="0">No Kids</option>
                                        <option value="1">1 Kid</option>
                                        <option value="2">2 Kids</option>
                                        <option value="3">3 Kids</option>
                                        <option value="4">4+ Kids</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="message" class="form-label fw-semibold">Any Message</label>
                            <textarea class="form-control" id="message" rows="5" name='description'
                                placeholder="Please describe your service requirements, special needs, or any other details..."></textarea>
                        </div>

                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-success btn-lg px-5 py-3">
                                Request <i class="bi bi-send ms-2"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
@push('scripts')
<script>
    // Initialize Select2 for select dropdowns
        $(document).ready(function() {
            $('#serviceType, #destination, #adults, #kids').select2({
                placeholder: "Select",
                allowClear: true
            });
 
           // Initialize Flatpickr for single date picker
            flatpickr("#preferredDate", {
                mode: "single", // change from "range" to "single"
                dateFormat: "Y-m-d",
                minDate: "today",
                placeholder: "Select date",
                allowInput: false,
                clickOpens: true,
                onChange: function(selectedDates, dateStr, instance) {
                    if (selectedDates.length > 0) {
                        const selectedDate = instance.formatDate(selectedDates[0], "Y-m-d");
                        $('#service_date').val(selectedDate);
                        $('#til_date').val(selectedDate); // optional, keep same as service_date if needed
                        instance.input.placeholder = selectedDate;
                    }
                }
            });

        });


        // $('#serviceRequestForm').submit(function(e) {
        //     e.preventDefault();
        //     $data = $(this).serialize();
        //     console.log($data);
        //     alert('Service request submitted! We will contact you soon. (This is a demo)');
        // });
</script>
@endpush