@extends('admin.layouts.app', ['title' => $title])

@push('head')
    <style>
        .dealer-commission-filter-header,
        .dealer-commission-list-header {
            position: relative;
            overflow: hidden;
            border: 0;
            color: #f8fbff;
        }

        .dealer-commission-filter-header {
            background: linear-gradient(135deg, #243b53 0%, #334e68 52%, #486581 100%);
        }

        .dealer-commission-list-header {
            background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 52%, #38b2ac 100%);
        }

        .dealer-commission-filter-header::before,
        .dealer-commission-list-header::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 34%),
                linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent 55%);
            pointer-events: none;
        }

        .dealer-commission-filter-header > *,
        .dealer-commission-list-header > * {
            position: relative;
            z-index: 1;
        }

        .dealer-commission-filter-card .form-control,
        .dealer-commission-filter-card .form-select,
        .dealer-commission-filter-card .btn {
            min-height: 3rem;
            border-radius: 999px;
        }

        .dealer-commission-filter-card .btn {
            font-weight: 700;
        }

        .dealer-commission-stat {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.65rem 0.95rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            font-size: 0.88rem;
        }

        .dealer-commission-table table {
            min-width: 1120px;
        }

        .dealer-commission-table .table {
            margin-bottom: 0;
        }

        .dealer-commission-table .table > :not(caption) > * > * {
            padding-block: 0.95rem;
            vertical-align: middle;
        }

        html[data-theme="dark"] .dealer-commission-filter-card,
        html[data-theme="dark"] .dealer-commission-table-wrap,
        html[data-theme="dark"] #dealerCommissionPaginationWrap,
        html[data-theme="dark"] .dealer-commission-table .table-responsive {
            background: #0f172a;
        }

        html[data-theme="dark"] .dealer-commission-filter-card .card-body,
        html[data-theme="dark"] .dealer-commission-table .table-responsive,
        html[data-theme="dark"] #dealerCommissionPaginationWrap {
            background: #0f172a;
            color: #e2e8f0;
        }

        html[data-theme="dark"] .dealer-commission-filter-card .form-label,
        html[data-theme="dark"] .text-muted {
            color: #94a3b8 !important;
        }

        html[data-theme="dark"] .dealer-commission-filter-card .form-control,
        html[data-theme="dark"] .dealer-commission-filter-card .form-select {
            background: #111c31;
            border-color: rgba(148, 163, 184, 0.24);
            color: #e2e8f0;
        }

        html[data-theme="dark"] .dealer-commission-filter-card .form-control::placeholder {
            color: #64748b;
        }

        html[data-theme="dark"] .dealer-commission-filter-card .form-control:focus,
        html[data-theme="dark"] .dealer-commission-filter-card .form-select:focus {
            background: #111c31;
            color: #f8fafc;
            border-color: rgba(96, 165, 250, 0.6);
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.16);
        }

        html[data-theme="dark"] .dealer-commission-table .table {
            color: #e2e8f0;
            --bs-table-bg: #0f172a;
            --bs-table-striped-bg: #142033;
            --bs-table-hover-bg: #172337;
            --bs-table-border-color: rgba(148, 163, 184, 0.14);
        }

        html[data-theme="dark"] .dealer-commission-table .table thead,
        html[data-theme="dark"] .dealer-commission-table .table thead.table-light {
            --bs-table-bg: #111c31;
            --bs-table-color: #f8fafc;
            color: #f8fafc;
        }

        html[data-theme="dark"] .dealer-commission-table .table thead th {
            border-bottom-color: rgba(148, 163, 184, 0.18);
            color: #cbd5e1 !important;
            letter-spacing: 0.04em;
        }

        html[data-theme="dark"] .dealer-commission-table .table tbody tr {
            background: #0f172a;
        }

        html[data-theme="dark"] .dealer-commission-table .table tbody tr:hover {
            background: #172337;
        }

        html[data-theme="dark"] .dealer-commission-table .table > :not(caption) > * > * {
            border-color: rgba(148, 163, 184, 0.12);
        }

        html[data-theme="dark"] #dealerCommissionPaginationWrap .pagination {
            --bs-pagination-bg: #111c31;
            --bs-pagination-border-color: rgba(148, 163, 184, 0.18);
            --bs-pagination-color: #cbd5e1;
            --bs-pagination-hover-bg: #172337;
            --bs-pagination-hover-color: #ffffff;
            --bs-pagination-hover-border-color: rgba(148, 163, 184, 0.28);
            --bs-pagination-active-bg: #1d4ed8;
            --bs-pagination-active-border-color: #1d4ed8;
            --bs-pagination-disabled-bg: #0f172a;
            --bs-pagination-disabled-color: #64748b;
        }

        @media (max-width: 767.98px) {
            .dealer-commission-filter-card .card-body {
                padding: 1rem;
            }

            .dealer-commission-filter-card .form-label {
                margin-bottom: 0.35rem;
                font-size: 0.82rem;
            }

            .dealer-commission-filter-card .form-control,
            .dealer-commission-filter-card .form-select,
            .dealer-commission-filter-card .btn {
                min-height: 2.75rem;
                font-size: 0.92rem;
                padding-inline: 0.9rem;
            }

            .dealer-commission-table table {
                min-width: 980px;
            }
        }
    </style>
