@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">Events</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">Events</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <div class="btn-group">
                    <button data-bs-toggle="modal" data-bs-target="#create_event_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="events_table" style="width:100%">
                            <thead>
                                <tr>
                                    <th>User Name</th>
                                    <th>Club Name</th>
                                    <th>Event Name</th>
                                    <th>Slug</th>
                                    <th>Description</th>
                                    <th>Picture</th>
                                    <th>Start Date Time</th>
                                    <th>End Date Time</th>
                                    <th>Status</th>
                                    <th width="100px">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal -->
        <div class="modal fade" id="create_event_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 Event</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form id="create_event_form" action="{{ route('events.store') }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            <div class="create_event_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="Event Name" value="" aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Slug</label>
                                    <input name="slug" type="text" class="form-control" id="defaultFormControlInput"
                                        placeholder="event-slug" 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="exampleFormControlTextarea1" rows="3"
                                        placeholder="We are please to announce that..."></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">Opening 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">Closing Time</label>
                                    <input type="time" class="form-control" name="end_time" />
                                </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_event_modal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Edit Event</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <form id="editEventForm" method="post" enctype="multipart/form-data">
                        @csrf
                        @method('PATCH')
                        <div class="modal-body">
                            <div class="create_event_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="Event Name" value=""
                                        aria-describedby="defaultFormControlHelp" />
                                </div>
                                <div class="col-md-12 mb-2">
                                    <label for="defaultFormControlInput" class="form-label mb-0">Slug</label>
                                    <input name="slug" type="text" class="form-control" id="slug"
                                        placeholder="event-slug" 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="We are please to announce that..."></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="eventPicture" 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">Opening 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">Closing Time</label>
                                    <input type="time" class="form-control" name="end_time" id="end_time" />
                                </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 = $('#events_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('events.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: 'picture',
                        name: 'picture'
                    },
                    {
                        data: 'start_date_time',
                        name: 'start_date_time'
                    },
                    {
                        data: 'end_date_time',
                        name: 'end_date_time'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

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

            $('body').on('click', '.delete-event', function(e) {
                e.preventDefault()
                var id = $(this).data("event-id");
                new swal({
                    title: "Confirmation Alert!",
                    text: "Do you want to delete this event?",
                    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('events/${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");
                    }
                });
            });

            // edit events button populate events details
            $(document).on('click', '.edit-event-btn', function() {
                var eventData = $(this).closest('a').data('event');

                // Populate your form fields
                $('#edit_event_modal input[name="name"]').val(eventData.name);
                $('#edit_event_modal input[name="slug"]').val(eventData.slug);
                $('#edit_event_modal textarea[name="description"]').val(eventData.description);
                $('#edit_event_modal input[name="start_date"]').val(eventData.start_date);
                $('#edit_event_modal input[name="start_time"]').val(eventData.start_time);
                $('#edit_event_modal input[name="end_date"]').val(eventData.end_date);
                $('#edit_event_modal input[name="end_time"]').val(eventData.end_time);

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

                const updateRoute = "{{ route('events.update', ['event' => ':id']) }}".replace(':id',
                    eventData.id);
                $('#editEventForm').attr('action', updateRoute);
            });
        });
    </script>
@endpush