@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">إعداد سير العمل والموافقات</h1>
        <nav class="breadcrumb">
            <a href="{{ url('/') }}">الرئيسية</a>
            <span>/</span>
            <a href="{{ route('workflow.config') }}">سير العمل</a>
            <span>/</span>
            <span>الإعدادات</span>
        </nav>
    </div>
</div>

@if (session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if ($errors->any())
    <div class="alert alert-danger">
        <ul style="margin:0;padding-inline-start:18px;">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="card">
    <div class="card-header">
        <h2>الوحدات ومستويات الاعتماد</h2>
    </div>
    <div class="card-body">
        <div style="overflow-x:auto;">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الوحدة</th>
                        <th>تفعيل الموافقات</th>
                        <th>عدد المستويات</th>
                        <th>نوع التوقيع</th>
                        <th>التصدير والطباعة</th>
                        <th>الحالة</th>
                        <th>إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($configurations as $config)
                        <tr>
                            <td><strong>{{ $config->module_name_ar }}</strong></td>
                            <td>
                                <form method="POST" action="{{ route('workflow.config.update', $config->module_name) }}" id="form-toggle-{{ $config->id }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="number_of_levels" value="{{ $config->number_of_levels }}">
                                    <input type="hidden" name="is_active" value="{{ $config->is_active ? 1 : 0 }}">
                                    <label class="switch">
                                        <input type="checkbox" name="requires_approval" value="1"
                                            {{ $config->requires_approval ? 'checked' : '' }}
                                            onchange="document.getElementById('form-toggle-{{ $config->id }}').submit()">
                                        <span class="slider"></span>
                                    </label>
                                </form>
                            </td>
                            <td>
                                <form method="POST" action="{{ route('workflow.config.update', $config->module_name) }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="requires_approval" value="{{ $config->requires_approval ? 1 : 0 }}">
                                    <input type="hidden" name="is_active" value="{{ $config->is_active ? 1 : 0 }}">
                                    <select name="number_of_levels" class="form-control" style="width:90px;display:inline-block;" onchange="this.form.submit()">
                                        @for ($i = 1; $i <= 6; $i++)
                                            <option value="{{ $i }}" {{ $config->number_of_levels == $i ? 'selected' : '' }}>{{ $i }}</option>
                                        @endfor
                                    </select>
                                </form>
                            </td>
                            <td>
                                <form method="POST" action="{{ route('workflow.config.update', $config->module_name) }}">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="requires_approval" value="{{ $config->requires_approval ? 1 : 0 }}">
                                    <input type="hidden" name="number_of_levels" value="{{ $config->number_of_levels }}">
                                    <input type="hidden" name="is_active" value="{{ $config->is_active ? 1 : 0 }}">
                                    <select name="signature_mode" class="form-control" style="width:130px;display:inline-block;font-size:13px;" onchange="this.form.submit()">
                                        <option value="none" {{ $config->signature_mode === 'none' ? 'selected' : '' }}>بدون توقيع</option>
                                        <option value="button_only" {{ $config->signature_mode === 'button_only' ? 'selected' : '' }}>زر فقط</option>
                                        <option value="drawn_only" {{ $config->signature_mode === 'drawn_only' ? 'selected' : '' }}>رسم فقط</option>
                                        <option value="both" {{ $config->signature_mode === 'both' ? 'selected' : '' }}>زر + رسم</option>
                                    </select>
                                </form>
                            </td>
                            <td>
                                <form method="POST" action="{{ route('workflow.config.update', $config->module_name) }}" style="display:flex;flex-wrap:wrap;gap:6px;">
                                    @csrf
                                    @method('PUT')
                                    <input type="hidden" name="requires_approval" value="{{ $config->requires_approval ? 1 : 0 }}">
                                    <input type="hidden" name="number_of_levels" value="{{ $config->number_of_levels }}">
                                    <input type="hidden" name="is_active" value="{{ $config->is_active ? 1 : 0 }}">
                                    <input type="hidden" name="signature_mode" value="{{ $config->signature_mode }}">
                                    <label style="font-size:12px;display:flex;align-items:center;gap:3px;cursor:pointer;">
                                        <input type="hidden" name="allow_export_pdf" value="0">
                                        <input type="checkbox" name="allow_export_pdf" value="1" {{ $config->allow_export_pdf ? 'checked' : '' }} onchange="this.form.submit()"> PDF
                                    </label>
                                    <label style="font-size:12px;display:flex;align-items:center;gap:3px;cursor:pointer;">
                                        <input type="hidden" name="allow_export_word" value="0">
                                        <input type="checkbox" name="allow_export_word" value="1" {{ $config->allow_export_word ? 'checked' : '' }} onchange="this.form.submit()"> Word
                                    </label>
                                    <label style="font-size:12px;display:flex;align-items:center;gap:3px;cursor:pointer;">
                                        <input type="hidden" name="allow_export_excel" value="0">
                                        <input type="checkbox" name="allow_export_excel" value="1" {{ $config->allow_export_excel ? 'checked' : '' }} onchange="this.form.submit()"> Excel
                                    </label>
                                    <label style="font-size:12px;display:flex;align-items:center;gap:3px;cursor:pointer;">
                                        <input type="hidden" name="allow_print" value="0">
                                        <input type="checkbox" name="allow_print" value="1" {{ $config->allow_print ? 'checked' : '' }} onchange="this.form.submit()"> طباعة
                                    </label>
                                </form>
                            </td>
                            <td>
                                @if ($config->is_active)
                                    <span class="badge badge-success">مفعل</span>
                                @else
                                    <span class="badge badge-secondary">غير مفعل</span>
                                @endif
                            </td>
                            <td>
                                <button type="button" class="btn btn-secondary btn-sm" onclick="toggleAssign({{ $config->id }})">
                                    <i class="fa-solid fa-users-gear"></i> تعيين المستويات
                                </button>
                            </td>
                        </tr>
                        <tr id="assign-row-{{ $config->id }}" style="display:none;">
                            <td colspan="7">
                                <div class="card" style="margin:0;background:var(--bg-subtle,#f8f9fb);">
                                    <div class="card-body">
                                        <h3 style="margin-top:0;">تعيين مستويات الاعتماد - {{ $config->module_name_ar }}</h3>
                                        <div class="form-row" style="flex-wrap:wrap;">
                                            @for ($lvl = 1; $lvl <= $config->number_of_levels; $lvl++)
                                                @php
                                                    $assignment = null;
                                                    if (isset($assignments[$config->id])) {
                                                        $assignment = $assignments[$config->id]->firstWhere('level_number', $lvl);
                                                    }
                                                @endphp
                                                <form method="POST" action="{{ route('workflow.config.assign', $config->id) }}" style="flex:1;min-width:220px;border:1px solid var(--border-color,#e2e5ea);border-radius:8px;padding:12px;margin:6px;">
                                                    @csrf
                                                    <input type="hidden" name="level_number" value="{{ $lvl }}">
                                                    <div class="form-group">
                                                        <label class="form-label">المستوى {{ $lvl }}</label>
                                                        <select name="role_id" class="form-control">
                                                            <option value="">-- اختر دور --</option>
                                                            @foreach ($roles as $role)
                                                                <option value="{{ $role->id }}" {{ $assignment && $assignment->role_id == $role->id ? 'selected' : '' }}>
                                                                    {{ $role->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="number" name="user_id" class="form-control" placeholder="معرف المستخدم (اختياري)"
                                                            value="{{ $assignment->user_id ?? '' }}">
                                                    </div>
                                                    <button type="submit" class="btn btn-primary btn-sm" style="width:100%;">
                                                        <i class="fa-solid fa-floppy-disk"></i> حفظ
                                                    </button>
                                                </form>
                                            @endfor
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
.switch { position: relative; display: inline-block; width: 46px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #ccc; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; right: 3px; bottom: 3px; background-color: #fff; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #2f9e44; }
input:checked + .slider:before { transform: translateX(-22px); }
</style>

@push('scripts')
<script>
function toggleAssign(id) {
    var row = document.getElementById('assign-row-' + id);
    if (row) {
        row.style.display = row.style.display === 'none' ? '' : 'none';
    }
}
</script>
@endpush
@endsection