@extends('layouts.app')

@section('content')

@php $isAdmin = optional(auth()->user()->role)->role_name === 'admin'; @endphp

@if(session('success'))
    <div id="successToast" class="hm-toast">
        <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

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

    {{-- HEADER --}}
    <div class="card-header d-flex justify-content-between align-items-center py-4 flex-wrap gap-3">
        <div class="d-flex align-items-center gap-3 flex-wrap">
            <h3 class="mb-0">
                <i class="fa fa-map-marker-alt me-2 text-primary"></i>
                {{ $isAdmin ? 'All Destinations' : 'Destinations' }}
            </h3>
            <span class="dest-total-badge">
                {{ $destinations->total() }} Total
            </span>
        </div>

        <div class="d-flex align-items-center gap-3 flex-wrap">

            {{-- SEARCH INPUT --}}
            <form method="GET" action="{{ route('holiday.destinations') }}" id="searchForm" class="d-flex align-items-center">
               
                <div class="hm-search-wrap">
                    <i class="fa fa-search hm-search-icon"></i>
                    <input type="text" name="search" id="searchInput" class="hm-search-input"
                        placeholder="Search destination..."
                        value="{{ request('search') }}" autocomplete="off">
                    @if(request('search'))
                        <a href="{{ route('holiday.destinations', array_merge(request()->except('search','page'))) }}"
                            class="hm-search-clear" id="clearSearch">
                            <i class="fa fa-times"></i>
                        </a>
                    @else
                        <span class="hm-search-clear" id="clearSearch" style="display:none; cursor:pointer;">
                            <i class="fa fa-times"></i>
                        </span>
                    @endif
                </div>
            </form>

       
            

            @if($isAdmin)
                <a href="{{ route('holiday.destinations.create') }}" class="btn btn-primary">
                    <i class="fa fa-plus me-1"></i> Add Destination
                </a>
            @endif
        </div>
    </div>

    {{-- Active filter chips --}}
    @if(request('search'))
    <div class="px-4 pt-3 pb-1">
        <div class="d-flex flex-wrap gap-2 align-items-center">
            @if(request('search'))
            <span class="filter-chip">
                🔍 Search: <strong>{{ request('search') }}</strong>
                <a href="{{ route('holiday.destinations', array_merge(request()->except('search','page'))) }}" class="chip-remove">&times;</a>
            </span>
            @endif
            
            <a href="{{ route('holiday.destinations') }}" class="chip-clear-all">
                <i class="fa fa-times me-1"></i> Clear all
            </a>
        </div>
    </div>
    @endif

    {{-- TABLE --}}
    <div class="card-body">
        <table class="table table-hover align-middle">
            <thead style="background:#f8f9fc;">
                <tr>
                    <th style="width:60px;">SL</th>
                    <th style="width:160px;">Photo</th>
                    <th>Destination Name</th>
                    
                    <th class="text-center" style="width:100px;">Action</th>
                </tr>
            </thead>
            <tbody>
                @forelse($destinations as $key => $destination)
                <tr>
                    <td class="text-muted">{{ $destinations->firstItem() + $key }}</td>
                    <td>
                        @if($destination->photo)
                            <img src="{{ asset('storage/' . $destination->photo) }}"
                                width="120" style="border-radius:8px; object-fit:cover; height:70px;">
                        @else
                            <div style="width:120px; height:70px; border-radius:8px; background:#f1f3f5;
                                display:flex; align-items:center; justify-content:center; color:#bbb; font-size:11px;">
                                No photo
                            </div>
                        @endif
                    </td>
                    <td>
                        <div class="fw-bold">{{ $destination->name }}</div>
                        @if($destination->short_description)
                            <div class="small text-muted mt-1"
                                style="max-width:260px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
                                {{ $destination->short_description }}
                            </div>
                        @endif
                    </td>
                    
                    <td class="text-center">
                        <div class="d-flex gap-2 justify-content-center">
                            <button class="action-btn action-btn--view"
                                data-bs-toggle="modal"
                                data-bs-target="#destModal{{ $destination->id }}"
                                title="View">
                                <i class="fa fa-eye"></i>
                            </button>
                            @if($isAdmin)
                                <a href="{{ route('holiday.destinations.edit', $destination->id) }}"
                                    class="action-btn action-btn--edit" title="Edit">
                                    <i class="fa fa-pen"></i>
                                </a>    
                                <form action="{{ route('holiday.destinations.delete', $destination->id) }}" method="POST">
                                    @csrf
                                    @method('DELETE')
                                    <button class="action-btn action-btn--delete" title="Delete"
                                        onclick="return confirm('Delete this destination?')">
                                        <i class="fa fa-trash"></i>
                                    </button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4" class="text-center text-muted py-5">                   
                    <i class="fa fa-map-marker-alt fa-2x mb-2 d-block"></i>
                        No destinations found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>

        {{-- PAGINATION --}}
        @if($destinations->hasPages())
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mt-3">
            <p class="mb-0 text-muted small">
                Showing <strong>{{ $destinations->firstItem() }}</strong>–<strong>{{ $destinations->lastItem() }}</strong>
                of <strong>{{ $destinations->total() }}</strong> destinations
            </p>
            {{ $destinations->onEachSide(1)->appends(request()->query())->links() }}
        </div>
        @endif
    </div>

