@extends('admin.layout.master')

@section('title', 'İzin Yönetimi')

@section('breadcrumb')
    <div class="container-fluid px-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb my-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard.index') }}">Anasayfa</a></li>
                <li class="breadcrumb-item active"><span>İzin Yönetimi</span></li>
            </ol>
        </nav>
    </div>
@stop

@section('content')
    <div class="container-lg px-4">
        <div class="row">
            <div class="col-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                        <strong>İzin Yönetimi</strong>
                            <button type="button" class="btn btn-sm btn-primary" data-coreui-toggle="modal" data-coreui-target="#createRoleModal">
                                <span class="cil-plus"></span>
                                Yeni Rol
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.permissions.index') }}" method="POST">
                            @csrf
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th></th>
                                        @foreach ($roles as $role)
                                            <th class="text-secondary">
                                                <div style="display:flex; justify-content:space-between; text-align:center; align-items:center; flex-direction: column;">
                                                    <span>{{ ucfirst($role->name) }} @if(!in_array($role->id, [1, 2, 3, 4])) <a href="{{ route('admin.permissions.role.destroy', $role->id) }}" class="text-danger" style="text-decoration: none;" onclick="return confirm('Rolü ve bu role bağlı olan tüm izinleri siliyorsunuz. Ayrıca bu role sahip tüm kullanıcılar otomatik olarak User rolüne taşınacaktır. Bu işlem geri alınamaz!')"><span class="cil-trash"></span></a> @endif</span>
                                                    <div class="mt-2">
                                                        <button type="button" class="btn btn-sm btn-outline-primary toggle-all-role" data-role-id="{{ $role->id }}" style="font-size: 9px;">Tümünü Seç</button>
                                                    </div>
                                                </div>
                                            </th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($permissionCategories as $category => $categoryPermissions)
                                        <tr>
                                            <td class="text-primary">
                                                <strong>{{ ucfirst($category) }}</strong>
                                            </td>
                                                <div class="mt-2">
                                                    @foreach ($roles as $role)
                                                        <td>
                                                            <div style="display: flex; justify-content:end;">
                                                                <button type="button" class="btn btn-sm btn-link toggle-all-category-role" data-category="{{ $category }}" data-role-id="{{ $role->id }}" style="font-size:10px;">Tümünü Seç</button>
                                                            </div>
                                                        </td>
                                                    @endforeach
                                                </div>
                                        </tr>
                                        @foreach ($categoryPermissions as $permission)
                                            <tr>
                                                <td class="text-secondary" style="font-size: 14px;">{{ ucfirst(explode('.', $permission->name)[1]) }}</td>
                                                @foreach ($roles as $role)
                                                    <td>
                                                        <div style="display: flex; justify-content:end; align-items:center; text-align:center; margin-top:5px;">
                                                            <input type="checkbox" name="permissions[{{ $role->id }}][]" value="{{ $permission->name }}" class="permission-checkbox role-{{ $role->id }} category-{{ $category }}" {{ $role->hasPermissionTo($permission->name) ? 'checked' : '' }}>
                                                        </div>
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>

                            <div style="display: flex; justify-content:end;">
                                <button type="submit" class="btn btn-primary mt-3">Kaydet</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="createRoleModal" tabindex="-1" aria-labelledby="createRoleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createRoleModalLabel">Yeni Rol</h5>
                    <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ route('admin.permissions.role.store') }}">
                @csrf
                <div class="modal-body">
                        <div class="mb-3">
                            <label for="name" class="col-form-label">Rol Adı:</label>
                            <input type="text" class="form-control" id="name" name="name" autocomplete="off">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-coreui-dismiss="modal">Kapat</button>
                        <button type="submit" class="btn btn-primary">Oluştur</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="toast-container position-fixed bottom-0 end-0 p-3">
            <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header">
                    <strong class="me-auto">Tigon CMS</strong>
                    <small>şimdi</small>
                    <button type="button" class="btn-close" data-coreui-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    {{ session('success') }}
                </div>
            </div>
        </div>
    @endif

@section('css')
    <link href="{{ URL::to('admin/vendors/@coreui/icons/css/free.min.css') }}" rel="stylesheet">
@stop

@section('js')
    @if (session('success'))
        <script>
            document.addEventListener('DOMContentLoaded', (event) => {
                const toastEl = document.getElementById('liveToast');
                const toast = new coreui.Toast(toastEl, {
                    autohide: true
                });
                toast.show();
            });
        </script>
    @endif
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const updateRoleButtonState = (roleId) => {
                const checkboxes = document.querySelectorAll(`.role-${roleId}`);
                const button = document.querySelector(`.toggle-all-role[data-role-id="${roleId}"]`);
                const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                button.textContent = allChecked ? 'Tümünü Kaldır' : 'Tümünü Seç';
            };

            const updateCategoryRoleButtonState = (category, roleId) => {
                const checkboxes = document.querySelectorAll(`.category-${category}.role-${roleId}`);
                const button = document.querySelector(`.toggle-all-category-role[data-category="${category}"][data-role-id="${roleId}"]`);
                const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                button.textContent = allChecked ? `Tümünü Kaldır` : `Tümünü Seç`;

                // Update role button state if all checkboxes are unchecked or checked
                updateRoleButtonState(roleId);
            };

            document.querySelectorAll('.toggle-all-role').forEach(button => {
                const roleId = button.getAttribute('data-role-id');
                button.addEventListener('click', function () {
                    const checkboxes = document.querySelectorAll(`.role-${roleId}`);
                    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                    checkboxes.forEach(checkbox => checkbox.checked = !allChecked);
                    updateRoleButtonState(roleId);
                });
                updateRoleButtonState(roleId);
            });

            document.querySelectorAll('.toggle-all-category-role').forEach(button => {
                const category = button.getAttribute('data-category');
                const roleId = button.getAttribute('data-role-id');
                button.addEventListener('click', function () {
                    const checkboxes = document.querySelectorAll(`.category-${category}.role-${roleId}`);
                    const allChecked = Array.from(checkboxes).every(checkbox => checkbox.checked);
                    checkboxes.forEach(checkbox => checkbox.checked = !allChecked);
                    updateCategoryRoleButtonState(category, roleId);
                });
                updateCategoryRoleButtonState(category, roleId);
            });

            // Listen for changes on individual checkboxes to update button states
            document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const roleId = Array.from(this.classList).find(cls => cls.startsWith('role-')).split('-')[1];
                    const category = Array.from(this.classList).find(cls => cls.startsWith('category-')).split('-')[1];
                    updateCategoryRoleButtonState(category, roleId);
                });
            });
        });
    </script>
@stop

@stop