@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">Orders Details</h4>
          <small class="text-muted">Detailed view of all orders in this shipment consolidation.</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-4 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-4 border-end">
            <p class="fw-semibold mb-1">Total Orders</p>
            <h6>{{ 1 }}</h6>
          </div>
          <div class="col-md-4">
            <p class="fw-semibold mb-1">Status</p>
            <span class="badge bg-warning text-dark">{{ ucfirst($order->status) }}</span>
          </div>
        </div>
      </div>

      {{-- Order Table --}}
      <div class="table-responsive">
        <table class="table table-bordered align-middle">
          <thead class="table-light">
            <tr>
              <th>Item No</th>
              <th>Description</th>
              <th>CTN</th>
              <th>QTY</th>
              <th>TTL/QTY</th>
              <th>Unit</th>
              <th>Amount (₹)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ $order->mark_no }}</td>
              <td>{{ $order->description }}</td>
              <td>{{ $order->ctn }}</td>
              <td>{{ $order->qty }}</td>
              <td>{{ $order->ttl_qty }}</td>
              <td>{{ $order->unit }}</td>
              <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
            </tr>
          </tbody>
        </table>
      </div>

      {{-- Totals --}}
      <div class="d-flex justify-content-between mt-3">
        <div>
          <h6 class="text-primary mb-0 fw-bold">{{ $order->ttl_qty }}</h6>
          <small class="text-muted">Total TTL/QTY</small>
        </div>
        <div>
          <h6 class="text-success mb-0 fw-bold">{{ $order->ttl_kg }}</h6>
          <small class="text-muted">Total TTL KG</small>
        </div>
        <div class="text-end">
          <h6 class="text-danger mb-0 fw-bold">₹{{ number_format($order->ttl_amount, 2) }}</h6>
          <small class="text-muted">Total Amount</small>
        </div>
      </div>

    </div>
  </div>

</div>
@endsection