{{-- Availability Inquiry modal — shared between Home and Buy pages.
     Trigger: any element with class `check-availability-btn` and a `data-listing-id` attribute,
     plus `data-bs-toggle="modal" data-bs-target="#availabilityModal"`. --}}
<div class="modal fade" id="availabilityModal" tabindex="-1" aria-hidden="true"
     data-bs-backdrop="static"
     data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable"
         style="max-width: 500px; width: 95%; margin: auto;">
        <div class="modal-content" style="border-radius: 16px; overflow: hidden;">

            <div class="modal-header"
                 style="background: linear-gradient(135deg, #1471C7, #0b7dff); border: none; padding: clamp(16px, 4vw, 24px);">
                <div>
                    <h5 class="modal-title fw-bold text-white mb-1" style="font-size: clamp(15px, 4vw, 18px);">
                        <i class="fas fa-calendar-check me-2"></i> Check Availability
                    </h5>
                    <p class="text-white mb-0" style="opacity: 0.9; font-size: clamp(11px, 3vw, 13px);">
                        We're happy to help! Fill in your details and we'll get back to you shortly.
                    </p>
                </div>
                <button type="button" class="btn-close btn-close-white ms-2 flex-shrink-0"
                        data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body" style="padding: clamp(16px, 4vw, 28px);">
                <input type="hidden" id="inq_listing_id" value="">

                <div class="row g-3">
                    <div class="col-12 col-sm-6">
                        <label class="form-label fw-5">First Name <span class="text-danger">*</span></label>
                        <input type="text" id="inq_first_name" class="form-control" placeholder="John">
                        <span class="text-danger" id="err_first_name" style="font-size:12px;"></span>
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label fw-5">Last Name <span class="text-danger">*</span></label>
                        <input type="text" id="inq_last_name" class="form-control" placeholder="Doe">
                        <span class="text-danger" id="err_last_name" style="font-size:12px;"></span>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-5">Phone <span class="text-danger">*</span></label>
                        <input type="text" id="inq_phone" class="form-control" placeholder="+1 000 0000000">
                        <span class="text-danger" id="err_phone" style="font-size:12px;"></span>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-5">Email
                            <span style="color: #aaa; font-size: 12px;">(Optional)</span>
                        </label>
                        <input type="email" id="inq_email" class="form-control" placeholder="john@example.com">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-5">Message</label>
                        <textarea id="inq_message" class="form-control" rows="3"
                                  placeholder="Confirm availability"
                                  style="color: #aaa;"></textarea>
                    </div>
                </div>
            </div>

            <div class="modal-footer"
                 style="border: none; padding: 0 clamp(16px, 4vw, 28px) clamp(16px, 4vw, 24px);">
                <button type="button" class="btn w-100 fw-bold text-white"
                        id="submitInquiry"
                        style="background: #1471C7; border-radius: 10px; padding: 12px; font-size: clamp(14px, 3.5vw, 16px);">
                    <i class="fas fa-paper-plane me-2"></i> Send Inquiry
                </button>
            </div>

        </div>
    </div>
</div>

@push('script')
    <script>
        (function () {
            const modalEl = document.getElementById('availabilityModal');
            if (!modalEl) return;

            // Pull listing id off the trigger button each time the modal opens.
            modalEl.addEventListener('show.bs.modal', function (event) {
                const trigger = event.relatedTarget;
                const listingId = trigger ? trigger.getAttribute('data-listing-id') : '';
                document.getElementById('inq_listing_id').value = listingId || '';
            });

            const submitBtn = document.getElementById('submitInquiry');
            submitBtn.addEventListener('click', function () {
                ['first_name', 'last_name', 'phone'].forEach(f => {
                    document.getElementById('err_' + f).textContent = '';
                });

                const data = {
                    car_listing_id: document.getElementById('inq_listing_id').value,
                    first_name: document.getElementById('inq_first_name').value.trim(),
                    last_name: document.getElementById('inq_last_name').value.trim(),
                    phone: document.getElementById('inq_phone').value.trim(),
                    email: document.getElementById('inq_email').value.trim(),
                    message: document.getElementById('inq_message').value.trim(),
                    _token: '{{ csrf_token() }}',
                };

                let hasError = false;
                if (!data.first_name) {
                    document.getElementById('err_first_name').textContent = 'First name is required.';
                    hasError = true;
                }
                if (!data.last_name) {
                    document.getElementById('err_last_name').textContent = 'Last name is required.';
                    hasError = true;
                }
                if (!data.phone) {
                    document.getElementById('err_phone').textContent = 'Phone is required.';
                    hasError = true;
                }
                if (hasError) return;

                const btn = this;
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i> Sending...';

                fetch('{{ route("availability.inquiry.store") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                    body: JSON.stringify(data),
                })
                    .then(r => r.json())
                    .then(json => {
                        if (json.success) {
                            btn.innerHTML = '<i class="fas fa-check-circle me-2"></i> Inquiry Sent!';
                            btn.style.background = '#28a745';
                            setTimeout(() => {
                                bootstrap.Modal.getInstance(modalEl).hide();
                                ['inq_first_name', 'inq_last_name', 'inq_phone', 'inq_email', 'inq_message']
                                    .forEach(id => document.getElementById(id).value = '');
                                btn.disabled = false;
                                btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i> Send Inquiry';
                                btn.style.background = '#1471C7';
                            }, 1800);
                        } else {
                            btn.disabled = false;
                            btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i> Send Inquiry';
                            alert((json && json.message) || 'Something went wrong, please try again.');
                        }
                    })
                    .catch(() => {
                        btn.disabled = false;
                        btn.innerHTML = '<i class="fas fa-paper-plane me-2"></i> Send Inquiry';
                        alert('Something went wrong, please try again.');
                    });
            });
        })();
    </script>
@endpush