@extends('layouts.master')

@section('content')

<div class="pt-16 pl-8 pr-8 space-y-8 mx-auto w-full">

    <!-- Page Header -->
    <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
        <div>
            <h2 class="font-headline font-extrabold text-4xl text-primary tracking-tighter leading-none mb-2">
                Players_Directory
            </h2>
            <p class="text-primary-container text-xs tracking-widest uppercase flex items-center gap-2">
                <span class="w-2 h-2 rounded-full bg-primary-container animate-pulse"></span>
                SYSTEM_ACTIVE // USERS
            </p>
        </div>


    </div>

    <!-- Filters -->
    <div class="flex flex-wrap gap-4 items-end">

        <input type="text" id="search"
            class="bg-surface-container border border-outline-variant/10 px-4 py-2 rounded-lg text-sm"
            placeholder="Search player">

        <input type="number" id="age"
            class="bg-surface-container border border-outline-variant/10 px-4 py-2 rounded-lg text-sm w-28"
            placeholder="Age">

        <select id="gender"
            class="bg-surface-container border border-outline-variant/10 px-4 py-2 rounded-lg text-sm">
            <option value="">Gender</option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>

        <select id="is_guest"
            class="bg-surface-container border border-outline-variant/10 px-4 py-2 rounded-lg text-sm">
            <option value="">User Type</option>
            <option value="1">Guest</option>
            <option value="0">Logged In</option>
        </select>

        <button id="exportCsv"
            class="bg-primary-container text-on-primary-container px-4 py-2 rounded-lg text-xs font-bold tracking-widest">
            CSV
        </button>

        <button id="exportExcel"
            class="bg-primary-container text-on-primary-container px-4 py-2 rounded-lg text-xs font-bold tracking-widest">
            EXCEL
        </button>

        <button id="resetFilters"
            class="bg-primary-container text-on-primary-container px-4 py-2 rounded-lg text-xs font-bold tracking-widest">
            RESET
        </button>

    </div>

    <!-- Table Container -->
    <div id="table-data">
        @include('players.partials.table')
    </div>

</div>

@endsection


@section('scripts')
<script>
    $(document).ready(function() {

        // console.log("🔥 SCRIPT LOADED SUCCESSFULLY");

        function fetchData(page = 1) {

            let payload = {
                search: $('#search').val() || '',
                age: $('#age').val() || '',
                gender: $('#gender').val() || '',
                is_guest: $('#is_guest').val() || '',
                page: page
            };

            console.log("🚀 FETCH DATA TRIGGERED");
            console.table(payload);

            $.ajax({
                url: "{{ route('players.index') }}",
                type: "GET",
                data: payload,

                beforeSend: function() {
                    console.log("📡 AJAX Sending...");
                },

                success: function(data) {
                    console.log("✅ RESPONSE RECEIVED");
                    $('#table-data').html(data);
                },

                error: function(xhr) {
                    console.error("❌ AJAX ERROR");
                    console.log(xhr.responseText);
                }
            });
        }

        // SEARCH + AGE
        $(document).on('keyup', '#search, #age', function() {
            fetchData();
        });

        // SELECT FILTERS
        $(document).on('change', '#gender, #is_guest', function() {
            console.log("🎯 FILTER CHANGE:", this.id, $(this).val());
            fetchData();
        });

        // PAGINATION
        $(document).on('click', '.pagination a', function(e) {
            e.preventDefault();

            let url = new URL($(this).attr('href'));
            let page = url.searchParams.get("page");

            fetchData(page);
        });

        // CSV EXPORT
        $('#exportCsv').on('click', function() {

            let params = $.param({
                search: $('#search').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                is_guest: $('#is_guest').val(),
                export: 'csv'
            });

            window.location.href = "{{ route('players.index') }}?" + params;
        });

        $('#exportExcel').on('click', function() {

            let params = $.param({
                search: $('#search').val(),
                age: $('#age').val(),
                gender: $('#gender').val(),
                is_guest: $('#is_guest').val(),
                from_date: $('#from_date').val(),
                to_date: $('#to_date').val(),
                export: 'excel'
            });

            window.location.href = "{{ route('players.index') }}?" + params;
        });

        document.getElementById('resetFilters').addEventListener('click', function() {
            document.getElementById('search').value = '';
            document.getElementById('age').value = '';
            document.getElementById('gender').value = '';
            document.getElementById('is_guest').value = '';

            fetchData();
        });

    });
</script>
@endsection