@extends('admin.layouts.app')

@section('page-title', 'Orders')

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

  {{-- Header --}}
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0">Order Management</h4>
    <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#createOrderForm">
      <i class="bi bi-plus-circle"></i> Create Order
    </button>
  </div>

  {{-- Create Order Form --}}
  <div id="createOrderForm" class="collapse">
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-light">
        <strong>New Order Form</strong>
      </div>
      <div class="card-body">
        <form action="{{ route('admin.orders.store') }}" method="POST">
          @csrf
          <div class="row g-3">

            {{-- Mark No --}}
            <div class="col-md-4">
              <label class="form-label">Mark No</label>
              <select class="form-select" id="markNoSelect" name="mark_no" required>
                <option value="">Select Mark No</option>
                @foreach($markList as $mark)
                  <option value="{{ $mark->mark_no }}"
                    data-origin="{{ $mark->origin }}"
                    data-destination="{{ $mark->destination }}">
                    {{ $mark->mark_no }} - {{ $mark->customer_name }}
                  </option>
                @endforeach
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label">Origin</label>
              <input type="text" class="form-control" name="origin" id="originField" readonly>
            </div>

            <div class="col-md-4">
              <label class="form-label">Destination</label>
              <input type="text" class="form-control" name="destination" id="destinationField" readonly>
            </div>

            <div class="col-md-4">
              <label class="form-label">Description</label>
              <input type="text" class="form-control" name="description" required>
            </div>

            <div class="col-md-2"><label class="form-label">CTN</label><input type="number" class="form-control" name="ctn"></div>
            <div class="col-md-2"><label class="form-label">QTY</label><input type="number" class="form-control" name="qty"></div>
            <div class="col-md-2"><label class="form-label">TTL/QTY</label><input type="number" class="form-control" name="ttl_qty"></div>
            <div class="col-md-2"><label class="form-label">Unit</label><input type="text" class="form-control" name="unit"></div>
            <div class="col-md-2"><label class="form-label">Price</label><input type="number" step="0.01" class="form-control" name="price"></div>
            <div class="col-md-2"><label class="form-label">TTL Amount</label><input type="number" step="0.01" class="form-control" name="ttl_amount"></div>
            <div class="col-md-2"><label class="form-label">CBM</label><input type="number" step="0.001" class="form-control" name="cbm"></div>
            <div class="col-md-2"><label class="form-label">TTL CBM</label><input type="number" step="0.001" class="form-control" name="ttl_cbm"></div>
            <div class="col-md-2"><label class="form-label">KG</label><input type="number" step="0.001" class="form-control" name="kg"></div>
            <div class="col-md-2"><label class="form-label">TTL KG</label><input type="number" step="0.001" class="form-control" name="ttl_kg"></div>
            <div class="col-md-3"><label class="form-label">Shop No</label><input type="text" class="form-control" name="shop_no"></div>

            <div class="col-md-12 text-end">
              <button type="submit" class="btn btn-success mt-3">
                <i class="bi bi-save"></i> Submit Order
              </button>
            </div>

          </div>
        </form>
      </div>
    </div>
  </div>

  {{-- Orders Table --}}
  <div class="card shadow-sm">
    <div class="card-header bg-light">
      <strong>Recent Orders</strong>
    </div>
    <div class="card-body table-responsive">
      <table class="table table-striped align-middle">
        <thead>
          <tr>
            <th>#</th>
            <th>Order ID</th>
            <th>Mark No</th>
            <th>Description</th>
            <th>Origin</th>
            <th>Destination</th>
            <th>TTL Amount</th>
            <th>Status</th>
            <th>Date</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($orders as $index => $order)
          <tr>
            <td>{{ $index + 1 }}</td>
            <td><a href="{{ route('admin.orders.show', $order->id) }}">{{ $order->order_id }}</a></td>
            <td>{{ $order->mark_no }}</td>
            <td>{{ $order->description }}</td>
            <td>{{ $order->origin }}</td>
            <td>{{ $order->destination }}</td>
            <td>₹{{ number_format($order->ttl_amount, 2) }}</td>
            <td><span class="badge bg-info text-dark">{{ ucfirst($order->status) }}</span></td>
            <td>{{ $order->created_at->format('d-m-Y') }}</td>
            <td><a href="{{ route('admin.orders.show', $order->id) }}" class="btn btn-sm btn-outline-primary">View</a></td>
          </tr>
          @empty
          <tr><td colspan="10" class="text-center">No orders found</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>

{{-- Autofill JS --}}
<script>
document.getElementById('markNoSelect').addEventListener('change', function() {
  const option = this.options[this.selectedIndex];
  document.getElementById('originField').value = option.dataset.origin || '';
  document.getElementById('destinationField').value = option.dataset.destination || '';
});
</script>
@endsection