@endpush

@section('content')
    @php
        $emptyDealerCommissionPaginator = new \Illuminate\Pagination\LengthAwarePaginator(collect(), 0, 15, 1, [
            'path' => route($reportRoute),
        ]);
    @endphp

    <div class="d-grid gap-4">
        <section>
            <div>
                <h1 class="h2 fw-bold mb-2">{{ $title }}</h1>
                <div class="text-muted">{{ $subtitle }}</div>
            </div>
        </section>

        <section class="card admin-card border-0 dealer-commission-filter-card">
            <div class="card-header dealer-commission-filter-header py-4">
                <div class="fw-bold fs-5">Report Filter</div>
            </div>
            <div class="card-body p-4">
                <div class="alert alert-danger d-none" id="dealerCommissionErrorAlert"></div>
                <form method="GET" action="{{ route($reportRoute) }}" class="row g-3 align-items-end" id="dealerCommissionFilterForm" autocomplete="off">
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label small text-muted">Select Dealer</label>
                        <select name="dealer_id" class="form-select" id="dealerCommissionDealerSelect">
                            <option value="">All Dealers</option>
                            @foreach ($dealers as $dealer)
                                <option value="{{ $dealer->id }}" @selected((string) ($filters['dealer_id'] ?? '') === (string) $dealer->id)>
                                    {{ $dealer->name }}{{ $dealer->email ? ' | ' . $dealer->email : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-6 col-xl-3">
                        <label class="form-label small text-muted">Select Merchant</label>
                        <select name="user_id" class="form-select" id="dealerCommissionMerchantSelect">
                            <option value="">All Merchants</option>
                            @foreach ($users as $user)
                                <option value="{{ $user->id }}" @selected((string) ($filters['user_id'] ?? '') === (string) $user->id)>
                                    {{ $user->name }}{{ $user->email ? ' | ' . $user->email : '' }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">Start Date</label>
                        <input type="date" name="start_date" class="form-control" id="dealerCommissionStartDate" value="{{ $filters['start_date'] ?? '' }}">
                    </div>
                    <div class="col-12 col-md-6 col-xl-2">
                        <label class="form-label small text-muted">End Date</label>
                        <input type="date" name="end_date" class="form-control" id="dealerCommissionEndDate" value="{{ $filters['end_date'] ?? '' }}">
                    </div>
                    <div class="col-6 col-xl-1">
                        <button type="submit" class="btn btn-dark w-100">Search</button>
                    </div>
                    <div class="col-6 col-xl-1">
                        <a href="{{ route($reportRoute) }}" class="btn btn-outline-secondary w-100" id="dealerCommissionResetButton">Reset</a>
                    </div>
                </form>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header dealer-commission-list-header py-3">
                <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                    <div class="fw-bold">Dealer Commission Records</div>
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        {{-- <div class="dealer-commission-stat">
                            <i class="bi bi-calendar-event"></i>
                            <span>Report Date: Last updated commission entry</span>
                        </div> --}}
                        <a href="{{ route($reportRoute, ['dealer_id' => $filters['dealer_id'] ?? null, 'user_id' => $filters['user_id'] ?? null, 'start_date' => $filters['start_date'] ?? '', 'end_date' => $filters['end_date'] ?? '', 'export' => 'xls']) }}" class="btn btn-outline-light rounded-pill px-4" id="dealerCommissionExportButton">Export Xls</a>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div id="dealerCommissionTableWrap" class="dealer-commission-table">
                    @include('admin.reports.partials._dealer_commission_table', ['rows' => $rows])
                </div>
                <div id="dealerCommissionPaginationWrap">
                    @include('admin.reports.partials._daywise_report_pagination', ['rows' => $rows ?: $emptyDealerCommissionPaginator])
                </div>
            </div>
        </section>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('dealerCommissionFilterForm');
            const errorAlert = document.getElementById('dealerCommissionErrorAlert');
            const resetButton = document.getElementById('dealerCommissionResetButton');
            const exportButton = document.getElementById('dealerCommissionExportButton');
            const tableWrap = document.getElementById('dealerCommissionTableWrap');
            const paginationWrap = document.getElementById('dealerCommissionPaginationWrap');

            if (!form || !tableWrap || !paginationWrap) {
                return;
            }

            const showError = function (message) {
                if (!errorAlert) {
                    return;
                }

                errorAlert.textContent = message;
                errorAlert.classList.remove('d-none');
            };

            const hideError = function () {
                errorAlert?.classList.add('d-none');
                if (errorAlert) {
                    errorAlert.textContent = '';
                }
            };

            const updateHistory = function (url) {
                if (window.history?.replaceState) {
                    window.history.replaceState({}, '', url);
                }
            };

            const fetchReport = function (url) {
                hideError();

                tableWrap.style.opacity = '0.65';
                paginationWrap.style.opacity = '0.65';

                fetch(url, {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                })
                    .then(function (response) {
                        if (!response.ok) {
                            throw new Error('Unable to load dealer commission report right now.');
                        }

                        return response.json();
                    })
                    .then(function (payload) {
                        tableWrap.innerHTML = payload.table_html || '';
                        paginationWrap.innerHTML = payload.pagination_html || '';
                        updateHistory(url);
                    })
                    .catch(function (error) {
                        showError(error.message || 'Something went wrong while loading the report.');
                    })
                    .finally(function () {
                        tableWrap.style.opacity = '1';
                        paginationWrap.style.opacity = '1';
                        updateExportUrl();
                    });
            };

            const updateExportUrl = function () {
                if (!exportButton) {
                    return;
                }

                const params = new URLSearchParams(new FormData(form));
                params.delete('page');
                params.set('export', 'xls');
                exportButton.href = form.action + '?' + params.toString();
            };

            form.addEventListener('submit', function (event) {
                event.preventDefault();
                const params = new URLSearchParams(new FormData(form));
                params.delete('page');
                fetchReport(form.action + '?' + params.toString());
            });

            resetButton?.addEventListener('click', function (event) {
                event.preventDefault();
                form.reset();
                fetchReport(resetButton.getAttribute('href'));
            });

            form.querySelectorAll('select, input').forEach(function (field) {
                field.addEventListener('change', updateExportUrl);
                field.addEventListener('input', updateExportUrl);
            });

            document.addEventListener('click', function (event) {
                const paginationLink = event.target.closest('#dealerCommissionPaginationWrap .pagination a');

                if (!paginationLink) {
                    return;
                }

                event.preventDefault();
                fetchReport(paginationLink.href);
            });

            updateExportUrl();
        });
    </script>
@endpush