@extends('layouts.app')
@section('title', 'ملف العميل')
@section('page_title', $customer->display_name)
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('customers.index') }}">العملاء</a></li>
    <li class="breadcrumb-item active">{{ $customer->code }}</li>
@endsection

@section('page_actions')
    @can('customers.edit')
        <a href="{{ route('customers.edit', $customer) }}" class="btn btn-light"><i class="fa-solid fa-pen ms-2"></i>تعديل</a>
    @endcan
    @can('vehicles.create')
        <a href="{{ route('vehicles.create', ['customer_id' => $customer->id]) }}" class="btn btn-light"><i class="fa-solid fa-car ms-2"></i>إضافة مركبة</a>
    @endcan
    @can('quotations.create')
        <a href="{{ route('quotations.create', ['customer_id' => $customer->id]) }}" class="btn btn-light"><i class="fa-solid fa-file-invoice ms-2"></i>عرض سعر</a>
    @endcan
    @can('invoices.create')
        <a href="{{ route('invoices.create', ['customer_id' => $customer->id]) }}" class="btn btn-primary"><i class="fa-solid fa-file-invoice-dollar ms-2"></i>فاتورة جديدة</a>
    @endcan
@endsection

@section('content')

<div class="row g-3 mb-3">
    <div class="col-md-3"><x-stat title="إجمالي الفواتير" :value="currency($totals['invoiced'])" icon="fa-file-invoice-dollar" color="primary"/></div>
    <div class="col-md-3"><x-stat title="إجمالي المحصّل" :value="currency($totals['paid'])" icon="fa-money-bill-wave" color="success"/></div>
    <div class="col-md-3"><x-stat title="الرصيد المستحق" :value="currency($totals['balance'])" :color="$totals['balance'] > 0 ? 'danger' : 'success'" icon="fa-hand-holding-dollar"/></div>
    <div class="col-md-3"><x-stat title="المركبات / الأجهزة" :value="$customer->vehicles->count() . ' / ' . $devices->count()" icon="fa-car" color="info"/></div>
</div>