</div>


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

            {{-- UNIQUE MODAL HEADER --}}
            <div class="dest-modal-header">
                {{-- Left accent bar --}}
                <div class="dest-modal-accent"></div>

                <div class="dest-modal-header-inner">
                    {{-- Destination icon + title --}}
                    <div class="dest-modal-title-row">
                        <div class="dest-modal-icon">
                            <i class="fa fa-map-marker-alt"></i>
                        </div>
                        <div>
                            <h5 class="dest-modal-name">{{ $destination->name }}</h5>
                            <div class="dest-modal-sub">Destination Details</div>
                        </div>
                        <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal"></button>
                    </div>

                    
                </div>
            </div>

            <div class="modal-body p-4">
                <table class="table table-bordered">
                    <tr><th width="220">Destination Name</th><td>{{ $destination->name }}</td></tr>
                    <tr><th>Heading</th><td>{{ $destination->heading }}</td></tr>
                    <tr><th>Short Description</th><td>{{ $destination->short_description }}</td></tr>
                    <tr><th>Package Heading</th><td>{{ $destination->package_heading }}</td></tr>
                    <tr><th>Detail Heading</th><td>{{ $destination->detail_heading }}</td></tr>
                    <tr><th>Introduction</th><td>{!! $destination->introduction !!}</td></tr>
                    <tr><th>Experience</th><td>{!! $destination->experience !!}</td></tr>
                    <tr><th>Weather</th><td>{!! $destination->weather !!}</td></tr>
                    <tr><th>Hotel</th><td>{!! $destination->hotel !!}</td></tr>
                    <tr><th>Transportation</th><td>{!! $destination->transportation !!}</td></tr>
                    <tr><th>Culture</th><td>{!! $destination->culture !!}</td></tr>
                    <tr>
                        <th>Featured Photo</th>
                        <td>
                            @if($destination->photo)
                                <img src="{{ asset('storage/' . $destination->photo) }}" width="280" style="border-radius:8px;">
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <th>Banner</th>
                        <td>
                            @if($destination->banner)
                                <img src="{{ asset('storage/' . $destination->banner) }}" width="400" style="border-radius:8px;">
                            @endif
                        </td>
                    </tr>
                </table>
            </div>

            <div class="modal-footer border-0 px-4 pb-4 pt-0">
                <button class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">Close</button>
                @if(!$isAdmin)
                    <a href="{{ route('holiday.destinations.edit', $destination->id) }}"
                        class="btn btn-primary rounded-pill px-4">
                        <i class="fa fa-pen me-2"></i> Edit
                    </a>
                @endif
            </div>

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


