@extends('admin.layout.main')
@section('content')
    <div class="page-content">
        <!--breadcrumb-->
        <div class="page-breadcrumb d-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3 d-none d-xl-block d-lg-block d-md-block">Tournaments</div>
            <div class="ps-3 d-none d-xl-block d-lg-block d-md-block">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">Tournaments</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#create_tournament_modal" type="button"
                        class="d-flex align-items-center btn btn-primary font-18"><span>
                            Create </span><i class="bx bx-plus ms-1"></i></button>

                </div>
            </div>
        </div>
        <!--end breadcrumb-->
        <hr />
        <div class="card">
            <div class="card-body">
                <div class="tab-content py-3">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered" id="tournaments_table" style="width:100%">
                            <thead>
                                <tr>
                                    <th>User Name</th>
                                    <th>Club Name</th>
                                    <th>Tournament Name</th>
                                    <th>Slug</th>
                                    <th>Description</th>
                                    <th>Link</th>
                                    <th>Picture</th>
                                    <th>Start Date</th>
                                    <th>Start Time</th>
                                    <th>End Date</th>
                                    <th>End Time</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="create_tournament_modal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">New Tournament</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="create_tournament_form" action="{{ route('tournaments.store') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="create_tournament_form">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label mb-0">Name</label>
                                    <input name="name" type="text" class="form-control" id="defaultFormControlInput"
                                        placeholder="Tournament Name" value=""
                                        aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Link</label>
                                    <input name="link" type="text" class="form-control"
                                        aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="exampleFormControlTextarea1" class="form-label mb-0">Description</label>
                                    <textarea name="description" class="form-control" id="exampleFormControlTextarea1" rows="3"
                                        placeholder="Tournament description..."></textarea>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Picture</label>
                                    <input name="picture" type="file" class="form-control" id="defaultFormControlInput"
                                        placeholder="New York" value="" aria-describedby="defaultFormControlHelp" />
                                </div>

                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Start Date</label>
                                    <input name="start_date" type="date" class="form-control"
                                        id="defaultFormControlInput" placeholder="New York" value=""
                                        aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="latitudeInput" class="form-label mb-0">End Date</label>
                                    <input name="end_date" type="date" class="form-control" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="start_time" class="form-label mb-0">Start Time</label>
                                    <input type="time" class="form-control" name="start_time" />
                                    <!-- <input type="text" id="input2"> -->
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="end_time" class="form-label mb-0">End Time</label>
                                    <input type="time" class="form-control" name="end_time" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="status" class="form-label mb-0">Status</label>
                                    <select id="status" class="form-select" name="status">
                                        <option value="0">Pending</option>
                                        <option value="1">Active</option>
                                        <option value="2">Finished</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="edit_tournament_modal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Tournament</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form id="editTournamentForm" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PATCH')
                        <div class="modal-body">
                            <div class="create_tournament_form">
                                <div class="col-md-12 mb-2">
                                    <label class="form-label mb-0">Name</label>
                                    <input name="name" type="text" class="form-control" id="name"
                                        placeholder="Tournament Name" value=""
                                        aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Link</label>
                                    <input name="link" type="text" class="form-control" id="link"
                                        value="" aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="exampleFormControlTextarea1" class="form-label mb-0">Description</label>
                                    <textarea name="description" class="form-control" id="description" rows="3"
                                        placeholder="Tournament description..."></textarea>
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Picture</label>
                                    <input name="picture" type="file" class="form-control" id="picture"
                                        placeholder="New York" aria-describedby="defaultFormControlHelp" />
                                    <img id="tournamentPicture" height="50px" width="100px">
                                </div>

                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Start Date</label>
                                    <input name="start_date" type="date" class="form-control" id="start_date"
                                        placeholder="New York" value=""
                                        aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="latitudeInput" class="form-label mb-0">End Date</label>
                                    <input name="end_date" type="date" class="form-control" id="end_date" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="start_time" class="form-label mb-0">Start Time</label>
                                    <input type="time" class="form-control" name="start_time" id="start_time" />
                                    <!-- <input type="text" id="input2"> -->
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="end_time" class="form-label mb-0">End Time</label>
                                    <input type="time" class="form-control" name="end_time" id="end_time" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="status" class="form-label mb-0">Status</label>
                                    <select id="status" class="form-select" name="status">
                                        <option value="0">Pending</option>
                                        <option value="1">Active</option>
                                        <option value="2">Finished</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            var table = $('#tournaments_table').DataTable({
                lengthChange: false,
                dom: '<"top"lf>rt<"bottom"B><"d-flex justify-content-between align-items-center"ip>',
                buttons: [{
                        extend: 'print',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'pdf',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'excel',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    },
                    {
                        extend: 'copy',
                        exportOptions: {
                            columns: ':not(:last-child)'
                        }
                    }
                ],
                processing: true,
                serverSide: true,
                scrollX: true,
                responsive: false,
                ajax: '{{ route('tournaments.index') }}',
                columns: [{
                        data: 'user_name',
                        name: 'user_name'
                    },
                    {
                        data: 'club_name',
                        name: 'club_name'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'slug',
                        name: 'slug'
                    },
                    {
                        data: 'description',
                        name: 'description'
                    },
                    {
                        data: 'link',
                        name: 'link'
                    },
                    {
                        data: 'picture',
                        name: 'picture'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'start_time',
                        name: 'start_time'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        data: 'end_time',
                        name: 'end_time'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                    }
                ],
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('body').on('click', '.delete-tournament', function(e) {
                e.preventDefault()
                var id = $(this).data("tournament-id");
                new swal({
                    title: "Confirmation Alert!",
                    text: "Do you want to delete this tournament?",
                    type: "warning",
                    showCancelButton: true,
                    buttonsStyling: false, // Important: Disable default SweetAlert2 button styling
                    customClass: {
                        confirmButton: 'btn btn-danger me-2', // Apply your danger class
                        cancelButton: 'btn btn-secondary' // Apply a secondary class for the cancel button
                    },
                    confirmButtonText: "Yes",
                    cancelButtonText: "No",
                    closeOnConfirm: true,
                    closeOnCancel: false
                }).then(function(result) {
                    if (result.value) {
                        $.ajax({
                            type: 'DELETE',
                            url: `{{ url('tournaments/${id}') }}`,
                            data: {
                                id: id
                            },
                            dataType: 'json',
                            success: function(data) {
                                if (data.success === true) {
                                    new swal(data.msg, "", "success");
                                    setTimeout(function() {
                                        location.reload();
                                    }, 2000);
                                } else {
                                    new swal("Error!", data.msg, "error");
                                }
                            }
                        });

                    } else {
                        swal.fire("Cancelled", "Delete Cancelled", "error");
                    }
                });
            });

            // view tournament button fetch user details
            $(document).on('click', '.edit-tournament-btn', function() {
                var tournamentData = $(this).closest('a').data('tournament');

                // Populate your form fields
                $('#edit_tournament_modal input[name="name"]').val(tournamentData.name);
                $('#edit_tournament_modal input[name="link"]').val(tournamentData.link);
                $('#edit_tournament_modal textarea[name="description"]').val(tournamentData.description);
                $('#edit_tournament_modal input[name="start_date"]').val(tournamentData.start_date);
                $('#edit_tournament_modal input[name="start_time"]').val(tournamentData.start_time);
                $('#edit_tournament_modal input[name="end_date"]').val(tournamentData.end_date);
                $('#edit_tournament_modal input[name="end_time"]').val(tournamentData.end_time);
                $('#edit_tournament_modal #status').val(tournamentData.status);

                if (tournamentData.picture) {
                    $('#tournamentPicture').attr('src', tournamentData.picture).show();
                } else {
                    $('#tournamentPicture').hide();
                }

                const updateRoute = "{{ route('tournaments.update', ['tournament' => ':id']) }}".replace(
                    ':id',
                    tournamentData.id);
                $('#editTournamentForm').attr('action', updateRoute);
            });
        });
    </script>
@endpush