@extends('layouts.app')
@section('title', 'Bangladesh Unbound - Roles')
@section('page-title', 'Roles')
@section('breadcrumb')
<!-- Breadcrumb Navigation -->
<nav class="breadcrumb-container" aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('admin.dashboard') }}">
                <img src="{{ asset('backend/img/ico/ico-dashboard.svg') }}" alt="Dashboard" class="breadcrumb-icon">
                Dashboard
            </a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            <img src="{{ asset('backend/img/ico/ico-coupons.svg') }}" alt="Coupons" class="breadcrumb-icon">
            Roles Management
        </li>
    </ol>
</nav>
@endsection
@section('content')
<div class="coupons-header">
    <div class="d-flex align-items-center justify-content-between">
        <h3 class="mb-0 section-title">
            <img src="{{ asset('backend/img/ico/ico-coupons.svg') }}" alt="Coupons" class="section-icon">
            Roles Management
        </h3>
        @can('role-create')
        <a href="{{ route('admin.roles.create') }}" class="btn btn-add-coupon"><i class="bi bi-plus-circle"></i> Add
            Roles</a>
        @endcan
    </div>
</div>

<style>
    .badge-bg {
        background: rgba(209, 250, 229, 0.8) !important;
        border: 1px solid rgb(1, 186, 8) !important;
        color: rgba(2, 121, 62, 0.928)
    }

    .badge-bg-count {
        background: rgba(209, 250, 229, 0.8) !important;
        border: 1px solid rgb(1, 186, 8) !important;
        color: rgba(9, 149, 19, 0.928);
        min-width: 40px;
        font-size: 16px;
        font-weight: 800
    }
</style>

<div class="mb-5 border-0 shadow-sm card">
    <div class="card-body cus-lead-list">
        <table id="roleTable" class="table" data-model="role">
            <thead class="table-light">
                <tr>
                    <th style="width: 50px">S/N</th>
                    <th>Name</th>
                    <th>Permissions</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
             var searchable = [];
             var selectable = [];
             $.ajaxSetup({
                 headers: {
                     "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                 }
             });

             var dTable = $('#roleTable').DataTable({
                 order: [],
                 lengthMenu: [
                     [25, 50, 100, -1],
                     [25, 50, 100, "All"]
                 ],
                 processing: true,
                 responsive: true,
                 serverSide: true,
                 searching: false,
                 dom: 'Bfrtip',
                 language: {
                     processing: '<i class="ri-loader-4-line ri-spin" style="font-size:60px;margin-top:50px;color:orange;"></i>'
                 },
                 scroller: {
                     loadingIndicator: false
                 },
                 pagingType: "full_numbers",
                 ajax: {
                     url: "{{ route('admin.roles.index') }}",
                     type: "get"
                 },
                 columns: [{
                         data: 'DT_RowIndex',
                         name: 'id',
                         orderable: false,
                         searchable: false
                     },
                     {
                         data: 'title',
                         name: 'title',
                         orderable: false,
                         searchable: false
                     },
                     {
                         data: 'permissions',
                         name: 'permissions',
                         orderable: false,
                         searchable: false
                     },
                     {
                         data: 'action',
                         name: 'action',
                         orderable: false,
                         searchable: false
                     },
                 ],
             });


// Delete using event delegation
        $(document).on('click', '.deleteBtn', function (event) {
            event.preventDefault();

            let id = $(this).data('id');
            let url = $(this).attr('href');

            swal.fire({
                title: 'Are you sure?',
                text: "This role will be permanently deleted!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    axios.delete(url, {
                        data: { id: id },
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                        }
                    })
                    .then(response => {
                        toastr.success(response.data.message);
                        dTable.ajax.reload();
                    })
                    .catch(error => {
                        toastr.error(error.response?.data?.message || "Something went wrong!");
                    });
                }
            });
        });
    });
</script>