@extends('layouts.admin.master')
@section('title', 'Events Management')

@push('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<style>
    .status-badge {
        font-size: 0.8em;
        padding: 0.25em 0.6em;
    }
    .category-badge {
        background-color: #17a2b8;
        color: white;
        padding: 0.25em 0.6em;
        border-radius: 0.25rem;
        font-size: 0.8em;
    }
</style>
@endpush

@section('content')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Events Management</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item active">Events</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Events List</h3>
                        <div class="card-tools">
                            <a href="{{ route('admin.events.create') }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-plus"></i> Create New Event
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="eventsTable" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Name</th>
                                        <th>Category</th>
                                        <th>Venue</th>
                                        <th>Dates</th>
                                         <th>Fee Range</th>
                                         <th>Status</th>
                                         <th>Order</th>
                                        <th>Created</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via DataTables -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize DataTable
    const table = $('#eventsTable').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: '{{ route("admin.events.datatable") }}',
            type: 'GET',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            dataSrc: function(json) {
                // console.log('DataTables response:', json);
                return json.data || json;
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'category_name', name: 'category' },
            { data: 'venue', name: 'venue' },
            { data: 'dates_info', name: 'dates_info' },
            { data: 'fee_range', name: 'fee_range' },
            { data: 'status_badge', name: 'status' },

            { data: 'order', name: 'order' },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ],
                         order: [[7, 'asc'], [0, 'desc']], // Order by order field (index 7), then by ID (index 0)
        pageLength: 25,
        responsive: false, // Disable responsive to prevent column hiding
        lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
        language: {
            processing: '<div class="spinner-border text-primary" role="status"><span class="sr-only">Loading...</span></div>',
            search: "Search:",
            lengthMenu: "Show _MENU_ entries per page",
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
            infoEmpty: "Showing 0 to 0 of 0 entries",
            infoFiltered: "(filtered from _MAX_ total entries)",
            paginate: {
                first: "First",
                previous: "Previous",
                next: "Next",
                last: "Last"
            }
        },
        initComplete: function() {
            // console.log('DataTables initialized successfully');
            // console.log('Columns count:', this.api().init().columns.length);
            // console.log('Action column data:', this.api().column('action:name').data());
        },
        drawCallback: function() {
            // console.log('DataTables draw completed');
            // Force action column to be visible
            $('#eventsTable th:last-child, #eventsTable td:last-child').show();
        }
    });

         // Handle delete button clicks
     $(document).on('click', '.delete-event', function() {
         const eventId = $(this).data('id');
         const eventName = $(this).data('name');

         Swal.fire({
             title: 'Are you sure?',
             text: `Do you want to delete the event "${eventName}"?`,
             icon: 'warning',
             showCancelButton: true,
             confirmButtonColor: '#d33',
             cancelButtonColor: '#3085d6',
             confirmButtonText: 'Yes, delete it!',
             cancelButtonText: 'Cancel'
         }).then((result) => {
             if (result.isConfirmed) {
                 // Send delete request
                 $.ajax({
                     url: `/admin/events/${eventId}`,
                     type: 'DELETE',
                     data: {
                         _token: '{{ csrf_token() }}'
                     },
                     success: function(response) {
                         Swal.fire(
                             'Deleted!',
                             'Event has been deleted successfully.',
                             'success'
                         ).then(() => {
                             // Reload the DataTable
                             table.ajax.reload();
                         });
                     },
                     error: function(xhr) {
                         Swal.fire(
                             'Error!',
                             'Failed to delete event. Please try again.',
                             'error'
                         );
                     }
                 });
             }
         });
     });
});
</script>
@endpush