@extends('layouts.app')
@section('title', $customer->name)

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('customers.index') }}">Customers</a></li>
            <li class="breadcrumb-item active">{{ $customer->name }}</li>
        </ol>
    </nav>
    <div class="d-flex gap-2">
        <a href="{{ route('customers.documents.hub', $customer) }}" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-file-earmark-text me-1"></i>Invoices & Receipts
        </a>
        @haspermission('customers.edit')
        <a href="{{ route('customers.edit', $customer) }}" class="btn btn-primary btn-sm">
            <i class="bi bi-pencil me-1"></i>Edit
        </a>
        @endhaspermission
        @haspermission('customers.delete')
        <form action="{{ route('customers.destroy', $customer) }}" method="POST" class="d-inline"
            onsubmit="return confirm('Are you sure you want to delete this customer?')">
            @csrf @method('DELETE')
            <button class="btn btn-outline-danger btn-sm">
                <i class="bi bi-trash me-1"></i>Delete
            </button>
        </form>
        @endhaspermission
    </div>
</div>

<div class="row g-3">
    {{-- ── Profile Card ── --}}
    <div class="col-xl-4">
        <div class="card">
            <div class="card-body text-center py-4">
                @if($customer->photo)
                    <img src="{{ $customer->photo_url }}" alt="{{ $customer->name }}" width="100" height="100"
                        class="rounded-circle mb-3" style="object-fit: cover; border: 3px solid var(--primary-light);">
                @else
                    <div
                        style="width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg, var(--primary), hsl(260,80%,55%));color:white;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:700;margin:0 auto 16px;">
                        {{ $customer->initial }}
                    </div>
                @endif
                <h5 class="fw-bold mb-1">{{ $customer->name }}</h5>
                @if($customer->father_name)
                    <p class="text-muted mb-2">s/o {{ $customer->father_name }}</p>
                @endif
                <span
                    class="badge {{ $customer->customer_type === 'buyer' ? 'bg-primary' : ($customer->customer_type === 'installment_buyer' ? 'bg-warning text-dark' : 'bg-success') }}">
                    {{ $customer->type_label }}
                </span>
                <span class="badge {{ $customer->is_active ? 'badge-active' : 'badge-inactive' }} ms-1">
                    {{ $customer->is_active ? 'Active' : 'Inactive' }}
                </span>
                <p class="mt-3 mb-0">
                    <a href="tel:{{ $customer->mobile }}" class="text-decoration-none">
                        <i class="bi bi-telephone-fill me-1"></i>{{ $customer->mobile }}
                    </a>
                </p>
                @if($customer->email)
                    <p class="text-muted" style="font-size: 0.85rem;">
                        <i class="bi bi-envelope-fill me-1"></i>{{ $customer->email }}
                    </p>
                @endif
            </div>
        </div>

        {{-- ── Documents Card ── --}}
        <div class="card mt-3">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span><i class="bi bi-paperclip me-2"></i>Documents</span>
                <span class="badge bg-secondary">{{ count($customer->documents ?? []) }}</span>
            </div>
            <div class="card-body">
                @if($customer->documents && count($customer->documents))
                @foreach($customer->documents as $index => $doc)
                <div class="d-flex align-items-center justify-content-between mb-2 py-1">
                    <div class="d-flex align-items-center gap-2" style="min-width: 0;">
                        @php $ext = pathinfo($doc, PATHINFO_EXTENSION); @endphp
                        <i
                            class="bi {{ $ext === 'pdf' ? 'bi-file-earmark-pdf text-danger' : 'bi-file-earmark-image text-primary' }}"></i>
                        <a href="{{ asset('storage/' . $doc) }}" target="_blank"
                            class="text-decoration-none text-truncate" style="font-size: 0.82rem;">
                            {{ basename($doc) }}
                        </a>
                    </div>
                    @haspermission('customers.edit')
                            <form action="{{ route('customers.documents.remove', [$customer, $index]) }}" method="POST"
                                onsubmit="return confirm('Remove?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-link text-danger p-0"><i class="bi bi-x-circle"
                                        style="font-size: 0.85rem;"></i></button>
                            </form>
                            @endhaspermission
                        </div>
                        @endforeach
                    @else
                <p class="text-muted mb-0" style="font-size: 0.85rem;">No documents uploaded.</p>
                @endif

                @haspermission('customers.edit')
                <hr class="my-2">
                <form action="{{ route('customers.documents.upload', $customer) }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="input-group input-group-sm">
                        <input type="file" name="documents[]" class="form-control" multiple
                            accept=".pdf,.jpg,.jpeg,.png">
                        <button class="btn btn-outline-primary" type="submit"><i class="bi bi-upload"></i></button>
                    </div>
                    <small class="text-muted">PDF/JPG/PNG, max 5 MB each</small>
                </form>
                @endhaspermission
            </div>
        </div>
    </div>

    {{-- ── Right Column ── --}}
    <div class="col-xl-8">
        {{-- ── Details Card ── --}}
        <div class="card">
            <div class="card-header"><i class="bi bi-person-lines-fill me-2"></i>Customer Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-sm-4">
                        <small class="text-muted d-block">NID</small>
                        <span>{{ $customer->nid ?? '—' }}</span>
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted d-block">Date of Birth</small>
                        <span>{{ $customer->date_of_birth ? $customer->date_of_birth->format('d M Y') : '—' }}</span>
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted d-block">Mother's Name</small>
                        <span>{{ $customer->mother_name ?? '—' }}</span>
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted d-block">Occupation</small>
                        <span>{{ $customer->occupation ?? '—' }}</span>
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted d-block">City</small>
                        <span>{{ $customer->city ?? '—' }}</span>
                    </div>
                    <div class="col-sm-4">
                        <small class="text-muted d-block">Registration Date</small>
                        <span>{{ $customer->effective_registration_date->format('d M Y') }}</span>
                    </div>
                    <div class="col-12">
                        <small class="text-muted d-block">Address</small>
                        <span>{{ $customer->address ?? '—' }}</span>
                    </div>

                    @if($customer->nominee_name)
                        <div class="col-12">
                            <hr class="my-2">
                        </div>
                        <div class="col-12">
                            <h6 class="text-muted mb-0"><i class="bi bi-person-check me-1"></i>Nominee</h6>
                        </div>
                        <div class="col-sm-3">
                            <small class="text-muted d-block">Name</small>
                            <span>{{ $customer->nominee_name }}</span>
                        </div>
                        <div class="col-sm-3">
                            <small class="text-muted d-block">NID</small>
                            <span>{{ $customer->nominee_nid ?? '—' }}</span>
                        </div>
                        <div class="col-sm-3">
                            <small class="text-muted d-block">Mobile</small>
                            <span>{{ $customer->nominee_mobile ?? '—' }}</span>
                        </div>
                        <div class="col-sm-3">
                            <small class="text-muted d-block">Relation</small>
                            <span>{{ $customer->nominee_relation ?? '—' }}</span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- ── Linked Flats (Bookings & Sales) ── --}}
        <div class="card mt-3">
            <div class="card-header"><i class="bi bi-house-door me-2"></i>Linked Flats</div>
            <div class="card-body p-0">
                @php
                    $linkedBookings = $customer->bookings ?? collect();
                    $linkedSales = $customer->sales ?? collect();
                    $hasLinks = $linkedBookings->count() || $linkedSales->count();
                @endphp

                @if($hasLinks)
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>Type</th>
                                    <th>Flat</th>
                                    <th>Project</th>
                                    <th>Building</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($linkedBookings as $booking)
                                    <tr>
                                        <td><span class="badge bg-info">Booking</span></td>
                                        <td>{{ $booking->flat->flat_number ?? '—' }}</td>
                                        <td>{{ $booking->flat->project->project_name ?? '—' }}</td>
                                        <td>{{ $booking->flat->building->building_name ?? '—' }}</td>
                                        <td>
                                            <span class="badge badge-{{ $booking->status ?? 'booked' }}">
                                                {{ ucfirst($booking->status ?? 'booked') }}
                                            </span>
                                        </td>
                                        <td>{{ $booking->created_at->format('d M Y') }}</td>
                                    </tr>
                                @endforeach
                                @foreach($linkedSales as $sale)
                                    <tr>
                                        <td><span class="badge bg-primary">Sale</span></td>
                                        <td>{{ $sale->flat->flat_number ?? '—' }}</td>
                                        <td>{{ $sale->flat->project->project_name ?? '—' }}</td>
                                        <td>{{ $sale->flat->building->building_name ?? '—' }}</td>
                                        <td>
                                            <span class="badge badge-{{ $sale->status ?? 'active' }}">
                                                {{ ucfirst($sale->status ?? 'active') }}
                                            </span>
                                        </td>
                                        <td>{{ $sale->created_at->format('d M Y') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state py-4">
                        <i class="bi bi-house" style="font-size: 2rem;"></i>
                        <p class="text-muted mb-0">No flats linked yet.</p>
                    </div>
                @endif
            </div>
        </div>

        {{-- ── Ledger Summary ── --}}
        <div class="card mt-3">
            <div class="card-header"><i class="bi bi-journal-text me-2"></i>Ledger Summary</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-sm-4">
                        <div class="stat-card stat-primary">
                            <div class="stat-icon"><i class="bi bi-cash-stack"></i></div>
                            <div class="stat-info">
                                <h3 id="ledger-total-payable">৳ {{ number_format($ledger['total_payable'], 2) }}</h3>
                                <p>Total Payable</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="stat-card stat-success">
                            <div class="stat-icon"><i class="bi bi-check-circle"></i></div>
                            <div class="stat-info">
                                <h3 id="ledger-total-paid">৳ {{ number_format($ledger['total_paid'], 2) }}</h3>
                                <p>Total Paid</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="stat-card {{ $ledger['outstanding'] > 0 ? 'stat-danger' : 'stat-success' }}">
                            <div class="stat-icon">
                                <i
                                    class="bi {{ $ledger['outstanding'] > 0 ? 'bi-exclamation-circle' : 'bi-check-circle-fill' }}"></i>
                            </div>
                            <div class="stat-info">
                                <h3 id="ledger-balance">৳ {{ number_format($ledger['outstanding'], 2) }}</h3>
                                <p>Outstanding Balance</p>
                            </div>
                        </div>
                    </div>
                </div>
                @if($ledger['total_payable'] == 0)
                    <div class="text-center mt-3">
                        <small class="text-muted">
                            <i class="bi bi-info-circle me-1"></i>Ledger details will populate after sales &
                            installments are set up.
                        </small>
                    </div>
                @endif
            </div>
        </div>

        {{-- ── Installment Schedule (placeholder) ── --}}
        <div class="card mt-3">
            <div class="card-header d-flex align-items-center justify-content-between">
                <span><i class="bi bi-calendar3 me-2"></i>Installment Schedule</span>
                @if(($customer->installments ?? collect())->count())
                    <span class="badge bg-secondary">{{ $customer->installments->count() }} installments</span>
                @endif
            </div>
            <div class="card-body p-0">
                @if(($customer->installments ?? collect())->count())
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Due Date</th>
                                    <th class="text-end">Amount Due</th>
                                    <th class="text-end">Paid</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($customer->installments as $inst)
                                    <tr>
                                        <td class="text-muted">{{ $inst->installment_number ?? $loop->iteration }}</td>
                                        <td>{{ $inst->due_date->format('d M Y') }}</td>
                                        <td class="text-end fw-semibold">৳ {{ number_format((float) $inst->amount_due, 2) }}
                                        </td>
                                        <td class="text-end {{ (float) $inst->amount_paid > 0 ? 'text-success' : '' }}">
                                            ৳ {{ number_format((float) $inst->amount_paid, 2) }}
                                        </td>
                                        <td>
                                            @php
                                                $statusClass = match ($inst->status ?? 'pending') {
                                                    'paid' => 'badge-active',
                                                    'partial' => 'bg-warning text-dark',
                                                    'overdue' => 'badge-inactive',
                                                    'voided' => 'bg-dark',
                                                    default => 'bg-secondary',
                                                };
                                            @endphp
                                            <span
                                                class="badge {{ $statusClass }}">{{ ucfirst($inst->status ?? 'pending') }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="empty-state py-4">
                        <i class="bi bi-calendar-x" style="font-size: 2rem;"></i>
                        <p class="text-muted mb-0">No installments yet.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection