@extends('layouts.app')

@section('content')

{{-- ── SUCCESS TOAST (generic) ── --}}
@if(session('success'))
<div id="successToast" class="status-toast toast-generic">
    <span class="toast-icon">✅</span>
    <div>
        <div class="toast-title">Status Updated</div>
        <div class="toast-msg">{{ session('success') }}</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

{{-- ── CONFIRMED TOAST ── --}}
@if(session('status_confirmed'))
<div id="confirmedToast" class="status-toast toast-confirmed">
    <span class="toast-icon">🎉</span>
    <div>
        <div class="toast-title">Booking Confirmed!</div>
        <div class="toast-msg">{{ session('status_confirmed') }}'s booking has been confirmed successfully.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

{{-- ── CANCELLED TOAST ── --}}
@if(session('status_cancelled'))
<div id="cancelledToast" class="status-toast toast-cancelled">
    <span class="toast-icon">❌</span>
    <div>
        <div class="toast-title">Booking Cancelled</div>
        <div class="toast-msg">{{ session('status_cancelled') }}'s booking has been cancelled.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

{{-- ── PENDING TOAST ── --}}
@if(session('status_pending'))
<div id="pendingToast" class="status-toast toast-pending">
    <span class="toast-icon">⏳</span>
    <div>
        <div class="toast-title">Marked as Pending</div>
        <div class="toast-msg">{{ session('status_pending') }}'s booking is set to pending.</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif


