@extends('layouts.admin.app')

@section('title', 'Sponsor Events')


@push('style')
    <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; }
        .events-index .filter-bar {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 20px 0;
        }
        .events-index .filter-field {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        .events-index .filter-field > label {
            color: #aaa;
            font-size: 12px;
            font-weight: 500;
        }
        .events-index .filter-bar select,
        .events-index .filter-bar input,
        .events-index .search {
            width: 100%;
            background: #111;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 12px 14px;
            color: #fff;
            font-size: 13px;
        }
        .events-index .filter-bar input[type="date"]::-webkit-calendar-picker-indicator {
            filter: invert(1);
            cursor: pointer;
        }
        .events-index .events-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 24px;
        }
        .events-index .section-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }
        .events-index .section-head h3 {
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            margin: 0;
        }
        .events-index .create-event-btn {
            background: #7ed957;
            color: #000;
            padding: 10px 26px;
            border-radius: 20px;
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: 0.3s;
        }
        .events-index .create-event-btn:hover {
            background: #6fce46;
        }
        .events-index .post-thumb {
            width: 56px;
            height: 40px;
            border-radius: 8px;
            object-fit: cover;
            background: #222;
        }
        .events-index .post-thumb-video {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #7b61ff;
            font-size: 11px;
            width: 56px;
            height: 40px;
            border-radius: 8px;
            background: #222;
        }
        .events-index .post-title {
            color: #fff;
            font-size: 14px;
            font-weight: 500;
            margin: 0 0 4px;
        }
        .events-index .post-type {
            color: #888;
            font-size: 12px;
        }
        .events-index .actions {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .events-index .action-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            width: 32px;
            height: 32px;
            cursor: pointer;
            color: #aaa;
            transition: 0.2s;
        }
        .events-index .action-btn:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.2);
        }
        .events-index .action-btn.delete:hover {
            color: #f87171;
            border-color: rgba(248, 113, 113, 0.4);
        }
        .events-index .controls { margin-bottom: 16px; }
        @media (max-width: 992px) {
            .events-index .filter-bar { grid-template-columns: 1fr 1fr; }
        }
    </style>
    <style>
        .users_list .actions svg{
            width: 18px;
            height: 18px;
        }
    </style>
@endpush

@section('content')
<div class="events-index content_area users_list">
    @include('admin.layouts.alert')

    <div class="breadcrumb">
        <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
        <span>›</span>
        <a href="{{ route('admin.leagues.index') }}">My Event Auction</a>
        <span>›</span>
        <span class="active">Events</span>
    </div>

    <div class="filter-bar">
        <div class="filter-field">
            <label for="media_type_filter">Media Type</label>
            <select id="media_type_filter">
                <option value="">All Media Types</option>
                <option value="1">Image</option>
                <option value="2">Video</option>
            </select>
        </div>
        <div class="filter-field">
            <label for="date_from">From Date</label>
            <input type="date" id="date_from">
        </div>
        <div class="filter-field">
            <label for="date_to">To Date</label>
            <input type="date" id="date_to">
        </div>
    </div>

    <div class="events-stats stats-grid" style="grid-template-columns: repeat(3, 1fr);">
        <div class="stat-card" data-color="purple">
            <div class="stat-label">Total Events</div>
            <div class="stat-value" id="stat-total">0</div>
        </div>
        <div class="stat-card" data-color="green">
            <div class="stat-label">Upcoming</div>
            <div class="stat-value" id="stat-upcoming">0</div>
        </div>
        <div class="stat-card" data-color="yellow">
            <div class="stat-label">Completed</div>
            <div class="stat-value" id="stat-completed">0</div>
        </div>
    </div>

    <div class="section-head">
        <h3>All Events</h3>
        <a href="{{ route('admin.events.create') }}" class="create-event-btn">+ Create Sponsor Event</a>
    </div>

    <div class="controls">
        <input class="search" id="search" placeholder="Search events...">
    </div>

    <div class="table-wrap">
        <table id="eventsTable" style="width:100%">
            <thead>
                <tr>
                    <th>Media</th>
                    <th>Event</th>
                    <th>Sponsor</th>
                    <th>Location</th>
                    <th>Schedule</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>
@endsection

@push('script')
<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>
    let table;
    const datatableUrl = "{{ route('admin.events.get.data') }}";

    function loadTable() {
        if ($.fn.DataTable.isDataTable('#eventsTable')) {
            $('#eventsTable').DataTable().clear().destroy();
        }

        table = $('#eventsTable').DataTable({
            processing: true,
            serverSide: true,
            searching: false,
            lengthChange: false,
            autoWidth: false,
            order: [[4, 'desc']],
            ajax: {
                url: datatableUrl,
                data: function (d) {
                    d.search = $('#search').val();
                    d.media_type = $('#media_type_filter').val();
                    d.date_from = $('#date_from').val();
                    d.date_to = $('#date_to').val();
                }
            },
            columns: [
                { data: 'thumbnail', name: 'thumbnail', orderable: false, searchable: false },
                { data: 'title_dates', name: 'title' },
                { data: 'sponsor_name', name: 'sponsor.company_name' },
                { data: 'location', name: 'location' },
                { data: 'schedule', name: 'start_date' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false },
            ]
        });
    }

    $(document).ready(function () {
        $.ajax({
            url: "{{ route('admin.events.index') }}",
            type: 'GET',
            dataType: 'json',
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function (response) {
                $('#stat-total').text(response.stats.total);
                $('#stat-upcoming').text(response.stats.upcoming);
                $('#stat-completed').text(response.stats.completed);
                loadTable();
            },
            error: function () {
                loadTable();
            }
        });

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

        $('#media_type_filter, #date_from, #date_to').on('change', function () {
            if (table) table.ajax.reload();
        });

        $(document).on('submit', '.event-delete-form', function (e) {
            if (!confirm('Delete this event?')) {
                e.preventDefault();
            }
        });
    });
</script>
@endpush