@extends('admin.layouts.app')
@section('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/jquery.dataTables.min.css">
    <style>
        .dataTables_info, .dataTables_paginate.paging_simple_numbers {
            color: #fff !important;
        }
    </style>
@endsection

@section('content')
<div class="users_list">
    <div class="topbar">
        <select class="league-select" id="league_id">
            <option value="">Select League</option>
        </select>
        <div class="tabs">
            <div class="tab active" data-tab="players">Players</div>
            <div class="tab" data-tab="team">Team Owners</div>
            <div class="tab" data-tab="sponsor">Sponsor</div>
        </div>
    </div>
    <div id="players" class="tab-content">
        <div class="controls">
            <input class="search" id="search" placeholder="Search here...">
            <select class="select" id="status_filter">
                <option value="">All Status</option>
                @foreach (App\Models\LeagueRegistration::STATUS_NAMES as $name => $value)
                    <option value="{{ $value }}">{{ ucfirst($name) }}</option>
                @endforeach
            </select>
            <select class="select" id="category_filter">
                <option value="">All Categories</option>
            </select>
            <button class="add-btn" id="addBtn">+ Add Player</button>
        </div>
    </div>
    <div id="team" class="tab-content" style="display:none">
        <div class="controls">
            <input class="search team-search" placeholder="Search here...">
            <select class="select" id="team_status_filter">
                <option value="">All Status</option>
                @foreach (App\Models\LeagueRegistration::STATUS_NAMES as $name => $value)
                    <option value="{{ $value }}">{{ ucfirst($name) }}</option>
                @endforeach
            </select>
            <select class="select team-category-filter" style="display:none">
                <option value="">All Categories</option>
            </select>
            <button class="add-btn" id="addTeamBtn">+ Add Owner</button>
        </div>
    </div>
    <div id="sponsor" class="tab-content" style="display:none">
        <div class="controls">
            <input class="search sponsor-search" placeholder="Search here...">
            <select class="select" id="sponsor_status_filter">
                <option value="">All Status</option>
                @foreach (App\Models\LeagueRegistration::STATUS_NAMES as $name => $value)
                    <option value="{{ $value }}">{{ ucfirst($name) }}</option>
                @endforeach
            </select>
            <button class="add-btn" id="addSponsorBtn">+ Add Sponsor</button>
        </div>
    </div>

    <div class="table-wrap">
        <table id="registrationTable" style="width:100%">
            <thead></thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@endsection

@section('scripts')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="{{ asset('assets/js/admin/toast.js') }}"></script>
    <script>
        let currentType = 'players';
        let table;
        const datatableUrl = "{{ route('admin.users.data') }}";
        const tabTypeMap = {
            players: 'players',
            team: 'team_owners',
            sponsor: 'sponsors',
        };

        function switchTab(tabKey) {
            currentType = tabTypeMap[tabKey] || 'players';

            $('.users_list .tab').removeClass('active');
            $('.users_list .tab[data-tab="' + tabKey + '"]').addClass('active');

            $('.users_list .tab-content').hide();
            $('#' + tabKey).show();

            loadTable();
        }

        function loadTable() {
            let columns = [];
            let thead = '';

            if (currentType === 'players') {
                $('.add-btn').text('+ Add Player');
                thead = `
                    <tr>
                        <th>ID</th>
                        <th>Player Name</th>
                        <th>Role</th>
                        <th>Category</th>
                        <th>Base Points</th>
                        <th>Payment</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                `;
                columns = [
                    { data: 'id', name: 'id' },
                    { data: 'player_name', name: 'player_name', orderable: false, searchable: false },
                    { data: 'role', name: 'role', orderable: false, searchable: false },
                    { data: 'category', name: 'category', orderable: false, searchable: false },
                    { data: 'base_price', name: 'base_price', orderable: false, searchable: false },
                    { data: 'payment', name: 'payment', orderable: false, searchable: false },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false },
                ];
            }

            if (currentType === 'team_owners') {
                $('.add-btn').text('+ Add Owner');
                thead = `
                    <tr>
                        <th>Owner ID</th>
                        <th>Owner Name</th>
                        <th>Team Name</th>
                        <th>Total Budget</th>
                        <th>Remaining Budget</th>
                        <th>Players Bought</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                `;
                columns = [
                    { data: 'owner_id', name: 'teams.id', orderable: false },
                    { data: 'owner_name', name: 'owner_name', orderable: false, searchable: false },
                    { data: 'team_name', name: 'team_name' },
                    { data: 'total_budget', name: 'total_budget' },
                    { data: 'remaining_budget', name: 'remaining_budget', orderable: false, searchable: false },
                    { data: 'players_bought', name: 'players_bought', orderable: false, searchable: false },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false },
                ];
            }

            if (currentType === 'sponsors') {
                $('.add-btn').text('+ Add Sponsor');
                thead = `
                    <tr>
                        <th>Sponsor ID</th>
                        <th>Company Name</th>
                        <th>Contact Person</th>
                        <th>Sponsorship Type</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                `;
                columns = [
                    { data: 'sponsor_id', name: 'sponsors.id', orderable: false },
                    { data: 'company_name', name: 'company_name', orderable: false, searchable: false },
                    { data: 'contact_person_name', name: 'contact_person_name' },
                    { data: 'sponsorship_type', name: 'sponsorship_type', orderable: false, searchable: false },
                    { data: 'sponsorship_amount', name: 'sponsorship_amount' },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'actions', name: 'actions', orderable: false, searchable: false },
                ];
            }

            if ($.fn.DataTable.isDataTable('#registrationTable')) {
                $('#registrationTable').DataTable().clear().destroy();
            }

            $('#registrationTable').html('<thead>' + thead + '</thead><tbody></tbody>');

            table = $('#registrationTable').DataTable({
                processing: true,
                serverSide: true,
                responsive: false,
                destroy: true,
                searching: false,
                lengthChange: false,
                autoWidth: false,
                ajax: {
                    url: datatableUrl,
                    data: function (d) {
                        d.type = currentType;
                        d.search = $('#search').val() || $('.team-search:visible').val() || $('.sponsor-search:visible').val() || '';
                        d.status = currentType === 'team_owners'
                            ? $('#team_status_filter').val()
                            : currentType === 'sponsors'
                                ? $('#sponsor_status_filter').val()
                                : $('#status_filter').val();
                        d.category = $('#category_filter').val();
                        d.league_id = $('#league_id').val();
                    }
                },
                createdRow: function (row, data) {
                    if ((currentType === 'team_owners' || currentType === 'sponsors') && data.actions) {
                        $(row).find('td:last').addClass('actions item');
                    }
                },
                columns: columns
            });
        }

        const indexRoute = "{{ route('admin.users.index') }}";

        // (Re)populate the category filter for a given league. Categories are
        // league-scoped, so this must run whenever the selected league changes.
        function loadCategories(leagueId, selected) {
            return $.ajax({
                url: indexRoute,
                type: 'GET',
                dataType: 'json',
                data: { league_id: leagueId || '' },
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
            }).done(function (response) {
                const $filter = $('#category_filter');
                $filter.html('<option value="">All Categories</option>');
                $.each(response.categories || [], function (index, category) {
                    $filter.append(`<option value="${category.id}">${category.name}</option>`);
                });
                if (selected) {
                    $filter.val(selected);
                }
            });
        }

        $(document).ready(function () {
            $.ajax({
                url: indexRoute,
                type: 'GET',
                dataType: 'json',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                success: function (response) {
                    $('#league_id').html('<option value="">Select League</option>');
                    $.each(response.leagues, function (index, league) {
                        $('#league_id').append(
                            `<option value="${league.id}">${league.name}</option>`
                        );
                    });

                    $('#category_filter').html('<option value="">All Categories</option>');
                    $.each(response.categories, function (index, category) {
                        $('#category_filter').append(
                            `<option value="${category.id}">${category.name}</option>`
                        );
                    });

                    if (response.leagues.length && !$('#league_id').val()) {
                        $('#league_id').val(response.leagues[0].id);
                    }

                    switchTab('players');
                },
                error: function (xhr) {
                    console.log(xhr.responseText);
                    switchTab('players');
                }
            });

            $(document).on('click', '.users_list .tab', function (e) {
                e.preventDefault();
                switchTab($(this).data('tab'));
            });

            $('#search, .team-search, .sponsor-search').on('keyup', function () {
                if (table) {
                    table.ajax.reload();
                }
            });

            // Changing the league re-scopes the category filter, then reloads.
            $('#league_id').on('change', function () {
                loadCategories($(this).val()).always(function () {
                    if (table) {
                        table.ajax.reload();
                    }
                });
            });

            $('#status_filter, #category_filter, #team_status_filter, #sponsor_status_filter')
                .on('change', function () {
                    if (table) {
                        table.ajax.reload();
                    }
                });
        });
    </script>
    <script>
        $(document).on('click', '.users_list .dropdown_table .drop-btn', function (e) {
            e.preventDefault();
            e.stopPropagation();

            const dropdown = $(this).closest('.dropdown_table');
            $('.users_list .dropdown_table').not(dropdown).removeClass('active');
            dropdown.toggleClass('active');
        });

        $(document).on('click', function (e) {
            if (!$(e.target).closest('.users_list .dropdown_table').length) {
                $('.users_list .dropdown_table').removeClass('active');
            }
        });

        $(document).on('click', '.users_list .status-dropdown .option', function (e) {
            e.preventDefault();
            e.stopPropagation();

            const option = $(this);
            const dropdownTable = option.closest('.status-dropdown');
            const dropBtn = dropdownTable.find('.drop-btn');
            const status = Number(option.data('value'));
            const id = dropBtn.data('id');
            const selectedText = option.text().trim();
            const colorClasses = 'red green blue yellow paid unpaid approved sold pending rejected';
            const updateUrl = "{{ route('admin.users.update.status') }}";

            if (!id || Number.isNaN(status)) {
                return;
            }

            $.ajax({
                url: updateUrl,
                type: 'POST',
                dataType: 'json',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    status: status,
                },
                success: function () {
                    dropBtn.find('.selectedText').text(selectedText);
                    dropBtn.removeClass(colorClasses);
                    option.attr('class')
                        .split(/\s+/)
                        .filter(function (cls) {
                            return cls && cls !== 'option';
                        })
                        .forEach(function (cls) {
                            dropBtn.addClass(cls);
                        });
                },
                error: function (xhr) {
                    const message = xhr.responseJSON?.message
                        || (xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).flat().join('\n') : null)
                        || 'Unable to update status.';
                    showAdminToast(message, 'error');
                },
                complete: function () {
                    dropdownTable.removeClass('active');
                }
            });
        });

        $(document).on('click', '.users_list .category-dropdown .option', function (e) {
            e.preventDefault();
            e.stopPropagation();

            const option = $(this);
            if (option.hasClass('disabled')) {
                return;
            }

            const dropdownTable = option.closest('.category-dropdown');
            const dropBtn = dropdownTable.find('.drop-btn');
            const category = Number(option.data('value'));
            const id = dropBtn.data('id');
            const selectedText = option.text().trim();
            const updateUrl = "{{ route('admin.users.update.category') }}";

            if (!id || Number.isNaN(category)) {
                return;
            }

            $.ajax({
                url: updateUrl,
                type: 'POST',
                dataType: 'json',
                headers: { 'X-Requested-With': 'XMLHttpRequest' },
                data: {
                    _token: "{{ csrf_token() }}",
                    id: id,
                    category: category,
                },
                success: function () {
                    dropBtn.find('.selectedText').text(selectedText);
                    dropdownTable.find('.option').removeClass('selected');
                    option.addClass('selected');
                },
                error: function (xhr) {
                    const message = xhr.responseJSON?.message
                        || (xhr.responseJSON?.errors ? Object.values(xhr.responseJSON.errors).flat().join('\n') : null)
                        || 'Unable to update category.';
                    alert(message);
                },
                complete: function () {
                    dropdownTable.removeClass('active');
                }
            });
        });
    </script>
@endsection