@extends('admin.layout.app')
@section('title', 'Listing Inquiries')
@section('meta_description', 'All availability inquiries for this listing.')
@section('content')


    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">

                            {{-- Listing Header --}}
                            <div
                                class="listing-header-card d-flex align-items-center justify-content-between flex-wrap gap-3">
                                <div>
                                    <p class="mb-1"
                                       style="opacity: 0.85; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;">
                                        <i class="fas fa-car me-1"></i> Listing
                                    </p>
                                    <h4 class="fw-bold mb-0">{{ $listing->title ?? 'Listing #' . $listing->id }}</h4>
                                </div>
                                <div class="text-end">
                                    <p class="mb-1" style="opacity: 0.85; font-size: 13px;">Total Inquiries</p>
                                    <h3 class="fw-bold mb-0">{{ $inquiries->count() }}</h3>
                                </div>
                            </div>

                            {{-- Back Button --}}
                            <div class="mb-3">
                                <a href="{{ route('admin.sellers.listing',$listing->user_id) }}"
                                   class="btn btn-sm btn-light fw-bold">
                                    <i class="fas fa-arrow-left me-1"></i> Back to Listings
                                </a>
                            </div>

                            {{-- Inquiries List --}}
                            <div class="tfcl-favorite-listing">
                                @forelse($inquiries as $inquiry)
                                    @php $isHighlighted = $highlightId && $inquiry->id == $highlightId; @endphp

                                    <div
                                        class="inquiry-card mb-4 bg-white p-4 rounded border shadow-sm {{ $isHighlighted ? 'highlighted' : '' }}"
                                        id="inquiry-{{ $inquiry->id }}">
                                        <div class="row align-items-center g-0">

                                            {{-- Column 1: Name & Contact (width 3) --}}
                                            <div class="col-md-3 border-end pe-3">
                                                <div class="d-flex align-items-center mb-2">
                                                    <i class="icon-autodeal-user text-orange me-2 fs-20"></i>
                                                    <span style="font-size: 16px; font-weight: 700; color: #222;">
                            {{ $inquiry->first_name }} {{ $inquiry->last_name }}
                        </span>
                                                    @if($isHighlighted)
                                                        <span class="badge-new ms-2">NEW</span>
                                                    @endif
                                                </div>
                                                <div class="text-muted mb-1" style="font-size: 13px;">
                                                    <i class="icon-autodeal-phone2 me-1"></i> {{ $inquiry->phone }}
                                                </div>
                                                @if($inquiry->email)
                                                    <div class="text-muted" style="font-size: 13px;">
                                                        <i class="icon-autodeal-mail me-1"></i> {{ $inquiry->email }}
                                                    </div>
                                                @endif
                                            </div>

                                            {{-- Column 2: Message (width 5) --}}
                                            <div class="col-md-5 border-end px-3">
                    <span class="info-label text-muted mb-1 d-block"
                          style="font-size: 11px; text-transform: uppercase;">
                        <i class="fas fa-comment-dots me-1"></i> Message
                    </span>
                                                <div class="message-box text-dark"
                                                     style="font-size: 14px; line-height: 1.4;">
                                                    "{{ $inquiry->message ?? 'Confirm availability' }}"
                                                </div>
                                            </div>

                                            {{-- Column 3: Received & Clickable Status (width 3) --}}
                                            <div class="col-md-3 border-end px-3 text-center">
                    <span class="info-label text-muted d-block mb-1"
                          style="font-size: 11px; text-transform: uppercase;">
                        <i class="far fa-calendar-alt me-1"></i> Received
                    </span>
                                                <div class="fw-bold mb-1"
                                                     style="font-size: 14px;">{{ $inquiry->created_at->format('M d, Y') }}</div>

                                                @php
                                                    $statusMap = [
                                                        'pending'       => ['pill' => 'pill-pending',   'dot' => 'dot-pending',   'label' => 'Pending', 'next' => 'contacted'],
                                                        'contacted'     => ['pill' => 'pill-contacted', 'dot' => 'dot-contacted', 'label' => 'Contacted', 'next' => 'sold'],
                                                        'sold' => ['pill' => 'pill-na',        'dot' => 'dot-na',        'label' => 'Sold', 'next' => 'pending'],
                                                    ];
                                                    $s = $statusMap[$inquiry->status] ?? $statusMap['pending'];
                                                @endphp

                                                <div class="mt-2">
                                                    {{-- Clickable Pill (No Dropdown) --}}
                                                    <span class="status-pill {{ $s['pill'] }} cursor-pointer"
                                                          id="badge-{{ $inquiry->id }}"
                                                          onclick="cycleStatus('{{ $inquiry->id }}', '{{ $s['next'] }}')"
                                                          style="cursor: pointer; user-select: none;"
                                                          title="Click to change status">
                            <span class="dot {{ $s['dot'] }}"></span>
                            {{ $s['label'] }}
                        </span>
                                                </div>
                                            </div>
                                            <div class="col-md-1 text-center">
                                                <button class="btn btn-outline-danger btn-sm border-0"
                                                        onclick="showDeleteModal('{{ $inquiry->id }}')"
                                                        title="Delete Inquiry">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="text-center py-5">
                                        <i class="far fa-envelope-open" style="font-size: 48px; color: #ddd;"></i>
                                        <p class="mt-3 text-muted fw-bold">No inquiries yet for this listing.</p>
                                    </div>
                                @endforelse
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 15px; border: none; overflow: hidden;">
                <div class="modal-header border-0 pt-4">
                    <h5 class="modal-title w-100 text-center fw-bold" id="deleteModalLabel">Confirm Delete</h5>
                </div>
                <div class="modal-body text-center pb-4">
                    <div class="mb-3">
                        <img src="{{ asset('assets/images/dashboard/trash.svg') }}" style="width: 60px; opacity: 0.8;">
                    </div>
                    <p class="text-muted fs-15">
                        Do you really want to move this item to <strong>Trash</strong>?
                    </p>
                </div>
                <div class="modal-footer border-0 pb-4 justify-content-center">
                    <button type="button" class="btn-pf" data-bs-dismiss="modal"
                            style="background: #f2f4f7; color: #475467; border: none; padding: 10px 25px;">Cancel
                    </button>
                    <a href="javascript:void(0)" id="confirmDeleteBtn" class="btn-pf bg-orange"
                       style="text-decoration: none; background: red; padding: 10px 25px; border-radius: 8px; cursor: pointer;">
                        <span class="text-color-1" style="color: white; font-weight: 600;">Yes, Delete</span>
                    </a>

                </div>
            </div>
        </div>
    </div>
    <!-- Inside your Modal Footer -->

    @if($highlightId)
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const el = document.getElementById('inquiry-{{ $highlightId }}');
                if (el) {
                    setTimeout(() => {
                        el.scrollIntoView({behavior: 'smooth', block: 'center'});
                    }, 400);
                }
            });
        </script>
    @endif

