@extends('admin.layouts.app')

@section('page-title', 'Order Details')

@section('content')
<div class="container py-4">

  {{-- Header --}}
  <div class="card shadow-sm rounded-3 border-0">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-start">
        <div>
          <h4 class="fw-bold mb-0">Order Details</Details></h4>
          <small class="text-muted">Detailed view of this shipment order</small>
        </div>
        <a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
      </div>

      <hr>

      {{-- Customer Info --}}
      <div class="row mb-4">
        <div class="col-md-8 d-flex">
          <div class="me-3">
            <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center" 
                 style="width:60px; height:60px; font-size:20px;">
              {{ strtoupper(substr($user->customer_name ?? 'U', 0, 1)) }}
            </div>
          </div>
          <div>
            <h5 class="mb-0">{{ $user->customer_name ?? 'Unknown Customer' }}</h5>
            <p class="mb-0">{{ $user->company_name ?? 'N/A' }}</p>
            <p class="mb-0 text-muted">{{ $user->email ?? '' }}</p>
            <p class="mb-0 text-muted">{{ $user->mobile_no ?? '' }}</p>
          </div>
        </div>
        <div class="col-md-4 text-end">
          <p class="mb-0">{{ $user->address ?? '' }}</p>
          <small class="text-muted">{{ $user->pincode ?? '' }}</small>
        </div>
      </div>

      {{-- Order Summary --}}
      <div class="bg-light rounded p-3 mb-3">
        <div class="row text-center">
          <div class="col-md-3 border-end">
            <p class="fw-semibold mb-1">Order ID</p>
            <h6 class="text-primary fw-bold">{{ $order->order_id }}</h6>
          </div>

          <div class="col-md-3 border-end">
            <p class="fw-semibold mb-1">Mark No</p>
            <h6>{{ $order->mark_no }}</h6>
          </div>

          <div class="col-md-3 border-end">
            <p class="fw-semibold mb-1">Total Items</p>
            <h6>{{ $order->items->count() }}</h6>
          </div>

          <div class="col-md-3">
            <p class="fw-semibold mb-1">Status</p>
            <span class="badge bg-warning text-dark">{{ ucfirst($order->status) }}</span>
          </div>
        </div>
      </div>

      {{-- Origin - Destination --}}
      <div class="row text-center mb-4">
        <div class="col-md-6">
          <p class="mb-1 fw-semibold text-muted">Origin</p>
          <h6>{{ $order->origin }}</h6>
        </div>
        <div class="col-md-6">
          <p class="mb-1 fw-semibold text-muted">Destination</p>
          <h6>{{ $order->destination }}</h6>
        </div>
      </div>

      {{-- Order Items Table --}}
      <div class="table-responsive">
        <table class="table table-bordered align-middle text-center">
          <thead class="table-light">
            <tr>
              <th>#</th>
              <th>Description</th>
              <th>CTN</th>
              <th>QTY</th>
              <th>TTL/QTY</th>
              <th>Unit</th>
              <th>Price (₹)</th>
              <th>TTL Amount (₹)</th>
              <th>CBM</th>
              <th>TTL CBM</th>
              <th>KG</th>
              <th>TTL KG</th>
              <th>Shop No</th>
            </tr>
          </thead>
          <tbody>
            @foreach($order->items as $index => $item)
            <tr>
              <td>{{ $index + 1 }}</td>
              <td>{{ $item->description }}</td>
              <td>{{ $item->ctn }}</td>
              <td>{{ $item->qty }}</td>
              <td>{{ $item->ttl_qty }}</td>
              <td>{{ $item->unit }}</td>
              <td>{{ number_format($item->price, 2) }}</td>
              <td>{{ number_format($item->ttl_amount, 2) }}</td>
              <td>{{ $item->cbm }}</td>
              <td>{{ $item->ttl_cbm }}</td>
              <td>{{ $item->kg }}</td>
              <td>{{ $item->ttl_kg }}</td>
              <td>{{ $item->shop_no }}</td>
            </tr>
            @endforeach
          </tbody>
        </table>
      </div>

      {{-- Totals --}}
      <div class="row text-center mt-4">
        <div class="col-md-3">
          <h6 class="fw-bold text-primary">{{ $order->ctn }}</h6>
          <small class="text-muted">Total CTN</small>
        </div>

        <div class="col-md-3">
          <h6 class="fw-bold text-primary">{{ $order->qty }}</h6>
          <small class="text-muted">Total QTY</small>
        </div>

        <div class="col-md-3">
          <h6 class="fw-bold text-success">{{ $order->ttl_kg }}</h6>
          <small class="text-muted">Total TTL KG</small>
        </div>

        <div class="col-md-3">
          <h6 class="fw-bold text-danger">₹{{ number_format($order->ttl_amount, 2) }}</h6>
          <small class="text-muted">Total Amount</small>
        </div>
      </div>

    </div>
  </div>

</div>
@endsection

