@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">

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

      {{-- ACTION BUTTONS --}}
      <div class="mt-3 d-flex gap-2">

        {{-- ADD ITEM --}}
        <button class="btn btn-add-item" data-bs-toggle="modal" data-bs-target="#addItemModal">
          <i class="fas fa-plus-circle me-2"></i>Add New Item
        </button>

        {{-- EDIT ORDER --}}
        @if($order->status === 'pending')
          <button class="btn btn-edit-order" onclick="document.getElementById('editOrderForm').style.display='block'">
              <i class="fas fa-edit me-2"></i>Edit Order
          </button>
        @else
          <button class="btn btn-edit-order" disabled><i class="fas fa-edit me-2"></i>Edit Order</button>
        @endif

        {{-- DELETE ORDER --}}
        @if($order->status === 'pending')
        <form action="{{ route('admin.orders.destroy', $order->id) }}"
              method="POST"
              onsubmit="return confirm('Delete this entire order?')">
          @csrf
          @method('DELETE')
          <button class="btn btn-delete-order">
            <i class="fas fa-trash-alt me-2"></i>Delete Order
          </button>
        </form>
        @endif

      </div>

      <hr>

      {{-- EDIT ORDER FORM --}}
      <div id="editOrderForm" class="p-3 bg-light rounded mb-4 shadow-sm" style="display:none;">
        <h5 class="fw-bold mb-3">Edit Order</h5>

        <form action="{{ route('admin.orders.update', $order->id) }}" method="POST">
          @csrf

          <div class="row">
            <div class="col-md-4 mb-3">
              <label>Mark No</label>
              <input type="text" name="mark_no" value="{{ $order->mark_no }}" class="form-control custom-input">
            </div>

            <div class="col-md-4 mb-3">
              <label>Origin</label>
              <input type="text" name="origin" value="{{ $order->origin }}" class="form-control custom-input">
            </div>

            <div class="col-md-4 mb-3">
              <label>Destination</label>
              <input type="text" name="destination" value="{{ $order->destination }}" class="form-control custom-input">
            </div>
          </div>

          <button class="btn btn-save-changes">Save Changes</button>
          <button type="button"
                  class="btn btn-cancel"
                  onclick="document.getElementById('editOrderForm').style.display='none'">
            Cancel
          </button>
        </form>
      </div>

      {{-- 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>

      {{-- 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>Total Amount</th>
              <th>CBM</th>
              <th>TTL CBM</th>
              <th>KG</th>
              <th>TTL KG</th>
              <th>Shop No</th>
              <th>Actions</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>

              <td>
                <form action="{{ route('admin.orders.deleteItem', $item->id) }}"
                      method="POST"
                      onsubmit="return confirm('Delete this item?')">
                  @csrf
                  @method('DELETE')
                  <button class="btn btn-sm btn-delete-item">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </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>Total CTN</small>
        </div>

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

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

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

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

{{-- ADD ITEM MODAL --}}
<div class="modal fade" id="addItemModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content custom-modal">

      <div class="modal-header modal-gradient-header">
        <h5 class="modal-title text-white"><i class="fas fa-cube me-2"></i>Add Item To Order</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <form action="{{ route('admin.orders.addItem', $order->id) }}" method="POST">
        @csrf

        <div class="modal-body">

          {{-- DELETED ITEMS --}}
          @php
              $deletedItems = \App\Models\OrderItem::onlyTrashed()
                  ->where('order_id', $order->id)
                  ->get();
          @endphp

          <h5 class="section-title">Deleted Items (Use / Restore)</h5>

          <ul class="list-group mb-3">

            @forelse($deletedItems as $deleted)
              <li class="list-group-item">

                <div class="d-flex justify-content-between">

                    <div>
                        <strong>{{ $deleted->description }}</strong><br>
                        <small>
                          CTN: {{ $deleted->ctn }},
                          QTY: {{ $deleted->qty }},
                          TTL/QTY: {{ $deleted->ttl_qty }},
                          Unit: {{ $deleted->unit }},
                          Price: ₹{{ $deleted->price }},
                          TTL Amt: ₹{{ $deleted->ttl_amount }},
                          CBM: {{ $deleted->cbm }},
                          TTL CBM: {{ $deleted->ttl_cbm }},
                          KG: {{ $deleted->kg }},
                          TTL KG: {{ $deleted->ttl_kg }},
                          Shop: {{ $deleted->shop_no }}
                        </small>
                    </div>

                    <div class="d-flex gap-2">

                        {{-- Auto-fill button --}}
                        <button type="button" class="btn btn-sm btn-use-item"
                          onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
                          Use This
                        </button>

                        {{-- Restore --}}
                        <form action="{{ route('admin.orders.restoreItem', $deleted->id) }}" method="POST">
                          @csrf
                          <button class="btn btn-sm btn-restore">Restore</button>
                        </form>

                    </div>

                </div>

              </li>
            @empty
              <li class="list-group-item text-muted">No deleted items.</li>
            @endforelse

          </ul>

          {{-- ADD FORM --}}
          <div class="row g-3">

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

            <div class="col-md-3">
              <label class="form-label">CTN</label>
              <input type="number" name="ctn" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">QTY</label>
              <input type="number" name="qty" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">TTL QTY</label>
              <input type="number" name="ttl_qty" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">Unit</label>
              <input type="text" name="unit" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">Price</label>
              <input type="number" name="price" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">Total Amount</label>
              <input type="number" name="ttl_amount" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">CBM</label>
              <input type="number" name="cbm" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">TTL CBM</label>
              <input type="number" name="ttl_cbm" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">KG</label>
              <input type="number" name="kg" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">TTL KG</label>
              <input type="number" name="ttl_kg" class="form-control custom-input">
            </div>

            <div class="col-md-3">
              <label class="form-label">Shop No</label>
              <input type="text" name="shop_no" class="form-control custom-input">
            </div>

          </div>

        </div>

        <div class="modal-footer">
          <button class="btn btn-modal-close" data-bs-dismiss="modal">Close</button>
          <button class="btn btn-modal-add">Add Item</button>
        </div>

      </form>

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

{{-- AUTO-FILL SCRIPT --}}
<script>
function fillFormFromDeleted(item) {
    document.querySelector('input[name="description"]').value = item.description;
    document.querySelector('input[name="ctn"]').value = item.ctn;
    document.querySelector('input[name="qty"]').value = item.qty;
    document.querySelector('input[name="ttl_qty"]').value = item.ttl_qty;
    document.querySelector('input[name="unit"]').value = item.unit;
    document.querySelector('input[name="price"]').value = item.price;
    document.querySelector('input[name="ttl_amount"]').value = item.ttl_amount;
    document.querySelector('input[name="cbm"]').value = item.cbm;
    document.querySelector('input[name="ttl_cbm"]').value = item.ttl_cbm;
    document.querySelector('input[name="kg"]').value = item.kg;
    document.querySelector('input[name="ttl_kg"]').value = item.ttl_kg;
    document.querySelector('input[name="shop_no"]').value = item.shop_no;
}
</script>

<style>
/* Custom Button Styles */
.btn-add-item {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-add-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-add-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: 0.5s;
}

.btn-add-item:hover::before {
    left: 100%;
}

.btn-edit-order {
    background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(71, 118, 230, 0.3);
}

.btn-edit-order:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px 0 rgba(71, 118, 230, 0.4);
    color: white;
}

.btn-edit-order:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete-order {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    border: none;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(255, 65, 108, 0.3);
}

.btn-delete-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px 0 rgba(255, 65, 108, 0.4);
    color: white;
}

.btn-delete-item {
    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
    border: none;
    color: white;
    border-radius: 6px;
    padding: 6px 12px;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-delete-item:hover {
    transform: scale(1.05);
    color: white;
}

/* Form Buttons */
.btn-save-changes {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 176, 155, 0.2);
}

.btn-save-changes:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 176, 155, 0.4);
    color: white;
}

