@extends('layouts.app')

@section('header')
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __('Access Settings') }}
    </h2>
@endsection

@section('content')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
            <div class="p-4 sm:p-8 bg-white shadow sm:rounded-lg">
                <div class="max-w-xl">
                    <form method="GET" action="{{ route('access-settings.index') }}" class="mb-6">
                        <label for="role" class="block text-sm font-medium text-gray-700 mb-1">Select Role</label>
                        <select name="role" id="role" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm max-w-xs inline" onchange="this.form.submit()">
                            @foreach($roles as $r)
                                <option value="{{ $r }}" @if($role == $r) selected @endif>{{ $r }}</option>
                            @endforeach
                        </select>
                    </form>
                    <form method="POST" action="{{ route('access-settings.update') }}">
                        @csrf
                        @method('PATCH')
                        <input type="hidden" name="role" value="{{ $role }}">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Menu Access for <span class="font-bold">{{ $role }}</span></h3>
                        @foreach($menus as $key => $label)
                            <div class="flex items-center mb-2">
                                <input type="checkbox" id="menu_{{ $key }}" name="menus[{{ $key }}]" value="1" class="mr-2" {{ $settings->where('menu_key', $key)->first()?->allowed ? 'checked' : '' }}>
                                <label for="menu_{{ $key }}">{{ $label }}</label>
                            </div>
                        @endforeach
                        <div class="flex items-center justify-end mt-6">
                            <x-primary-button>
                                {{ __('Update Access') }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection