@extends('layouts.app')
@section('title', 'Customer Details')
@php $breadcrumbs = [['label' => 'Masters', 'url' => route('masters.customers.index')], ['label' => 'Customers', 'url' => route('masters.customers.index')], ['label' => $customer->name ?? '']]; @endphp

@section('content')
<div class="d-flex flex-wrap align-items-center justify-content-between mb-3">
    <div>
        <h4 class="fw-bold mb-1">{{ $customer->name ?? 'Customer' }}</h4>
        <p class="text-muted mb-0" style="font-size:0.85rem;">Code: {{ $customer->code ?? '' }} | {{ ucfirst($customer->type ?? '') }}</p>
    </div>
    <div class="d-flex gap-2">
        @can('customers.edit')
            <a href="{{ route('masters.customers.edit', $customer->id ?? 0) }}" class="btn btn-primary btn-sm"><i class="bi bi-pencil me-1"></i>Edit</a>
        @endcan
        <a href="{{ route('masters.customers.index') }}" class="btn btn-outline-secondary btn-sm"><i class="bi bi-arrow-left me-1"></i>Back</a>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body"><h6 class="card-title mb-0 fw-semibold"><i class="bi bi-person me-2 text-primary"></i>General Information</h6></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4"><small class="text-muted d-block">Customer Code</small><span class="fw-medium">{{ $customer->code ?? '' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Type</small><x-status-badge :status="$customer->type ?? 'buyer'" type="default" /></div>
                    <div class="col-md-4"><small class="text-muted d-block">Status</small><x-status-badge :status="($customer->is_active ?? true) ? 'active' : 'inactive'" type="default" /></div>
                    <div class="col-md-4"><small class="text-muted d-block">Group</small><span class="fw-medium">{{ ucfirst($customer->group ?? 'Domestic') }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Industry</small><span>{{ $customer->industry ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Currency</small><span>{{ $customer->currency->code ?? 'INR' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">GSTIN</small><span class="font-monospace" style="font-size:0.82rem;">{{ $customer->gstin ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">PAN</small><span class="font-monospace" style="font-size:0.82rem;">{{ $customer->pan ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">IEC Code</small><span class="font-monospace" style="font-size:0.82rem;">{{ $customer->iec_code ?? 'N/A' }}</span></div>
                </div>
            </div>
        </div>

        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body"><h6 class="card-title mb-0 fw-semibold"><i class="bi bi-telephone me-2 text-success"></i>Contact Information</h6></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4"><small class="text-muted d-block">Contact Person</small><span class="fw-medium">{{ $customer->contact_person ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Designation</small><span>{{ $customer->designation ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Department</small><span>{{ $customer->department ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Email</small><a href="mailto:{{ $customer->email ?? '' }}">{{ $customer->email ?? 'N/A' }}</a></div>
                    <div class="col-md-4"><small class="text-muted d-block">Phone</small><a href="tel:{{ $customer->phone ?? '' }}">{{ $customer->phone ?? 'N/A' }}</a></div>
                    <div class="col-md-4"><small class="text-muted d-block">Mobile</small><span>{{ $customer->mobile ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">Fax</small><span>{{ $customer->fax ?? 'N/A' }}</span></div>
                    <div class="col-md-4"><small class="text-muted d-block">WhatsApp</small><span>{{ $customer->whatsapp ?? 'N/A' }}</span></div>
                </div>
            </div>
        </div>

        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body"><h6 class="card-title mb-0 fw-semibold"><i class="bi bi-wallet2 me-2 text-warning"></i>Financial Information</h6></div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3"><small class="text-muted d-block">Credit Limit</small><span class="fw-bold">₹{{ number_format($customer->credit_limit ?? 0, 2) }}</span></div>
                    <div class="col-md-3"><small class="text-muted d-block">Credit Days</small><span>{{ $customer->credit_days ?? 0 }} days</span></div>
                    <div class="col-md-3"><small class="text-muted d-block">TDS Section</small><span>{{ $customer->tds_section ?? 'N/A' }}</span></div>
                    <div class="col-md-3"><small class="text-muted d-block">Outstanding</small><span class="fw-bold text-danger">₹{{ number_format($customer->outstanding ?? 0, 2) }}</span></div>
                </div>
            </div>
        </div>

        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body d-flex justify-content-between align-items-center">
                <h6 class="card-title mb-0 fw-semibold"><i class="bi bi-truck me-2 text-info"></i>Recent Shipments</h6>
                <a href="{{ route('export.shipments.index', ['customer_id' => $customer->id ?? 0]) }}" class="text-primary text-decoration-none" style="font-size:0.82rem;">View All</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="bg-body-tertiary"><tr><th>Shipment #</th><th>Date</th><th>Destination</th><th>Status</th></tr></thead>
                        <tbody>
                            @forelse($customer->shipments->take(5) ?? [] as $shipment)
                                <tr>
                                    <td><a href="{{ route('export.shipments.show', $shipment->id) }}">{{ $shipment->shipment_number }}</a></td>
                                    <td>{{ $shipment->created_at->format('d M Y') }}</td>
                                    <td>{{ $shipment->destination_port->name ?? '' }}</td>
                                    <td><x-status-badge :status="$shipment->status" type="shipment" /></td>
                                </tr>
                            @empty
                                <tr><td colspan="4" class="text-center text-muted py-3">No shipments found</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body"><h6 class="card-title mb-0 fw-semibold"><i class="bi bi-geo-alt me-2 text-danger"></i>Address</h6></div>
            <div class="card-body">
                <address style="font-size:0.85rem;line-height:1.6;">
                    {{ $customer->address_line1 ?? '' }}<br>
                    @if($customer->address_line2 ?? false){{ $customer->address_line2 }}<br>@endif
                    {{ $customer->city->name ?? '' }}{{ ($customer->city ?? false) && ($customer->state ?? false) ? ', ' : '' }}{{ $customer->state->name ?? '' }}<br>
                    {{ $customer->country->name ?? '' }} - {{ $customer->pincode ?? '' }}
                </address>
            </div>
        </div>

        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body"><h6 class="card-title mb-0 fw-semibold"><i class="bi bi-bank me-2 text-primary"></i>Bank Details</h6></div>
            <div class="card-body">
                <div class="mb-2"><small class="text-muted d-block">Bank</small><span>{{ $customer->bank_name ?? 'N/A' }}</span></div>
                <div class="mb-2"><small class="text-muted d-block">Account No</small><span class="font-monospace" style="font-size:0.82rem;">{{ $customer->bank_account ?? 'N/A' }}</span></div>
                <div class="mb-2"><small class="text-muted d-block">IFSC</small><span class="font-monospace" style="font-size:0.82rem;">{{ $customer->bank_ifsc ?? 'N/A' }}</span></div>
                <div class="mb-0"><small class="text-muted d-block">Swift</small><span class="font-monospace" style="font-size:0.82rem;">{{ $customer->swift_code ?? 'N/A' }}</span></div>
            </div>
        </div>

        <div class="card border shadow-sm mb-3">
            <div class="card-header bg-body"><h6 class="card-title mb-0 fw-semibold"><i class="bi bi-clock-history me-2 text-secondary"></i>Activity</h6></div>
            <div class="card-body">
                <div class="mb-2"><small class="text-muted">Created</small><div style="font-size:0.85rem;">{{ ($customer->created_at ?? now())->format('d M Y, h:i A') }}</div></div>
                <div class="mb-2"><small class="text-muted">Last Updated</small><div style="font-size:0.85rem;">{{ ($customer->updated_at ?? now())->format('d M Y, h:i A') }}</div></div>
                <div class="mb-0"><small class="text-muted">Created By</small><div style="font-size:0.85rem;">{{ $customer->creator->name ?? 'System' }}</div></div>
            </div>
        </div>

        <div class="card border shadow-sm">
            <div class="card-body">
                @can('customers.delete')
                    <x-confirm-delete action="{{ route('masters.customers.destroy', $customer->id ?? 0) }}" itemName="{{ $customer->name ?? 'this customer' }}" />
                @endcan
            </div>
        </div>
    </div>
</div>
@endsection