@extends('app-new')

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Roles & Permission</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/admin/">Home</a></li>
                    <li class="breadcrumb-item active">Roles</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="form-group breadcrumb-right">
        <!-- Filter Button -->
        <button class="btn btn-warning btn-sm mb-50 mb-sm-0" data-bs-target="#filter" data-bs-toggle="modal"><i
                data-feather="filter"></i>Filter</button>
        <a class="btn btn-primary btn-sm" href="{{ route('admin.role-create') }}"><i data-feather="plus-circle"></i>Add
            New</a>
    </div>
@endpush

@section('content')
    <!-- Column Search -->
    <section id="column-search-datatable">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header border-bottom">
                        <div class="head-label">
                            <h6 class="mb-0"></h6>
                        </div>
                        <div class="dt-action-buttons text-end">
                            <div class="dt-buttons d-inline-flex">
                                <form>
                                    <div class="form-label-group me-2">
                                        <input type="text" name="search" placeholder="Search" class="form-control"
                                            value="{{ $request->search }}">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="card-body11">
                        <div class="row">
                            <div class="col-md-12">
                                <table class="table table-responsive">
                                    <thead>
                                        <th>S.NO.</th>
                                        <th>Name</th>
                                        <th>Alias</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </thead>

                                    <tbody>


                                        @forelse ($roles as $key => $role)
                                            <tr>
                                                <td>{{ $roles->firstItem() + $key }}</td>
                                                <td>{{ $role->name }}</td>
                                                <td>{{ $role->alias }}</td>
                                                <td>
                                                    @if ($role->status == 'active')
                                                        <span class="badge rounded-pill badge-light-success">
                                                            {{ ucfirst($role->status) }}
                                                        </span>
                                                    @else
                                                        <span class="badge rounded-pill badge-light-danger">
                                                            {{ ucfirst($role->status) }}
                                                        </span>
                                                    @endif
                                                </td>
                                                <td>
                                                    <div class="mb-1">
                                                        <a class="pe-1 dropdown-toggle hide-arrow text-primary"
                                                            data-bs-toggle="dropdown">
                                                            <i data-feather="more-vertical" class="font-small-4"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-end">
                                                            <a class="dropdown-item"
                                                                href="{{ route('admin.role-edit', $role->id) }}">
                                                                <i data-feather="edit" class="font-4"></i><span>Edit</span>
                                                            </a>
                                                            {{-- <form action="{{ route('admin.role-delete', $role->id) }}"
                                                                method="POST" style="display:inline-block;">
                                                                @csrf
                                                                @method('DELETE')
                                                                <button type="submit" class="btn btn-sm">
                                                                    <i data-feather="trash" class="font-4 text-danger"></i>
                                                                    Delete
                                                                </button>
                                                            </form> --}}
                                                            <a class="dropdown-item"
                                                                href="{{ route('admin.role-permission-edit', $role->id) }}"
                                                                style="color: green;">
                                                                <i data-feather="key" class="me-50"
                                                                    style="color: green;"></i>
                                                                <span style="color: green;">Permission</span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @empty
                                            <!-- If no active (non-deleted) roles are available -->
                                            <tr>
                                                <td colspan="6" class="text-center">No records found</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>

                            </div>

                            @if(count($roles))
                            <div class="col-md-12 d-flex justify-content-end">
                                {{ $roles->appends($request->except('page'))->links('pagination::bootstrap-4') }}
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Filter Modal -->
    <div class="modal modal-slide-in fade filterpopuplanel" id="filter">
        <div class="modal-dialog sidebar-sm">
            <form class="add-new-record modal-content pt-0" id="item-filter-form">
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">Apply Filters</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body flex-grow-1">

                    <div class="mb-1">
                        <label class="form-label">Status</label>
                        <select id="filter-status" name="status" class="form-select">
                            <option value="">Select Status</option>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer justify-content-start">
                    <button type="button" class="btn btn-primary apply-filter mr-1">Apply</button>
                    <button type="reset" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
    <!--/ Column Search -->
@endsection

@push('footer-script')
    <script src="/js/common-script.js"></script>
    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
    </script>
    <script>
        $(document).ready(function() {
            $('.apply-filter').on('click', function() {
                const form = $('#item-filter-form');

                form.submit();
            });
        });

        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        });
    </script>
@endpush