@extends('layouts.app')
@section('content')

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

{{-- ── ERROR TOAST ── --}}
@if(session('error'))
<div id="errorToast" class="status-toast toast-error">
    <span class="toast-icon">⚠️</span>
    <div>
        <div class="toast-title">Error</div>
        <div class="toast-msg">{{ session('error') }}</div>
    </div>
    <button onclick="this.parentElement.remove()" class="toast-close">✕</button>
</div>
@endif

{{-- ── CANCEL TOAST ── --}}
@if(session('cancelmsg'))
<div id="cancelToast" class="status-toast toast-cancelled">
    <span class="toast-icon">❌</span>
    <div>
        <div class="toast-title">Booking Cancelled</div>
        <div class="toast-msg">{{ session('cancelmsg') }}</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-ban me-2 text-danger"></i> Cancellation List</h3>

        <div class="d-flex align-items-center gap-3 flex-wrap">
            <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>
            <span class="badge text-white bg-danger fs-6 px-3 py-2" id="totalBadge">{{ count($cancellations) }} 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">Booking ID</th>
                    <th class="py-3">Customer</th>
                    <th class="py-3">Stay Dates</th>
                    <th class="py-3">Booking Amt</th>
                    <th class="py-3">Cancel Charge</th>
                    <th class="py-3">Cancel Date</th>
                    <th class="py-3 text-center" style="width:80px;">Actions</th>
                </tr>
            </thead>
            <tbody id="cancellationTableBody">
                @forelse($cancellations as $index => $cancellation)
                <tr class="cancellation-row"
                    data-index="{{ $index }}"
                    data-name="{{ strtolower(($cancellation->holder_name ?? '') . ' ' . ($cancellation->holder_surname ?? '')) }}"
                    data-email="{{ strtolower($cancellation->holder_email ?? '') }}"
                    data-bookingid="{{ strtolower($cancellation->booking_id ?? '') }}"
                    data-canceldate="{{ $cancellation->cancel_date ?? '' }}">

                    <td class="px-4 text-muted row-sno">{{ $index + 1 }}</td>

                    <td>
                        <div class="small text-muted mt-1">
                            <i class="fa fa-tag me-1"></i>{{ $cancellation->booking_reference ?? '—' }}
                        </div>
                    </td>

                    <td>
                        <div class="fw-bold" style="max-width:200px;">
                            {{ $cancellation->hotel_name ?? '—' }}
                        </div>
                        <div class="small text-muted mt-1" style="max-width:200px;">
                            {{ Str::limit($cancellation->hotel_address ?? '—', 40) }}
                        </div>
                    </td>

                    <td>
                        <div class="small fw-semibold">
                            {{ !empty($cancellation->checkin) ? \Carbon\Carbon::parse($cancellation->checkin)->format('d M Y') : '—' }}
                            @if(!empty($cancellation->checkout))
                                → {{ \Carbon\Carbon::parse($cancellation->checkout)->format('d M Y') }}
                            @endif
                        </div>
                    </td>

                    <td>
                        <span class="fw-bold">{{ number_format($cancellation->booking_amount ?? 0, 2) }}</span>
                        <span class="text-muted small"> {{ $cancellation->booking_currency ?? 'INR' }}</span>
                    </td>

                    <td>
                        @php $charge = floatval($cancellation->cancellation_charges ?? 0); @endphp
                        @if($charge > 0)
                            <span class="fw-bold text-danger">{{ number_format($charge, 2) }}</span>
                            <span class="text-muted small"> {{ $cancellation->cancellation_currency ?? 'INR' }}</span>
                        @else
                            <span class="badge bg-success-subtle text-success px-2 py-1" style="font-size:11px;">No Charge</span>
                        @endif
                    </td>

                    <td>
                        <div class="small fw-semibold">
                            {{ !empty($cancellation->cancel_date) ? \Carbon\Carbon::parse($cancellation->cancel_date)->format('d M Y') : '—' }}
                        </div>
                        <div class="small text-muted">
                            {{ !empty($cancellation->cancel_date) ? \Carbon\Carbon::parse($cancellation->cancel_date)->format('h:i A') : '' }}
                        </div>
                    </td>

                    <td class="text-center">
                        <button class="action-btn action-btn--view" title="View Details"
                            onclick="openViewModal({{ $cancellation->recordid ?? $index }})">
                            <i class="fa fa-eye"></i>
                        </button>
                    </td>
                </tr>
                @empty
                <tr id="emptyRow">
                    <td colspan="8" class="text-center text-muted py-5">
                        <i class="fa fa-inbox fa-2x mb-2 d-block"></i>
                        No cancellations found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </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 cancellations found for this filter.</p>
        </div>

        {{-- Pagination --}}
        <div id="paginationWrap" class="px-4 py-3 border-top d-flex align-items-center justify-content-between flex-wrap gap-2">
            <p class="mb-0 text-muted small" id="paginationInfo"></p>
            <nav><ul class="pagination pagination-sm mb-0" id="paginationLinks"></ul></nav>
        </div>
    </div>
