@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.update', $admin->id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- 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', $admin->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', $admin->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"
                                           autocomplete="new-password">
                                    <button type="button" class="btn btn-outline-secondary" onclick="togglePassword('password', this)">
                                        👁
                                    </button>
                                </div>
                                @error('password')
                                    <span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
                                @enderror
                                <small class="text-muted">اتركه فارغاً إن لم ترغب بتغييره</small>
                            </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"
                                           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="{{ $admin->image }}"
                                     alt="Image Preview"
                                     style="max-width: 200px; {{ $admin->image ? '' : 'display: none;' }}"
                                     class="img-thumbnail mt-2">
                            </div>
                        </div>

                        <!-- 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', $admin->getPermissionNames()->toArray())) ? '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>

                        <!-- Submit -->
                        <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>

<!-- Scripts -->
<script>
    // Image preview
    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';
        }
    });

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

    // Permissions logic
    document.addEventListener('DOMContentLoaded', function() {
        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 / deselect all
        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