<div class="card border-0 shadow-sm">

    <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
        <h3 class="mb-0"><i class="fa fa-envelope me-2 text-primary"></i> Package Enquiries</h3>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            <div class="d-flex gap-2">
                <button class="filter-btn active" data-filter="all" onclick="filterTable('all', this)">
                    All <span class="filter-count" id="count_all">0</span>
                </button>
                <button class="filter-btn confirmed" data-filter="confirmed" onclick="filterTable('confirmed', this)">
                    ✅ Confirmed <span class="filter-count" id="count_confirmed">0</span>
                </button>
                <button class="filter-btn pending" data-filter="pending" onclick="filterTable('pending', this)">
                    ⏳ Pending <span class="filter-count" id="count_pending">0</span>
                </button>
                <button class="filter-btn cancelled" data-filter="cancelled" onclick="filterTable('cancelled', this)">
                    ❌ Cancelled <span class="filter-count" id="count_cancelled">0</span>
                </button>
                <button class="filter-btn adv-filter-btn" onclick="document.getElementById('advFilterModal').style.display='flex'" title="Advanced Filter">
                    <i class="fa fa-sliders me-1"></i> Filter
                </button>
            </div>
            <span class="badge text-white bg-primary fs-6 px-3 py-2" id="totalBadge">{{ $enquiries->total() }} Total</span>
        </div>
    </div>

    <div class="card-body p-0">
        <table class="table table-hover align-middle mb-0">
            <thead style="background:#f8f9fc;">
                <tr>
                    <th class="px-4 py-3" style="width:60px;">S.No</th>
                    <th class="py-3">Package</th>
                    <th class="py-3">Name</th>
                    <th class="py-3">Phone</th>
                    <th class="py-3 text-center">Status</th>
                    <th class="py-3 text-center" style="width:120px;">Actions</th>
                </tr>
            </thead>
            <tbody id="enquiryTableBody">
                @forelse($enquiries as $key => $enquiry)
                <tr class="enquiry-row"
                    data-status="{{ $enquiry->status }}"
                    data-index="{{ $key }}"
                    data-name="{{ strtolower($enquiry->full_name) }}"
                    data-email="{{ strtolower($enquiry->email) }}"
                    data-phone="{{ $enquiry->phone }}"
                    data-travel-start="{{ $enquiry->travel_start_date }}"
                    data-travel-end="{{ $enquiry->travel_end_date }}"
                    data-role="{{ $enquiry->user->role_id ?? 'guest' }}"
                    data-booked-by="{{ $enquiry->user->name ?? 'Guest/Walk-in' }}"
                    data-booked-by-id="{{ $enquiry->user_id ?? '' }}">

                    <td class="px-4 text-muted row-sno">{{ $enquiries->firstItem() + $key }}</td>

                    <td>
                        <div class="fw-bold" style="max-width:220px;">{{ $enquiry->package->name ?? '—' }}</div>
                        <div class="small text-muted mt-1">
                            <i class="fa fa-calendar me-1"></i>
                            {{ \Carbon\Carbon::parse($enquiry->travel_start_date)->format('d M Y') }}
                            @if($enquiry->travel_end_date)
                                → {{ \Carbon\Carbon::parse($enquiry->travel_end_date)->format('d M Y') }}
                            @endif
                        </div>
                    </td>

                    <td>
                        <div class="fw-semibold">{{ $enquiry->full_name }}</div>
                        <div class="small text-muted">{{ $enquiry->email }}</div>
                    </td>

                    <td><span class="fw-semibold">{{ $enquiry->phone }}</span></td>

                    <td class="text-center">
                        @if($enquiry->status == 'confirmed')
                            <span class="status-pill confirmed-pill">✅ Confirmed</span>
                        @elseif($enquiry->status == 'cancelled')
                            <span class="status-pill cancelled-pill">❌ Cancelled</span>
                        @else
                            <span class="status-pill pending-pill">⏳ Pending</span>
                        @endif
                    </td>

                    <td class="text-center">
                        <div class="d-flex gap-2 justify-content-center">
                            <button class="action-btn action-btn--view" title="View Details"
                                onclick="openViewModal({{ $enquiry->id }})">
                                <i class="fa fa-eye"></i>
                            </button>
                            <button class="action-btn action-btn--edit" title="Change Status"
                                onclick="openEditModal({{ $enquiry->id }}, '{{ $enquiry->status }}', '{{ addslashes($enquiry->full_name) }}')">
                                <i class="fa fa-pen"></i>
                            </button>
                        </div>
                    </td>
                </tr>
                @empty
                <tr id="emptyRow">
                    <td colspan="6" class="text-center text-muted py-5">
                        <i class="fa fa-inbox fa-2x mb-2 d-block"></i>
                        No enquiries received yet.
                    </td>
                </tr>
                @endforelse
            </tbody>

            {{-- ── LARAVEL PAGINATION ── --}}
            <tfoot>
                <tr>
                    <td colspan="6" class="px-4 py-3">
                        {{ $enquiries->onEachSide(1)->links() }}
                    </td>
                </tr>
            </tfoot>

        </table>

        <div id="noFilterResults" class="text-center py-5 d-none">
            <i class="fa fa-filter fa-2x text-muted mb-2 d-block"></i>
            <p class="text-muted">No enquiries found for this filter.</p>
        </div>
    </div>

   

</div>


