@extends('admin/layouts/master')

@section('title')
    {{ config()->get('app.name') }} | {{ $bladeName }}
@endsection
@section('page_name')
    {{ $bladeName }}
@endsection
@section('content')

    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ $bladeName }}</h3>

                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <!--begin::Table-->
                        <table class="table table-bordered text-nowrap w-100" id="dataTable">
                            <thead>
                            <tr class="fw-bolder text-muted bg-light">
                                <th class="min-w-25px">
                                    <input type="checkbox" id="select-all">
                                </th>
                                <th class="min-w-25px">#</th>
                                <th class="min-w-25px">{{ trns('user') }}</th>
                                <th class="min-w-25px">{{ trns('money') }}</th>
                                <th class="min-w-25px">{{ trns('points') }}</th>
                                <th class="min-w-25px">{{ trns('number') }}</th>
                                <th class="min-w-50px rounded-end">{{ trns('actions') }}</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!--Delete MODAL -->
        <div class="modal fade" id="delete_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">{{ trns('delete') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <input id="delete_id" name="id" type="hidden">
                        <p>{{  trns('are_you_sure_you_want_to_delete_this_obj')}} <span id="title"
                                                                                        class="text-danger"></span>?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-bs-dismiss="modal" id="dismiss_delete_modal">
                            {{ trns('close') }}
                        </button>
                        <button type="button" class="btn btn-danger" id="delete_btn">{{ trns('delete') }} !</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- MODAL CLOSED -->

        <!-- Create Or Edit Modal -->
        <div class="modal fade" id="editOrCreate" data-backdrop="static" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="example-Modal3">{{  trns('object_details')}}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="modal-body">

                    </div>
                </div>
            </div>
        </div>
        <!-- Create Or Edit Modal -->

        <!-- delete selected  Modal -->
        <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
             aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">{{ trns('confirm_deletion') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ trns("are_you_sure_you_want_to_delete_selected_items") }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ trns('cancel') }}</button>
                        <button type="button" class="btn btn-danger"
                                id="confirm-delete-btn">{{ trns('delete') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- delete selected  Modal -->


        <!-- update cols selected  Modal -->
        <div class="modal fade" id="updateConfirmModal" tabindex="-1" role="dialog"
             aria-labelledby="updateConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteConfirmModalLabel">{{ trns('confirm_change') }}</h5>
                        <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ trns("are_you_sure_you_want_to_update_selected_items") }}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary"
                                data-bs-dismiss="modal">{{ trns('cancel') }}</button>
                        <button type="button" class="btn btn-send" id="confirm-update-btn">{{ trns('update') }}</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- delete selected  Modal -->
    </div>
    @include('admin/layouts/myAjaxHelper')
@endsection
@section('ajaxCalls')
    <script>
        var columns = [
            {
                data: 'checkbox',
                name: 'checkbox',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    return `<input type="checkbox" class="delete-checkbox" value="${row.id}">`;
                }
            },
            {data: 'id', name: 'id'},
            {data: 'user_id', name: 'user_id'},
            {data: 'money', name: 'money'},
            {data: 'points', name: 'points'},
            {data: 'number', name: 'number'},

            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
        showData('{{route($route.'.index')}}', columns);
        showEditModal('{{route($route.'.edit',':id')}}', '{{ trns('update_withdraw_point') }}');
        editScript();
    </script>


    <script>
        $(document).ready(function() {
            // Approved Button AJAX
            $(document).on('click', '.approve-btn', function() {
                handleStatusChange($(this), '{{ route("approvedWithdraw") }}', 'approved', 'check-circle', 'success');
            });

            // Refused Button AJAX
            $(document).on('click', '.refuse-btn', function() {
                handleStatusChange($(this), '{{ route("refusedWithdraw") }}', 'refused', 'times-circle', 'danger');
            });

            function handleStatusChange(button, route, status, icon, color) {
                console.log('Button clicked - Route:', route); // Debug log

                let itemId = button.data('id');
                let originalContent = button.html();

                // Show loading state
                button.prop('disabled', true);
                button.html(`<i class="fas fa-spinner fa-spin text-${color}"></i>`);

                $.ajax({
                    url: route,
                    type: 'POST',
                    data: {
                        id: itemId,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        console.log('AJAX Success:', response); // Debug log
                        if (response.status === 200) {
                            // Update button appearance
                            $('#dataTable').DataTable().ajax.reload();
                            button.html(`<i class="fas fa-${icon} text-${color}"></i>`);
                            button.removeClass(`btn-${color}-light`).addClass('btn-secondary-light');

                            // Show success notification
                            if (typeof toastr !== 'undefined') {
                                toastr.success(response.message || `${status} successfully`);
                            } else {
                                console.log('Success:', response.message || `${status} successfully`);
                            }

                            // Optional: Reload after 2 seconds
                            setTimeout(() => {
                                // location.reload();
                            }, 2000);
                        } else {
                            handleError(button, originalContent, response.message || `${status} failed`);
                        }
                    },
                    error: function(xhr) {
                        console.error('AJAX Error:', xhr); // Debug log
                        handleError(button, originalContent, xhr.responseJSON?.message || 'Error occurred');
                    }
                });
            }

            function handleError(button, originalContent, message) {
                button.html(originalContent);
                button.prop('disabled', false);

                if (typeof toastr !== 'undefined') {
                    toastr.error(message);
                } else {
                    console.error('Error:', message);
                }
            }
        });
    </script>

@endsection