@endsection
@push('scripts')
    <script>
        function cycleStatus(id, nextStatus) {
            const badge = document.getElementById('badge-' + id);

            // Visual Map for Instant UI Update
            const map = {
                'pending': {pill: 'pill-pending', dot: 'dot-pending', label: 'Pending', next: 'contacted'},
                'contacted': {pill: 'pill-contacted', dot: 'dot-contacted', label: 'Contacted', next: 'sold'},
                'sold': {pill: 'pill-na', dot: 'dot-na', label: 'Sold', next: 'pending'},
            };

            const config = map[nextStatus];

            // API Call
            fetch(`{{asset('/admin/inquiries/status')}}/${id}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({status: nextStatus})
            })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        // Update UI: change look and update the onclick for the next click
                        badge.className = 'status-pill cursor-pointer ' + config.pill;
                        badge.innerHTML = `<span class="dot ${config.dot}"></span>${config.label}`;
                        badge.setAttribute('onclick', `cycleStatus('${id}', '${config.next}')`);
                    }
                })
                .catch(err => console.error('Error updating status:', err));
        }

        let inquiryIdToDelete = null;
        let deleteModal = null;

        document.addEventListener('DOMContentLoaded', function () {
            // Initialize Bootstrap Modal instance
            deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
        });

        // 1. Modal show karne ka function
        function showDeleteModal(id) {
            inquiryIdToDelete = id;
            deleteModal.show();
        }

        // 2. Actual Delete handle karne ka function
        document.getElementById('confirmDeleteBtn').addEventListener('click', function (e) {
            e.preventDefault();

            if (!inquiryIdToDelete) return;

            // Button loading state (Optional but good)
            const btn = this;
            const originalText = btn.innerHTML;
            btn.innerHTML = 'Deleting...';
            btn.style.pointerEvents = 'none';

            fetch(`{{url('/admin/inquiries/delete')}}/${inquiryIdToDelete}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    'Content-Type': 'application/json'
                }
            })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        // Modal close karein
                        deleteModal.hide();

                        // Row remove karein with animation
                        const row = document.getElementById('inquiry-' + inquiryIdToDelete);
                        row.style.transition = '0.3s';
                        row.style.opacity = '0';
                        setTimeout(() => row.remove(), 300);

                        // Optional: Show success toast/notification
                    }
                })
                .catch(err => {
                    console.error('Delete failed:', err);
                    alert('Something went wrong!');
                })
                .finally(() => {
                    // Reset button state
                    btn.innerHTML = originalText;
                    btn.style.pointerEvents = 'auto';
                    inquiryIdToDelete = null;
                });
        });
    </script>
@endpush