@extends('admin.layouts.app')
@section('content')
    <!-- Container-fluid starts-->
    <div class="container-fluid list-products">
        <div class="page-header">
            <div class="row">
                <div class="col-sm-6">
                    <h3>Permissions list</h3>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item">Pages </li>
                        <li class="breadcrumb-item">ECommerce</li>
                        <li class="breadcrumb-item active">Product list</li>
                    </ol>
                </div>
                <div class="col-sm-6">
                    <!-- Bookmark Start-->
                    <div class="bookmark">
                        <div class="text-end"><a class="btn btn-success" href="{{ route('admin.permission.create') }}">Add
                                New</a></div>
                    </div>
                    <!-- Bookmark Ends-->
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered data-table">
                        <thead>
                            <tr>
                                <th style="width: 10%;">ID</th>
                                <th style="width: 60%;">Name</th>
                                {{-- <th>Email</th> --}}
                                <th style="width: 30%;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- Container-fluid Ends-->
@endsection
@section('script')
    <script type="text/javascript">
        $(function() {

            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('admin.permissions') }}",
                columns: [{
                        data: 'id',
                        name: 'id'
                    },
                    {
                        data: 'name',
                        name: 'name'
                    },
                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false
                    },
                ]
            });

        });
        // Function to handle delete action
        function deletePermission(id) {
            var url = '{{ route('admin.permission.delete', 'ID') }}';
            var newUrl = url.replace("ID", id);
            Swal.fire({
                title: 'Are you sure you want to delete?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'No, cancel!',
                reverseButtons: true
            }).then((result) => {
                if (result.isConfirmed) {
                    // User clicked "Yes, delete it!"
                    performDelete(newUrl);
                }
            });
        }

        // Function to perform delete via AJAX
        function performDelete(newUrl) {
            $.ajax({
                url: newUrl,
                type: 'delete', // Use POST with Laravel's _method: 'DELETE'
                data: {
                    _token: '{{ csrf_token() }}',
                    _method: 'DELETE'
                },
                dataType: 'json',
                success: function(response) {
                    if (response.status) {
                        // toastr.success(response.message);
                        'use strict';
                        var notify = $.notify({
                            // Your message with an icon
                            message: '<i class="fa fa-bell-o"></i><strong>Success</strong> Permission Deleted Successfully...'
                        }, {
                            type: 'theme',
                            allow_dismiss: true,
                            delay: 2000,
                            showProgressbar: true,
                            timer: 300,
                            template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0}" role="alert">' +
                                '<span data-notify="icon"></span> ' +
                                '<span data-notify="title">{1}</span> ' +
                                '<span data-notify="message">{2}</span>' +
                                '<div class="progress" data-notify="progressbar">' +
                                // Add custom color here
                                '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                                '</div>' +
                                '<a href="{3}" target="{4}" data-notify="url"></a>' +
                                '</div>'
                        });

                        // Update the notify after a delay
                        setTimeout(function() {
                            notify.update();
                            window.location.href = "{{ route('admin.permissions') }}";
                        }, 3000);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    'use strict';
                    var notify = $.notify({
                        // Your message with an icon
                        message: `<i class="fa fa-bell-o"></i><strong>Failed</strong> This Permission ID doesn't exist...`
                    }, {
                        type: 'theme',
                        allow_dismiss: true,
                        delay: 2000,
                        showProgressbar: true,
                        timer: 300,
                        template: '<div data-notify="container" class="col-xs-11 col-sm-3 alert alert-{0} text-danger" role="alert">' +
                            '<span data-notify="icon" class="bg-danger"></span> ' +
                            '<span data-notify="title">{1}</span> ' +
                            '<span data-notify="message">{2}</span>' +
                            '<div class="progress" data-notify="progressbar">' +
                            // Add custom color here
                            '<div class="bg-danger progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
                            '</div>' +
                            '<a href="{3}" target="{4}" data-notify="url"></a>' +
                            '</div>'
                    });

                    // Update the notify after a delay
                    setTimeout(function() {
                        notify.update();
                    }, 1000);
                    console.error('AJAX Error:', textStatus, errorThrown);
                }
            });
        }
    </script>
@endsection