@extends('master_layout.app')

@section('style')
@endsection

@section('content')
    <!-- CONTENTS -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <section id="content" class="content">
        <div class="content__header content__boxed overlapping">
            <div class="content__wrap">

                <div class="container-fluid">


                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <h4 class="mb-0 fw-semibold">Role Management</h4>

                                <ol class="breadcrumb mb-0">
                                    <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Property Management</a></li>
                                                    <li class="breadcrumb-item active">Property Creation</li> -->

                                    @if (isset($modPer) && $modPer->creat == 1)
                                    @endif
                                    <a href="{{ route('roles.create') }}" class="btn btn-success mx-2"><i
                                            class="ri-add-fill mx-1"></i> Add New Role</a>
                                </ol>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-12 col-xl-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row align-items-center justify-content-between">

                                        <div class="col-12">

                                            <table class="table table-hover align-middle price-table" id="role-list-table">
                                                <thead>
                                                    <tr>

                                                        <th scope="col">Role Name</th>
                                                        <th scope="col">Action</th>

                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($roles as $role)
                                                        <tr>
                                                            <td scope="row">{{ $role->name }}</td>

                                                            <td>
                                                                <div class="plan-btn d-flex p-0">
                                                                    @if (isset($modPer) && $modPer->edit == 1)
                                                                        <a href="{{ route('roles.edit', $role) }}"
                                                                            class="btn btn-success mx-2"><i
                                                                                class="ri-edit-fill mx-1"></i>
                                                                            Edit</a>
                                                                    @endif
                                                                    @if (isset($modPer) && $modPer->delet == 1)
                                                                        <a href="#!"
                                                                            class="btn btn-success mx-2 delete"
                                                                            data-bs-toggle="modal"
                                                                            data-bs-target="#delete-subscribe"
                                                                            data-id="{{ $role->id }}"><i
                                                                                class="ri-delete-bin-fill mx-1"></i>
                                                                            Delete</a>
                                                                    @endif
                                                                </div>
                                                            </td>

                                                        </tr>
                                                    @endforeach


                                                </tbody>
                                            </table>

                                        </div>
                                        <!-- end col -->

                                    </div>
                                    <!-- end row-->
                                </div>
                                <!-- end card body -->
                            </div>
                            <!-- end card -->
                        </div>
                        <!-- end col -->

                    </div>

                    <div class="modal fade" id="delete-subscribe" tabindex="-1" aria-labelledby="exampleModalLabel"
                        aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">

                                <div class="modal-body">
                                    <p class="model-tit text-center">Are you sure you want to delete?</p>
                                </div>
                                <div class="modal-footer">
                                    <form id="destroy" action="" method="POST">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="btn btn-primary">Yes, Delete</button>
                                    </form>
                                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">No,
                                        Cancel</button>

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </section>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- END - CONTENTS -->
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var fullDate = new Date()
            var twoDigitMonth = ((fullDate.getMonth().length + 1) === 1) ? (fullDate.getMonth() + 1) : (fullDate
                .getMonth() + 1);
            var currentDate = fullDate.getDate() + "_" + twoDigitMonth + "_" + fullDate.getFullYear();
            var myTable = $('#role-list-table').DataTable({
                "paging": true, // Enable pagination
                "searching": true, // Enable search box
                "ordering": false, // Enable sorting
                "info": true, // Show table info
                "lengthMenu": [8, 10, 25], // Page size options
                "pageLength": 8, // Default page size
                "dom": 'Bftrip', // B for buttons
                "buttons": [{
                    extend: 'excelHtml5',
                    title: 'Role List',
                    //text:'<i class="fa fa-table fainfo" aria-hidden="true" > Excel</i>',
                    "oSelectorOpts": {
                        filter: 'applied',
                        order: 'current'
                    },
                    filename: 'Role List_ ' + currentDate + '',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: [0, 1],
                        format: {
                            body: function(inner, rowidx, colidx, node) {
                                if ($(node).children("input").length > 0) {
                                    return $(node).children("input").first().val();
                                } else {
                                    return inner;
                                }
                            }
                        }
                    }
                }]
            });

            var allPages = myTable.rows().nodes().to$();

            $('.delete', allPages).click(function(e) {
                $.ajax({
                    url: '{{ route('getRoleById') }}', // the Laravel route
                    type: 'POST',
                    data: {
                        id: $(this).data('id')
                    },
                    success: function(response) {
                        const id = response.id;
                        const destroyUrl = `/roles/${id}`; // Laravel destroy route
                        $('#destroy').attr('action', destroyUrl);
                        $('#response').html(
                            '<p style="color: green;">Success: Deleted Successfully </p>');
                    },
                    error: function(xhr) {
                        $('#response').html('<p style="color: red;">Error: ' + xhr
                            .responseText + '</p>');
                    }
                });
            });
        });
    </script>
@endsection