</div>


{{-- ── VIEW DETAILS MODALS ── --}}
@foreach($cancellations as $cancellation)
@php $modalId = $cancellation->recordid ?? $loop->index; @endphp
<div class="modal fade" id="viewModal{{ $modalId }}" 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, #7b1313, #c62828);">
                <div>
                    <h5 class="modal-title fw-bold mb-1">
                        <i class="fa fa-ban me-2"></i> Cancellation Details
                    </h5>
                    <div class="small opacity-75">
                        {{ $cancellation->city_name ?? '—' }}@if(!empty($cancellation->country_name)), {{ $cancellation->country_name }}@endif
                    </div>
                </div>
                <div class="ms-auto d-flex align-items-center gap-3">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
            </div>

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

                {{-- BOOKING IDs --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">🔖 Booking Reference</div></div>
                    <div class="col-md-6">
                        <div class="detail-card">
                            <div class="detail-icon">🔢</div>
                            <div class="detail-label">Booking ID</div>
                            <div class="detail-value" style="font-size:13px; font-family:monospace;">{{ $cancellation->booking_id ?? '—' }}</div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-card">
                            <div class="detail-icon">📋</div>
                            <div class="detail-label">Booking Reference</div>
                            <div class="detail-value" style="font-size:13px; font-family:monospace;">{{ $cancellation->booking_reference ?? '—' }}</div>
                        </div>
                    </div>
                </div>

                {{-- CANCELLATION IDs --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">🚫 Cancellation Reference</div></div>
                    <div class="col-md-6">
                        <div class="detail-card">
                            <div class="detail-icon">🗓️</div>
                            <div class="detail-label">Cancel Date</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ !empty($cancellation->cancel_date) ? \Carbon\Carbon::parse($cancellation->cancel_date)->format('d M Y, h:i A') : '—' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="detail-card">
                            <div class="detail-icon">🔖</div>
                            <div class="detail-label">Cancellation Ref</div>
                            <div class="detail-value" style="font-size:13px; font-family:monospace;">{{ $cancellation->cancellation_reference ?? 'N/A' }}</div>
                        </div>
                    </div>
                </div>

                {{-- CUSTOMER INFO --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">👤 Customer 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">{{ $cancellation->holder_name ?? '—' }} {{ $cancellation->holder_surname ?? '' }}</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:12px;">{{ $cancellation->holder_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" style="font-size:13px;">{{ $cancellation->holder_phone ?? '—' }}</div>
                        </div>
                    </div>
                </div>

                {{-- FINANCIAL SUMMARY --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">💰 Financial Summary</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">🧾</div>
                            <div class="detail-label">Booking Amount</div>
                            <div class="detail-value">
                                {{ number_format($cancellation->booking_amount ?? 0, 2) }}
                                <span style="font-size:12px; font-weight:500; color:#888;">{{ $cancellation->booking_currency ?? 'INR' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card" style="border-color: #ffcdd2;">
                            <div class="detail-icon">💸</div>
                            <div class="detail-label">Cancellation Charge</div>
                            <div class="detail-value" style="color:#c62828;">
                                {{ number_format($cancellation->cancellation_charges ?? 0, 2) }}
                                <span style="font-size:12px; font-weight:500; color:#888;">{{ $cancellation->cancellation_currency ?? 'INR' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card" style="border-color: #c8e6c9;">
                            <div class="detail-icon">💚</div>
                            <div class="detail-label">Refund Amount</div>
                            @php
                                $refund = floatval($cancellation->booking_amount ?? 0) - floatval($cancellation->cancellation_charges ?? 0);
                            @endphp
                            <div class="detail-value" style="color:#2e7d32;">
                                {{ number_format(max(0, $refund), 2) }}
                                <span style="font-size:12px; font-weight:500; color:#888;">{{ $cancellation->booking_currency ?? 'INR' }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- STAY INFO --}}
                <div class="row g-3 mb-4">
                    <div class="col-12"><div class="detail-section-label">✈️ Stay Details</div></div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📍</div>
                            <div class="detail-label">Destination</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ $cancellation->city_name ?? '—' }}@if(!empty($cancellation->country_name)), {{ $cancellation->country_name }}@endif
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📅</div>
                            <div class="detail-label">Check-in</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ !empty($cancellation->checkin) ? \Carbon\Carbon::parse($cancellation->checkin)->format('d M Y') : '—' }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="detail-card">
                            <div class="detail-icon">📅</div>
                            <div class="detail-label">Check-out</div>
                            <div class="detail-value" style="font-size:13px;">
                                {{ !empty($cancellation->checkout) ? \Carbon\Carbon::parse($cancellation->checkout)->format('d M Y') : '—' }}
                            </div>
                        </div>
                    </div>
                </div>

                {{-- CANCELLATION REASON --}}
                @if(!empty($cancellation->cancellation_comments))
                <div class="mb-4">
                    <div class="detail-section-label">💬 Cancellation Reason</div>
                    <div class="mt-2 p-3 rounded-3" style="background:#fff8f8; border-left:4px solid #c62828; font-size:14px; color:#444; line-height:1.7;">
                        {{ $cancellation->cancellation_comments }}
                    </div>
                </div>
                @endif

{{-- CANCELLATION POLICY --}}
@php
    $policy = null;
    if (!empty($cancellation->cancellation_policy)) {
        $policy = is_string($cancellation->cancellation_policy)
            ? json_decode($cancellation->cancellation_policy, true)
            : $cancellation->cancellation_policy;
    }
    $freeBefore = $policy['free_cancellation_before'] ?? null;
    $policies   = $policy['policies'] ?? [];
    $currency   = $cancellation->booking_currency ?? 'USD';
@endphp

<div class="mb-4">
    <div class="detail-section-label">📋 Cancellation Summary</div>

    <div class="mt-2 rounded-3 overflow-hidden" style="border:1px solid #e8eaf0; box-shadow:0 2px 12px rgba(0,0,0,0.06);">

        {{-- Cancelled On + Charge Applied --}}
        <div class="d-flex align-items-center justify-content-between px-3 py-3"
             style="background:linear-gradient(90deg,#fff5f5,#fff8f8); border-bottom:1px solid #ffcdd2;">
            <div class="d-flex align-items-center gap-2">
                <span style="width:32px;height:32px;background:#ffebee;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                    <i class="fa fa-ban" style="color:#c62828;font-size:13px;"></i>
                </span>
                <div>
                    <div style="font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px;">Cancelled On</div>
                    <div style="font-size:13px;font-weight:700;color:#c62828;">
                        {{ !empty($cancellation->cancel_date) ? \Carbon\Carbon::parse($cancellation->cancel_date)->format('d M Y, h:i A') : '—' }}
                    </div>
                </div>
            </div>
            <div class="text-end">
                <div style="font-size:10px;color:#aaa;text-transform:uppercase;letter-spacing:1px;">Charge Applied</div>
                @php $charge = floatval($cancellation->cancellation_charges ?? 0); @endphp
                <div style="font-size:16px;font-weight:800;color:{{ $charge > 0 ? '#c62828' : '#2e7d32' }};">
                    {{ $charge > 0 ? number_format($charge, 2) . ' ' . ($cancellation->cancellation_currency ?? 'USD') : 'No Charge' }}
                </div>
            </div>
        </div>

        {{-- Free Before Banner --}}
        @if($freeBefore)
        <div class="d-flex align-items-center gap-2 px-3 py-2"
             style="background:linear-gradient(90deg,#e8f5e9,#f1f8f1); border-bottom:1px solid #c8e6c9;">
            <span style="width:22px;height:22px;background:#2e7d32;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <i class="fa fa-check" style="color:#fff;font-size:10px;"></i>
            </span>
            <span style="font-size:13px;font-weight:600;color:#2e7d32;">
                Free cancellation was before <strong>{{ \Carbon\Carbon::parse($freeBefore)->format('d M Y, H:i') }}
    UTC+0</strong>
            </span>
        </div>
        @endif

        {{-- Policy Rows --}}
        @if(!empty($policies))
            @foreach($policies as $pol)
            @php
                $polCharge = floatval($pol['amount_show'] ?? $pol['amount_charge'] ?? 0);
                $isFree    = $polCharge == 0;
                $startAt   = !empty($pol['start_at']) ? \Carbon\Carbon::parse($pol['start_at']) : null;
                $endAt     = !empty($pol['end_at'])   ? \Carbon\Carbon::parse($pol['end_at'])   : null;

                if (!$startAt && $endAt)     $period = 'Until ' . $endAt->format('d M Y');
                elseif ($startAt && !$endAt) $period = 'From ' . $startAt->format('d M Y') . ' onwards';
                elseif ($startAt && $endAt)  $period = $startAt->format('d M Y') . ' → ' . $endAt->format('d M Y');
                else                         $period = 'All dates';
            @endphp
            <div class="d-flex align-items-center justify-content-between px-3 py-2"
                 style="background:#fff; {{ !$loop->last ? 'border-bottom:1px solid #f0f0f5;' : '' }}">
                <div class="d-flex align-items-center gap-2">
                    <span style="width:8px;height:8px;border-radius:50%;background:{{ $isFree ? '#2e7d32' : '#c62828' }};flex-shrink:0;display:inline-block;"></span>
                    <span style="font-size:13px;color:#444;font-weight:500;">{{ $period }}</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <span style="font-size:13px;font-weight:700;color:{{ $isFree ? '#2e7d32' : '#c62828' }};">
                        {{ $isFree ? 'Free' : number_format($polCharge, 2) . ' ' . $currency }}
                    </span>
                    @if(!$isFree)
                        <span style="font-size:11px;background:#fff3e0;color:#e65100;padding:2px 8px;border-radius:20px;font-weight:600;">
                            ⚠️ Charges Apply
                        </span>
                    @endif
                </div>
            </div>
            @endforeach
        @endif

    </div>
</div>

                {{-- QUICK ACTIONS --}}
                <div class="mb-2">
                    <div class="detail-section-label">⚡ Quick Actions</div>
                    <div class="d-flex gap-2 flex-wrap mt-2">
                        @if(!empty($cancellation->holder_email))
                        <a href="{{ route('b2b.hotels.cancellation.resend', $modalId) }}"
                            class="modal-action-btn modal-action-btn--email">
                            <i class="fa fa-envelope"></i> Resend Email
                        </a>
                        @endif
                        <a href="{{ route('b2b.hotels.booking.confirmation', $cancellation->booking_id) }}" target="_blank"
                            class="modal-action-btn modal-action-btn--info">
                            <i class="fa fa-share-square-o"></i> View Original Booking
                        </a>
                    </div>
                </div>

            </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>
            </div>

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


{{-- ── 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">🔢 Booking ID</label>
                <input type="text" id="flt_bookingid" class="adv-filter-input" placeholder="Search by booking ID...">
            </div>
            <div class="mb-3">
                <label class="adv-filter-label">👤 Customer 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">✉️ Email</label>
                <input type="text" id="flt_email" class="adv-filter-input" placeholder="Search by email...">
            </div>
            <div class="mb-1">
                <label class="adv-filter-label">📅 Cancel 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_cancel_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_cancel_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>
/* ── TOASTS ── */
.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-generic   { background: linear-gradient(135deg, #1a237e, #1565C0); }
.toast-error     { background: linear-gradient(135deg, #e65100, #bf360c); }
.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 BUTTON ── */
.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;
}
.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; }

/* ── BOOKING ID BADGE ── */
.booking-id-badge {
    background: #fff5f5; color: #c62828;
    border-radius: 6px; padding: 3px 8px;
    font-size: 12px; font-weight: 600; font-family: monospace;
}

/* ── ACTION BUTTONS ── */
.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:#ffebee; color:#c62828; }
.action-btn--view:hover  { background:#c62828; color:#fff; }

/* ── DETAIL CARDS (modal) ── */
.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; }

/* ── MODAL ACTION BUTTONS ── */
.modal-action-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s;
    border: none; cursor: pointer;
}
.modal-action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.15); opacity: 0.92; }
.modal-action-btn--email { background: #fff3e0; color: #e65100; }
.modal-action-btn--info  { background: #e8eaf6; color: #3949ab; }

/* ── ADVANCED FILTER MODAL ── */
#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, #7b1313, #c62828); 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: #c62828; }
.adv-filter-footer { padding: 0 22px 22px; display:flex; gap:10px; }
.adv-filter-apply { flex:1; padding:10px; background:#c62828; color:#fff; border:none; border-radius:10px; font-weight:700; font-size:13px; cursor:pointer; }
.adv-filter-apply:hover { background:#b71c1c; }
.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; }

/* ── PAGINATION ── */
.pagination .page-link {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px !important; font-size: 13px; font-weight: 600;
    padding: 0; color: #555; border: 1px solid #dee2e6; transition: all 0.2s;
}
.pagination .page-link:hover { background: #c62828; border-color: #c62828; color: #fff; }
.pagination .page-item.active .page-link { background: #c62828; border-color: #c62828; color: #fff; }
.pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }
</style>


<script>
const PER_PAGE  = 10;
let allRows     = Array.from(document.querySelectorAll('.cancellation-row'));
let filtered    = allRows;
let currentPage = 1;

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

function renderPage(page) {
    currentPage = page;
    const start = (page - 1) * PER_PAGE;
    const end   = start + PER_PAGE;
    allRows.forEach(r => r.style.display = 'none');
    filtered.slice(start, end).forEach((r, i) => {
        r.style.display = '';
        r.querySelector('.row-sno').textContent = start + i + 1;
    });
    document.getElementById('totalBadge').textContent = filtered.length + ' Total';
    document.getElementById('noFilterResults').classList.toggle('d-none', filtered.length > 0);
    const paginationInfo = document.getElementById('paginationInfo');
    paginationInfo.textContent = filtered.length > 0
        ? `Showing ${start + 1}–${Math.min(end, filtered.length)} of ${filtered.length} cancellation${filtered.length !== 1 ? 's' : ''}`
        : '';
    renderPagination();
}

function renderPagination() {
    const totalPages      = Math.ceil(filtered.length / PER_PAGE);
    const paginationLinks = document.getElementById('paginationLinks');
    paginationLinks.innerHTML = '';
    if (totalPages <= 1) return;

    const prev = document.createElement('li');
    prev.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
    prev.innerHTML = `<a class="page-link" href="#">&laquo;</a>`;
    prev.addEventListener('click', e => { e.preventDefault(); if (currentPage > 1) renderPage(currentPage - 1); });
    paginationLinks.appendChild(prev);

    for (let i = 1; i <= totalPages; i++) {
        const li = document.createElement('li');
        li.className = `page-item ${i === currentPage ? 'active' : ''}`;
        li.innerHTML = `<a class="page-link" href="#">${i}</a>`;
        li.addEventListener('click', e => { e.preventDefault(); renderPage(i); });
        paginationLinks.appendChild(li);
    }

    const next = document.createElement('li');
    next.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
    next.innerHTML = `<a class="page-link" href="#">&raquo;</a>`;
    next.addEventListener('click', e => { e.preventDefault(); if (currentPage < totalPages) renderPage(currentPage + 1); });
    paginationLinks.appendChild(next);
}

function closeAdvFilter() {
    document.getElementById('advFilterModal').style.display = 'none';
}

function resetAdvFilter() {
    ['flt_bookingid','flt_name','flt_email','flt_cancel_from','flt_cancel_to']
        .forEach(id => document.getElementById(id).value = '');
    document.querySelector('.adv-filter-btn').classList.remove('filter-active');
    filtered = allRows;
    renderPage(1);
    closeAdvFilter();
}

function applyAdvFilter() {
    const bookingid  = document.getElementById('flt_bookingid').value.trim().toLowerCase();
    const name       = document.getElementById('flt_name').value.trim().toLowerCase();
    const email      = document.getElementById('flt_email').value.trim().toLowerCase();
    const cancelFrom = document.getElementById('flt_cancel_from').value;
    const cancelTo   = document.getElementById('flt_cancel_to').value;

    filtered = allRows.filter(row => {
        let pass = true;
        if (bookingid  && !row.dataset.bookingid.includes(bookingid)) pass = false;
        if (name       && !row.dataset.name.includes(name))           pass = false;
        if (email      && !row.dataset.email.includes(email))         pass = false;
        if (cancelFrom && row.dataset.canceldate && row.dataset.canceldate < cancelFrom) pass = false;
        if (cancelTo   && row.dataset.canceldate && row.dataset.canceldate > cancelTo)   pass = false;
        return pass;
    });

    const hasFilter = bookingid || name || email || cancelFrom || cancelTo;
    document.querySelector('.adv-filter-btn').classList.toggle('filter-active', !!hasFilter);
    renderPage(1);
    closeAdvFilter();
}

['successToast','errorToast','cancelToast'].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);
    }
});

renderPage(1);
</script>

@endsection