@extends('layouts.app')
@section('title', 'Supplier Details')

@section('content')
<style>
    /* Card Styles */
    .supplier-card {
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
        border: none;
        margin-top: 20px;
    }
    .supplier-card .card-header {
        background: #f8f9fa;
        border-bottom: 2px solid #dee2e6;
        padding: 15px 25px;
        border-radius: 10px 10px 0 0;
    }
    .supplier-card .card-body {
        padding: 25px;
    }
    
    /* Info Table Styles */
    .info-table {
        width: 100%;
        background: #ffffff;
        border-collapse: collapse;
    }
    .info-table tr {
        border-bottom: 1px solid #e9ecef;
    }
    .info-table tr:last-child {
        border-bottom: none;
    }
    .info-table th {
        background: #f8f9fa;
        padding: 10px 15px;
        font-weight: 600;
        font-size: 13px;
        color: #495057;
        width: 150px;
        white-space: nowrap;
    }
    .info-table td {
        padding: 10px 15px;
        font-size: 13px;
        color: #212529;
    }
    .info-table td .badge-custom {
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 600;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .info-table td .badge-active {
        background: #d4edda;
        color: #155724;
    }
    .info-table td .badge-inactive {
        background: #f8d7da;
        color: #721c24;
    }
    .info-table td .rating-stars {
        color: #ffc107;
        font-size: 14px;
    }
    .info-table td .rating-stars small {
        color: #6c757d;
        font-size: 12px;
    }
    
    /* Performance Card */
    .performance-card {
        background: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 10px;
        padding: 0;
        margin-top: 20px;
    }
    .performance-card .card-header {
        background: #e9ecef;
        padding: 12px 20px;
        border-radius: 10px 10px 0 0;
        border-bottom: 1px solid #dee2e6;
    }
    .performance-card .card-header h6 {
        margin: 0;
        font-weight: 600;
        color: #495057;
        font-size: 14px;
    }
    .performance-card .card-body {
        padding: 20px;
        background: #ffffff;
        border-radius: 0 0 10px 10px;
    }
    .metric-box {
        background: #ffffff;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        text-align: center;
        transition: all 0.2s ease;
    }
    .metric-box:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    .metric-box h4 {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 3px 0;
    }
    .metric-box .text-info { color: #17a2b8; }
    .metric-box .text-success { color: #28a745; }
    .metric-box .text-warning { color: #ffc107; }
    .metric-box .text-danger { color: #dc3545; }
    .metric-box small {
        font-size: 12px;
        color: #6c757d;
        display: block;
    }
    
    /* Button Styles */
    .btn-edit {
        background: #ffc107;
        color: #212529;
        border-radius: 8px;
        padding: 8px 20px;
        border: none;
        font-weight: 500;
        font-size: 13px;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
    }
    .btn-edit:hover {
        background: #e0a800;
        color: #212529;
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
        text-decoration: none;
    }
    .btn-edit i {
        margin-right: 6px;
    }
    
    .btn-back {
        background: #6c757d;
        color: #fff;
        border-radius: 8px;
        padding: 8px 20px;
        border: none;
        font-weight: 500;
        font-size: 13px;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-block;
    }
    .btn-back:hover {
        background: #5a6268;
        color: #fff;
        transform: translateY(-1px);
        text-decoration: none;
    }
    .btn-back i {
        margin-right: 6px;
    }
    
    .btn-actions-top {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .supplier-card .card-body {
            padding: 15px;
        }
        .info-table th {
            width: 100px;
            font-size: 12px;
            padding: 8px 10px;
        }
        .info-table td {
            font-size: 12px;
            padding: 8px 10px;
        }
        .metric-box h4 {
            font-size: 18px;
        }
        .btn-actions-top {
            margin-top: 10px;
        }
        .btn-actions-top .btn {
            width: 100%;
            text-align: center;
        }
    }
</style>

<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <i class="bi bi-person-badge"></i> Supplier Details
    </h1>
</section>

<section class="content">
    <!-- Include Navigation -->
    @include('manufacturing.partials.navigation')
    
    <div class="supplier-card">
        <div class="card-header">
            <div class="d-flex flex-wrap justify-content-between align-items-center">
                <h5 class="mb-0" style="font-weight: 600; color: #212529;">
                    <i class="bi bi-person-badge" style="color: #007bff;"></i> 
                    <strong style="color: #212529;">{{ $model->name }}</strong>
                </h5>
                <div class="btn-actions-top">
                    <a href="{{ route('manufacturing.procurement.suppliers.edit', $model->id) }}" class="btn-edit">
                        <i class="bi bi-pencil"></i> Edit
                    </a>
                    <a href="{{ route('manufacturing.procurement.suppliers.index') }}" class="btn-back">
                        <i class="bi bi-arrow-left"></i> Back
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <table class="info-table">
                        <tr>
                            <th><i class="bi bi-tag"></i> Supplier Code</th>
                            <td><strong>{{ $model->supplier_code }}</strong></td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-person"></i> Name</th>
                            <td>{{ $model->name }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-envelope"></i> Email</th>
                            <td>
                                @if($model->email)
                                    <a href="mailto:{{ $model->email }}" style="color: #007bff; text-decoration: none;">
                                        {{ $model->email }}
                                    </a>
                                @else                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-phone"></i> Phone</th>
                            <td>
                                @if($model->phone)
                                    <a href="tel:{{ $model->phone }}" style="color: #007bff; text-decoration: none;">
                                        {{ $model->phone }}
                                    </a>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-geo-alt"></i> Address</th>
                            <td>{{ $model->address ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-building"></i> City</th>
                            <td>{{ $model->city ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-globe"></i> Country</th>
                            <td>{{ $model->country ?? 'N/A' }}</td>
                        </tr>
                    </table>
                </div>
                <div class="col-md-6">
                    <table class="info-table">
                        <tr>
                            <th><i class="bi bi-receipt"></i> Tax Number</th>
                            <td>{{ $model->tax_number ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-credit-card"></i> Payment Terms</th>
                            <td>{{ $model->payment_terms ?? 'N/A' }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-star"></i> Rating</th>
                            <td>
                                <div class="rating-stars">
                                    {!! $model->rating_stars !!}
                                    <small>({{ $model->rating }})</small>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-toggle-on"></i> Status</th>
                            <td>
                                <span class="badge-custom {{ $model->is_active ? 'badge-active' : 'badge-inactive' }}">
                                    {{ $model->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-clock"></i> Created</th>
                            <td>{{ $model->created_at->format('d M Y, H:i') }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-clock-history"></i> Last Updated</th>
                            <td>{{ $model->updated_at->format('d M Y, H:i') }}</td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-cart"></i> Total Orders</th>
                            <td><span class="badge bg-info" style="padding: 5px 14px; font-size: 12px; border-radius: 20px;">{{ $model->purchaseOrders()->count() }}</span></td>
                        </tr>
                        <tr>
                            <th><i class="bi bi-currency-dollar"></i> Total Spent</th>
                            <td><strong style="color: #28a745;">KES {{ number_format($model->purchaseOrders()->sum('total_amount'), 2) }}</strong></td>
                        </tr>
                    </table>
                </div>
            </div>
            
            <!-- Performance Metrics -->
            <div class="performance-card">
                <div class="card-header">
                    <h6><i class="bi bi-bar-chart"></i> Performance Metrics</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3" id="performanceMetrics">
                        <div class="col-md-3 col-6">
                            <div class="metric-box">
                                <h4 class="text-info" id="totalOrders">0</h4>
                                <small><i class="bi bi-cart"></i> Total Orders</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="metric-box">
                                <h4 class="text-success" id="onTimeDelivery">0%</h4>
                                <small><i class="bi bi-clock"></i> On-Time Delivery</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="metric-box">
                                <h4 class="text-warning" id="qualityRate">0%</h4>
                                <small><i class="bi bi-check-circle"></i> Quality Rate</small>
                            </div>
                        </div>
                        <div class="col-md-3 col-6">
                            <div class="metric-box">
                                <h4 class="text-danger" id="avgRating">{{ $model->rating ?? 0 }}</h4>
                                <small><i class="bi bi-star"></i> Average Rating</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    // =============================================
    // Load Performance Data via AJAX
    // =============================================
    document.addEventListener('DOMContentLoaded', function() {
        const supplierId = {{ $model->id }};
        const performanceUrl = '{{ route("manufacturing.procurement.suppliers.performance", $model->id) }}';
        
        fetch(performanceUrl)
            .then(response => response.json())
            .then(data => {
                document.getElementById('totalOrders').textContent = data.total_orders || 0;
                document.getElementById('onTimeDelivery').textContent = (data.on_time_delivery || 0) + '%';
                document.getElementById('qualityRate').textContent = (data.quality_rate || 0) + '%';
                document.getElementById('avgRating').textContent = data.average_rating || 0;
            })
            .catch(error => {
                console.error('Error loading performance data:', error);
                // Show fallback values
                document.getElementById('totalOrders').textContent = '{{ $model->purchaseOrders()->count() }}';
                document.getElementById('onTimeDelivery').textContent = '--';
                document.getElementById('qualityRate').textContent = '--';
                document.getElementById('avgRating').textContent = '{{ $model->rating ?? 0 }}';
            });
    });
</script>

@endsection