@extends('layouts.app')

@section('content')

@if(session('success'))
    <div id="successToast">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
    </div>
@endif

    <div class="card">

        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>
                <i class="fa fa-arrow-circle-right"></i>
                View Destinations
            </h3>
            <a href="{{ route('destinations.create') }}" class="btn btn-primary">
                Add Destination
            </a>
        </div>

        {{-- ===== SEARCH BAR ===== --}}
        <div class="card-body pb-0">
            <div class="search-wrap">
                <i class="fa fa-search search-icon"></i>
                <input
                    type="text"
                    id="destinationSearch"
                    class="search-input"
                    placeholder="Search by destination name..."
                    autocomplete="off">
                <span id="clearSearch" class="search-clear" title="Clear">
                    <i class="fa fa-times"></i>
                </span>
            </div>
            <p id="searchResultInfo" class="search-info d-none">
                Showing <strong id="matchCount">0</strong> result(s) for "<span id="searchTerm"></span>"
            </p>
        </div>
        {{-- ===== /SEARCH BAR ===== --}}

        <div class="card-body">

            <table class="table table-bordered table-striped">

                <thead>
                    <tr>
                        <th width="60">SL</th>
                        <th width="200">Photo</th>
                        <th>Destination Name</th>
                        <th width="120" class="text-center">Action</th>
                    </tr>
                </thead>

                <tbody id="destinationsTbody">
                    @foreach($destinations as $key => $destination)
                        <tr class="dest-row" data-name="{{ strtolower($destination->name) }}">

                            <td>{{ $key + 1 }}</td>

                            <td>
                                @if($destination->photo)
                                    <img src="{{ asset('storage/' . $destination->photo) }}" width="150">
                                @endif
                            </td>

                            <td>{{ $destination->name }}</td>

                            <td>
                                <div class="d-flex gap-2 justify-content-center">

                                    <button class="action-btn action-btn--view"
                                        data-bs-toggle="modal"
                                        data-bs-target="#destinationModal{{ $destination->id }}"
                                        title="View Details">
                                        <i class="fa fa-eye"></i>
                                    </button>

                                    <a href="{{ route('destinations.edit', $destination->id) }}"
                                        class="action-btn action-btn--edit" title="Edit">
                                        <i class="fa fa-pen"></i>
                                    </a>

                                    <form action="{{ route('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>

                                </div>
                            </td>

                        </tr>
                    @endforeach
                </tbody>

            </table>

            {{-- No results message --}}
            <div id="noResults" class="text-center py-4 d-none">
                <i class="fa fa-search fa-2x text-muted mb-2"></i>
                <p class="text-muted mb-0">No destinations found matching your search.</p>
            </div>

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

        </div>

    </div>


    {{-- MODALS --}}
    @foreach($destinations as $destination)

        <div class="modal fade" id="destinationModal{{ $destination->id }}" tabindex="-1">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">

                    <div class="modal-header">
                        <h5 class="modal-title">Destination Details</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">
                        <table class="table table-bordered">
                            <tr><th width="250">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="300">
                                    @endif
                                </td>
                            </tr>
                            <tr>
                                <th>Banner</th>
                                <td>
                                    @if($destination->banner)
                                        <img src="{{ asset('storage/' . $destination->banner) }}" width="400">
                                    @endif
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>

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

    @endforeach


<style>
    /* Toast */
    #successToast {
        position: fixed; bottom: 30px; left: 30px;
        background-color: #155724; color: #fff;
        padding: 12px 20px; border-radius: 6px;
        font-size: 14px; font-weight: 500;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        z-index: 9999; display: flex; align-items: center; gap: 8px;
        animation: fadeInUp 0.3s ease;
    }
    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Search */
    .search-wrap {
        position: relative;
        max-width: 400px;
        margin-bottom: 16px;
    }
    .search-icon {
        position: absolute; left: 14px; top: 50%;
        transform: translateY(-50%);
        color: #aaa; font-size: 14px; pointer-events: none;
    }
    .search-input {
        width: 100%;
        padding: 10px 40px 10px 38px;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
        background: #f8f9fc;
    }
    .search-input:focus {
        border-color: var(--bs-primary);
        box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.12);
        background: #fff;
    }
    .search-clear {
        position: absolute; right: 12px; top: 50%;
        transform: translateY(-50%);
        color: #aaa; cursor: pointer; font-size: 13px;
        display: none;
    }
    .search-clear:hover { color: #e53935; }
    .search-info { font-size: 13px; color: #666; margin-bottom: 8px; }

    /* 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: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
    .pagination .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
    .pagination .page-item.disabled .page-link { opacity: 0.4; pointer-events: none; }

    /* 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; }
</style>

<script>
    // ---- Toast dismiss ----
    setTimeout(function () {
        var toast = document.getElementById('successToast');
        if (toast) {
            toast.style.transition = 'opacity 0.5s ease';
            toast.style.opacity = '0';
            setTimeout(function () { toast.remove(); }, 500);
        }
    }, 3000);

    // ---- Live Search + Pagination ----
    const PER_PAGE       = 10;
    const searchInput    = document.getElementById('destinationSearch');
    const clearBtn       = document.getElementById('clearSearch');
    const infoEl         = document.getElementById('searchResultInfo');
    const matchCountEl   = document.getElementById('matchCount');
    const searchTermEl   = document.getElementById('searchTerm');
    const noResults      = document.getElementById('noResults');
    const paginationWrap = document.getElementById('paginationWrap');
    const paginationInfo = document.getElementById('paginationInfo');
    const paginationLinks = document.getElementById('paginationLinks');

    let allRows     = Array.from(document.querySelectorAll('.dest-row'));
    let filtered    = allRows;
    let currentPage = 1;

    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 => r.style.display = '');

        noResults.classList.toggle('d-none', filtered.length > 0);

        if (filtered.length > 0) {
            const from = start + 1;
            const to   = Math.min(end, filtered.length);
            paginationInfo.textContent = `Showing ${from}–${to} of ${filtered.length} destination${filtered.length !== 1 ? 's' : ''}`;
        } else {
            paginationInfo.textContent = '';
        }

        renderPagination();
    }

    function renderPagination() {
        const totalPages = Math.ceil(filtered.length / PER_PAGE);
        paginationLinks.innerHTML = '';

        if (totalPages <= 1) {
            paginationWrap.style.display = filtered.length === 0 ? 'none' : '';
            return;
        }
        paginationWrap.style.display = '';

        // Prev
        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);

        // Page numbers
        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);
        }

        // Next
        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 doSearch(query) {
        const q = query.trim().toLowerCase();

        clearBtn.style.display = q ? 'block' : 'none';

        if (q) {
            filtered = allRows.filter(r => r.dataset.name.includes(q));
            infoEl.classList.remove('d-none');
            matchCountEl.textContent = filtered.length;
            searchTermEl.textContent = query;
        } else {
            filtered = allRows;
            infoEl.classList.add('d-none');
        }

        renderPage(1);
    }

    searchInput.addEventListener('input', () => doSearch(searchInput.value));
    clearBtn.addEventListener('click', () => {
        searchInput.value = '';
        doSearch('');
        searchInput.focus();
    });

    // Initial render
    doSearch('');
</script>

@endsection