{{--
    Copyright (c) 2024 Duncan McQuat
    All rights reserved.
--}}

@extends('admin.layout', ['title' => 'Groups'])
@include('admin.navbar')
@section('content')
<div id="itemTableWrapper">
    @if (session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
    @endif
    @if ($errors->any())
    <div class="alert alert-info">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <table class="table table-bordered" id="itemTable">
        <tr>
            <th>Name</th>
            <th>Permissions</th>
            <th>Items</th>
            <th>Actions</th>
        </tr>
        @foreach ($groups as $group)
        <tr>
            <td>{{ $group->name }}</td>
            <td>
            @foreach (json_decode($group->perms) as $perm)
                <span class="border border-secondary rounded p-1">{{$perm}}</span>
            @endforeach
            </td>
            <td>
                <div class="hstack gap-1">
                    @foreach ($group->items()->select(['name'])->get() as $item)
                    <span class="border border-secondary rounded p-1">{{ $item->name }}</span>
                    @endforeach
                </div>
            </td>
            <td>
                <button class="btn btn-outline-primary groupEditButtons" data-bs-toggle="modal" data-bs-target="#groupEditModal" value="{{$group['id']}}">Edit</button>
            </td>
        </tr>
        @endforeach
    </table>
</div>
<div class="d-flex flex-column">
    <button class="btn btn-primary align-self-end m-2" data-bs-toggle="modal" data-bs-target="#groupCreateModal">New Group</button>
</div>
<div class="modal fade" id="groupCreateModal" tabindex="-1" aria-labelledby="groupCreateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="groupCreateModalLabel">Create New Group</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="groupCreateForm" action="{{ url('/admin/groups') }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control">
                    </div>
                    <div class="mb-3 form-check">
                    <label class="form-label">Permissions</label>
                        @foreach ($allPermissions as $perm)
                        <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="{{$perm}}" name="perms[]" value="{{$perm}}">
                        <label class="form-check-label">{{$perm}}</label>
                        </div>
                        @endforeach
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
                <button form="groupCreateForm" type="submit" class="btn btn-primary" data-bs-dismiss="modal">Create</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="groupEditModal" tabindex="-1" aria-labelledby="groupEditModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="groupEditModalLabel"></h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="groupEditForm" action="" method="POST">
                    @method('patch')
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" id="groupEditName">
                    </div>
                    <div class="mb-3 form-check" id="permCheck">
                        <label class="form-label">Permissions</label>
                        @foreach ($allPermissions as $perm)
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="{{$perm}}" name="perms[]" value="{{$perm}}">
                            <label class="form-check-label">{{$perm}}</label>
                        </div>
                        @endforeach
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <form action="" method="POST" id="groupDeleteForm" class="me-auto">
                    @method('delete')
                    @csrf
                    <button type="submit" class="btn btn-outline-danger">Delete</button>
                </form>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Discard</button>
                <button form="groupEditForm" type="submit" class="btn btn-primary" data-bs-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
@vite(['resources/js/admin/groups.ts'])
@endsection