@extends('layouts.app')

@section('title', $supplier->name)

@section('content')
<x-breadcrumb :items="[
    ['label' => 'Suppliers', 'url' => route('suppliers.index')],
    ['label' => $supplier->name],
]" />

<x-page-header :title="$supplier->name" subtitle="Supplier profile, price history and purchase orders.">
    <x-slot name="actions">
        <a href="{{ route('suppliers.edit', $supplier) }}" class="procure-btn"><i class="fas fa-edit"></i> Edit</a>
        <button type="button" class="procure-btn text-danger"
            onclick="confirmAction({
                title: 'Delete Supplier',
                message: 'Delete this supplier permanently?',
                confirmText: 'Delete',
                onConfirm: function() { document.getElementById('delete-supplier-form').submit(); }
            })">
            <i class="fas fa-trash"></i> Delete
        </button>
        <form id="delete-supplier-form" action="{{ route('suppliers.destroy', $supplier) }}" method="POST" class="d-none">
            @csrf
            @method('DELETE')
        </form>
    </x-slot>
</x-page-header>

<div class="row mb-4">
    <div class="col-lg-4 mb-3">
        <div class="procure-form-card h-100">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="mb-0 font-weight-bold">Details</h5>
                <x-status-badge :status="$supplier->status" />
            </div>
            <p class="procure-detail-label">Code</p>
            <p class="procure-detail-value">{{ $supplier->code ?? '—' }}</p>
            <p class="procure-detail-label">Channel</p>
            <p class="procure-detail-value">{{ ucfirst(str_replace('_', ' ', $supplier->channel_type ?? '')) }}</p>
            <p class="procure-detail-label">Lead Time</p>
            <p class="procure-detail-value">{{ $supplier->lead_time_days !== null ? $supplier->lead_time_days.' days' : '—' }}</p>
            <p class="procure-detail-label">Contact</p>
            <p class="procure-detail-value">{{ $supplier->contact_person ?? '—' }}</p>
            <p class="procure-detail-label">Email / Phone</p>
            <p class="procure-detail-value">{{ $supplier->email ?? '—' }} · {{ $supplier->phone ?? '—' }}</p>
            <p class="procure-detail-label">Location</p>
            <p class="procure-detail-value">{{ collect([$supplier->city, $supplier->country])->filter()->implode(', ') ?: '—' }}</p>
            <p class="procure-detail-label">Payment Terms</p>
            <p class="procure-detail-value">{{ $supplier->payment_terms ?? '—' }}</p>
            @if($supplier->is_regional_reexporter)
                <span class="badge badge-warning">Regional re-exporter</span>
            @endif
            @if($supplier->notes)
                <p class="procure-detail-label mt-3">Notes</p>
                <p class="procure-detail-value">{{ $supplier->notes }}</p>
            @endif
        </div>
    </div>
    <div class="col-lg-8 mb-3">
        <div class="row">
            @php
                $poList = $purchaseOrders ?? $supplier->purchaseOrders ?? collect();
                $priceList = $priceHistory ?? collect();
                $poCount = $performance['po_count'] ?? $poList->count();
                $totalSpend = $performance['total_spend'] ?? $poList->sum('total_amount');
            @endphp
            <div class="col-md-4 mb-3">
                <x-kpi-card label="Total POs" :value="(string) $poCount" icon="fas fa-shopping-bag" color="blue" />
            </div>
            <div class="col-md-4 mb-3">
                <x-kpi-card label="Total Spend" :value="number_format($totalSpend, 2).' SAR'" icon="fas fa-dollar-sign" color="green" />
            </div>
            <div class="col-md-4 mb-3">
                <x-kpi-card label="Avg Lead Time" :value="($performance['avg_lead_time'] ?? $supplier->lead_time_days ?? '—').' d'" icon="fas fa-clock" color="teal" />
            </div>
        </div>

        <ul class="nav nav-tabs" role="tablist" style="border-bottom:1px solid #e2e8f0;">
            <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#priceHistory">Price History</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#poHistory">PO History</a>
            </li>
        </ul>
        <div class="tab-content chart-card" style="border-top-left-radius:0;border-top-right-radius:0;">
            <div class="tab-pane fade show active chart-card-body" id="priceHistory" style="overflow-x:auto;">
                @if($priceList->isEmpty())
                    <x-empty-state icon="fas fa-history" title="No price history" message="Price points will appear after imports or purchase orders." />
                @else
                    <table class="procure-table">
                        <thead>
                            <tr>
                                <th>Item</th>
                                <th>Unit Price</th>
                                <th>Currency</th>
                                <th>Effective Date</th>
                                <th>Source</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($priceList as $ph)
                                <tr>
                                    <td>{{ $ph->item->name_en ?? $ph->item_id }}</td>
                                    <td>{{ number_format($ph->unit_price, 4) }}</td>
                                    <td>{{ $ph->currency }}</td>
                                    <td>{{ optional($ph->effective_date)->format('Y-m-d') }}</td>
                                    <td>{{ $ph->source_type ?? '—' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
            <div class="tab-pane fade chart-card-body" id="poHistory" style="overflow-x:auto;">
                @if($poList->isEmpty())
                    <x-empty-state icon="fas fa-shopping-bag" title="No purchase orders" message="Purchase orders for this supplier will appear here." />
                @else
                    <table class="procure-table">
                        <thead>
                            <tr>
                                <th>PO Number</th>
                                <th>Date</th>
                                <th>Amount</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($poList as $po)
                                <tr>
                                    <td><a href="{{ route('purchase-orders.show', $po) }}">{{ $po->po_number }}</a></td>
                                    <td>{{ optional($po->order_date)->format('Y-m-d') }}</td>
                                    <td>{{ number_format($po->total_amount, 2) }} {{ $po->currency }}</td>
                                    <td><x-status-badge :status="$po->status" /></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection