@extends('layouts.app')

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

@section('content')
<div class="mb-4 text-white">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb text-white-50">
            <li class="breadcrumb-item"><a href="{{ route('customers.index') }}" class="text-white-50">Customers</a></li>
            <li class="breadcrumb-item active text-white">{{ $customer->name }}</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <div class="bg-white text-primary rounded-circle d-flex align-items-center justify-content-center fw-bold me-3 shadow-sm" style="width: 50px; height: 50px; font-size: 1.5rem;">
                {{ substr($customer->name, 0, 1) }}
            </div>
            <div>
                <h2 class="h4 mb-0">{{ $customer->name }}</h2>
                @if($customer->company_name)
                    <p class="mb-0 text-white-50 small"><i class="fas fa-building me-1"></i> {{ $customer->company_name }}</p>
                @endif
            </div>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('customers.edit', $customer) }}" class="btn btn-white text-primary rounded-pill px-4 shadow-sm fw-bold">
                <i class="fas fa-edit me-2"></i> Edit
            </a>
            <form action="{{ route('customers.destroy', $customer) }}" method="POST" onsubmit="return confirm('Are you sure?')">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-link text-white text-opacity-75 text-decoration-none small">
                    <i class="fas fa-trash-alt me-1"></i> Delete
                </button>
            </form>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Main Content -->
    <div class="col-md-9">
        <div class="card border-0 shadow-sm rounded-4 mb-4 overflow-hidden">
            <div class="card-body p-0">
                <!-- Detailed Info Grid -->
                <div class="p-4 bg-light bg-opacity-50 border-bottom">
                    <div class="row g-4">
                        <div class="col-md-4">
                            <label class="small text-muted text-uppercase fw-bold d-block mb-1">Email</label>
                            <span class="fw-bold">{{ $customer->email }}</span>
                        </div>
                        <div class="col-md-3">
                            <label class="small text-muted text-uppercase fw-bold d-block mb-1">Work Phone</label>
                            <span class="fw-bold">{{ $customer->phone ?: '---' }}</span>
                        </div>
                        <div class="col-md-3">
                            <label class="small text-muted text-uppercase fw-bold d-block mb-1">Mobile</label>
                            <span class="fw-bold">{{ $customer->mobile_phone ?: '---' }}</span>
                        </div>
                        <div class="col-md-2 text-md-end">
                            <span class="badge {{ $customer->portal_access ? 'bg-success' : 'bg-secondary' }} rounded-pill px-3">
                                {{ $customer->portal_access ? 'Portal Active' : 'Portal Disabled' }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="p-4">
                    <div class="row g-4">
                        <!-- Addresses -->
                        <div class="col-md-6 border-end">
                            <h6 class="fw-bold text-primary mb-3 text-uppercase small">Billing Address</h6>
                            <div class="text-muted small">
                                <p class="mb-1 fw-bold text-dark">{{ $customer->name }}</p>
                                <p class="mb-1">{{ $customer->billing_address }}</p>
                                @if($customer->billing_street2)<p class="mb-1">{{ $customer->billing_street2 }}</p>@endif
                                <p class="mb-0">
                                    {{ $customer->billing_city }}@if($customer->billing_city && $customer->billing_state), @endif
                                    {{ $customer->billing_state }} {{ $customer->billing_zip }}
                                </p>
                                <p class="mb-0">{{ $customer->billing_country }}</p>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-primary mb-3 text-uppercase small">Shipping Address</h6>
                            <div class="text-muted small">
                                <p class="mb-1 fw-bold text-dark">{{ $customer->name }}</p>
                                @if($customer->shipping_address)
                                    <p class="mb-1">{{ $customer->shipping_address }}</p>
                                    @if($customer->shipping_street2)<p class="mb-1">{{ $customer->shipping_street2 }}</p>@endif
                                    <p class="mb-0">
                                        {{ $customer->shipping_city }}@if($customer->shipping_city && $customer->shipping_state), @endif
                                        {{ $customer->shipping_state }} {{ $customer->shipping_zip }}
                                    </p>
                                    <p class="mb-0">{{ $customer->shipping_country }}</p>
                                @else
                                    <p class="fst-italic">Same as billing address</p>
                                @endif
                            </div>
                        </div>

                        <!-- Additional Info -->
                        <div class="col-12 mt-4 pt-4 border-top">
                            <h6 class="fw-bold text-primary mb-3 text-uppercase small">More Information</h6>
                            <div class="row g-3">
                                <div class="col-md-3">
                                    <label class="x-small text-muted text-uppercase fw-bold d-block">GSTIN</label>
                                    <span class="small">{{ $customer->gst_number ?: '---' }}</span>
                                </div>
                                <div class="col-md-3">
                                    <label class="x-small text-muted text-uppercase fw-bold d-block">PAN</label>
                                    <span class="small">{{ $customer->pan_number ?: '---' }}</span>
                                </div>
                                <div class="col-md-3">
                                    <label class="x-small text-muted text-uppercase fw-bold d-block">Payment Terms</label>
                                    <span class="small">{{ $customer->payment_terms ?: '---' }}</span>
                                </div>
                                <div class="col-md-3">
                                    <label class="x-small text-muted text-uppercase fw-bold d-block">Currency</label>
                                    <span class="small">{{ $customer->currency }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Persons Table -->
        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                <h6 class="mb-0 fw-bold">Contact Persons</h6>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 small">
                        <thead class="bg-light text-muted">
                            <tr>
                                <th class="ps-4">NAME</th>
                                <th>EMAIL</th>
                                <th>PHONE</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($customer->contacts as $contact)
                                <tr>
                                    <td class="ps-4 fw-bold">{{ $contact->name }}</td>
                                    <td>{{ $contact->email ?: '---' }}</td>
                                    <td>{{ $contact->phone ?: '---' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center py-4 text-muted">No additional contact persons linked.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        @if($customer->notes)
            <div class="card border-0 shadow-sm rounded-4 mb-4 bg-light bg-opacity-75">
                <div class="card-body p-4">
                    <h6 class="fw-bold x-small text-uppercase text-muted mb-2">Remarks / Notes</h6>
                    <p class="mb-0 small">{{ $customer->notes }}</p>
                </div>
            </div>
        @endif
    </div>

    <!-- Sidebar: Financial Summary -->
    <div class="col-md-3">
        <div class="card border-0 shadow-sm rounded-4 bg-primary text-white mb-4 shadow" style="background: linear-gradient(135deg, #0d6efd 0%, #004dc7 100%);">
            <div class="card-body p-4">
                <h6 class="text-white text-opacity-75 small fw-bold text-uppercase mb-2">Current Balance</h6>
                <h3 class="fw-bold mb-0">{{ formatCurrency($customer->opening_balance) }}</h3>
                <hr class="text-white text-opacity-25">
                <div class="row g-2 small">
                    <div class="col-6">
                        <span class="text-white-50 d-block">Credit Limit</span>
                        <span class="fw-bold">{{ formatCurrency($customer->credit_limit) }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-body p-4">
                <h6 class="fw-bold mb-3 small">Quick Actions</h6>
                <div class="d-grid gap-2">
                    <a href="{{ route('invoices.create', ['customer_id' => $customer->id]) }}" class="btn btn-outline-primary btn-sm rounded-3 py-2">
                         New Invoice
                    </a>
                    <a href="{{ route('quotes.create', ['customer_id' => $customer->id]) }}" class="btn btn-outline-secondary btn-sm rounded-3 py-2">
                         New Estimate
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.btn-white { background-color: white; border: 0; }
.btn-white:hover { background-color: #f8f9fa; }
.x-small { font-size: 0.65rem; }
</style>
@endsection