@extends('admin.layouts.master')

@section('title', 'تصاريح الأفراد')

@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.8/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
@endsection

@section('content')
<div class="pc-container">
    <div class="pc-content">
        <div class="page-header d-flex justify-content-between align-items-center mb-3">
            <div>
                <h4 class="mb-0">تصاريح الأفراد</h4>
                <small class="text-muted">إدارة إصدار ومتابعة وتجديد تصاريح الأفراد</small>
            </div>
            @can('create permits')
            <a href="{{ route('admin.permits.create') }}" class="btn btn-primary">
                <i class="ti ti-plus me-1"></i>إصدار تصريح فرد
            </a>
            @endcan
        </div>

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

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="permits-table" class="table table-striped table-bordered align-middle w-100">
                        <thead>
                        <tr>
                            <th>#</th>
                            <th>رقم التصريح</th>
                            <th>الاسم</th>
                            <th>الفرع</th>
                            <th>الشركة</th>
                            <th>نوع التصريح</th>
                            <th>تاريخ البداية</th>
                            <th>تاريخ النهاية</th>
                            <th>الحالة</th>
                            <th>المتبقي</th>
                            <th>إجراءات</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script>
$(function () {
    $('#permits-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: '{{ route('admin.permits.data') }}',
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'permit_number', name: 'permit_number' },
            { data: 'person_name', name: 'person_name' },
            { data: 'branch_name', name: 'branch.name', defaultContent: '-' },
            { data: 'company_name', name: 'company.name', defaultContent: '-' },
            { data: 'permit_type_name', name: 'permitType.name', defaultContent: '-' },
            { data: 'start_date', name: 'start_date' },
            { data: 'end_date', name: 'end_date' },
            { data: 'status_badge', name: 'permit_status', orderable: false, searchable: false },
            {
                data: 'remaining_amount',
                name: 'remaining_amount',
                render: function (v) {
                    return parseFloat(v || 0).toLocaleString('ar-EG') + ' ج.م';
                }
            },
            { data: 'actions', name: 'actions', orderable: false, searchable: false }
        ]
    });
});
</script>
@endsection