@extends('layout')


@push('styles')
    <style>
        .delete-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
            z-index: 2000;
        }

        .delete-modal-content {
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            width: 350px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            animation: scaleIn 0.3s ease;
        }

        .delete-modal-actions {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .btn-cancel,
        .btn-delete {
            padding: 8px 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-cancel {
            background: #ccc;
        }

        .btn-delete {
            background: #e63946;
            color: #fff;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
@endpush






@section('content')
    @if (session('success'))
        <div id="customSuccessModal"
            style="display:flex; position:fixed; top:0; left:0; width:100%; height:100%;
                background:rgba(0,0,0,0.4); justify-content:center; align-items:center;
                z-index:9999; opacity:0; transition:opacity 0.4s ease;">
            <div id="popupContent"
                style="background:#fff; padding:25px; border-radius:12px; width:380px;
                    text-align:center; box-shadow:0 5px 25px rgba(0,0,0,0.4);
                    position:relative; transform:scale(0.7); transition:transform 0.4s ease;">
                <span onclick="closePopup()"
                    style="position:absolute; top:10px; right:15px; font-size:20px;
                         cursor:pointer; font-weight:bold;">&times;</span>
                <h3 style="margin-bottom:10px; color:#2ecc71; font-size:22px;">Success!</h3>
                <p style="margin:0; font-size:16px; color:#333;">{{ session('success') }}</p>
            </div>
        </div>

        <script>
            function openPopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '1';
                content.style.transform = 'scale(1)';
            }

            function closePopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '0';
                content.style.transform = 'scale(0.7)';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 400);
            }

            window.onload = function() {
                setTimeout(openPopup, 100); // Smooth open
            };
        </script>
    @endif






    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">All Vendors</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                    </li>
                    <li><a href="{{ route('vendors.index') }}">Vendors</a></li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <a href="{{ url('vendors/create') }}" class="dashboard_main-btn">Add New Vendor</a>
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="dashboard_main-card">
                <div class="table-header">
                    <h2 class="table-title">Overview</h2>
                </div>

                {{-- Tabs / Filters (All | Active | Inactive | Draft) --}}
                <div class="table_tabs-content">
                    <div class="table-tabs">

                        @php
                            // Build base query string excluding 'page' so tabs reset to page 1
                            $baseQuery = request()->except(['page', 'status']);
                            $status = request('status', 'all');
                        @endphp

                        <button data-filter="All" class="{{ $status === 'all' ? 'active' : '' }}"
                            onclick="window.location='{{ route('vendors.index', array_merge($baseQuery, ['status' => 'all'])) }}'">
                            All
                        </button>

                        <button data-filter="Active" class="{{ $status === 'active' ? 'active' : '' }}"
                            onclick="window.location='{{ route('vendors.index', array_merge($baseQuery, ['status' => 'active'])) }}'">
                            Active
                        </button>

                        <button data-filter="Inactive" class="{{ $status === 'inactive' ? 'active' : '' }}"
                            onclick="window.location='{{ route('vendors.index', array_merge($baseQuery, ['status' => 'inactive'])) }}'">
                            Inactive
                        </button>

                        <button data-filter="Draft" class="{{ $status === 'draft' ? 'active' : '' }}"
                            onclick="window.location='{{ route('vendors.index', array_merge($baseQuery, ['status' => 'draft'])) }}'">
                            Draft
                        </button>

                    </div>
                </div>


                {{-- Filters Row (search, sort, date) --}}
                <div class="table-top_filters"
                    style="margin:10px; display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; padding: 0 1rem 1rem;">

                    <form id="filtersForm" action="{{ route('vendors.index') }}" method="GET"
                        style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; width:100%;">

                        {{-- Keep status when changing other filters --}}
                        <input type="hidden" name="status" value="{{ request('status', 'all') }}" />

                        {{-- Search --}}
                        <input type="search" name="q" id="searchInput" class="table-search_input"
                            placeholder="Search" value="{{ request('q') }}"
                            style="padding:0.5rem 0.75rem; padding-left:2.5rem; flex:1 1 220px; min-width:200px;" />

                        {{-- Sort --}}
                        <select name="sort" id="sortSelect" class="table-sort_select"
                            onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.5rem; flex:1 1 120px; min-width:120px;">
                            <option value="">Sort By</option>
                            <option value="id" {{ request('sort') === 'id' ? 'selected' : '' }}>ID</option>
                            <option value="name" {{ request('sort') === 'name' ? 'selected' : '' }}>Vendor Name</option>
                            <option value="created_at" {{ request('sort') === 'created_at' ? 'selected' : '' }}>Created
                                Date</option>
                        </select>

                        {{-- Direction --}}
                        <select name="direction" id="directionSelect" class="table-sort_select"
                            onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.5rem; flex:1 1 100px; min-width:100px;">
                            <option value="desc" {{ request('direction', 'desc') === 'desc' ? 'selected' : '' }}>Desc
                            </option>
                            <option value="asc" {{ request('direction') === 'asc' ? 'selected' : '' }}>Asc</option>
                        </select>

                        {{-- Date --}}
                        <input type="date" name="date" id="dateFilter" class="table-date_input"
                            value="{{ request('date') }}" onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.35rem; flex:1 1 140px; min-width:140px;" />

                        {{-- Buttons (INLINE on Desktop, WRAP on Mobile) --}}
                        <div style="display:flex; gap:0.5rem; flex:0 0 auto;">
                            <button type="submit" class="dashboard_main-btn">Apply</button>
                            <a href="{{ route('vendors.index') }}" class="dashboard_main-btn"
                                style="background:#eee; color:#333; text-decoration:none; padding:0.45rem 0.75rem;">Reset</a>
                        </div>

                    </form>
                </div>

                {{-- Table --}}
                <div class="table-body">
                    <div class="table-content">
                        <div class="table-responsive">
                            <table class="table" id="dashboardTable" style="width:100%; border-collapse:collapse;">
                                <thead>
                                    <tr>
                                        <th style="width:40px;"><label class="table-checkbox"><input
                                                    type="checkbox" /></label></th>
                                        <th>Vendor Name</th>
                                        <th>Contact Info</th>
                                        <th>Website</th>
                                        <th>Created Date</th>
                                        <th>Status</th>
                                        <th>Location</th>
                                        <th style="width:80px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($vendors as $vendor)
                                        <tr>
                                            <td>
                                                <label class="table-checkbox">
                                                    <input type="checkbox" />
                                                </label>
                                            </td>
                                            <td onclick="window.location='{{ route('vendors.show', $vendor->id) }}'"
                                                style="cursor: pointer;">
                                                <div class="table-vendor">
                                                    <span class="icon">
                                                        <img loading="lazy"
                                                            src="{{ asset('assets/images/icons/user.svg') }}"
                                                            alt="icon" class="svg" />
                                                    </span>
                                                    <p class="text">
                                                        {{ $vendor->name }}
                                                        <span class="id">ID-{{ $vendor->id }}</span>
                                                    </p>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="table-contacts">
                                                    <a href="mailto:{{ $vendor->email }}"
                                                        class="en table-contact">{{ $vendor->email }}</a>
                                                    <a href="tel:{{ $vendor->phone }}"
                                                        class="en table-contact telephone">{{ $vendor->phone }}</a>
                                                </div>
                                            </td>
                                            <td>
                                                @if ($vendor->website)
                                                    <a href="{{ $vendor->website }}" target="_blank"
                                                        class="en table-contact">{{ $vendor->website }}</a>
                                                @else
                                                    <span class="muted">—</span>
                                                @endif
                                            </td>
                                            <td>{{ optional($vendor->created_at)->format('M d, Y') }}</td>
                                            <td>
                                                @php
                                                    $statusClass = match ($vendor->status) {
                                                        'active' => 'active_status',
                                                        'inactive' => 'inactive',
                                                        'draft' => 'draft',
                                                        default => 'draft',
                                                    };
                                                @endphp

                                                <span class="table-status {{ $statusClass }}">
                                                    {{ ucfirst($vendor->status) }}
                                                </span>
                                            </td>
                                            <td>{{ $vendor->location ?? 'N/A' }}</td>
                                            <td>
                                                <div class="table-item_actions" style="position: relative;">

                                                    {{-- Action Trigger --}}
                                                    <button type="button" class="table-item_btn action-toggle"
                                                        style="background:none; border:none; cursor:pointer;">
                                                        <img loading="lazy"
                                                            src="{{ asset('assets/images/icons/action.svg') }}"
                                                            alt="actions" class="svg" />
                                                    </button>

                                                    {{-- Dropdown Menu --}}
                                                    <div class="action-menu">
                                                        <a href="{{ route('vendors.edit', $vendor->id) }}">
                                                            <i class="icon">
                                                                <img src="{{ asset('assets/images/icons/edit.svg') }}"
                                                                    alt="icon" class="svg" />
                                                            </i>
                                                            Edit
                                                        </a>
                                                        <form action="{{ route('vendors.destroy', $vendor->id) }}"
                                                            method="POST"
                                                            onsubmit="event.preventDefault(); openDeleteModal(this);">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit">
                                                                <i class="icon">
                                                                    <img src="{{ asset('assets/images/icons/trash-alt.svg') }}"
                                                                        alt="icon" class="svg" />
                                                                </i>
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </div>





                                                    <!-- Delete Confirmation Modal -->
                                                    <div id="deleteModal" class="delete-modal">
                                                        <div class="delete-modal-content">
                                                            <h3>Are you sure?</h3>
                                                            <p>This action cannot be undone.</p>
                                                            <div class="delete-modal-actions">
                                                                <button class="btn-cancel"
                                                                    onclick="closeDeleteModal()">Cancel</button>
                                                                <button class="btn-delete"
                                                                    onclick="confirmDelete()">Delete</button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" style="text-align:center; padding:2rem;">No vendors found.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>



                    <div class="table-navigations">

                        {{-- Items per page dropdown --}}
                        <form method="GET" action="{{ route('vendors.index') }}">
                            @foreach (request()->except('per_page') as $key => $value)
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endforeach
                            <select name="per_page" id="itemsCountSelect" class="table-count_select"
                                onchange="this.form.submit()">
                                <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10 per page</option>
                                <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>20 per page</option>
                                <option value="30" {{ $perPage == 30 ? 'selected' : '' }}>30 per page</option>
                                <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50 per page</option>
                            </select>
                        </form>

                        {{-- Pagination Display --}}
                        <div class="table-paginations">
                            <p class="table-pagination">
                                Page <span>{{ $vendors->currentPage() }}</span> of
                                <span>{{ $vendors->lastPage() }}</span>
                            </p>

                            <div class="table-arrows">
                                {{-- Previous --}}
                                @if ($vendors->onFirstPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_left.svg') }}" alt="icon"
                                            class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $vendors->previousPageUrl() }}" class="table-navigation">
                                        <img src="{{ asset('assets/images/icons/angle_left.svg') }}" alt="icon"
                                            class="svg" />
                                    </a>
                                @endif

                                {{-- Next --}}
                                @if ($vendors->currentPage() == $vendors->lastPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon"
                                            class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $vendors->nextPageUrl() }}" class="table-navigation">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon"
                                            class="svg" />
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>



                </div>





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

    {{-- Optional small script: press Enter in search to submit --}}
    <script>
        document.getElementById('searchInput')?.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('filtersForm').submit();
            }
        });
    </script>




    <script>
        document.addEventListener('click', function(e) {
            const toggle = e.target.closest('.action-toggle');
            const clickedFlyout = e.target.closest('.action-flyout') || e.target.closest('.action-menu');

            // If click happened inside an existing flyout, let it handle the click (don't auto-close)
            if (!toggle && clickedFlyout) {
                return;
            }

            // If clicking outside any toggle or flyout -> remove all flyouts
            if (!toggle) {
                document.querySelectorAll('.action-flyout').forEach(f => f.remove());
                return;
            }

            // At this point the user clicked a toggle button
            // If this toggle already has an open flyout, close it
            const existing = document.querySelectorAll('.action-flyout');
            // Remove previous flyouts (so we toggle a single one)
            existing.forEach(f => f.remove());

            // Find original menu (hidden inside table row), clone it and append to body
            const originalMenu = toggle.parentElement.querySelector('.action-menu');
            if (!originalMenu) return;

            const flyout = originalMenu.cloneNode(true);
            flyout.classList.add('action-flyout');
            flyout.style.display = 'block';
            flyout.style.position = 'absolute';
            document.body.appendChild(flyout);

            // Position the flyout next to the button and adjust if it overflows
            function place() {
                const rect = toggle.getBoundingClientRect();
                const fw = flyout.offsetWidth;
                const fh = flyout.offsetHeight;
                let top = rect.bottom + window.scrollY + 6; // below by default
                let left = rect.right + window.scrollX - fw; // align right edges

                // If overflowing bottom, place above toggle
                if (top + fh > window.scrollY + window.innerHeight) {
                    top = rect.top + window.scrollY - fh - 6;
                }
                // If left overflow, align to the left edge of the toggle
                if (left < window.scrollX + 6) {
                    left = rect.left + window.scrollX;
                }
                flyout.style.top = top + 'px';
                flyout.style.left = left + 'px';
            }

            // small timeout to let browser compute sizes
            setTimeout(place, 0);

            // Reposition or remove on scroll/resize for safety
            const removeHandlers = () => {
                if (flyout && flyout.parentElement) flyout.remove();
                window.removeEventListener('resize', removeHandlers);
                window.removeEventListener('scroll', removeHandlers, true);
            };
            window.addEventListener('resize', removeHandlers);
            window.addEventListener('scroll', removeHandlers, true);
        });
    </script>


    <script>
        let deleteForm = null;

        function openDeleteModal(form) {
            deleteForm = form; // store the form to submit after confirmation
            document.getElementById('deleteModal').style.display = 'flex';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }

        function confirmDelete() {
            if (deleteForm) deleteForm.submit();
        }
    </script>
@endsection