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

                </div> --}}
            </div>
        </div>
        <!--end breadcrumb-->
        <hr />
        <div class="card user-table">
            <div class="card-body">

                <div class="tab-content py-3">
                    <div class="tab-pane fade show active" id="primaryhome" role="tabpanel">
                        <div class="table-responsive">
                            <table id="finance_table" class="table table-bordered table-striped" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Player Image</th>
                                        <th>Player Name</th>
                                        <th>Payment Date</th>
                                        <th>Amount Paid</th>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function() {
            var table = $('#finance_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,
                order: [],
                ajax: '{{ route('club-subscriptions.index') }}',
                columns: [{
                        data: 'picture',
                        name: 'picture',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'player_name',
                        name: 'player_name'
                    },
                    {
                        data: 'payment_date',
                        name: 'payment_date'
                    },
                    {
                        data: 'amount',
                        name: 'amount'
                    },
                    {
                        data: 'start_date',
                        name: 'start_date'
                    },
                    {
                        data: 'end_date',
                        name: 'end_date'
                    },
                    {
                        data: 'status',
                        name: 'status'
                    },
                    {
                        data: "action",
                        name: "action",
                        orderable: false,
                    }
                ],
            });

            table.buttons().container()
                .appendTo('#finance_table_wrapper .col-md-6:eq(0)');

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

            $('body').on('click', '.cancel-subscription', function(e) {
                e.preventDefault()
                var id = $(this).data("subscription-id");
                new swal({
                    title: "Confirmation Alert!",
                    text: "Do you want to cancel this subscription?",
                    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: 'POST',
                            url: `{{ url('cancel-club-subscription/${id}') }}`,
                            dataType: 'json',
                            success: function(data) {
                                if (data.success === true) {
                                    new swal(data.message, "", "success");
                                    setTimeout(function() {
                                        location.reload();
                                    }, 2000);
                                } else {
                                    new swal("Error!", data.message, "error");
                                }
                            },
                        });
                    } else {
                        swal.fire("Cancelled", "Subscription was not cancelled", "error");
                    }
                });
            });
        });
    </script>
@endpush