@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())

        <div class="page-header d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
            <div>
                <h2 class="mb-1">{{ $customer->full_name }}</h2>
                <small class="text-muted d-block">
                    <i class="ti ti-user me-1"></i>{{ $customer->customer_type_label }}
                    @if($customer->company)
                    | {{ $customer->company->name }}
                    @endif
                </small>
                <small class="text-muted">معرف العميل: #{{ $customer->id }}</small>
            </div>
            <div class="d-flex gap-2 flex-wrap">
                @can('create customers')
                <a href="{{ route('admin.vehicles.create', ['customer_id' => $customer->id, 'company_id' => $customer->company_id, 'return_to' => $returnTo]) }}" class="btn btn-primary">
                    <i class="ti ti-car me-1"></i>إضافة مركبة
                </a>
                @endcan
                @can('create permits')
                <a href="{{ route('admin.permits.create', ['customer_id' => $customer->id, 'company_id' => $customer->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', ['customer_id' => $customer->id, 'company_id' => $customer->company_id, 'return_to' => $returnTo]) }}" class="btn btn-dark">
                    <i class="ti ti-file-certificate me-1"></i>إضافة تصريح مركبة
                </a>
                @endcan
                @can('collect payments')
                <a href="{{ route('admin.treasury.create', ['reference_type' => 'customer', 'reference_id' => $customer->id]) }}"
                   class="btn btn-success">
                    <i class="ti ti-cash me-1"></i>تحصيل
                </a>
                @endcan
                @can('edit customers')
                <a href="{{ route('admin.customers.edit', $customer) }}" class="btn btn-warning">
                    <i class="ti ti-pencil me-1"></i>تعديل
                </a>
                @endcan
                <a href="{{ route('admin.customers.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-4">
                <div class="card">
                    <div class="card-header bg-light fw-semibold">
                        <i class="ti ti-user-circle me-2 text-primary"></i>البيانات الشخصية
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الاسم الكامل</small>
                                <strong>{{ $customer->full_name }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">نوع العميل</small>
                                <span class="badge bg-primary">{{ $customer->customer_type_label }}</span>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الرقم القومي</small>
                                <strong class="font-monospace">{{ $customer->national_id ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">المسمى الوظيفي</small>
                                <strong>{{ $customer->job_title ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الحالة</small>
                                <span class="badge {{ $customer->status === 'active' ? 'bg-success' : 'bg-danger' }}">
                                    {{ $customer->status_label }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <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-12">
                                <small class="text-muted d-block mb-1">الهاتف</small>
                                <strong>{{ $customer->phone ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الموبايل</small>
                                <strong>{{ $customer->mobile ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">العنوان</small>
                                <strong>{{ $customer->address ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الفرع</small>
                                <strong>{{ $customer->branch?->name ?? '-' }}</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header bg-light fw-semibold">
                        <i class="ti ti-building me-2 text-warning"></i>بيانات إضافية
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">الشركة</small>
                                @if($customer->company)
                                    <a href="{{ route('admin.companies.show', $customer->company) }}" class="fw-bold text-decoration-none">
                                        {{ $customer->company->name }}
                                    </a>
                                @else
                                    <strong class="text-muted">-</strong>
                                @endif
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">تحت شركة؟</small>
                                <strong>{{ $customer->is_under_company ? 'نعم' : 'لا' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">تاريخ الإضافة</small>
                                <strong>{{ $customer->created_at?->format('Y-m-d h:i A') ?? '-' }}</strong>
                            </div>
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">آخر تحديث</small>
                                <strong>{{ $customer->updated_at?->format('Y-m-d h:i A') ?? '-' }}</strong>
                            </div>
                            @if($customer->notes)
                            <div class="col-12">
                                <small class="text-muted d-block mb-1">ملاحظات</small>
                                <small>{{ $customer->notes }}</small>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <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">{{ $customer->vehicles_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">{{ $customer->person_permits_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">{{ $customer->vehicle_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">{{ number_format((float) ($duesSummary->remaining_amount ?? 0), 2) }}</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light fw-semibold">
                        <i class="ti ti-layout-grid me-2 text-primary"></i>البيانات المرتبطة بالعميل
                    </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-vehicles" type="button" role="tab">
                                    المركبات ({{ $customer->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">
                                    تصاريح الأفراد ({{ $customer->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">
                                    تصاريح المركبات ({{ $customer->vehicle_permits_count }})
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-dues" type="button" role="tab">
                                    المستحقات ({{ $customer->dues_count }})
                                </button>
                            </li>
                        </ul>

                        <div class="tab-content">
                            <div class="tab-pane fade show active" id="tab-vehicles" role="tabpanel">
                                <div class="table-responsive">
                                    <table id="customer-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="customer-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 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="customer-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 class="tab-pane fade" id="tab-dues" role="tabpanel">
                                <div class="row g-3 mb-3">
                                    <div class="col-md-4">
                                        <div class="alert alert-light border mb-0">إجمالي: <strong>{{ number_format((float) ($duesSummary->total_amount ?? 0), 2) }}</strong></div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="alert alert-light border mb-0">مدفوع: <strong>{{ number_format((float) ($duesSummary->paid_amount ?? 0), 2) }}</strong></div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="alert alert-light border mb-0">متبقي: <strong>{{ number_format((float) ($duesSummary->remaining_amount ?? 0), 2) }}</strong></div>
                                    </div>
                                </div>

                                <div class="table-responsive">
                                    <table id="customer-dues-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>
                                            </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 customerId = @json($customer->id);
    const returnTo = @json($returnTo);
    const languageUrl = 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json';
    const tables = {};

    function ajaxConfig(url, extraData) {
        return {
            url: url,
            data: function (d) {
                d.customer_id = customerId;
                d.return_to = returnTo;
                d.customer_context = 1;
                if (extraData) {
                    Object.assign(d, extraData);
                }
            }
        };
    }

    tables.vehicles = $('#customer-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 = $('#customer-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: '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 = $('#customer-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
    });

    tables.dues = $('#customer-dues-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: ajaxConfig(@json(route('admin.customers.dues-data'))),
        language: { url: languageUrl, emptyTable: 'لا توجد مستحقات على العميل.' },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'dueable_link', name: 'dueable_link', orderable: false, searchable: false, defaultContent: '-' },
            { data: 'total_amount', name: 'total_amount', defaultContent: 0 },
            { data: 'paid_amount', name: 'paid_amount', defaultContent: 0 },
            { data: 'remaining_amount', name: 'remaining_amount', defaultContent: 0 },
            { data: 'due_date', name: 'due_date', defaultContent: '-' },
            { data: 'status_badge', name: 'due_status', orderable: false, searchable: false, defaultContent: '-' }
        ],
        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