@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" onclick="overlayClick(event)" 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);
            }
            function overlayClick(e) {
                let content = document.getElementById('popupContent');
                if (!content.contains(e.target)) {
                    closePopup();
                }
            }
            window.onload = function () {
                setTimeout(openPopup, 100);
            };
        </script>
    @endif

    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">{{ __('Transactions') }}</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li>
                        <a href="{{ route('admin.dashboard') }}">{{ __('Dashboard') }}</a>
                    </li>
                    <li>
                        <a href="#">{{ __('Transactions') }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="dashboard_main-body">
            <div class="dashboard_main-card">
                <div class="table-header">
                    <h2 class="table-title">{{ __('Overview') }}</h2>
                    <div class="table-bulk_actions">
                        <button class="table-bulk_btn">
                            <img loading="lazy" src="{{ asset('assets/images/icons/action.svg') }}" alt="icon"
                                class="svg" />
                        </button>
                    </div>
                </div>

                <div class="table-body">
                    <div class="table_tabs-content">
                        <div class="table-tabs">
                            <button class="{{ request('status', 'all') === 'all' ? 'active' : '' }}"
                                data-status="all">{{ __('All Transactions') }}</button>
                            <button class="{{ request('status') === 'completed' ? 'active' : '' }}"
                                data-status="completed">{{ __('Successful') }}</button>
                            <button class="{{ request('status') === 'pending' ? 'active' : '' }}"
                                data-status="pending">{{ __('Pending') }}</button>
                            <button class="{{ request('status') === 'failed' ? 'active' : '' }}"
                                data-status="failed">{{ __('Failed') }}</button>
                        </div>
                    </div>

                    <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('transactions.index') }}" method="GET"
                            style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; width:100%;">


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


                            {{-- Date Filter --}}
                            <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;" />

                            {{-- Sort Field --}}
                            <select name="sort" id="sortSelect" class="table-sort_select"
                                onchange="document.getElementById('filtersForm').submit()"
                                style="padding:0.5rem; flex:1 1 160px; min-width:160px;">
                                <option value="" disabled {{ !request()->filled('sort') ? 'selected' : '' }}>
                                    {{ __('Sort By') }}
                                </option>
                                <option value="id" {{ request('sort') === 'id' ? 'selected' : '' }}>{{ __('Transaction ID') }}
                                </option>
                                <option value="order_id" {{ request('sort') === 'order_id' ? 'selected' : '' }}>
                                    {{ __('Booking ID') }}
                                </option>
                                <option value="event_date" {{ request('sort') === 'event_date' ? 'selected' : '' }}>
                                    {{ __('Event Start 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>

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

                        </form>
                    </div>

                    <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const baseUrl = "{{ route('transactions.index') }}";

                            // 🔹 Tabs filter by status
                            document.querySelectorAll('.table-tabs button').forEach(btn => {
                                btn.addEventListener('click', function () {
                                    const status = this.dataset.status;
                                    const params = new URLSearchParams(window.location.search);
                                    params.set('status', status);
                                    params.delete('page'); // reset pagination
                                    window.location.href = `${baseUrl}?${params.toString()}`;
                                });
                            });

                            // 🔍 Search input
                            document.getElementById('searchInput').addEventListener('keyup', function (e) {
                                if (e.key === 'Enter') {
                                    const params = new URLSearchParams(window.location.search);
                                    params.set('q', this.value);
                                    params.delete('page');
                                    window.location.href = `${baseUrl}?${params.toString()}`;
                                }
                            });

                            // 🔹 Sort select
                            document.getElementById('sortSelect').addEventListener('change', function () {
                                const params = new URLSearchParams(window.location.search);
                                if (this.value) {
                                    params.set('sort', this.value);
                                } else {
                                    params.delete('sort');
                                }
                                params.delete('page');
                                window.location.href = `${baseUrl}?${params.toString()}`;
                            });

                            // 📅 Date filter
                            document.getElementById('dateFilter').addEventListener('change', function () {
                                const params = new URLSearchParams(window.location.search);
                                if (this.value) {
                                    params.set('date', this.value);
                                } else {
                                    params.delete('date');
                                }
                                params.delete('page');
                                window.location.href = `${baseUrl}?${params.toString()}`;
                            });
                        });
                    </script>

                    <div class="table-content">
                        <div class="table-responsive">
                            <table class="table" id="dashboardTable">
                                <thead>
                                    <tr>
                                        <th style="width:40px;">
                                            <label class="table-checkbox">
                                                <input type="checkbox" />
                                            </label>
                                        </th>



                                        <th>{{ __('Transaction ID') }}</th>
                                        <th>{{ __('Event') }}</th>
                                        <th>{{ __('Booking ID') }}</th>
                                        <th>{{ __('Date & Time') }}</th>
                                        <th>{{ __('Amount') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($transactions as $transaction)
                                        <tr style="cursor: pointer;"
                                            onclick="window.location='{{ route('transactions.show', $transaction->id) }}'">
                                            <td>
                                                <label class="table-checkbox">
                                                    <input type="checkbox" />
                                                </label>
                                            </td>

                                            {{-- Transaction UUID --}}
                                            <td>
                                                <div class="table-code">
                                                    <span>{{ 'TR-' . $transaction->id }}</span>
                                                    <button class="copy-btn" type="button"
                                                        onclick="navigator.clipboard.writeText('{{ 'TR-' . $transaction->id }}')">
                                                        <img src="{{ asset('assets/images/icons/copy.svg') }}" alt="icon"
                                                            class="svg" />
                                                    </button>
                                                </div>
                                            </td>

                                            {{-- Event Name --}}
                                            <td>{{ optional($transaction?->order?->event)->title ?? '-' }}</td>

                                            {{-- Booking ID (Order) --}}
                                            <td>
                                                <div class="table-code">
                                                    <span>{{ 'BK-' . $transaction->order_id }}</span>
                                                    <button class="copy-btn" type="button"
                                                        onclick="navigator.clipboard.writeText('{{ 'BK-' . $transaction->order_id }}')">
                                                        <img src="{{ asset('assets/images/icons/copy.svg') }}" alt="icon"
                                                            class="svg" />
                                                    </button>
                                                </div>
                                            </td>

                                            {{-- Date & Time --}}
                                            <td>
                                                {{ \Carbon\Carbon::parse($transaction->order?->event?->start_date . ' ' . $transaction->order?->event?->time)->format('d M, Y | h:i A') }}
                                            </td>

                                            {{-- Amount --}}
                                            <td>
                                                @if (isset($transaction->order->total))
                                                    ${{ number_format($transaction->order->total, 2) }}
                                                @else
                                                    -
                                                @endif
                                            </td>

                                            {{-- Payment Method --}}
                                            {{-- <td>{{ $transaction->order->payment_method ?? '-' }}</td> --}}

                                            {{-- Status --}}
                                            <td>
                                                @php
                                                    $statusClass = match (strtolower($transaction->status)) {
                                                        'completed', 'successful', 'paid' => 'successful',
                                                        'failed',
                                                        'refunded',
                                                        'partially refunded',
                                                        'cancelled'
                                                        => 'failed',
                                                        'pending' => 'pending',
                                                        default => '',
                                                    };
                                                @endphp
                                                <span class="table-status {{ $statusClass }}">
                                                    {{ __(ucfirst($transaction->status)) }}
                                                </span>
                                            </td>

                                            {{-- Actions --}}
                                            <td>
                                                <div class="table-item_actions">
                                                    <a href="{{ route('transactions.show', $transaction->id) }}"
                                                        class="table-item_btn">
                                                        <img loading="lazy" src="{{ asset('assets/images/icons/action.svg') }}"
                                                            alt="icon" class="svg" />
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="9" class="text-center">{{ __('No transactions found.') }}</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="table-navigations">

                        {{-- Items per page dropdown --}}
                        <form method="GET" action="{{ route('transactions.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>{{ $transactions->currentPage() }}</span> {{ __('of') }}
                                <span>{{ $transactions->lastPage() }}</span>
                            </p>

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

                                {{-- Next --}}
                                @if ($transactions->currentPage() == $transactions->lastPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon" class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $transactions->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>

    {{-- 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>

    {{-- Keep original delete modal JS --}}
    <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 (!toggle && clickedFlyout) return;
            if (!toggle) {
                document.querySelectorAll('.action-flyout').forEach(f => f.remove());
                return;
            }
            const existing = document.querySelectorAll('.action-flyout');
            existing.forEach(f => f.remove());
            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);

            function place() {
                const rect = toggle.getBoundingClientRect();
                const fw = flyout.offsetWidth;
                const fh = flyout.offsetHeight;
                let top = rect.bottom + window.scrollY + 6;
                let left = rect.right + window.scrollX - fw;
                if (top + fh > window.scrollY + window.innerHeight) {
                    top = rect.top + window.scrollY - fh - 6;
                }
                if (left < window.scrollX + 6) left = rect.left + window.scrollX;
                flyout.style.top = top + 'px';
                flyout.style.left = left + 'px';
            }
            setTimeout(place, 0);
            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;
            document.getElementById('deleteModal').style.display = 'flex';
        }

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

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