<style>
/* ── Toast ── */
.hm-toast { position:fixed; bottom:30px; right:30px; background:linear-gradient(135deg,#1b5e20,#2e7d32); color:#fff; 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; }
.toast-icon { font-size:1.4rem; 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; }
.toast-close { background:none; border:none; color:#fff; cursor:pointer; opacity:0.7; font-size:14px; margin-left:8px; padding:0; }
@keyframes slideInRight { from{opacity:0;transform:translateX(60px);} to{opacity:1;transform:translateX(0);} }

/* ── Total badge near title ── */
.dest-total-badge {
    display:inline-flex; align-items:center;
    background:linear-gradient(135deg,#1565C0,#1976D2);
    color:#fff; font-size:12px; font-weight:700;
    padding:4px 14px; border-radius:20px;
    letter-spacing:0.3px;
}

/* ── Search input ── */
.hm-search-wrap { position:relative; }
.hm-search-icon { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#aaa; font-size:13px; pointer-events:none; }
.hm-search-input { padding:9px 36px 9px 34px; border:1.5px solid #dee2e6; border-radius:10px; font-size:13px; outline:none; width:240px; background:#f8f9fc; transition:border-color 0.2s; }
.hm-search-input:focus { border-color:#1976D2; background:#fff; }
.hm-search-clear { position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#aaa; font-size:13px; text-decoration:none; }
.hm-search-clear:hover { color:#e53935; }

/* ── Agency filter pills ── */
.agency-filter-wrap {
    display:flex; align-items:center; gap:10px;
    background:#f8f9fc; border:1.5px solid #e9ecef;
    border-radius:12px; padding:6px 14px;
}
.agency-filter-label {
    font-size:12px; font-weight:700; color:#888;
    text-transform:uppercase; letter-spacing:0.8px;
    white-space:nowrap;
}
.agency-pills { display:flex; gap:6px; flex-wrap:wrap; }
.agency-pill {
    display:inline-block;
    padding:4px 12px;
    border-radius:20px;
    font-size:12px; font-weight:600;
    color:#555;
    background:#fff;
    border:1.5px solid #dee2e6;
    text-decoration:none;
    transition:all 0.2s;
    white-space:nowrap;
}
.agency-pill:hover { border-color:#1976D2; color:#1976D2; }
.agency-pill.active { background:#1976D2; border-color:#1976D2; color:#fff; }

/* ── Filter chips ── */
.filter-chip { display:inline-flex; align-items:center; gap:6px; background:#e8f0fe; color:#1a56c4; border-radius:20px; padding:4px 12px; font-size:12px; font-weight:500; }
.chip-remove { color:#1a56c4; text-decoration:none; font-size:14px; opacity:0.7; }
.chip-remove:hover { opacity:1; color:#c62828; }
.chip-clear-all { color:#c62828; text-decoration:none; font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; }
.chip-clear-all:hover { background:#ffebee; }


/* ── 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; text-decoration:none; transition:transform 0.15s ease, box-shadow 0.15s ease, background 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; }
.action-btn--delete { background:#ffebee; color:#c62828; }
.action-btn--delete:hover { background:#c62828; color:#fff; }

/* ── 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:#1976D2; border-color:#1976D2; color:#fff; }
.pagination .page-item.active .page-link { background:#1976D2; border-color:#1976D2; color:#fff; }
.pagination .page-item.disabled .page-link { opacity:0.4; pointer-events:none; }

/* ════════════════════════════════════════
   DESTINATION MODAL HEADER — Unique Style
   ════════════════════════════════════════ */
.dest-modal-header {
    position: relative;
    background: #1a1a2e;
}

/* Decorative dots pattern */
.dest-modal-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.dest-modal-header::after {
    content: '';
    position: absolute;
    bottom: -30px; left: 30%;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(25,118,210,0.15);
    pointer-events: none;
}

.dest-modal-accent {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #42a5f5, #1565C0, #0d47a1);
}

.dest-modal-header-inner {
    padding: 20px 24px 0 30px;
    position: relative;
    z-index: 1;
}

.dest-modal-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
}

.dest-modal-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(25,118,210,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    color: #90caf9;
    font-size: 18px;
    flex-shrink: 0;
}

.dest-modal-name {
    font-size: 18px; font-weight: 700;
    color: #fff; margin: 0;
    letter-spacing: 0.3px;
}

.dest-modal-sub {
    font-size: 12px; color: rgba(255,255,255,0.5);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}




</style>

<script>
// Auto search on type with debounce
var searchTimer;
document.getElementById('searchInput').addEventListener('input', function() {
    var val = this.value;
    var clearBtn = document.getElementById('clearSearch');
    if (clearBtn) clearBtn.style.display = val ? 'inline-flex' : 'none';
    clearTimeout(searchTimer);
    searchTimer = setTimeout(function() {
        document.getElementById('searchForm').submit();
    }, 500);
});

// Clear search
var clearBtn = document.getElementById('clearSearch');
if (clearBtn) {
    clearBtn.addEventListener('click', function(e) {
        if (!this.href) {
            e.preventDefault();
            document.getElementById('searchInput').value = '';
            document.getElementById('searchForm').submit();
        }
    });
}

// Toast dismiss
var toast = document.querySelector('.hm-toast');
if (toast) {
    setTimeout(function() {
        toast.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
        toast.style.opacity = '0';
        toast.style.transform = 'translateX(60px)';
        setTimeout(function() { toast.remove(); }, 500);
    }, 4000);
}
</script>

@endsection