﻿@extends('layouts.app')

@section('title', 'إدارة الصلاحيات')

@section('content')
<div class="permissions-container">
    <div class="permissions-card">
        <div class="permissions-header bg-primary-600">
            <h1 class="permissions-title">إدارة الصلاحيات</h1>
            @permission('permissions.create')
            <a href="{{ route('permissions.create') }}" class="permissions-add-button">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" viewBox="0 0 20 20" fill="currentColor">
                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                </svg>
                إضافة صلاحية جديدة
            </a>
            @endpermission
        </div>
        
        <div class="p-6">
            @if(session('success'))
                <div class="bg-green-100 border-r-4 border-green-500 text-green-700 p-4 mb-6 rounded">
                    {{ session('success') }}
                </div>
            @endif
            
            @if(session('error'))
                <div class="bg-red-100 border-r-4 border-red-500 text-red-700 p-4 mb-6 rounded">
                    {{ session('error') }}
                </div>
            @endif

            <div class="mb-8 p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-l-4 border-blue-500 rounded-r-lg">
                <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                    </svg>
                    لوحات المعلومات والتحليلات
                </h2>
                <p class="text-gray-700 mb-4">تستطيع الوصول إلى لوحات المعلومات والتحليلات المتقدمة من خلال القائمة الجانبية الرئيسية.</p>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    @permission('analytics.view')
                    <a href="{{ route('analytics.financial-dashboard') }}" class="p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-r-2 border-blue-500">
                        <h3 class="font-semibold text-gray-800 mb-1 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            لوحة المعلومات المالية
                        </h3>
                        <p class="text-sm text-gray-600">عرض الأداء المالي والميزانيات والتوقعات</p>
                    </a>
                    @endpermission

                    @permission('analytics.view')
                    <a href="{{ route('analytics.kpi-dashboard') }}" class="p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-r-2 border-purple-500">
                        <h3 class="font-semibold text-gray-800 mb-1 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            لوحة مؤشرات الأداء الرئيسية
                        </h3>
                        <p class="text-sm text-gray-600">تابع المؤشرات الحيوية والإحصائيات المهمة</p>
                    </a>
                    @endpermission
                </div>
            </div>

<div class="mb-8 p-4 bg-gradient-to-r from-cyan-50 to-blue-50 border-l-4 border-cyan-500 rounded-r-lg">
    <h2 class="text-lg font-bold text-gray-800 mb-4 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 ml-2 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
        </svg>
        نظام الفواتير الإلكترونية وتكامل ZATCA
    </h2>
    <p class="text-gray-700 mb-4">إدارة الفواتير الإلكترونية ومعالجة إعدادات هيئة الزكاة والدخل والتتبع التلقائي للمرسلات.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        @permission('einvoices.view')
        <a href="{{ route('einvoices.index') }}" class="p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-r-2 border-cyan-500">
            <h3 class="font-semibold text-gray-800 mb-1 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-cyan-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                </svg>
                الفواتير الإلكترونية
            </h3>
            <p class="text-sm text-gray-600">إنشاء وإرسال الفواتير الإلكترونية المتوافقة مع معايير ZATCA</p>
        </a>
        @endpermission

        @permission('zatca.settings.view')
        <a href="{{ route('zatca.settings.index') }}" class="p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-r-2 border-blue-500">
            <h3 class="font-semibold text-gray-800 mb-1 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                </svg>
                إعدادات ZATCA
            </h3>
            <p class="text-sm text-gray-600">تحديث معلومات الشركة وإدارة شهادات هيئة الزكاة والدخل والإرسال التلقائي</p>
        </a>
        @endpermission

        @permission('einvoices.view')
        <a href="{{ route('einvoices.tracking') }}" class="p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-r-2 border-indigo-500">
            <h3 class="font-semibold text-gray-800 mb-1 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                </svg>
                تتبع الفواتير المرسلة
            </h3>
            <p class="text-sm text-gray-600">متابعة حالة الفواتير المرسلة والأخطاء والإجراءات المتخذة</p>
        </a>
        @endpermission

        @permission('einvoices.view')
        <a href="{{ route('einvoices.reports.index') }}" class="p-3 bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border-r-2 border-emerald-500">
            <h3 class="font-semibold text-gray-800 mb-1 flex items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-emerald-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
                تقارير الفواتير
            </h3>
            <p class="text-sm text-gray-600">عرض التقارير الشاملة والإحصائيات للفواتير المرسلة</p>
        </a>
        @endpermission
    </div>
</div>

            <div class="space-y-4" id="permissionsAccordion">
                @forelse($permissions as $module => $modulePermissions)
                    <div class="border border-gray-200 rounded-md overflow-hidden shadow-sm" x-data="{ open: false }">
                        <div class="bg-gray-50 p-4 py-3 cursor-pointer hover:bg-gray-100" @click="open = !open" id="heading{{ Str::slug($module) }}">
                            <div class="flex items-center justify-between">
                                <div class="flex items-center text-gray-700">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 text-primary-600" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
                                    </svg>
                                    <span class="font-medium">{{ $module }}</span>
                                    <span class="mr-2 text-sm text-gray-500">({{ $modulePermissions->count() }})</span>
                                </div>
                                <svg :class="{'rotate-180': open}" class="h-5 w-5 transform transition-transform duration-200 text-primary-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                    <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                            </div>
                        </div>

                        <div x-show="open" x-transition class="border-t border-gray-200 bg-white">
                            <div class="p-4 overflow--auto">
                                <table class="min-w-full divide-y divide-gray-200 permissions-table">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">#</th>
                                            <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">اسم الصلاحية</th>
                                            <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">الاسم المعروض</th>
                                            <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">الوصف</th>
                                            <th scope="col" class="p-6 py-3 text-right text-s font-medium text-gray-500 uppercase tracking-wider">الإجراءات</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @foreach($modulePermissions as $permission)
                                        <tr class="hover:bg-gray-50 permissions-table-row">
                                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $loop->iteration }}</td>
                                            <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $permission->name }}</td>
                                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $permission->display_name }}</td>
                                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $permission->description ?? 'لا يوجد وصف' }}</td>
                                            <td class="p-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                <div class="flex space-y-2 space-y-reverse">
                                                    @permission('permissions.view')
                                                    <a href="{{ route('permissions.show', $permission) }}" class="text-primary-600 hover:text-primary-900 p-1" title="عرض">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                                        </svg>
                                                    </a>
                                                    @endpermission
                                                    
                                                    @permission('permissions.edit')
                                                    <a href="{{ route('permissions.edit', $permission) }}" class="text-indigo-600 hover:text-indigo-900 p-1" title="تعديل">
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                                        </svg>
                                                    </a>
                                                    @endpermission
                                                    
                                                    @permission('permissions.delete')
                                                    <form action="{{ route('permissions.destroy', $permission) }}" method="POST" class="inline">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="text-red-600 hover:text-red-900 p-1" title="حذف" 
                                                            onclick="return confirm('هل أنت متأكد من حذف هذه الصلاحية؟')">
                                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                                            </svg>
                                                        </button>
                                                    </form>
                                                    @endpermission
                                                </div>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="bg-blue-50 border-r-4 border-blue-400 text-blue-700 p-4 rounded">
                        لا توجد صلاحيات مضافة
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection
