@extends('admin.layouts.app')

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

@section('content')

<div class="form-card">
    <h2>Create Service Booking</h2>

    @if($errors->any())
        <div class="alert alert-danger">{{ $errors->first() }}</div>
    @endif

    <form action="{{ route('admin.service-bookings.store') }}" method="POST">
        @csrf

        <div class="form-grid">
            <div class="form-group">
                <label>Quotation</label>
                <select name="quotation_id" id="quotationSelect">
                    <option value="">Select Quotation</option>
                    @foreach($quotations as $quotation)
                        <option value="{{ $quotation->id }}"
                                data-lead="{{ $quotation->lead_id }}"
                                data-customer="{{ $quotation->customer_id }}"
                                data-customer-name="{{ $quotation->customer->customer_name ?? '' }}"
                                data-address="{{ $quotation->customer->address ?? '' }}"
                                {{ old('quotation_id', request('quotation_id')) == $quotation->id ? 'selected' : '' }}>
                            {{ $quotation->quotation_number ?? 'QT-'.$quotation->id }}
                        </option>
                    @endforeach
                </select>
            </div>

            <input type="hidden" name="lead_id" id="leadIdInput" value="{{ old('lead_id', $selectedQuotation->lead_id ?? '') }}">
            <input type="hidden" name="customer_id" id="customerIdInput" value="{{ old('customer_id', $selectedQuotation->customer_id ?? '') }}">

            <div class="form-group">
                <label>Customer</label>
                <input type="text"
                       id="customerNameInput"
                       value="{{ old('customer_name', $selectedQuotation->customer->customer_name ?? '') }}"
                       readonly>
            </div>

            <div class="form-group">
                <label>Service Date *</label>
                <input type="date" name="service_date" value="{{ old('service_date') }}" required>
            </div>

            <div class="form-group">
                <label>Service Time</label>
                <input type="time" name="service_time" value="{{ old('service_time') }}">
            </div>

            <div class="form-group full">
                <label>Service Address</label>
                <textarea name="service_address" id="serviceAddressInput">{{ old('service_address', $selectedQuotation->customer->address ?? '') }}</textarea>
            </div>

            <div class="form-group full">
                <label>Remarks</label>
                <textarea name="remarks">{{ old('remarks') }}</textarea>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn-primary">Save Booking</button>
            <a href="{{ route('admin.service-bookings.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const quotationSelect = document.getElementById('quotationSelect');
    const leadIdInput = document.getElementById('leadIdInput');
    const customerIdInput = document.getElementById('customerIdInput');
    const customerNameInput = document.getElementById('customerNameInput');
    const serviceAddressInput = document.getElementById('serviceAddressInput');

    function fillQuotationDetails(clearAddress) {
        const selected = quotationSelect.options[quotationSelect.selectedIndex];

        leadIdInput.value = selected.dataset.lead || '';
        customerIdInput.value = selected.dataset.customer || '';
        customerNameInput.value = selected.dataset.customerName || '';

        if (clearAddress || !serviceAddressInput.value) {
            serviceAddressInput.value = selected.dataset.address || '';
        }
    }

    quotationSelect.addEventListener('change', function () {
        fillQuotationDetails(true);
    });

    fillQuotationDetails(false);
});
</script>

@endsection