@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">
        @php($returnTo = request()->fullUrl())

        {{-- Header --}}
        <div class="page-header d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <div>
                <h2 class="mb-1">{{ $company->name }}</h2>
                <small class="text-muted d-block"><i class="ti ti-building me-1"></i>{{ $company->branch?->name ?? '-' }}</small>
                <small class="text-muted">معرف الشركة: #{{ $company->id }}</small>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                @can('create customers')
                <a href="{{ route('admin.customers.create', ['company_id' => $company->id, 'is_under_company' => 1, 'return_to' => $returnTo]) }}" class="btn btn-primary">
                    <i class="ti ti-user-plus me-1"></i>إضافة فرد
                </a>
                @endcan
                @can('create customers')
                <a href="{{ route('admin.vehicles.create', ['company_id' => $company->id, 'return_to' => $returnTo]) }}" class="btn btn-info text-white">
                    <i class="ti ti-car me-1"></i>إضافة مركبة
                </a>
                @endcan
                @can('create permits')
                <a href="{{ route('admin.permits.create', ['company_id' => $company->id, 'return_to' => $returnTo]) }}" class="btn btn-success">
                    <i class="ti ti-id-badge-2 me-1"></i>إضافة تصريح فرد
                </a>
                @endcan
                @can('create permits')
                <a href="{{ route('admin.vehicle-permits.create', ['company_id' => $company->id, 'return_to' => $returnTo]) }}" class="btn btn-dark">
                    <i class="ti ti-file-certificate me-1"></i>إضافة تصريح مركبة
                </a>
                @endcan
                @can('edit companies')
                <a href="{{ route('admin.companies.edit', $company) }}" class="btn btn-warning">
                    <i class="ti ti-pencil me-1"></i>تعديل
                </a>
                @endcan
                <a href="{{ route('admin.companies.index') }}" class="btn btn-light">رجوع</a>
            </div>
        </div>

        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <div class="row g-3">

            {{-- البيانات الأساسية --}}
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header bg-light fw-semibold">
                        <i class="ti ti-info-circle me-2 text-primary"></i>البيانات الأساسية
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">اسم الشركة</small>
                                <strong>{{ $company->name }}</strong>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">الفرع</small>
                                <strong>{{ $company->branch?->name ?? '-' }}</strong>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">السجل التجاري</small>
                                <strong>{{ $company->commercial_register ?? '-' }}</strong>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">الرقم الضريبي</small>
                                <strong>{{ $company->tax_number ?? '-' }}</strong>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">اسم المستخدم</small>
                                <strong class="font-monospace">{{ $company->username }}</strong>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">الحالة</small>
                                <span class="badge {{ $company->status === 'active' ? 'bg-success' : 'bg-danger' }}">
                                    {{ $company->status_label }}
                                </span>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">تاريخ الإضافة</small>
                                <strong>{{ $company->created_at?->format('Y-m-d h:i A') ?? '-' }}</strong>
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">آخر تحديث</small>
                                <strong>{{ $company->updated_at?->format('Y-m-d h:i A') ?? '-' }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- بيانات الاتصال --}}
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-header bg-light fw-semibold">
                        <i class="ti ti-phone me-2 text-success"></i>بيانات الاتصال
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">الهاتف</small>
                                @if($company->phone)
                                    <a href="tel:{{ $company->phone }}" class="fw-bold text-decoration-none">{{ $company->phone }}</a>
                                @else
                                    <strong>-</strong>
                                @endif
                            </div>
                            <div class="col-md-6">
                                <small class="text-muted d-block mb-1">الموبايل</small>
                                @if($company->mobile)
                                    <a href="tel:{{ $company->mobile }}" class="fw-bold text-decoration-none">{{ $company->mobile }}</a>
                                @else
                                    <strong>-</strong>
                                @endif
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الإيميل</small>
                                @if($company->email)
                                    <a href="mailto:{{ $company->email }}" class="fw-bold text-decoration-none">{{ $company->email }}</a>
                                @else
                                    <strong>-</strong>
                                @endif
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">العنوان</small>
                                <strong>{{ $company->address ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الشخص المسؤول</small>
                                <strong>{{ $company->contact_person ?? '-' }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- الملاحظات --}}
            @if($company->notes)
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light fw-semibold">
                        <i class="ti ti-notes me-2 text-info"></i>ملاحظات
                    </div>
                    <div class="card-body">
                        {{ $company->notes }}
                    </div>
                </div>
            </div>
            @endif

            {{-- إحصائيات سريعة --}}
            <div class="col-12">
                <div class="row g-3">
                    <div class="col-md-3">
                        <div class="card border-start border-primary border-4">
                            <div class="card-body">
                                <small class="text-muted">عدد العملاء</small>
                                <h4 class="mb-0 mt-1">{{ $company->customers_count }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-start border-success border-4">
                            <div class="card-body">
                                <small class="text-muted">عدد المركبات</small>
                                <h4 class="mb-0 mt-1">{{ $company->vehicles_count }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-start border-warning border-4">
                            <div class="card-body">
                                <small class="text-muted">تصاريح الأفراد</small>
                                <h4 class="mb-0 mt-1">{{ $company->person_permits_count }}</h4>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card border-start border-danger border-4">
                            <div class="card-body">
                                <small class="text-muted">تصاريح المركبات</small>
                                <h4 class="mb-0 mt-1">{{ $company->vehicle_permits_count }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <span><i class="ti ti-layout-grid me-2 text-primary"></i>البيانات المرتبطة بالشركة</span>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-tabs mb-3" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-customers" type="button" role="tab">
                                    الأفراد ({{ $company->customers_count }})
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-vehicles" type="button" role="tab">
                                    المركبات ({{ $company->vehicles_count }})
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-person-permits" type="button" role="tab">
                                    تصاريح الأفراد ({{ $company->person_permits_count }})
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-vehicle-permits" type="button" role="tab">
                                    تصاريح المركبات ({{ $company->vehicle_permits_count }})
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tab-customers" role="tabpanel">
                                <div class="table-responsive">
                                    <table id="company-customers-table" class="table table-striped table-bordered align-middle w-100">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>الاسم</th>
                                                <th>النوع</th>
                                                <th>الهاتف</th>
                                                <th>الحالة</th>
                                                <th class="text-end">إجراءات</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-vehicles" role="tabpanel">
                                <div class="table-responsive">
                                    <table id="company-vehicles-table" class="table table-striped table-bordered align-middle w-100">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>رقم اللوحة</th>
                                                <th>النوع</th>
                                                <th>اللون</th>
                                                <th>الحالة</th>
                                                <th class="text-end">إجراءات</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-person-permits" role="tabpanel">
                                <div class="table-responsive">
                                    <table id="company-person-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 class="text-end">إجراءات</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>

                            <div class="tab-pane fade" id="tab-vehicle-permits" role="tabpanel">
                                <div class="table-responsive">
                                    <table id="company-vehicle-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 class="text-end">إجراءات</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </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 () {
    const companyId = @json($company->id);
    const returnTo = @json($returnTo);
    const languageUrl = 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json';
    const tables = {};

    function ajaxConfig(url) {
        return {
            url: url,
            data: function (d) {
                d.company_id = companyId;
                d.return_to = returnTo;
                d.company_context = 1;
            }
        };
    }

    tables.customers = $('#company-customers-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: ajaxConfig(@json(route('admin.customers.data'))),
        language: { url: languageUrl, emptyTable: 'لا يوجد أفراد مرتبطون بالشركة.' },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'full_name', name: 'full_name' },
            { data: 'customer_type_label', name: 'customer_type', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'phone', name: 'phone', defaultContent: '-' },
            { data: 'status_badge', name: 'status', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-end' }
        ],
        order: [[0, 'desc']],
        pageLength: 10
    });

    tables.vehicles = $('#company-vehicles-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: ajaxConfig(@json(route('admin.vehicles.data'))),
        language: { url: languageUrl, emptyTable: 'لا توجد مركبات مرتبطة بالشركة.' },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'plate_number', name: 'plate_number' },
            { data: 'vehicle_kind_label', name: 'vehicle_kind', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'color', name: 'color', defaultContent: '-' },
            { data: 'active_label', name: 'active', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-end' }
        ],
        order: [[0, 'desc']],
        pageLength: 10
    });

    tables.personPermits = $('#company-person-permits-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: ajaxConfig(@json(route('admin.permits.data'))),
        language: { url: languageUrl, emptyTable: 'لا توجد تصاريح أفراد مرتبطة بالشركة.' },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'permit_number', name: 'permit_number' },
            { data: 'customer_name', name: 'customer_name', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'permit_type_name', name: 'permit_type_name', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'end_date', name: 'end_date', defaultContent: '-' },
            { data: 'status_badge', name: 'permit_status', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-end' }
        ],
        order: [[0, 'desc']],
        pageLength: 10
    });

    tables.vehiclePermits = $('#company-vehicle-permits-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: ajaxConfig(@json(route('admin.vehicle-permits.data'))),
        language: { url: languageUrl, emptyTable: 'لا توجد تصاريح مركبات مرتبطة بالشركة.' },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'permit_number', name: 'permit_number' },
            { data: 'vehicle_name', name: 'vehicle_name', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'permit_type_name', name: 'permit_type_name', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'end_date', name: 'end_date', defaultContent: '-' },
            { data: 'status_badge', name: 'permit_status', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-end' }
        ],
        order: [[0, 'desc']],
        pageLength: 10
    });

    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function () {
        Object.values(tables).forEach(function (table) {
            table.columns.adjust().responsive.recalc();
        });
    });
});
</script>
@endsection