<div class="row g-3">
    <div class="col-xl-4">
        <div class="card mb-3">
            <div class="card-body">
                <div class="profile-head mb-3">
                    <div class="profile-avatar">
                        <i class="fa-solid {{ $customer->type === 'company' ? 'fa-building' : 'fa-user' }}"></i>
                    </div>
                    <div>
                        <h2 class="h5 fw-bold mb-1">{{ $customer->display_name }}</h2>
                        <div class="text-muted small">{{ $customer->code }}</div>
                        <div class="mt-2">
                            {!! badge($customer->type_label, $customer->type === 'company' ? 'primary' : 'info') !!}
                            {!! badge($customer->status_label, $customer->status === 'active' ? 'success' : 'secondary') !!}
                        </div>
                    </div>
                </div>

                <ul class="detail-list">
                    @if ($customer->type === 'company')
                        <li><span class="dl-label">مسؤول التواصل</span><span class="dl-value">{{ $customer->name }}</span></li>
                    @endif
                    <li><span class="dl-label">الجوال</span><span class="dl-value"><a href="tel:{{ $customer->phone }}">{{ $customer->phone }}</a></span></li>
                    @if ($customer->phone2)
                        <li><span class="dl-label">رقم إضافي</span><span class="dl-value">{{ $customer->phone2 }}</span></li>
                    @endif
                    @if ($customer->whatsapp)
                        <li><span class="dl-label">واتساب</span>
                            <span class="dl-value">
                                <a href="https://wa.me/{{ preg_replace('/\D/', '', $customer->whatsapp) }}" target="_blank" class="text-success">
                                    <i class="fa-brands fa-whatsapp"></i> {{ $customer->whatsapp }}
                                </a>
                            </span>
                        </li>
                    @endif
                    <li><span class="dl-label">البريد</span><span class="dl-value">{{ $customer->email ?: '—' }}</span></li>
                    <li><span class="dl-label">رقم الهوية/السجل</span><span class="dl-value">{{ $customer->identity_number ?: '—' }}</span></li>
                    <li><span class="dl-label">الرقم الضريبي</span><span class="dl-value">{{ $customer->tax_number ?: '—' }}</span></li>
                    <li><span class="dl-label">المدينة</span><span class="dl-value">{{ $customer->city ?: '—' }}</span></li>
                    <li><span class="dl-label">العنوان</span><span class="dl-value">{{ $customer->address ?: '—' }}</span></li>
                    <li><span class="dl-label">المصدر</span><span class="dl-value">{{ \App\Models\Customer::SOURCES[$customer->source] ?? '—' }}</span></li>
                    <li><span class="dl-label">المسؤول</span><span class="dl-value">{{ $customer->assignee?->name ?? '—' }}</span></li>
                    <li><span class="dl-label">الحد الائتماني</span><span class="dl-value">{{ currency($customer->credit_limit) }}</span></li>
                    <li><span class="dl-label">تاريخ التسجيل</span><span class="dl-value">{{ arabicDate($customer->created_at) }}</span></li>
                </ul>

                @if ($customer->notes)
                    <div class="alert alert-light border small mt-3 mb-0" style="white-space: pre-line">{{ $customer->notes }}</div>
                @endif
            </div>
        </div>

        @if ($customer->type === 'company')
            <div class="card mb-3">
                <div class="card-header"><span><i class="fa-solid fa-address-book text-info ms-2"></i>جهات الاتصال</span></div>
                <div class="card-body">
                    @forelse ($customer->contacts as $contact)
                        <div class="d-flex justify-content-between align-items-start border-bottom pb-2 mb-2">
                            <div>
                                <div class="fw-bold small">{{ $contact->name }}</div>
                                <div class="text-muted small">{{ $contact->position }}</div>
                                <div class="small">{{ $contact->phone }} {{ $contact->email ? '· ' . $contact->email : '' }}</div>
                            </div>
                            @can('customers.edit')
                                <button class="btn btn-sm btn-outline-danger"
                                        onclick="confirmDelete('{{ route('customers.contacts.destroy', $contact) }}', 'حذف جهة الاتصال؟')">
                                    <i class="fa-solid fa-trash"></i>
                                </button>
                            @endcan
                        </div>
                    @empty
                        <p class="text-muted small mb-3">لا توجد جهات اتصال مسجّلة</p>
                    @endforelse

                    @can('customers.edit')
                        <form action="{{ route('customers.contacts.store', $customer) }}" method="POST" class="row g-2 mt-2">
                            @csrf
                            <div class="col-6"><input type="text" name="name" class="form-control form-control-sm" placeholder="الاسم" required></div>
                            <div class="col-6"><input type="text" name="position" class="form-control form-control-sm" placeholder="المسمى"></div>
                            <div class="col-6"><input type="text" name="phone" class="form-control form-control-sm" placeholder="الجوال"></div>
                            <div class="col-6"><input type="email" name="email" class="form-control form-control-sm" placeholder="البريد"></div>
                            <div class="col-12"><button class="btn btn-sm btn-primary w-100"><i class="fa-solid fa-plus ms-1"></i>إضافة جهة اتصال</button></div>
                        </form>
                    @endcan
                </div>
            </div>
        @endif
    </div>

    <div class="col-xl-8">
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs mb-3" role="tablist">
                    <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-vehicles">المركبات ({{ $customer->vehicles->count() }})</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-devices">الأجهزة ({{ $devices->count() }})</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-subs">الاشتراكات ({{ $subscriptions->count() }})</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-invoices">الفواتير ({{ $invoices->count() }})</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-payments">المدفوعات</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-quotations">العروض</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-installations">التركيبات</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-tickets">التذاكر</button></li>
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-activities">المتابعات</button></li>
                </ul>

                <div class="tab-content">
                    {{-- المركبات --}}
                    <div class="tab-pane fade show active" id="tab-vehicles">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>اللوحة</th><th>المركبة</th><th>النوع</th><th>السائق</th><th class="text-center">الأجهزة</th></tr></thead>
                                <tbody>
                                @forelse ($customer->vehicles as $vehicle)
                                    <tr>
                                        <td><a href="{{ route('vehicles.show', $vehicle) }}" class="fw-bold text-decoration-none">{{ $vehicle->plate_number }}</a></td>
                                        <td>{{ trim($vehicle->make . ' ' . $vehicle->model) }} <span class="text-muted small">{{ $vehicle->year }}</span></td>
                                        <td>{{ $vehicle->type_label }}</td>
                                        <td>{{ $vehicle->driver_name ?: '—' }}</td>
                                        <td class="text-center">{!! badge($vehicle->device_units_count . ' جهاز', $vehicle->device_units_count ? 'success' : 'secondary') !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-4">لا توجد مركبات</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- الأجهزة --}}
                    <div class="tab-pane fade" id="tab-devices">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>IMEI</th><th>الجهاز</th><th>الشريحة</th><th>المركبة</th><th class="text-center">الحالة</th></tr></thead>
                                <tbody>
                                @forelse ($devices as $device)
                                    <tr>
                                        <td><a href="{{ route('devices.show', $device) }}" class="fw-bold text-decoration-none font-monospace">{{ $device->imei }}</a></td>
                                        <td>{{ $device->product?->name ?? '—' }}</td>
                                        <td>{{ $device->sim_number ?: '—' }}</td>
                                        <td>{{ $device->vehicle?->plate_number ?? '—' }}</td>
                                        <td class="text-center">{!! badge($device->status_label, $device->status_color) !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-4">لا توجد أجهزة</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- الاشتراكات --}}
                    <div class="tab-pane fade" id="tab-subs">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>الكود</th><th>المركبة</th><th>البداية</th><th>الانتهاء</th><th>القيمة</th><th class="text-center">الحالة</th></tr></thead>
                                <tbody>
                                @forelse ($subscriptions as $sub)
                                    <tr>
                                        <td><a href="{{ route('subscriptions.show', $sub) }}" class="fw-bold text-decoration-none">{{ $sub->code }}</a></td>
                                        <td>{{ $sub->vehicle?->plate_number ?? '—' }}</td>
                                        <td>{{ arabicDate($sub->start_date) }}</td>
                                        <td class="{{ $sub->days_remaining < 0 ? 'text-danger fw-bold' : ($sub->days_remaining <= 30 ? 'text-warning fw-bold' : '') }}">
                                            {{ arabicDate($sub->end_date) }}
                                        </td>
                                        <td>{{ currency($sub->amount) }}</td>
                                        <td class="text-center">{!! badge($sub->status_label, $sub->status_color) !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center text-muted py-4">لا توجد اشتراكات</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- الفواتير --}}
                    <div class="tab-pane fade" id="tab-invoices">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>الرقم</th><th>التاريخ</th><th>الإجمالي</th><th>المدفوع</th><th>المتبقي</th><th class="text-center">الحالة</th></tr></thead>
                                <tbody>
                                @forelse ($invoices as $invoice)
                                    <tr>
                                        <td><a href="{{ route('invoices.show', $invoice) }}" class="fw-bold text-decoration-none">{{ $invoice->code }}</a></td>
                                        <td>{{ arabicDate($invoice->date) }}</td>
                                        <td class="fw-bold">{{ currency($invoice->total) }}</td>
                                        <td>{{ currency($invoice->paid_amount) }}</td>
                                        <td class="{{ $invoice->remaining > 0 ? 'text-danger fw-bold' : 'text-success' }}">{{ currency($invoice->remaining) }}</td>
                                        <td class="text-center">{!! badge($invoice->status_label, $invoice->status_color) !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-center text-muted py-4">لا توجد فواتير</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- المدفوعات --}}
                    <div class="tab-pane fade" id="tab-payments">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>السند</th><th>التاريخ</th><th>الفاتورة</th><th>المبلغ</th><th>الطريقة</th></tr></thead>
                                <tbody>
                                @forelse ($payments as $payment)
                                    <tr>
                                        <td class="font-monospace">{{ $payment->code }}</td>
                                        <td>{{ arabicDate($payment->date) }}</td>
                                        <td>{{ $payment->invoice?->code ?? '—' }}</td>
                                        <td class="fw-bold text-success">{{ currency($payment->amount) }}</td>
                                        <td>{!! badge($payment->method_label, 'info') !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-4">لا توجد مدفوعات</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- عروض الأسعار --}}
                    <div class="tab-pane fade" id="tab-quotations">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>الرقم</th><th>التاريخ</th><th>صالح حتى</th><th>الإجمالي</th><th class="text-center">الحالة</th></tr></thead>
                                <tbody>
                                @forelse ($quotations as $q)
                                    <tr>
                                        <td><a href="{{ route('quotations.show', $q) }}" class="fw-bold text-decoration-none">{{ $q->code }}</a></td>
                                        <td>{{ arabicDate($q->date) }}</td>
                                        <td>{{ arabicDate($q->valid_until) }}</td>
                                        <td class="fw-bold">{{ currency($q->total) }}</td>
                                        <td class="text-center">{!! badge($q->status_label, $q->status_color) !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-4">لا توجد عروض أسعار</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- التركيبات --}}
                    <div class="tab-pane fade" id="tab-installations">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>الرقم</th><th>المركبة</th><th>الفني</th><th>الموعد</th><th class="text-center">الحالة</th></tr></thead>
                                <tbody>
                                @forelse ($installations as $inst)
                                    <tr>
                                        <td><a href="{{ route('installations.show', $inst) }}" class="fw-bold text-decoration-none">{{ $inst->code }}</a></td>
                                        <td>{{ $inst->vehicle?->plate_number ?? '—' }}</td>
                                        <td>{{ $inst->technician?->name ?? '—' }}</td>
                                        <td>{{ arabicDate($inst->scheduled_at, true) }}</td>
                                        <td class="text-center">{!! badge($inst->status_label, $inst->status_color) !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-4">لا توجد أوامر تركيب</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- التذاكر --}}
                    <div class="tab-pane fade" id="tab-tickets">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light"><tr><th>الرقم</th><th>الموضوع</th><th>الأولوية</th><th>التاريخ</th><th class="text-center">الحالة</th></tr></thead>
                                <tbody>
                                @forelse ($tickets as $ticket)
                                    <tr>
                                        <td><a href="{{ route('tickets.show', $ticket) }}" class="fw-bold text-decoration-none">{{ $ticket->code }}</a></td>
                                        <td>{{ $ticket->subject }}</td>
                                        <td>{!! badge($ticket->priority_label, $ticket->priority_color) !!}</td>
                                        <td>{{ arabicDate($ticket->created_at) }}</td>
                                        <td class="text-center">{!! badge($ticket->status_label, $ticket->status_color) !!}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="5" class="text-center text-muted py-4">لا توجد تذاكر</td></tr>
                                @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- المتابعات --}}
                    <div class="tab-pane fade" id="tab-activities">
                        @can('activities.create')
                            <a href="{{ route('activities.create', ['subject_type' => \App\Models\Customer::class, 'subject_id' => $customer->id]) }}"
                               class="btn btn-sm btn-primary mb-3"><i class="fa-solid fa-plus ms-1"></i>إضافة متابعة</a>
                        @endcan
                        @include('activities._timeline', ['activities' => $activities])
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection