@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>
          @php
              $status = strtolower($order->status ?? '');
          @endphp

          <small class="text-muted">Detailed view of this shipment order</small>
        </div>

        {{-- ADD ITEM --}}
        @can('order.create')
            @if($status === 'pending')
                <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>
            @endif
        @endcan


        <a href="{{ route('admin.dashboard') }}" class="btn-close"></a>
      </div>

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

        
      <div class="mt-3 d-flex gap-2">
                {{-- Edit Order --}}
                @if($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>
                @endif

                {{-- Delete Order --}}
                @if($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.updateItem', $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 class="d-flex justify-content-center gap-2">
                    @if($status === 'pending')
                        {{-- EDIT BUTTON --}}
                        @can('order.edit')
                        <button type="button" 
                                class="btn btn-sm btn-edit-item" 
                                data-bs-toggle="modal" 
                                data-bs-target="#editItemModal{{ $item->id }}">
                            <i class="fas fa-edit"></i>
                        </button>
                        @endcan

                        {{-- DELETE BUTTON --}}
                        @can('order.delete')
                        <form action="{{ route('admin.orders.deleteItem', $item->id) }}" 
                              method="POST" 
                              onsubmit="return confirm('Delete this item?')">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-sm btn-delete-item">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                        @endcan
                    @endif
                </td>


            </tr>
            @endforeach
          </tbody>
        </table>
      </div>


      @foreach($order->items as $item)
      <div class="modal fade" id="editItemModal{{ $item->id }}" 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-edit me-2"></i>Edit Item
                      </h5>
                      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                  </div>

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

                      <div class="modal-body">

                          <div class="row g-3">
                              <div class="col-md-6">
                                  <label class="form-label">Description</label>
                                  <input type="text" name="description" 
                                        value="{{ $item->description }}" 
                                        class="form-control custom-input" required>
                              </div>

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

                              <div class="col-md-3">
                                  <label class="form-label">QTY</label>
                                  <input type="number" name="qty" 
                                        value="{{ $item->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" 
                                        value="{{ $item->ttl_qty }}" 
                                        class="form-control custom-input">
                              </div>

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

                              <div class="col-md-3">
                                  <label class="form-label">Price</label>
                                  <input type="number" name="price" 
                                        value="{{ $item->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" 
                                        value="{{ $item->ttl_amount }}" 
                                        class="form-control custom-input">
                              </div>

                              <div class="col-md-3">
                                  <label class="form-label">CBM</label>
                                  <input type="number" name="cbm" 
                                        value="{{ $item->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" 
                                        value="{{ $item->ttl_cbm }}" 
                                        class="form-control custom-input">
                              </div>

                              <div class="col-md-3">
                                  <label class="form-label">KG</label>
                                  <input type="number" name="kg" 
                                        value="{{ $item->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" 
                                        value="{{ $item->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" 
                                        value="{{ $item->shop_no }}" 
                                        class="form-control custom-input">
                              </div>
                          </div>

                      </div>

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

                  </form>

              </div>
          </div>
      </div>
      @endforeach


      {{-- 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 id="addItemForm" 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>

          <div class="table-responsive mb-4">
          <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>
                      <th>Actions</th>
                  </tr>
              </thead>

              <tbody>
                  @forelse($deletedItems as $key => $deleted)
                  <tr>
                      <td>{{ $key + 1 }}</td>
                      <td>{{ $deleted->description }}</td>
                      <td>{{ $deleted->ctn }}</td>
                      <td>{{ $deleted->qty }}</td>
                      <td>{{ $deleted->ttl_qty }}</td>
                      <td>{{ $deleted->unit }}</td>
                      <td>{{ number_format($deleted->price, 2) }}</td>
                      <td>{{ number_format($deleted->ttl_amount, 2) }}</td>
                      <td>{{ $deleted->cbm }}</td>
                      <td>{{ $deleted->ttl_cbm }}</td>
                      <td>{{ $deleted->kg }}</td>
                      <td>{{ $deleted->ttl_kg }}</td>
                      <td>{{ $deleted->shop_no }}</td>

                      <td class="d-flex justify-content-center gap-2">

                          {{-- USE THIS ITEM --}}
                          <button type="button" 
                                  class="btn btn-sm btn-use-item"
                                  onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
                              Use
                          </button>

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

                      </td>
                  </tr>
                  @empty
                  <tr>
                      <td colspan="14" class="text-muted">No deleted items.</td>
                  </tr>
                  @endforelse
              </tbody>
          </table>
      </div>


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


  <script>
    document.addEventListener('DOMContentLoaded', function () {
    const token = '{{ csrf_token() }}';

    document.querySelectorAll('.js-restore-item').forEach(function (btn) {
        btn.addEventListener('click', function () {
            if (!confirm('Restore this item?')) return;

            const url = this.dataset.url;
            const row = this.closest('tr');

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({})
            })
            .then(response => {
                if (!response.ok) throw new Error('Restore failed');
                return response.json().catch(() => ({}));
            })
            .then(() => {
                row.remove();
                location.reload(); // 🔥 refresh UI so restored item appears
            })
            .catch(() => {
                alert('Could not restore item. Please try again.');
            });
        });
    });
});

    </script>

{{-- AUTO-FILL SCRIPT --}}
<script>
function fillFormFromDeleted(item) {
    let form = document.getElementById('addItemForm');

    form.querySelector('input[name="description"]').value = item.description;
    form.querySelector('input[name="ctn"]').value = item.ctn;
    form.querySelector('input[name="qty"]').value = item.qty;
    form.querySelector('input[name="ttl_qty"]').value = item.ttl_qty;
    form.querySelector('input[name="unit"]').value = item.unit;
    form.querySelector('input[name="price"]').value = item.price;
    form.querySelector('input[name="ttl_amount"]').value = item.ttl_amount;
    form.querySelector('input[name="cbm"]').value = item.cbm;
    form.querySelector('input[name="ttl_cbm"]').value = item.ttl_cbm;
    form.querySelector('input[name="kg"]').value = item.kg;
    form.querySelector('input[name="ttl_kg"]').value = item.ttl_kg;
    form.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: 6px 14px;
    border-radius: 10px;
    font-weight: 600;
     font-size: 0.85rem;  
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
    margin-right: -650px; 
}

.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