@extends('layouts.main')

@section('title', 'Multi Branch Management System - Manage Roles')

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">

    <div class="main-content app-content">
        <div class="container-fluid">

            <!-- Page Header -->
            <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
                <h1 class="page-title mb-0 text-primary">Roles</h1>
                @if(Gate::check('role-create'))
                    <a href="{{ route('roles.create') }}" class="btn btn-primary">
                        Create role
                    </a>
                @endif
            </div>
            <!-- Page Header Close -->
            <!-- Row -->
            <div class="row flex-lg-nowrap">
                <div class="col-12">
                    <div class="row flex-lg-nowrap">
                        <div class="col-12 mb-3">
                            <div class="e-panel card">
                                <div class="card-body">
                                    <div class="e-table">
                                        <div class="table-responsive table-lg mt-3">
                                            <table class="table table-bordered border-top text-nowrap">
                                                <thead>
                                                    <tr>

                                                        <th class="border-bottom-0">ID</th>
                                                        <th class="border-bottom-0">Role</th>
                                                        <th class="border-bottom-0">Permissions</th>
                                                        <th class="border-bottom-0">Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

                                                    @if (isset($roles))
                                                        @foreach($roles as $key => $role)
                                                            <tr>

                                                                <td class="align-middle">
                                                                    <div class="d-flex">
                                                                        {{ $key + 1 }}
                                                                    </div>
                                                                </td>
                                                                <td class="text-nowrap align-middle"><span>{{ $role->name }}</span></td>
                                                                <td class="align-middle">
                                                                    <div>
                                                                        <!-- <span  class="bg-primary-transparent text-primary px-2 py-1 br-7 border-primary">Active</span> -->
                                                                        @foreach($role->permissions as $permission)
                                                                            <span class="badge bg-info">{{ $permission->name }}</span>
                                                                        @endforeach
                                                                    </div>
                                                                </td>
                                                                <td>
                                                                    @if(Gate::check('role-edit'))
                                                                        <a href="{{ route('roles.edit', $role->id) }}" class="btn btn-warning btn-sm">Edit</a>
                                                                    @endif
                                                                    @if(Gate::check('role-delete'))
                                                                        <form action="{{ route('roles.destroy', $role->id) }}" method="POST" style="display:inline-block;">
                                                                            @csrf @method('DELETE')
                                                                            <button type="button" class="btn btn-danger btn-sm btn-delete">Delete</button>
                                                                        </form>
                                                                    @endif
                                                                </td>
                                                            </tr>

                                                        @endforeach
                                                    @endif

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

<!-- JS Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    // Toastr configuration
    toastr.options = {
        closeButton: true,
        progressBar: true,
        positionClass: "toast-top-right",
        timeOut: "4000"
    }

    // SweetAlert2 delete confirmation
    $(document).on('click', '.btn-delete', function (e) {
        e.preventDefault();
        const form = $(this).closest('form');

        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) {
                form.submit();
            }
        });
    });

    // Toastr messages
    @if (session('success'))
        toastr.success("{{ session('success') }}");
    @endif

    @if (session('error'))
        toastr.error("{{ session('error') }}");
    @endif

    @if (session('danger'))
        toastr.error("{{ session('danger') }}");
    @endif

    @if (session('warning'))
        toastr.warning("{{ session('warning') }}");
    @endif

    @if (session('info'))
        toastr.info("{{ session('info') }}");
    @endif

    @if (session('validation_errors'))
        @foreach (session('validation_errors') as $error)
            toastr.error("{{ $error }}");
        @endforeach
    @endif
</script>
@endsection