@extends('layouts.app')
@section('content')
<div class="d-flex justify-content-between align-items-center mb-3">
    <h1 class="page-header mb-0">Permission Management</h1>
    <a href="{{ route('permissions.create') }}" class="btn btn-primary"><i class="fa fa-plus fa-fw"></i> New Permission</a>
</div>
<div class="panel panel-inverse border-0">
    <div class="panel-heading">List of permissions</div>
    <div class="panel-body">
        <form action="{{ route('permissions.index') }}" method="GET" class="row g-3 align-items-center mb-3">
            <div class="col-3">
                <label class="visually-hidden" for="search_by">Site ID</label>
                <input type="text" class="form-control" id="permission" name="permission" value="{{ request()->get('permission') }}" placeholder="Permission">
            </div>
            {{-- <div class="col-3">
                <select name="region" id="region" class="form-select" placeholder="Region">
                    <option value="">Region</option>
                    @foreach ($regions as $region)
                        <option value="{{ $region->region_id }}" @selected(request()->get('region') == $region->region_id)>{{ $region->name }}</option>
                    @endforeach
                </select>
            </div> --}}
            <div class="col-3">
                <button type="submit" class="btn btn-primary">Filter</button>
                <a href="{{ route('sites.index') }}" class="btn btn-white">Reset</a>
            </div>
        </form>
        <div class="table-responsive mb-3">
            <table id="data-tsable-default" class="table table-hover border text-nowrap align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th width="1%" data-orderable="false">#</th>
                        <th>Name</th>
                        <th>Role</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody class="table-group-divider">
                    @forelse ($permissions as $index => $permission)
                        <tr>
                            <td>{{ $permissions->firstItem() + $index }}</td>
                            <td>{{ $permission->name ?? '-' }}</td>
                            <td>
                                @foreach($permission->roles as $key => $entry)
                                    <span class="badge bg-secondary">{{ $entry->name }}</span>
                                @endforeach
                            </td>
                            <td class="text-end">
                                <form id="deleteForm" action="{{ route('permissions.destroy', $permission->id) }}" method="POST">
                                    @method('DELETE')
                                    @csrf
                                    <a href="{{ route('permissions.edit', $permission->id) }}" class="btn btn-sm btn-white me-1"><i class="fa-solid fa-pen-to-square fa-fw"></i></a>
                                    <button type="submit" id="delete" value="Delete Role"  data-bs-toggle="tooltip" title="Padam" class="btn btn-sm btn-dark"><i class="fas fa-trash"></i></button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="text-center" colspan="5">Tiada data dijumpai</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{  $permissions->links() }}
    </div>
</div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).on('click', '#delete', function (e) {
                e.preventDefault();
                var self = $(this);
                Swal.fire({
                    title: "Are you sure?",
                    text: "You will not be able to recover this record!",
                    icon: "warning",
                    confirmButtonColor: '#276baa',
                    showCancelButton: true,
                    dangerMode: true,
                })
                .then((result) => {
                    if (result.isConfirmed) {
                        self.parents("#deleteForm").submit();
                    }
                });
            });
    </script>
@endpush