{{-- resources/views/purchases/suppliers/show.blade.php --}}
@extends('layouts.app')
@section('title', $supplier->name)
@section('page_title', $supplier->name)
@section('page_subtitle', 'Supplier profile')

@section('content')

<div class="d-flex gap-2 mb-3 flex-wrap">
    <a href="{{ tenant_route('purchases.suppliers.index') }}"
       class="btn btn-sm btn-outline-secondary">← Suppliers</a>
    <a href="{{ tenant_route('purchases.suppliers.edit', ['supplier' => $supplier->id]) }}"
       class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-pencil me-1"></i>Edit
    </a>
    <a href="{{ tenant_route('purchases.suppliers.statement', ['supplier' => $supplier->id]) }}"
       class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-file-text me-1"></i>Statement
    </a>
    <a href="{{ tenant_route('purchases.create') }}"
       class="btn btn-primary btn-sm ms-auto">
        <i class="bi bi-plus-lg me-1"></i>New Purchase Order
    </a>
</div>

<div class="row g-3">

    {{-- Left --}}
    <div class="col-md-4">

        <div class="card mb-3">
            <div class="card-body">
                <div style="font-size:1rem;font-weight:800;margin-bottom:4px;">
                    {{ $supplier->name }}
                </div>
                @if($supplier->category)
                    <div style="font-size:.73rem;background:var(--bg);
                                color:var(--muted);display:inline-block;
                                padding:2px 7px;border-radius:4px;
                                margin-bottom:8px;">
                        {{ $supplier->category }}
                    </div>
                @endif

                <div style="display:flex;flex-direction:column;
                            gap:6px;font-size:.78rem;">
                    @if($supplier->contact_person)
                        <div style="display:flex;align-items:center;gap:7px;">
                            <i class="bi bi-person"
                               style="color:var(--muted);width:16px;"></i>
                            {{ $supplier->contact_person }}
                        </div>
                    @endif
                    @if($supplier->email)
                        <div style="display:flex;align-items:center;gap:7px;">
                            <i class="bi bi-envelope"
                               style="color:var(--muted);width:16px;"></i>
                            <a href="mailto:{{ $supplier->email }}"
                               style="color:var(--clay);">
                                {{ $supplier->email }}
                            </a>
                        </div>
                    @endif
                    @if($supplier->phone)
                        <div style="display:flex;align-items:center;gap:7px;">
                            <i class="bi bi-phone"
                               style="color:var(--muted);width:16px;"></i>
                            {{ $supplier->phone }}
                        </div>
                    @endif
                    @if($supplier->address)
                        <div style="display:flex;align-items:flex-start;gap:7px;">
                            <i class="bi bi-geo-alt"
                               style="color:var(--muted);width:16px;margin-top:2px;"></i>
                            <span style="color:var(--muted);">
                                {{ $supplier->address }}
                                @if($supplier->city), {{ $supplier->city }}@endif
                            </span>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- Stats --}}
        <div class="card mb-3">
            <div class="card-body">
                <div style="display:flex;flex-direction:column;gap:8px;
                            font-size:.8rem;">
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Total Orders</span>
                        <span class="fw-semibold">
                            {{ $supplier->purchase_orders_count }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Total Ordered</span>
                        <span class="fw-semibold">
                            ${{ number_format($totalOrdered, 2) }}
                        </span>
                    </div>
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Total Paid</span>
                        <span class="fw-semibold"
                              style="color:var(--success);">
                            ${{ number_format($totalPaid, 2) }}
                        </span>
                    </div>
                    @if($outstanding > 0)
                        <div style="display:flex;justify-content:space-between;
                                    padding-top:6px;
                                    border-top:1px solid var(--border);">
                            <span style="color:var(--muted);">Outstanding</span>
                            <span class="fw-bold"
                                  style="color:var(--danger);">
                                ${{ number_format($outstanding, 2) }}
                            </span>
                        </div>
                    @endif
                    <div style="display:flex;justify-content:space-between;">
                        <span style="color:var(--muted);">Credit Terms</span>
                        <span>{{ $supplier->credit_terms_days ?? 0 }} days</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Banking --}}
        @if($supplier->bank_name || $supplier->bank_account)
            <div class="card">
                <div class="card-header">
                    <span class="card-title">Banking</span>
                </div>
                <div class="card-body">
                    <div style="display:flex;flex-direction:column;
                                gap:6px;font-size:.78rem;">
                        @if($supplier->bank_name)
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Bank</span>
                                <span>{{ $supplier->bank_name }}</span>
                            </div>
                        @endif
                        @if($supplier->bank_account)
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Account</span>
                                <span>{{ $supplier->bank_account }}</span>
                            </div>
                        @endif
                        @if($supplier->bank_branch)
                            <div style="display:flex;justify-content:space-between;">
                                <span style="color:var(--muted);">Branch</span>
                                <span>{{ $supplier->bank_branch }}</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

    </div>

    {{-- Right --}}
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-box-seam me-2"
                       style="color:var(--clay)"></i>
                    Recent Orders
                </span>
                <a href="{{ tenant_route('purchases.index') }}?supplier={{ $supplier->id }}"
                   style="font-size:.75rem;color:var(--clay);text-decoration:none;">
                    All orders →
                </a>
            </div>

            @if($recentOrders->isEmpty())
                <div class="card-body text-center py-4">
                    <p class="text-muted mb-0" style="font-size:.8rem;">
                        No orders yet
                    </p>
                </div>
            @else
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>PO Number</th>
                                <th>Date</th>
                                <th>Items</th>
                                <th>Total</th>
                                <th>Balance</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($recentOrders as $order)
                                @php
                                    $sc = [
                                        'pending'            => ['bg'=>'#fef3c7','color'=>'#92400e'],
                                        'approved'           => ['bg'=>'#dbeafe','color'=>'#1e40af'],
                                        'partially_received' => ['bg'=>'#e0f2fe','color'=>'#0369a1'],
                                        'fully_received'     => ['bg'=>'#d1fae5','color'=>'#065f46'],
                                        'cancelled'          => ['bg'=>'#fee2e2','color'=>'#991b1b'],
                                        'rejected'           => ['bg'=>'#fee2e2','color'=>'#991b1b'],
                                    ][$order->status] ?? ['bg'=>'#f1f5f9','color'=>'#475569'];
                                @endphp
                                <tr onclick="window.location='{{ tenant_route('purchases.show', ['po' => $order->id]) }}'"
                                    style="cursor:pointer;">
                                    <td style="font-size:.8rem;font-weight:600;
                                               color:var(--clay);">
                                        {{ $order->po_number }}
                                    </td>
                                    <td style="font-size:.78rem;white-space:nowrap;">
                                        {{ $order->order_date->format('d M Y') }}
                                    </td>
                                    <td style="font-size:.78rem;color:var(--muted);">
                                        {{ $order->items->count() }}
                                    </td>
                                    <td style="font-size:.82rem;font-weight:600;">
                                        {{ $order->currency }}
                                        {{ number_format($order->total_amount, 2) }}
                                    </td>
                                    <td>
                                        @if($order->balance_due > 0)
                                            <span style="font-size:.78rem;font-weight:600;
                                                         color:var(--danger);">
                                                {{ $order->currency }}
                                                {{ number_format($order->balance_due, 2) }}
                                            </span>
                                        @else
                                            <span style="font-size:.72rem;color:var(--success);">
                                                Paid
                                            </span>
                                        @endif
                                    </td>
                                    <td>
                                        <span style="font-size:.7rem;font-weight:600;
                                                     padding:2px 8px;border-radius:20px;
                                                     background:{{ $sc['bg'] }};
                                                     color:{{ $sc['color'] }};">
                                            {{ str_replace('_', ' ', $order->status) }}
                                        </span>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

</div>

@endsection