@extends('vendor/layouts/master')

@section('title')
    {{ config()->get('app.name') }} | {{ $bladeName }}
@endsection
@section('page_name')
    {{ $bladeName }}
@endsection
@section('content')
    <!-- Bootstrap 5 CSS -->
{{--    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">--}}


    <!-- CSRF Token (for Laravel) -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <div class="row">
        <div class="col-md-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"> </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('subject')}}</th>
                                <th class="min-w-25px">{{trns('user_id')}}</th>
                                <th class="min-w-25px">{{trns('module_id')}}</th>
                                <th class="min-w-25px">{{trns('message')}}</th>
                                <th class="min-w-25px">{{trns('action')}}</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 -->

        {{--        action button of accept/refuse--}}

        <!-- Accept Confirmation Modal -->

        <!-- Accept Modal -->
        <div class="modal fade" id="acceptModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Acceptance</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to accept this item?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" id="confirmAccept" class="btn btn-success">Confirm</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Refuse Modal -->
        <div class="modal fade" id="refuseModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Confirm Refusal</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to refuse this item?
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" id="confirmRefuse" class="btn btn-danger">Confirm</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alert container (optional) -->
        <div id="alertContainer"></div>

        {{--        action button of accept/refuse--}}

    </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: 'subject',
                name: 'subject'
            },
            {
                data: 'user_id',
                name: 'user_id'
            },
            {
                data: 'module',
                name: 'module'
            },
            {
                data: 'message',
                name: 'message'
            },
            {
                data: 'action',
                name: 'action',
                orderable: false,
                searchable: false,

            }];

        showData('{{ route($route) }}', columns);

        $(document).ready(function() {
            // Initialize modals
            const acceptModal = new bootstrap.Modal(document.getElementById('acceptModal'));
            const refuseModal = new bootstrap.Modal(document.getElementById('refuseModal'));

            // Delegate events for dynamically created buttons
            $(document).on('click', '.accept-btn', function() {
                const id = $(this).data('id');
                $('#confirmAccept').data('id', id);
                acceptModal.show();
            });

            $(document).on('click', '.refuse-btn', function() {
                const id = $(this).data('id');
                $('#confirmRefuse').data('id', id);
                refuseModal.show();
            });

            // Confirm accept handler
            $('#confirmAccept').click(function() {
                const id = $(this).data('id');
                acceptModal.hide();

                $.ajax({
                    url: "{{ route('VendorContactUs.accept') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id : id,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        showAlert('success', response.message || 'Request accepted successfully!');

                        $('#dataTable').DataTable().ajax.reload(); // Refresh table
                    },
                    error: function(xhr) {
                        showAlert('danger', xhr.responseJSON?.message || 'Error accepting request');
                    }
                });
            });

            // Confirm refuse handler
            $('#confirmRefuse').click(function() {
                const id = $(this).data('id');
                refuseModal.hide();

                $.ajax({
                    url: "{{ route('VendorContactUs.refuse') }}",
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id : id ,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        showAlert('success', response.message || 'Request refused successfully!');
                        $('#dataTable').DataTable().ajax.reload(); // Refresh table
                    },
                    error: function(xhr) {
                        showAlert('danger', xhr.responseJSON?.message || 'Error refusing request');
                    }
                });
            });

            // Alert function
            function showAlert(type, message) {
                const alertHtml = `
                    <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                `;
                $('#alertContainer').html(alertHtml);

                // Auto-dismiss after 5 seconds
                setTimeout(() => {
                    $('.alert').alert('close');
                }, 5000);
            }
        });
    </script>
@endsection