@extends('admin.layouts.app')

@section('content')
    <div class="container">
        <style>
            .table th, strong, .table td:first-child{
            color: #000;
            font-size: 16px;
            font-weight: 600;
        }
        .table td img{
            height: 60px;
            width: auto;
        }
        .table th{
            background: #ddd;
            padding-top: 15px;
            padding-bottom: 15px;
            border-top: 1px solid #cbcbcb !important;
        }
        .table td{
            background: #fff;
        }
        .table{
            --bs-table-border-color: #cbcbcb !important;
        }
        table#games-table{
            border-top: 1px solid #cbcbcb !important;
        }
        button.badge{
            border: unset;
        }
        .card{
            border: none;
            box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
        }
        </style>
        <div class="card mt-4">
        <div class="card-body">
        @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
        <div class="d-flex justify-content-between align-items-center">
            <h1>Game Listing</h1>
            @if(auth()->guard('admin')->user()->type == 1)
                <a href="{{ route('admin.game-details.create') }}" class="btn btn-primary">Add New Game</a>
            @endif
        </div>
       
        <div style="margin: 20px 0px;">
            <div style="display: flex; align-items: center;">
              <strong style="margin-right: 10px;">Filter By Draw Date:</strong>
              <input type="date" name="daterange" class="form-control" style="flex: 0 0 157px; max-width: 150px;">
              <strong style="margin-left: 10px; margin-right: 10px;">Filter By Status:</strong>
              <select name="status-filter" id="status-filter" class="form-control" style="flex: 0 0 120px; max-width: 120px;">
                <option value="">All</option>
                <option value="0">Inactive</option>
                <option value="1">Active</option>
                <option value="2">Closed</option>
              </select>
              <button type="button" id="reset-filters" class="btn btn-secondary">Reset Filters</button> 
            </div>
          </div>
          
          
        <table class="table" id="games-table">
            <thead>
                <tr>
                    <th>SL NO</th>
                    <th>Title</th>                    
                    <th>Draw Date</th>                    
                    <th>End Date</th>                    
                    <th>Status</th>                    
                    <th width="500px">Actions</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div>
</div>
@push('scripts')
<script>
$(document).ready(function() { 
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    }); 
    var table = $('#games-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{!! route('admin.games.fetchdata') !!}",
          columns: [
              {data: 'DT_RowIndex', name: 'DT_RowIndex'},
              {data: 'game_title', name: 'game_title'},
              {data: 'game_draw_date', name: 'game_draw_date'},
              {data: 'game_end_date', name: 'game_end_date'},
              {
                data: 'game_status',
                name: 'game_status',
                render: function(data) {
                    if (data == 0) {
                        return '<button type="button" class="badge bg-danger">Inactive</button>';
                    } else if (data == 1) {
                        return '<button type="button" class="badge bg-success">Active</button>';
                    } else if (data == 2) {
                        return '<button type="button" class="badge bg-warning">Closed</button>';
                    } else {
                        return '<button type="button" class="badge bg-default">Default</button>';
                    }
                }
            },
            {data: 'action', name: 'action', orderable: false, searchable: false},
          ],
          initComplete: function () {
            var column = this.api().column(2); // 2 represents the index of the draw date column
            
            $('input[name="daterange"]').on('change', function () {
                var selectedDate = $(this).val();
                if (selectedDate !== '') {
                    column.search(selectedDate).draw();
                } else {
                    column.search('').draw();
                }
            });

            $('#status-filter').on('change', function() {
                var selectedStatus = $(this).val();
                table.column(4).search(selectedStatus).draw();
                });

            $('#reset-filters').on('click', function () {
                        $('input[name="daterange"]').val('');
                        $('#status-filter').val('');
                        column.search('').draw();
                        table.column(4).search('').draw();
                    });
            }

      });

      $('#games-table').on('click', '.btn-delete', function(e) {
        e.preventDefault();
        var deleteUrl = $(this).attr('data-url');

        Swal.fire({
            title: 'Are you sure?',
            text: 'You are about to delete this item.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: deleteUrl,
                    type: 'POST',
                    success: function() {
                        Swal.fire(
                            'Deleted!',
                            'The item has been deleted.',
                            'success'
                        ).then(() => {
                            // Reload the table
                            table.ajax.reload();
                        });
                    },
                    error: function() {
                        Swal.fire(
                            'Error!',
                            'An error occurred while deleting the item.',
                            'error'
                        );
                    }
                });
            }
        });
    });

      
});


</script>
@endpush
@endsection