@extends('garage.layouts.app')

@section('title', 'Customer Profile')

@section('content')
@php
    $vehicles = collect($vehicles ?? []);
    $documents = collect($documents ?? []);
    $ledgerRows = collect($ledgerRows ?? []);
    $stats = $stats ?? [];
    $closing = (float)($ledgerTotals['balance'] ?? 0);
    $displayName = trim(($customer->name ?? '') . ' ' . ($customer->last_name ?? ''));
    if ($displayName === '') {
        $displayName = $customer_label ?? 'Customer';
    }
    $initial = strtoupper(mb_substr($displayName, 0, 1));
@endphp
@include('shared.folder-tabs-styles')

<style>
    .customer-profile { overflow-x: clip; max-width: 100%; }
    .customer-profile .tab-content, .customer-profile .tab-pane { max-width: 100%; overflow-x: hidden; }
    .customer-profile .profile-head {
        border: 0;
        background: linear-gradient(135deg, #0f172a 0%, #134e4a 55%, #0d9488 100%);
        color: #fff;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
    }
    .customer-profile .profile-chip {
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.12);
        padding: 10px 12px;
    }
    .customer-profile .profile-chip .label { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: .04em; }
    .customer-profile .profile-chip .value { font-weight: 600; font-size: 13px; }
    .customer-profile .folder-tabs-shell.folder-tabs-shell--teal {
        border-radius: 14px;
        border: 1px solid #e2e8f0;
        padding: 3px 3px 0;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
        background: #f8fafc;
    }
    .customer-profile .folder-tabs-shell .folder-tabs .nav-link { font-size: 0.72rem; padding: 0.55rem 0.95rem 0.62rem; }
    .customer-profile .tab-pane .card { border-radius: 14px; }
    .customer-profile .tab-pane .card-header { border-bottom: 1px solid #eef2f7; font-weight: 700; }
    .customer-profile .table thead th {
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .04em;
        color: #64748b;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }
</style>

<div class="container-fluid px-0 py-0 w-100 customer-profile">
    <div class="card profile-head mb-3">
        <div class="card-body">
            <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
                <div class="d-flex align-items-center gap-3">
                    <div class="rounded-circle d-flex align-items-center justify-content-center" style="width:58px;height:58px;background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:22px;">
                        {{ $initial }}
                    </div>
                    <div>
                        <div class="h4 mb-0">{{ $displayName }}</div>
                        <div class="small">{{ $customer->code ?: 'No code' }}@if(!empty($customer->contact_person)) · {{ $customer->contact_person }}@endif</div>
                    </div>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    <a href="{{ route('garage.customers.edit', $customer->id) }}" class="btn btn-sm btn-light"><i class="bi bi-pencil-square me-1"></i>Edit</a>
                    <a href="{{ $ledgerStatementUrl }}" class="btn btn-sm btn-light"><i class="bi bi-journal-text me-1"></i>Full Statement</a>
                    <a href="{{ route('garage.ledger-merges.index', ['ledger_type' => 'customer', 'tab' => 'merge']) }}" class="btn btn-sm btn-outline-warning text-dark"><i class="bi bi-diagram-2 me-1"></i>Merge / transfer</a>
                    <a href="{{ route('garage.customers.index') }}" class="btn btn-sm btn-light">Back</a>
                </div>
            </div>

            <div class="row g-2 mt-2">
                <div class="col-md-3 col-6"><div class="profile-chip"><div class="label">Phone</div><div class="value">{{ $customer->phone ?: '—' }}</div></div></div>
                <div class="col-md-3 col-6"><div class="profile-chip"><div class="label">Email</div><div class="value">{{ $customer->email ?: '—' }}</div></div></div>
                <div class="col-md-3 col-6"><div class="profile-chip"><div class="label">Vehicles</div><div class="value">{{ (int)($stats['vehicles'] ?? 0) }}</div></div></div>
                <div class="col-md-3 col-6">
                    <div class="profile-chip">
                        <div class="label">Ledger Balance</div>
                        <div class="value">{{ number_format(abs($closing), 2) }} {{ $closing >= 0 ? 'Dr' : 'Cr' }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="folder-tabs-shell folder-tabs-shell--teal mb-2">
        <div class="folder-tabs-rail-scroll">
            <ul class="nav folder-tabs" role="tablist">
                <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-general" type="button"><i class="bi bi-person-vcard me-1"></i>General</button></li>
                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-vehicles" type="button"><i class="bi bi-car-front me-1"></i>Vehicles</button></li>
                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-visits" type="button"><i class="bi bi-receipt me-1"></i>Visits &amp; Invoices</button></li>
                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-ledger" type="button"><i class="bi bi-journal-text me-1"></i>Ledger</button></li>
            </ul>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="tab-general">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white fw-semibold">General Information</div>
                    <div class="card-body">
                        <div class="row g-2 small">
                            <div class="col-md-4"><strong>Code:</strong> {{ $customer->code ?: '—' }}</div>
                            <div class="col-md-4"><strong>Contact person:</strong> {{ $customer->contact_person ?: '—' }}</div>
                            <div class="col-md-4"><strong>Status:</strong> {{ !empty($customer->is_active) ? 'Active' : 'Inactive' }}</div>
                            <div class="col-md-4"><strong>Phone:</strong> {{ $customer->phone ?: '—' }}</div>
                            <div class="col-md-4"><strong>Email:</strong> {{ $customer->email ?: '—' }}</div>
                            <div class="col-md-4"><strong>Tax number:</strong> {{ $customer->tax_number ?? '—' }}</div>
                            <div class="col-md-4"><strong>Credit limit:</strong> PKR {{ number_format((float)($customer->credit_limit ?? 0), 2) }}</div>
                            <div class="col-md-4"><strong>Opening balance:</strong> PKR {{ number_format((float)($customer->opening_balance ?? 0), 2) }}</div>
                            <div class="col-12"><strong>Address:</strong> {{ $customer->address ?: '—' }}</div>
                            <div class="col-12"><strong>Description:</strong> {{ $customer->description ?? '—' }}</div>
                        </div>
                        <hr class="my-3">
                        <div class="d-flex flex-wrap gap-2 small text-muted">
                            <span class="badge bg-light text-dark border">Estimates: {{ (int)($stats['estimates'] ?? 0) }}</span>
                            <span class="badge bg-light text-dark border">{{ $glOrders ?? 'Orders' }}: {{ (int)($stats['repair_orders'] ?? 0) }}</span>
                            <span class="badge bg-light text-dark border">Sales: {{ (int)($stats['sales'] ?? 0) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-vehicles">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white fw-semibold d-flex justify-content-between align-items-center">
                        <span>Vehicles</span>
                        <a href="{{ route('garage.customers.edit', $customer->id) }}" class="btn btn-sm btn-outline-primary">Manage on edit screen</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Plate</th>
                                    <th>Make / Model</th>
                                    <th>Year</th>
                                    <th>Current reading</th>
                                    <th>Next service</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($vehicles as $v)
                                    <tr>
                                        <td class="fw-semibold">{{ $v->registration_number ?: '—' }}</td>
                                        <td>{{ trim(implode(' ', array_filter([$v->make, $v->model]))) ?: '—' }}</td>
                                        <td>{{ $v->year ?: '—' }}</td>
                                        <td>{{ $v->odometer_reading !== null && $v->odometer_reading !== '' ? number_format((float)$v->odometer_reading) : '—' }}</td>
                                        <td>
                                            @if($v->next_service_date)
                                                {{ $v->next_service_date }}
                                            @elseif($v->next_service_meter_reading)
                                                @ {{ number_format((float)$v->next_service_meter_reading) }}
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td>{{ !empty($v->is_active) ? 'Active' : 'Inactive' }}</td>
                                    </tr>
                                @empty
                                    <tr><td colspan="6" class="text-muted">No vehicles registered for this customer.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-visits">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white fw-semibold">Estimates, {{ strtolower($glOrders ?? 'orders') }} &amp; sales</div>
                    <div class="table-responsive">
                        <table class="table table-sm mb-0">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Number</th>
                                    <th>Date</th>
                                    <th>Vehicle</th>
                                    <th>Reading</th>
                                    <th class="text-end">Amount</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($documents as $doc)
                                    <tr>
                                        <td><span class="badge bg-secondary-subtle text-secondary border">{{ $doc->source_label ?? $doc->source_type }}</span></td>
                                        <td>{{ $doc->document_number ?: '—' }}</td>
                                        <td>{{ $doc->document_date ?: '—' }}</td>
                                        <td>{{ $doc->vehicle_label ?: '—' }}</td>
                                        <td>{{ $doc->meter_reading ?? '—' }}</td>
                                        <td class="text-end">{{ number_format((float)($doc->grand_total ?? 0), 2) }}</td>
                                        <td class="text-end">
                                            @if(!empty($doc->show_url))
                                                <a href="{{ $doc->show_url }}" class="btn btn-sm btn-outline-primary">Open</a>
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    <tr><td colspan="7" class="text-muted">No estimates, {{ strtolower($glOrders ?? 'orders') }}, or sales yet.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="tab-ledger">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white fw-semibold d-flex flex-wrap justify-content-between gap-2">
                        <span>Ledger balance</span>
                        <a href="{{ $ledgerStatementUrl }}" class="btn btn-outline-secondary btn-sm">Open full statement</a>
                    </div>
                    <div class="card-body small">
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            <span class="badge bg-success-subtle text-success border">Dr: {{ number_format((float)($ledgerTotals['dr'] ?? 0), 2) }}</span>
                            <span class="badge bg-danger-subtle text-danger border">Cr: {{ number_format((float)($ledgerTotals['cr'] ?? 0), 2) }}</span>
                            <span class="badge bg-primary-subtle text-primary border">Closing: {{ number_format(abs($closing), 2) }} {{ $closing >= 0 ? 'Dr' : 'Cr' }}</span>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-sm mb-0">
                                <thead><tr><th>Date</th><th>Voucher</th><th>Type</th><th class="text-end">Dr</th><th class="text-end">Cr</th><th>Narration</th></tr></thead>
                                <tbody>
                                    @forelse($ledgerRows as $r)
                                        @php
                                            $dr = ($r->transaction_type ?? '') === 'debit' ? (float)($r->amount ?? 0) : 0;
                                            $cr = ($r->transaction_type ?? '') === 'credit' ? (float)($r->amount ?? 0) : 0;
                                        @endphp
                                        <tr>
                                            <td>{{ $r->voucher_date ?: '—' }}</td>
                                            <td>
                                                @if(!empty($r->voucher_id))
                                                    <a class="text-decoration-none" href="{{ route('garage.vouchers.show', $r->voucher_id) }}">{{ $r->voucher_no ?: '—' }}</a>
                                                @else
                                                    {{ $r->voucher_no ?: '—' }}
                                                @endif
                                            </td>
                                            <td>{{ $r->voucher_type ?: '—' }}</td>
                                            <td class="text-end">{{ $dr > 0 ? number_format($dr, 2) : '—' }}</td>
                                            <td class="text-end">{{ $cr > 0 ? number_format($cr, 2) : '—' }}</td>
                                            <td>
                                                <div>{{ $r->narration ?: '—' }}</div>
                                                @if(!empty($r->against_text))
                                                    <div class="text-muted small">Against: {{ $r->against_text }}</div>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr><td colspan="6" class="text-muted">No ledger transactions found.</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection