@extends('layouts.admin')

@section('content')
<div class="header">
    <div>
        <h1 style="margin:0; font-weight:800; font-size:28px">Transport Hub</h1>
        <p style="color:#555; margin:5px 0 0">Manage companies, routes, and interstate logistics</p>
    </div>
    <button class="btn btn-primary">+ Add New Company</button>
</div>

<style>
    .transport-container { display: flex; flex-direction: column; gap: 30px; }
    .company-card { background: var(--card); border-radius: 25px; border: 1px solid #222; overflow: hidden; }
    .company-header { background: rgba(1, 60, 123, 0.1); padding: 25px 30px; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; }
    .company-name { font-size: 20px; font-weight: 800; color: #fff; }
    
    .route-table { width: 100%; border-collapse: collapse; }
    .route-table th { padding: 15px 30px; text-align: left; font-size: 10px; color: #444; text-transform: uppercase; letter-spacing: 1px; }
    .route-table td { padding: 20px 30px; border-top: 1px solid #222; font-size: 14px; }
    
    .price-tag { font-family: monospace; font-weight: 800; color: var(--primary); }
    .route-path { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #ccc; }
    .route-arrow { color: #444; font-size: 12px; }
</style>

<div class="transport-container">
    @foreach($companies as $company)
    <div class="company-card">
        <div class="company-header">
            <div>
                <div class="company-name">{{ $company->name }}</div>
                <div style="font-size: 12px; color: #555">{{ count($company->routes) }} Active Routes</div>
            </div>
            <button class="btn btn-outline" style="border-color: var(--primary); color: var(--primary); border-width: 2px;">Add Route</button>
        </div>
        
        <table class="route-table">
            <thead>
                <tr>
                    <th>Route / Destination</th>
                    <th>Base Fare</th>
                    <th>Schedules</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach($company->routes as $route)
                <tr>
                    <td>
                        <div class="route-path">
                            <span>{{ $route->from_location }}</span>
                            <span class="route-arrow">➔</span>
                            <span>{{ $route->to_location }}</span>
                        </div>
                    </td>
                    <td>
                        <span class="price-tag">₦{{ number_format($route->base_price, 2) }}</span>
                    </td>
                    <td>
                        <span style="font-size: 11px; color: #666; font-weight: 600">{{ count($route->schedules) }} Departure(s) Today</span>
                    </td>
                    <td>
                        <button class="btn btn-outline" style="padding: 5px 12px; font-size: 11px">Manage</button>
                    </td>
                </tr>
                @endforeach
                
                @if($company->routes->isEmpty())
                <tr>
                    <td colspan="4" style="text-align: center; color: #444; padding: 40px;">No routes established for this company yet.</td>
                </tr>
                @endif
            </tbody>
        </table>
    </div>
    @endforeach

    @if($companies->isEmpty())
    <div style="text-align: center; padding: 100px 0; color: #444;">
        <div style="font-size: 48px; margin-bottom: 20px;">🚌</div>
        <div style="font-weight: 800; font-size: 20px">No Transport Partners</div>
        <p>Registration pending for third-party logistics companies.</p>
    </div>
    @endif
</div>
@endsection