@extends('dashboard.layouts.base')
@section('content')
<style>
    .card-header::after {
        content: none !important;
    }

</style>
<div class="col-12">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">اضافه مشرف جديد</div>

                <div class="card-body">
                    <form method="POST" action="{{ route('dashboard.admin.store') }}" enctype="multipart/form-data">
                        @csrf

                        <!-- Name Field -->
                        <div class="row mb-3">
                            <label for="name" class="col-md-4 col-form-label text-md-end">الاسم</label>

                            <div class="col-md-6">
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                @error('name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Email Field -->
                        <div class="row mb-3">
                            <label for="email" class="col-md-4 col-form-label text-md-end"> البريد الالكترونى
                            </label>

                            <div class="col-md-6">
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                        </div>

                        <!-- Password Field -->
                        <div class="row mb-3">
                            <label for="password" class="col-md-4 col-form-label text-md-end">الرقم السرى</label>
                            <div class="col-md-6">
                                <div class="input-group">
                                    <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('password', this)">
                                        👁
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Confirm Password Field -->
                        <div class="row mb-3">
                            <label for="password-confirm" class="col-md-4 col-form-label text-md-end">تاكيد الرقم
                                السرى</label>

                            <div class="col-md-6">
                                <div class="input-group">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">

                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('password-confirm', this)">
                                        👁
                                    </button>
                                </div>

                            </div>
                        </div>

                        <!-- Image Upload Field -->
                        <div class="row mb-3">
                            <label for="image" class="col-md-4 col-form-label text-md-end">الصوره الشخصيه</label>

                            <div class="col-md-6">
                                <input id="image" type="file" class="form-control @error('image') is-invalid @enderror" name="image">

                                @error('image')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror

                                <small class="text-muted">Max 2MB (JPEG, PNG, JPG)</small>
                            </div>
                        </div>

                        <!-- Image Preview -->
                        <div class="row mb-3">
                            <div class="col-md-6 offset-md-4">
                                <img id="image-preview" src="#" alt="Image Preview" style="max-width: 200px; display: none;" class="img-thumbnail mt-2">
                            </div>
                        </div>

                        <!-- Permissions -->
                        <!-- Permissions -->
                        <div class="row mb-4">
                            <label class="col-md-12 col-form-label font-weight-bold mb-3" style="font-size: 1.2rem; border-bottom: 2px solid #eee; padding-bottom: 10px;">الصلاحيات</label>
                            <button type="button" class="btn btn-sm btn-outline-info mb-2 ml-3" id="global-select-all">تحديد كافة الصلاحيات</button> <br>
                            <div class="col-md-12">
                                <div class="row">
                                    @php
                                    $groupedPermissions = $permissions->groupBy(function($item) {
                                    $parts = explode(' ', $item->name, 2);
                                    return count($parts) > 1 ? $parts[1] : 'other';
                                    });
                                    @endphp

                                    @foreach($groupedPermissions as $entity => $perms)
                                    <div class="col-md-6 col-lg-4 mb-3">
                                        <div class="card h-100 shadow-sm border-0">
                                            <div class="card-header bg-light font-weight-bold text-center py-2" style="font-size: 1rem;">
                                                {{ __("user." . $entity) ?? ucfirst(str_replace('_', ' ', $entity)) }}
                                            </div>
                                            <div class="card-body p-3">
                                                @foreach($perms as $permission)
                                                @php
                                                $parts = explode(' ', $permission->name, 2);
                                                $action = $parts[0];
                                                @endphp
                                                <div class="custom-control custom-checkbox mb-2">
                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" class="custom-control-input permission-checkbox" data-action="{{ $action }}" data-entity="{{ $entity }}" id="perm_{{ $permission->id }}" {{ in_array($permission->name, old('permissions', [])) ? 'checked' : '' }}>
                                                    <label class="custom-control-label" for="perm_{{ $permission->id }}">
                                                        {{ __("user.$permission->name") }}
                                                    </label>
                                                </div>
                                                @endforeach

                                                <div class="mt-2 text-center">
                                                    <button type="button" class="btn btn-xs btn-outline-info select-all-entity" data-entity="{{ $entity }}">تحديد الكل</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>


                        <div class="row mb-0 d-flex justify-content-right">
                            <div class="col-md-6 ">
                                <button type="submit" class="btn btn-primary">
                                    تسجيل
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Image Preview Script -->
<script>
    document.getElementById('image').addEventListener('change', function(e) {
        const preview = document.getElementById('image-preview');
        const file = e.target.files[0];

        if (file) {
            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.style.display = 'block';
            }

            reader.readAsDataURL(file);
        } else {
            preview.style.display = 'none';
        }
    });

    function togglePassword(id, btn) {
        const input = document.getElementById(id);
        if (input.type === "password") {
            input.type = "text";
            btn.innerText = "🚫";
        } else {
            input.type = "password";
            btn.innerText = "👁";
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        // Auto-check read permission
        const checkboxes = document.querySelectorAll('.permission-checkbox');

        checkboxes.forEach(function(checkbox) {
            checkbox.addEventListener('change', function() {
                const action = this.getAttribute('data-action');
                const entity = this.getAttribute('data-entity');

                if (this.checked) {
                    if (['create', 'update', 'delete'].includes(action)) {
                        const readCheckbox = document.querySelector(`.permission-checkbox[data-action="read"][data-entity="${entity}"]`);
                        if (readCheckbox) {
                            readCheckbox.checked = true;
                        }
                    }
                } else {
                    if (action === 'read') {
                        const entityCheckboxes = document.querySelectorAll(`.permission-checkbox[data-entity="${entity}"]`);
                        entityCheckboxes.forEach(cb => cb.checked = false);
                    }
                }
            });
        });

        // Select All handler
        const selectAllButtons = document.querySelectorAll('.select-all-entity');
        selectAllButtons.forEach(function(btn) {
            btn.addEventListener('click', function() {
                const entity = this.getAttribute('data-entity');
                const entityCheckboxes = document.querySelectorAll(`.permission-checkbox[data-entity="${entity}"]`);

                const allChecked = Array.from(entityCheckboxes).every(cb => cb.checked);

                entityCheckboxes.forEach(cb => cb.checked = !allChecked);
            });
        });
    });

    // أضف هذا الجزء في نهاية الـ DOMContentLoaded handler
    const globalSelectBtn = document.getElementById('global-select-all');
    if (globalSelectBtn) {
        globalSelectBtn.addEventListener('click', function() {
            const allCheckboxes = document.querySelectorAll('.permission-checkbox');
            // نتحقق إذا كان هناك أي صندوق غير محدد
            const anyUnchecked = Array.from(allCheckboxes).some(cb => !cb.checked);

            allCheckboxes.forEach(cb => {
                cb.checked = anyUnchecked; // إذا وجد واحد غير محدد، يحدد الكل. وإذا كان الكل محدد، يلغي التحديد.
            });

            // تغيير نص الزر ليكون تفاعلياً (اختياري)
            this.innerText = anyUnchecked ? "إلغاء تحديد الكل" : "تحديد كافة الصلاحيات";
        });
    }

</script>
@endsection