{{-- VIEW DETAILS MODALS --}}
@foreach($enquiries as $enquiry)
<div class="modal fade" id="viewModal{{ $enquiry->id }}" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            <div class="modal-header border-0 text-white py-4 px-4"
                 style="background: linear-gradient(135deg, #1565C0, #1976D2);">
                <div>
                    <h5 class="modal-title fw-bold mb-1">
                        <i class="fa fa-user-circle me-2"></i> Enquiry Details
                    </h5>
                    <div class="small opacity-75">{{ $enquiry->package->name ?? '—' }}</div>
                </div>
                <div class="ms-auto d-flex align-items-center gap-3">
                    @if($enquiry->status == 'confirmed')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">✅ Confirmed</span>
                    @elseif($enquiry->status == 'cancelled')
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">❌ Cancelled</span>
                    @else
                        <span class="badge px-3 py-2" style="background:rgba(255,255,255,0.25);">⏳ Pending</span>
                    @endif
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
            </div>

            <div class="modal-body p-4">

                {{-- TRAVELLER INFO --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">👤 Traveller Information</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🙍</div>
                            <div class="detail-label">Full Name</div>
                            <div class="detail-value">{{ $enquiry->full_name }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">✉️</div>
                            <div class="detail-label">Email</div>
                            <div class="detail-value" style="font-size:13px;">{{ $enquiry->email }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📞</div>
                            <div class="detail-label">Phone</div>
                            <div class="detail-value">{{ $enquiry->phone }}</div>
                        </div>
                    </div>
                </div>

                {{-- TRAVEL INFO --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">✈️ Travel Details</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📅</div>
                            <div class="detail-label">Travel Date</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ \Carbon\Carbon::parse($enquiry->travel_start_date)->format('d M Y') }}
                                @if($enquiry->travel_end_date)
                                    <br><span class="text-muted" style="font-size:12px;">→ {{ \Carbon\Carbon::parse($enquiry->travel_end_date)->format('d M Y') }}</span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🏨</div>
                            <div class="detail-label">Package</div>
                            <div class="detail-value" style="font-size:13px;">{{ $enquiry->package->name ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🕐</div>
                            <div class="detail-label">Received On</div>
                            <div class="detail-value" style="font-size:13px;">{{ $enquiry->created_at->format('d M Y, h:i A') }}</div>
                        </div>
                    </div>
                </div>

                {{-- PASSENGERS --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">👨‍👩‍👧‍👦 Passengers</div></div>
                    <div class="col-md-4">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">🧑</div>
                            <div class="detail-label">Adults</div>
                            <div class="detail-value passenger-count">{{ $enquiry->adults }}</div>
                            <div class="detail-sub">12+ years</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">🧒</div>
                            <div class="detail-label">Children</div>
                            <div class="detail-value passenger-count">{{ $enquiry->children }}</div>
                            <div class="detail-sub">Age 2–12</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card passenger-card">
                            <div class="detail-icon" style="font-size:2rem;">👶</div>
                            <div class="detail-label">Infants</div>
                            <div class="detail-value passenger-count">{{ $enquiry->infants }}</div>
                            <div class="detail-sub">Below 2 yrs</div>
                        </div>
                    </div>
                </div>

                {{-- MESSAGE --}}
                @if($enquiry->message)
                <div class="mb-2">
                    <div class="detail-section-label">💬 Special Requirements</div>
                    <div class="mt-2 p-3 rounded-3" style="background:#f8f9fc; border-left:4px solid #1976D2; font-size:14px; color:#444; line-height:1.7;">
                        {{ $enquiry->message }}
                    </div>
                </div>
                @endif

            </div>

            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary rounded-pill px-4"
                    onclick="bootstrap.Modal.getInstance(document.getElementById('viewModal{{ $enquiry->id }}')).hide(); openEditModal({{ $enquiry->id }}, '{{ $enquiry->status }}', '{{ addslashes($enquiry->full_name) }}')">
                    <i class="fa fa-pen me-2"></i> Change Status
                </button>
            </div>

        </div>
    </div>
</div>
@endforeach


{{-- EDIT STATUS MODAL --}}
<div class="modal fade" id="editStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered" style="max-width:420px;">
        <div class="modal-content border-0 shadow-lg" style="border-radius:16px; overflow:hidden;">

            <div class="modal-header border-0 py-4 px-4"
                 style="background: linear-gradient(135deg, #1a1a2e, #16213e);">
                <div>
                    <h5 class="modal-title text-white fw-bold mb-1">
                        <i class="fa fa-pen me-2"></i> Update Booking Status
                    </h5>
                    <div class="small text-white opacity-50" id="editModalSubtitle"></div>
                </div>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body p-4">
                <p class="text-muted small mb-4">Select a new status for this enquiry.</p>

                <form id="editStatusForm" method="POST">
                    @csrf

                    <label class="status-option-card mb-3" id="card_confirmed">
                        <input type="radio" name="status" value="confirmed" class="status-radio" id="status_confirmed">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#e8f5e9; color:#2e7d32;">✅</div>
                            <div>
                                <div class="fw-bold" style="color:#2e7d32;">Booking Confirmed</div>
                                <div class="small text-muted">Approve and confirm this booking</div>
                            </div>
                        </div>
                    </label>

                    <label class="status-option-card mb-3" id="card_pending">
                        <input type="radio" name="status" value="pending" class="status-radio" id="status_pending">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#fff8e1; color:#f57f17;">⏳</div>
                            <div>
                                <div class="fw-bold" style="color:#f57f17;">Pending</div>
                                <div class="small text-muted">Keep this booking under review</div>
                            </div>
                        </div>
                    </label>

                    <label class="status-option-card mb-3" id="card_cancelled">
                        <input type="radio" name="status" value="cancelled" class="status-radio" id="status_cancelled">
                        <div class="d-flex align-items-center gap-3">
                            <div class="status-icon" style="background:#ffebee; color:#c62828;">❌</div>
                            <div>
                                <div class="fw-bold" style="color:#c62828;">Cancel Booking</div>
                                <div class="small text-muted">Cancel and reject this booking</div>
                            </div>
                        </div>
                    </label>

                    <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill fw-bold mt-2">
                        <i class="fa fa-save me-2"></i> Save Status
                    </button>
                </form>
            </div>

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


{{-- ADVANCED FILTER MODAL --}}
<div id="advFilterModal" onclick="if(event.target===this) closeAdvFilter()">
    <div id="advFilterBox">

        <div class="adv-filter-header">
            <h6><i class="fa fa-sliders me-2"></i> Advanced Filter</h6>
            <button class="adv-filter-close" onclick="closeAdvFilter()">✕</button>
        </div>

        <div class="adv-filter-body">

            <div class="mb-3">
                <label class="adv-filter-label">👤 Name</label>
                <input type="text" id="flt_name" class="adv-filter-input" placeholder="Search by name...">
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">🎭 Booked By Role</label>
                <select id="flt_role" class="adv-filter-input">
                    <option value="">All Roles</option>
                    <option value="1">Admin</option>
                    <option value="2">Agent</option>
                    <option value="3">Staff</option>
                    <option value="6">Customer (Self)</option>
                    <option value="guest">Guest / Walk-in</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">✉️ Email</label>
                <input type="text" id="flt_email" class="adv-filter-input" placeholder="Search by email...">
            </div>

            <div class="mb-3">
                <label class="adv-filter-label">📞 Mobile Number</label>
                <input type="text" id="flt_phone" class="adv-filter-input" placeholder="Search by phone...">
            </div>

            {{-- SINGLE DATE RANGE --}}
            <div class="mb-1">
                <label class="adv-filter-label">📅 Travel Date Range</label>
                <div class="d-flex gap-2">
                    <div style="flex:1;">
                        <label style="font-size:11px; color:#aaa; margin-bottom:4px; display:block;">From</label>
                        <input type="date" id="flt_start_from" class="adv-filter-input">
                    </div>
                    <div style="flex:1;">
                        <label style="font-size:11px; color:#aaa; margin-bottom:4px; display:block;">To</label>
                        <input type="date" id="flt_start_to" class="adv-filter-input">
                    </div>
                </div>
            </div>

        </div>

        <div class="adv-filter-footer">
            <button class="adv-filter-reset" onclick="resetAdvFilter()">
                <i class="fa fa-rotate-left me-1"></i> Reset
            </button>
            <button class="adv-filter-apply" onclick="applyAdvFilter()">
                <i class="fa fa-check me-1"></i> Apply Filter
            </button>
        </div>

    </div>
</div>


<style>
.status-toast {
    position: fixed; bottom: 30px; right: 30px;
    padding: 14px 18px; border-radius: 12px;
    font-size: 14px; font-weight: 500;
    box-shadow: 0 8px 30px rgba(0,0,0,0.18);
    z-index: 9999; display: flex; align-items: flex-start; gap: 12px;
    max-width: 340px; animation: slideInRight 0.4s ease; color: #fff;
}
.toast-confirmed { background: linear-gradient(135deg, #1b5e20, #2e7d32); }
.toast-cancelled { background: linear-gradient(135deg, #b71c1c, #c62828); }
.toast-pending   { background: linear-gradient(135deg, #e65100, #f57f17); }
.toast-generic   { background: linear-gradient(135deg, #1a237e, #1565C0); }
.toast-icon  { font-size: 1.5rem; line-height:1; flex-shrink:0; margin-top:2px; }
.toast-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
.toast-msg   { font-size: 12px; opacity: 0.9; line-height: 1.4; }
.toast-close { background:none; border:none; color:#fff; cursor:pointer; opacity:0.7; font-size:14px; margin-left:8px; padding:0; align-self:flex-start; margin-top:2px; }
.toast-close:hover { opacity:1; }
@keyframes slideInRight {
    from { opacity:0; transform:translateX(60px); }
    to   { opacity:1; transform:translateX(0); }
}
.filter-btn {
    border: 2px solid #dee2e6; background: #fff; border-radius: 20px;
    padding: 5px 14px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; color: #555;
}
.filter-btn:hover { border-color: #1976D2; color: #1976D2; }
.filter-btn.active { background: #1976D2; border-color: #1976D2; color: #fff; }
.filter-btn.confirmed.active { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.filter-btn.pending.active   { background: #f57f17; border-color: #f57f17; color: #fff; }
.filter-btn.cancelled.active { background: #c62828; border-color: #c62828; color: #fff; }
.filter-count { display: inline-block; background: rgba(255,255,255,0.3); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 2px; }
.filter-btn:not(.active) .filter-count { background: #eee; color: #555; }
.status-pill { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.confirmed-pill { background: #e8f5e9; color: #2e7d32; }
.pending-pill   { background: #fff8e1; color: #f57f17; }
.cancelled-pill { background: #ffebee; color: #c62828; }
.action-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; border: none;
    cursor: pointer; font-size: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.action-btn--view  { background:#e8f5e9; color:#2e7d32; }
.action-btn--view:hover  { background:#2e7d32; color:#fff; }
.action-btn--edit  { background:#e3f2fd; color:#1565c0; }
.action-btn--edit:hover  { background:#1565c0; color:#fff; }
.detail-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: #888; margin-bottom: 4px; }
.detail-card { background: #f8f9fc; border: 1px solid #eef0f8; border-radius: 12px; padding: 16px; text-align: center; height: 100%; }
.detail-icon { font-size: 1.4rem; margin-bottom: 6px; }
.detail-label { font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.detail-value { font-size: 15px; font-weight: 700; color: #1a1a2e; }
.passenger-card { border: 2px solid #eef0f8; }
.passenger-count { font-size: 2rem !important; color: #1565C0 !important; line-height: 1; }
.detail-sub { font-size: 11px; color: #aaa; margin-top: 4px; }
.status-option-card { display: block; border: 2px solid #eee; border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s; }
.status-option-card:hover { border-color: #1976D2; background: #f0f7ff; }
.status-option-card.selected-confirmed { border-color: #2e7d32 !important; background: #f1f8f1 !important; }
.status-option-card.selected-pending   { border-color: #f57f17 !important; background: #fffde7 !important; }
.status-option-card.selected-cancelled { border-color: #c62828 !important; background: #fff5f5 !important; }
.status-radio { display: none; }
.status-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.adv-filter-btn { border-color: #6c757d !important; color: #6c757d !important; }
.adv-filter-btn:hover { border-color: #343a40 !important; color: #343a40 !important; background: #f8f9fa !important; }
.adv-filter-btn.filter-active { border-color: #6f42c1 !important; background: #6f42c1 !important; color: #fff !important; }
#advFilterModal { display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,0.45); align-items: center; justify-content: center; }
#advFilterBox { background: #fff; border-radius: 16px; width: 100%; max-width: 480px; margin: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; animation: slideUp 0.3s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
.adv-filter-header { background: linear-gradient(135deg, #1a1a2e, #16213e); padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; }
.adv-filter-header h6 { color:#fff; font-weight:700; margin:0; font-size:15px; }
.adv-filter-close { background:none; border:none; color:#fff; opacity:0.7; font-size:18px; cursor:pointer; line-height:1; padding:0; }
.adv-filter-close:hover { opacity:1; }
.adv-filter-body { padding: 22px; }
.adv-filter-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:#888; margin-bottom:6px; display:block; }
.adv-filter-input { width:100%; padding:9px 14px; border:1.5px solid #dee2e6; border-radius:10px; font-size:13px; outline:none; transition:border-color 0.2s; background:#fff; }
.adv-filter-input:focus { border-color: #1976D2; }
.adv-filter-footer { padding: 0 22px 22px; display:flex; gap:10px; }
.adv-filter-apply { flex:1; padding:10px; background:#1976D2; color:#fff; border:none; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; }
.adv-filter-apply:hover { background:#1565C0; }
.adv-filter-reset { padding:10px 18px; background:#f8f9fa; color:#555; border:1.5px solid #dee2e6; border-radius:10px; font-weight:600; font-size:13px; cursor:pointer; }
.adv-filter-reset:hover { background:#e9ecef; }
</style>


<script>
// ── No JS pagination — Laravel handles it server-side ──

let allRows       = Array.from(document.querySelectorAll('.enquiry-row'));
let filtered      = allRows;
let currentFilter = 'all';

function updateCounts() {
    document.getElementById('count_all').textContent       = allRows.length;
    document.getElementById('count_confirmed').textContent = allRows.filter(r => r.dataset.status === 'confirmed').length;
    document.getElementById('count_pending').textContent   = allRows.filter(r => r.dataset.status === 'pending').length;
    document.getElementById('count_cancelled').textContent = allRows.filter(r => r.dataset.status === 'cancelled').length;
}

function filterTable(filter, btn) {
    currentFilter = filter;
    document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    filtered = filter === 'all' ? allRows : allRows.filter(r => r.dataset.status === filter);
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => {
        r.style.display = '';
        r.querySelector('.row-sno').textContent = i + 1;
    });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
}

function openViewModal(id) {
    new bootstrap.Modal(document.getElementById('viewModal' + id)).show();
}

function openEditModal(id, currentStatus, name) {
    document.getElementById('editStatusForm').dataset.id   = id;
    document.getElementById('editStatusForm').dataset.name = name;
    document.getElementById('editModalSubtitle').textContent = 'Updating status for: ' + name;
    ['confirmed','pending','cancelled'].forEach(s => {
        document.getElementById('card_' + s).classList.remove('selected-confirmed','selected-pending','selected-cancelled');
    });
    const radio = document.getElementById('status_' + currentStatus);
    if (radio) {
        radio.checked = true;
        document.getElementById('card_' + currentStatus).classList.add('selected-' + currentStatus);
    }
    new bootstrap.Modal(document.getElementById('editStatusModal')).show();
}

document.getElementById('editStatusForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const id     = this.dataset.id;
    const name   = this.dataset.name;
    const status = this.querySelector('input[name="status"]:checked')?.value;
    const token  = this.querySelector('input[name="_token"]').value;
    if (!status) { alert('Please select a status.'); return; }
    fetch('{{ url("admin/enquiries/status") }}/' + id, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': token },
        body: JSON.stringify({ status: status }),
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            bootstrap.Modal.getInstance(document.getElementById('editStatusModal')).hide();
            const rows = document.querySelectorAll('.enquiry-row');
            rows.forEach(row => {
                if (row.innerHTML.includes(`openEditModal(${id},`)) {
                    row.dataset.status = status;
                    const pill = row.querySelector('.status-pill');
                    if (pill) {
                        pill.className = 'status-pill';
                        if (status === 'confirmed') { pill.className += ' confirmed-pill'; pill.textContent = '✅ Confirmed'; }
                        else if (status === 'cancelled') { pill.className += ' cancelled-pill'; pill.textContent = '❌ Cancelled'; }
                        else { pill.className += ' pending-pill'; pill.textContent = '⏳ Pending'; }
                        pill.closest('tr').querySelector('.action-btn--edit').setAttribute('onclick',
                            `openEditModal(${id}, '${status}', '${name.replace(/'/g,"\\'")}')` );
                    }
                }
            });
            updateCounts();
            filterTable(currentFilter, document.querySelector('.filter-btn.active'));
            showToast(status, name);
        }
    })
    .catch(() => alert('Something went wrong. Please try again.'));
});

function showToast(status, name) {
    document.querySelectorAll('.status-toast').forEach(t => t.remove());
    const configs = {
        confirmed: { cls: 'toast-confirmed', icon: '🎉', title: 'Booking Confirmed!', msg: `${name}'s booking has been confirmed successfully.` },
        cancelled: { cls: 'toast-cancelled', icon: '❌', title: 'Booking Cancelled',   msg: `${name}'s booking has been cancelled.` },
        pending:   { cls: 'toast-pending',   icon: '⏳', title: 'Marked as Pending',   msg: `${name}'s booking is set to pending.` },
    };
    const c = configs[status];
    if (!c) return;
    const toast = document.createElement('div');
    toast.className = `status-toast ${c.cls}`;
    toast.innerHTML = `<span class="toast-icon">${c.icon}</span><div><div class="toast-title">${c.title}</div><div class="toast-msg">${c.msg}</div></div><button onclick="this.parentElement.remove()" class="toast-close">✕</button>`;
    document.body.appendChild(toast);
    setTimeout(() => {
        toast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        toast.style.opacity = '0'; toast.style.transform = 'translateX(60px)';
        setTimeout(() => toast.remove(), 500);
    }, 5000);
}

document.querySelectorAll('.status-radio').forEach(function(radio) {
    radio.addEventListener('change', function() {
        ['confirmed','pending','cancelled'].forEach(s => {
            document.getElementById('card_' + s).classList.remove('selected-confirmed','selected-pending','selected-cancelled');
        });
        document.getElementById('card_' + this.value).classList.add('selected-' + this.value);
    });
});

['successToast','confirmedToast','cancelledToast','pendingToast'].forEach(function(id) {
    var el = document.getElementById(id);
    if (el) {
        setTimeout(function() {
            el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
            el.style.opacity = '0'; el.style.transform = 'translateX(60px)';
            setTimeout(() => el.remove(), 500);
        }, 5000);
    }
});

/* ── Advanced Filter (filters current page rows only) ── */
function closeAdvFilter() {
    document.getElementById('advFilterModal').style.display = 'none';
}

function resetAdvFilter() {
    ['flt_name','flt_email','flt_phone','flt_start_from','flt_start_to','flt_role']
        .forEach(id => document.getElementById(id).value = '');
    document.querySelector('.adv-filter-btn').classList.remove('filter-active');
    filtered = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => { r.style.display = ''; r.querySelector('.row-sno').textContent = i + 1; });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    closeAdvFilter();
}

function applyAdvFilter() {
    const name      = document.getElementById('flt_name').value.trim().toLowerCase();
    const email     = document.getElementById('flt_email').value.trim().toLowerCase();
    const phone     = document.getElementById('flt_phone').value.trim().toLowerCase();
    const startFrom = document.getElementById('flt_start_from').value;
    const startTo   = document.getElementById('flt_start_to').value;
    const role      = document.getElementById('flt_role').value;

    let base = currentFilter === 'all' ? allRows : allRows.filter(r => r.dataset.status === currentFilter);

    filtered = base.filter(row => {
        const rowName     = row.dataset.name        || '';
        const rowEmail    = row.dataset.email       || '';
        const rowPhone    = row.dataset.phone       || '';
        const travelStart = row.dataset.travelStart || '';
        const rowRole     = row.dataset.role        || '';

        let pass = true;
        if (name      && !rowName.includes(name))    pass = false;
        if (email     && !rowEmail.includes(email))  pass = false;
        if (phone     && !rowPhone.includes(phone))  pass = false;
        if (startFrom && travelStart && travelStart < startFrom) pass = false;
        if (startTo   && travelStart && travelStart > startTo)   pass = false;
        if (role      && rowRole !== role)           pass = false;
        return pass;
    });

    const hasFilter = name || email || phone || startFrom || startTo || role;
    document.querySelector('.adv-filter-btn').classList.toggle('filter-active', !!hasFilter);
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    allRows.forEach(r => r.style.display = 'none');
    filtered.forEach((r, i) => { r.style.display = ''; r.querySelector('.row-sno').textContent = i + 1; });
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    closeAdvFilter();
}

updateCounts();
</script>

@endsection