.btn-cancel {
    background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
    border: none;
    color: #2c3e50;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(142, 158, 171, 0.3);
}

/* Modal Styles */
.custom-modal {
    border-radius: 15px;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.modal-gradient-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: none;
    padding: 20px 25px;
}

.section-title {
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #667eea;
}

.custom-input {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 15px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.custom-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    transform: translateY(-1px);
}

.btn-use-item {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border: none;
    color: white;
    border-radius: 6px;
    padding: 5px 15px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-use-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
    color: white;
}

.btn-restore {
    background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
    border: none;
    color: white;
    border-radius: 6px;
    padding: 5px 15px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    font-weight: 500;
}

.btn-restore:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 176, 155, 0.4);
    color: white;
}

.btn-modal-close {
    background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
    border: none;
    color: #2c3e50;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-modal-close:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(142, 158, 171, 0.3);
}

.btn-modal-add {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
}

.btn-modal-add:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.4);
    color: white;
}

/* Animation for the Add Item Button */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

.btn-add-item {
    animation: pulse-glow 2s infinite;
}

/* List group items */
.list-group-item {
    border: 1px solid #e9ecef;
    margin-bottom: 8px;
    border-radius: 8px !important;
    transition: all 0.3s ease;
    padding: 15px;
}

.list-group-item:hover {
    border-color: #667eea;
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
}

/* Enhanced table styling */
.table {
    border-radius: 10px;
    overflow: hidden;
}

.table thead th {
    background: #667eea ;
    color: white;
    border: none;
    padding: 15px 10px;
    font-weight: 600;
}

.table tbody tr {
    transition: all 0.3s ease;
}

.table tbody tr:hover {
    background-color: rgba(102, 126, 234, 0.05);
    transform: translateY(-1px);
}

/* Badge styling */
.badge {
    font-size: 0.85em;
    padding: 8px 12px;
    border-radius: 8px;
}

/* Card enhancements */
.card {
    border: none;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .btn-add-item,
    .btn-edit-order,
    .btn-delete-order {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .modal-gradient-header {
        padding: 15px 20px;
    }
}

</style>

@endsection