@extends('merchant.templates.layout')

@section('content')
@php
    // Mirrors API\CompanyResource::toArray for a cargo company
    $displayName = $cargo->company_name ?: ($cargo->name ?: '—');
    $initial     = e(strtoupper(substr($displayName, 0, 1)));

    $completeNumber = ($cargo->dial_code || $cargo->phone)
        ? '+' . $cargo->dial_code . $cargo->phone
        : null;

    $city    = $cargo->city?->name;
    $country = $cargo->country?->name;

    // API returns a pre-joined "combined" location string
    $combined = trim(implode(', ', array_filter([$city, $country])));
@endphp

<div class="d-flex justify-content-between align-items-center mb-3">
    <h5 class="mb-0">Cargo Company Details</h5>
    <a href="{{ route('merchant.cargo_companies.index') }}" class="btn btn-sm btn-light">
        <i class="ri-arrow-left-line"></i> Back
    </a>
</div>

<div class="row g-3">

    {{-- ============================================================
         LEFT: Identity (mirrors API company.name + company.logo)
         ============================================================ --}}
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-body text-center">
                @if($cargo->profileImage)
                    <img src="{{ $cargo->profileImage->url }}"
                         class="rounded-circle mb-3"
                         style="width:96px;height:96px;object-fit:cover;"
                         alt="{{ $displayName }}">
                @else
                    <div style="width:96px;height:96px;border-radius:50%;background:#e0e9ff;color:#1d4ed8;display:inline-flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;margin-bottom:12px;">
                        {{ $initial }}
                    </div>
                @endif

                <h5 class="fw-bold mb-1">{{ $displayName }}</h5>

                @if($cargo->user_code)
                    <p class="text-muted small mb-2">{{ $cargo->user_code }}</p>
                @endif

                <div>{!! account_status_badge($cargo->status) !!}</div>
            </div>
        </div>
    </div>

    {{-- ============================================================
         RIGHT: All API-exposed fields
         ============================================================ --}}
    <div class="col-lg-8">

        {{-- Company (matches API `company.*`) --}}
        <div class="card mb-3">
            <div class="card-header border-bottom py-3">
                <h5 class="card-title mb-0">Company</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Company Name</div>
                        <div class="fw-semibold">{{ $cargo->company_name ?: '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Location</div>
                        <div class="fw-semibold">{{ $combined ?: '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">City</div>
                        <div class="fw-semibold">{{ $city ?: '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Country</div>
                        <div class="fw-semibold">{{ $country ?: '—' }}</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Contact (matches API `email`, `dial_code`, `phone`, `complete_number`) --}}
        <div class="card">
            <div class="card-header border-bottom py-3">
                <h5 class="card-title mb-0">Contact</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Email</div>
                        <div class="fw-semibold">{{ $cargo->email ?: '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Complete Number</div>
                        <div class="fw-semibold">{{ $completeNumber ?: '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Dial Code</div>
                        <div class="fw-semibold">{{ $cargo->dial_code ? '+' . $cargo->dial_code : '—' }}</div>
                    </div>
                    <div class="col-md-6">
                        <div class="text-muted fs-12 text-uppercase fw-semibold">Phone</div>
                        <div class="fw-semibold">{{ $cargo->phone ?: '—' }}</div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection