1195 lines
36 KiB
PHP
1195 lines
36 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('page-title', 'Order Details')
|
|
|
|
@section('content')
|
|
{{-- FULL-WIDTH FLUID CONTAINER --}}
|
|
<div class="container-fluid p-0">
|
|
<div class="px-lg-4 px-3 py-4">
|
|
|
|
{{-- MAIN CARD --}}
|
|
<div class="card shadow-sm rounded-3 border-0">
|
|
<div class="card-body p-lg-4 p-3">
|
|
|
|
{{-- HEADER SECTION --}}
|
|
<div class="d-flex flex-column flex-lg-row justify-content-between align-items-start gap-3 mb-4">
|
|
<div class="flex-grow-1">
|
|
<h1 class="h2 fw-bold mb-1">Order Details</h1>
|
|
@php
|
|
$status = strtolower($order->status ?? '');
|
|
@endphp
|
|
<p class="text-muted mb-0">Detailed view of this shipment order</p>
|
|
</div>
|
|
|
|
<div class="d-flex flex-wrap gap-2 align-items-start">
|
|
{{-- ADD ITEM BUTTON --}}
|
|
@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-1 me-lg-2"></i>
|
|
<span class="d-none d-lg-inline">Add New Item</span>
|
|
<span class="d-lg-none">Add</span>
|
|
</button>
|
|
@endif
|
|
@endcan
|
|
|
|
<a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-icon">
|
|
<i class="fas fa-times"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ACTION BUTTONS --}}
|
|
<div class="d-flex flex-wrap gap-2 mb-4">
|
|
@if($status === 'pending')
|
|
<button class="btn btn-edit-order"
|
|
onclick="document.getElementById('editOrderForm').style.display='block'">
|
|
<i class="fas fa-edit me-1 me-lg-2"></i>
|
|
<span>Edit Order</span>
|
|
</button>
|
|
|
|
<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-1 me-lg-2"></i>
|
|
<span>Delete Order</span>
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- EDIT ORDER FORM (Hidden by default) --}}
|
|
<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 g-3">
|
|
<div class="col-12 col-md-4">
|
|
<label class="form-label">Mark No</label>
|
|
<input type="text" name="mark_no" value="{{ $order->mark_no }}" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<label class="form-label">Origin</label>
|
|
<input type="text" name="origin" value="{{ $order->origin }}" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-12 col-md-4">
|
|
<label class="form-label">Destination</label>
|
|
<input type="text" name="destination" value="{{ $order->destination }}" class="form-control custom-input">
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-wrap gap-2 mt-3">
|
|
<button class="btn btn-save-changes">
|
|
<i class="fas fa-save me-2"></i>Save Changes
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-cancel"
|
|
onclick="document.getElementById('editOrderForm').style.display='none'">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
{{-- CUSTOMER INFO --}}
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12 col-lg-8">
|
|
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center gap-3">
|
|
<div class="flex-shrink-0">
|
|
<div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center"
|
|
style="width: 4rem; height: 4rem; font-size: 1.5rem;">
|
|
{{ strtoupper(substr($user->customer_name ?? 'U', 0, 1)) }}
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<h5 class="mb-1">{{ $user->customer_name ?? 'Unknown Customer' }}</h5>
|
|
<p class="mb-1">{{ $user->company_name ?? 'N/A' }}</p>
|
|
<p class="mb-1 text-muted">{{ $user->email ?? '' }}</p>
|
|
<p class="mb-0 text-muted">{{ $user->mobile_no ?? '' }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-lg-4">
|
|
<div class="text-lg-end">
|
|
<p class="mb-1">{{ $user->address ?? '' }}</p>
|
|
<small class="text-muted">{{ $user->pincode ?? '' }}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ORDER SUMMARY --}}
|
|
<div class="row g-0 mb-4">
|
|
<div class="col-6 col-md-3 border-end py-3">
|
|
<div class="text-center">
|
|
<p class="fw-semibold mb-1">Order ID</p>
|
|
<h6 class="text-primary fw-bold">{{ $order->order_id }}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 border-end py-3">
|
|
<div class="text-center">
|
|
<p class="fw-semibold mb-1">Mark No</p>
|
|
<h6>{{ $order->mark_no }}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 border-end py-3">
|
|
<div class="text-center">
|
|
<p class="fw-semibold mb-1">Total Items</p>
|
|
<h6>{{ $order->items->count() }}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 py-3">
|
|
<div class="text-center">
|
|
<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 mb-4">
|
|
<div class="col-12 col-md-6 mb-3 mb-md-0">
|
|
<div class="text-center">
|
|
<p class="mb-1 fw-semibold text-muted">Origin</p>
|
|
<h6>{{ $order->origin }}</h6>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="text-center">
|
|
<p class="mb-1 fw-semibold text-muted">Destination</p>
|
|
<h6>{{ $order->destination }}</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ITEMS TABLE --}}
|
|
<div class="table-responsive-lg">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered align-middle text-center mb-0">
|
|
<thead class="table-light position-sticky top-0">
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">Description</th>
|
|
<th scope="col">CTN</th>
|
|
<th scope="col">QTY</th>
|
|
<th scope="col">TTL/QTY</th>
|
|
<th scope="col">Unit</th>
|
|
<th scope="col">Price</th>
|
|
<th scope="col">Total Amount</th>
|
|
<th scope="col">CBM</th>
|
|
<th scope="col">TTL CBM</th>
|
|
<th scope="col">KG</th>
|
|
<th scope="col">TTL KG</th>
|
|
<th scope="col">Shop No</th>
|
|
<th scope="col">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($order->items as $index => $item)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td class="text-start">{{ $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>
|
|
<div class="d-flex flex-wrap gap-1 justify-content-center">
|
|
@if($status === 'pending')
|
|
@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
|
|
|
|
@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
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- TOTALS --}}
|
|
<div class="row text-center mt-4 pt-3 border-top">
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<h6 class="fw-bold text-primary mb-1">{{ $order->ctn }}</h6>
|
|
<small class="text-muted">Total CTN</small>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<h6 class="fw-bold text-primary mb-1">{{ $order->qty }}</h6>
|
|
<small class="text-muted">Total QTY</small>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<h6 class="fw-bold text-success mb-1">{{ $order->ttl_kg }}</h6>
|
|
<small class="text-muted">Total KG</small>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<h6 class="fw-bold text-danger mb-1">₹{{ number_format($order->ttl_amount, 2) }}</h6>
|
|
<small class="text-muted">Total Amount</small>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- EDIT ITEM MODALS --}}
|
|
@foreach($order->items as $item)
|
|
<div class="modal fade zoom-modal" id="editItemModal{{ $item->id }}" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
|
|
<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-12 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-6 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-12 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">
|
|
<button type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-modal-save">
|
|
<i class="fas fa-save me-2"></i>Save Changes
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
|
|
{{-- ADD ITEM MODAL --}}
|
|
<div class="modal fade zoom-modal" id="addItemModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
|
<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
|
|
|
|
@if($deletedItems->count() > 0)
|
|
<div class="mb-4">
|
|
<h5 class="section-title mb-3">Deleted Items (Use / Restore)</h5>
|
|
<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>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($deletedItems as $key => $deleted)
|
|
<tr>
|
|
<td>{{ $key + 1 }}</td>
|
|
<td class="text-start">{{ $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>
|
|
<div class="d-flex flex-wrap gap-2 justify-content-center">
|
|
<button type="button"
|
|
class="btn btn-sm btn-use-item"
|
|
onclick="fillFormFromDeleted({{ json_encode($deleted) }})">
|
|
<i class="fas fa-redo me-1"></i>Use
|
|
</button>
|
|
<button type="button"
|
|
class="btn btn-sm btn-restore-item"
|
|
data-id="{{ $deleted->id }}"
|
|
data-url="{{ route('admin.orders.restoreItem', $deleted->id) }}">
|
|
<i class="fas fa-history me-1"></i>Restore
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ADD FORM --}}
|
|
<h5 class="section-title mb-3">Add New Item</h5>
|
|
<div class="row g-3">
|
|
<div class="col-12 col-md-6">
|
|
<label class="form-label">Description</label>
|
|
<input type="text" name="description" class="form-control custom-input" required>
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<label class="form-label">CTN</label>
|
|
<input type="number" name="ctn" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<label class="form-label">QTY</label>
|
|
<input type="number" name="qty" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-6 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-6 col-md-3">
|
|
<label class="form-label">Unit</label>
|
|
<input type="text" name="unit" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-6 col-md-3">
|
|
<label class="form-label">Price</label>
|
|
<input type="number" name="price" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-6 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-6 col-md-3">
|
|
<label class="form-label">CBM</label>
|
|
<input type="number" name="cbm" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-6 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-6 col-md-3">
|
|
<label class="form-label">KG</label>
|
|
<input type="number" name="kg" class="form-control custom-input">
|
|
</div>
|
|
<div class="col-6 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-12 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 type="button" class="btn btn-modal-cancel" data-bs-dismiss="modal">
|
|
<i class="fas fa-times me-2"></i>Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-modal-add">
|
|
<i class="fas fa-plus-circle me-2"></i>Add Item
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const token = '{{ csrf_token() }}';
|
|
|
|
document.querySelectorAll('.btn-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();
|
|
})
|
|
.catch(() => {
|
|
alert('Could not restore item. Please try again.');
|
|
});
|
|
});
|
|
});
|
|
|
|
// Handle modal on different zoom levels
|
|
function adjustModalForZoom() {
|
|
const zoomLevel = window.devicePixelRatio || 1;
|
|
const modals = document.querySelectorAll('.zoom-modal');
|
|
|
|
modals.forEach(modal => {
|
|
const modalDialog = modal.querySelector('.modal-dialog');
|
|
if (modalDialog) {
|
|
if (zoomLevel > 1.5) {
|
|
modalDialog.classList.add('high-zoom');
|
|
modalDialog.classList.remove('normal-zoom');
|
|
} else if (zoomLevel < 0.9) {
|
|
modalDialog.classList.add('low-zoom');
|
|
modalDialog.classList.remove('normal-zoom');
|
|
} else {
|
|
modalDialog.classList.add('normal-zoom');
|
|
modalDialog.classList.remove('high-zoom', 'low-zoom');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Check zoom level on load and resize
|
|
adjustModalForZoom();
|
|
window.addEventListener('resize', adjustModalForZoom);
|
|
});
|
|
|
|
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;
|
|
|
|
// Scroll to add form section
|
|
const sectionTitle = document.querySelector('.section-title');
|
|
if (sectionTitle) {
|
|
sectionTitle.scrollIntoView({
|
|
behavior: 'smooth',
|
|
block: 'nearest'
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
/* ZOOM-SAFE BASE UNITS */
|
|
:root {
|
|
--space-unit: 0.25rem; /* 4px base */
|
|
--btn-padding-y: 0.75rem;
|
|
--btn-padding-x: 1.5rem;
|
|
--modal-max-width: min(90vw, 1200px);
|
|
--modal-padding: clamp(1rem, 2vw, 1.5rem);
|
|
}
|
|
|
|
/* ZOOM-FRIENDLY MODAL SYSTEM */
|
|
.zoom-modal .modal-dialog {
|
|
max-width: var(--modal-max-width);
|
|
margin: 1rem auto;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Different zoom level adjustments */
|
|
.zoom-modal .modal-dialog.normal-zoom {
|
|
max-width: min(95vw, 1200px);
|
|
}
|
|
|
|
.zoom-modal .modal-dialog.high-zoom {
|
|
max-width: 98vw;
|
|
margin: 0.5rem auto;
|
|
}
|
|
|
|
.zoom-modal .modal-dialog.low-zoom {
|
|
max-width: min(85vw, 1100px);
|
|
}
|
|
|
|
.modal-dialog-scrollable {
|
|
max-height: calc(100vh - 2rem);
|
|
}
|
|
|
|
@media (max-height: 600px) {
|
|
.modal-dialog-scrollable {
|
|
max-height: calc(100vh - 1rem);
|
|
}
|
|
}
|
|
|
|
/* MODAL CONTENT SCALING */
|
|
.custom-modal {
|
|
border-radius: clamp(0.5rem, 2vw, 1rem);
|
|
border: none;
|
|
box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.3);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.modal-gradient-header {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-bottom: none;
|
|
padding: clamp(1rem, 3vh, 1.5rem);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: var(--modal-padding);
|
|
max-height: 70vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: var(--modal-padding);
|
|
padding-top: 1rem;
|
|
border-top: 1px solid #dee2e6;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* FORM ELEMENTS FOR ZOOM */
|
|
.custom-input {
|
|
border: 2px solid #e9ecef;
|
|
border-radius: clamp(0.375rem, 1vw, 0.5rem);
|
|
padding: clamp(0.625rem, 1.5vh, 0.75rem) clamp(0.75rem, 1.5vw, 1rem);
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|
width: 100%;
|
|
transition: all 0.3s ease;
|
|
min-height: 2.75rem;
|
|
}
|
|
|
|
.custom-input:focus {
|
|
border-color: #667eea;
|
|
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
|
transform: translateY(-0.0625rem);
|
|
}
|
|
|
|
/* LABELS FOR ZOOM */
|
|
.form-label {
|
|
font-size: clamp(0.875rem, 1.8vw, 1rem);
|
|
font-weight: 500;
|
|
margin-bottom: 0.375rem;
|
|
display: block;
|
|
}
|
|
|
|
/* GRID SYSTEM FOR ZOOM */
|
|
.row.g-3 {
|
|
--bs-gutter-x: clamp(0.75rem, 2vw, 1rem);
|
|
--bs-gutter-y: clamp(0.75rem, 2vw, 1rem);
|
|
}
|
|
|
|
/* TABLE IN MODAL FOR ZOOM */
|
|
.modal-body .table-responsive {
|
|
max-height: 30vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-body .table {
|
|
font-size: clamp(0.75rem, 1.5vw, 0.875rem);
|
|
min-width: 800px;
|
|
}
|
|
|
|
.modal-body .table th,
|
|
.modal-body .table td {
|
|
padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.375rem, 1vw, 0.5rem);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* BUTTONS FOR ZOOM */
|
|
.btn {
|
|
padding: clamp(0.625rem, 1.5vh, 0.75rem) clamp(1rem, 2vw, 1.5rem);
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|
border-radius: clamp(0.375rem, 1vw, 0.5rem);
|
|
min-height: clamp(2.5rem, 6vh, 3rem);
|
|
white-space: nowrap;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: clamp(0.375rem, 1vh, 0.5rem) clamp(0.75rem, 1.5vw, 1rem);
|
|
min-height: clamp(2rem, 4vh, 2.5rem);
|
|
font-size: clamp(0.75rem, 1.8vw, 0.875rem);
|
|
}
|
|
|
|
/* COLOR CODED BUTTONS */
|
|
|
|
/* 1. EDIT BUTTONS (Blue Theme) */
|
|
.btn-edit-order,
|
|
.btn-edit-item,
|
|
.btn-modal-save {
|
|
background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0.25rem 1rem rgba(71, 118, 230, 0.3);
|
|
}
|
|
|
|
.btn-edit-order:hover,
|
|
.btn-edit-item:hover,
|
|
.btn-modal-save:hover {
|
|
background: linear-gradient(135deg, #3a64d4 0%, #7d47d8 100%);
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 0.5rem 1.5rem rgba(71, 118, 230, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
/* 2. DELETE BUTTONS (Red Theme) */
|
|
.btn-delete-order,
|
|
.btn-delete-item {
|
|
background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0.25rem 1rem rgba(255, 65, 108, 0.3);
|
|
}
|
|
|
|
.btn-delete-order:hover,
|
|
.btn-delete-item:hover {
|
|
background: linear-gradient(135deg, #e63956 0%, #e63a21 100%);
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 0.5rem 1.5rem rgba(255, 65, 108, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
/* 3. CANCEL BUTTONS (Gray Theme) */
|
|
.btn-cancel,
|
|
.btn-modal-cancel {
|
|
background: linear-gradient(135deg, #8e9eab 0%, #eef2f3 100%);
|
|
border: 2px solid #dee2e6;
|
|
color: #495057;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-cancel:hover,
|
|
.btn-modal-cancel:hover {
|
|
background: linear-gradient(135deg, #7d8b9a 0%, #dde2e6 100%);
|
|
border-color: #adb5bd;
|
|
transform: translateY(-0.125rem);
|
|
color: #212529;
|
|
}
|
|
|
|
/* 4. ADD/SAVE BUTTONS (Green Theme) */
|
|
.btn-add-item,
|
|
.btn-save-changes,
|
|
.btn-modal-add {
|
|
background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0.25rem 1rem rgba(0, 176, 155, 0.3);
|
|
}
|
|
|
|
.btn-add-item:hover,
|
|
.btn-save-changes:hover,
|
|
.btn-modal-add:hover {
|
|
background: linear-gradient(135deg, #009e8a 0%, #85b936 100%);
|
|
transform: translateY(-0.125rem);
|
|
box-shadow: 0 0.5rem 1.5rem rgba(0, 176, 155, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
/* 5. USE BUTTON (Teal Theme) */
|
|
.btn-use-item {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
border: none;
|
|
color: white;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0.125rem 0.5rem rgba(79, 172, 254, 0.3);
|
|
}
|
|
|
|
.btn-use-item:hover {
|
|
background: linear-gradient(135deg, #3a9bfc 0%, #00d9e6 100%);
|
|
transform: translateY(-0.0625rem);
|
|
box-shadow: 0 0.25rem 0.75rem rgba(79, 172, 254, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
/* 6. RESTORE BUTTON (Orange Theme) */
|
|
.btn-restore-item {
|
|
background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%);
|
|
border: none;
|
|
color: #212529;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 0.125rem 0.5rem rgba(247, 151, 30, 0.3);
|
|
}
|
|
|
|
.btn-restore-item:hover {
|
|
background: linear-gradient(135deg, #e6891b 0%, #e6bf00 100%);
|
|
transform: translateY(-0.0625rem);
|
|
box-shadow: 0 0.25rem 0.75rem rgba(247, 151, 30, 0.4);
|
|
color: #212529;
|
|
}
|
|
|
|
.btn-icon {
|
|
width: clamp(2.5rem, 5vw, 3rem);
|
|
height: clamp(2.5rem, 5vw, 3rem);
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* RESPONSIVE BUTTON TEXT */
|
|
.btn span {
|
|
display: inline;
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.btn span:not(.d-none) {
|
|
font-size: clamp(0.75rem, 1.8vw, 0.875rem);
|
|
}
|
|
}
|
|
|
|
/* FLUID CONTAINERS */
|
|
.container-fluid {
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* RESPONSIVE PADDING */
|
|
.px-lg-4 { padding-left: clamp(1rem, 3vw, 2rem); padding-right: clamp(1rem, 3vw, 2rem); }
|
|
.py-4 { padding-top: clamp(1rem, 3vh, 2rem); padding-bottom: clamp(1rem, 3vh, 2rem); }
|
|
|
|
/* MAIN TABLE ZOOM SAFETY */
|
|
.table-responsive {
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.table {
|
|
min-width: 1200px;
|
|
font-size: clamp(0.875rem, 1.5vw, 1rem);
|
|
}
|
|
|
|
.table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background: #667eea !important;
|
|
color: white;
|
|
z-index: 10;
|
|
white-space: nowrap;
|
|
padding: clamp(0.75rem, 1.5vw, 1rem) clamp(0.5rem, 1vw, 0.75rem);
|
|
}
|
|
|
|
.table tbody td {
|
|
padding: clamp(0.5rem, 1vw, 0.75rem);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Ensure table cells don't collapse */
|
|
.table td, .table th {
|
|
min-width: 5rem;
|
|
}
|
|
|
|
/* ACTION BUTTONS IN TABLE */
|
|
.table td:last-child {
|
|
min-width: 8rem;
|
|
}
|
|
|
|
/* SUMMARY GRID */
|
|
.row.g-0 > [class*="col-"] {
|
|
padding: clamp(0.75rem, 2vw, 1rem);
|
|
}
|
|
|
|
/* BADGE SCALING */
|
|
.badge {
|
|
font-size: clamp(0.75rem, 1.5vw, 0.875em);
|
|
padding: clamp(0.375rem, 1vw, 0.5em) clamp(0.75rem, 1.5vw, 1em);
|
|
border-radius: clamp(0.375rem, 1vw, 0.5rem);
|
|
}
|
|
|
|
/* CARD SPACING */
|
|
.card-body {
|
|
padding: clamp(1rem, 3vw, 2rem);
|
|
}
|
|
|
|
/* FLEXIBLE LAYOUTS */
|
|
.d-flex {
|
|
gap: clamp(0.5rem, 1.5vw, 0.75rem);
|
|
}
|
|
|
|
/* ZOOM-PROOF ANIMATIONS */
|
|
@keyframes pulse-glow {
|
|
0% { box-shadow: 0 0 0 0 rgba(0, 176, 155, 0.7); }
|
|
70% { box-shadow: 0 0 0 0.625rem rgba(0, 176, 155, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(0, 176, 155, 0); }
|
|
}
|
|
|
|
.btn-add-item {
|
|
animation: pulse-glow 2s infinite;
|
|
}
|
|
|
|
/* TEXT WRAPPING */
|
|
.text-start {
|
|
word-break: break-word;
|
|
min-width: 12rem;
|
|
}
|
|
|
|
/* RESPONSIVE TYPOGRAPHY */
|
|
h1, .h2 {
|
|
font-size: clamp(1.5rem, 4vw, 2rem);
|
|
}
|
|
|
|
h5 {
|
|
font-size: clamp(1.125rem, 3vw, 1.5rem);
|
|
}
|
|
|
|
h6 {
|
|
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
|
}
|
|
|
|
/* UTILITY CLASSES FOR ZOOM */
|
|
.flex-wrap {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.gap-1 { gap: clamp(0.125rem, 0.5vw, 0.25rem); }
|
|
.gap-2 { gap: clamp(0.25rem, 1vw, 0.5rem); }
|
|
.gap-3 { gap: clamp(0.5rem, 2vw, 1rem); }
|
|
|
|
/* HIGH ZOOM (150%) ADJUSTMENTS */
|
|
@media (max-width: 576px) {
|
|
.table-responsive {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.btn {
|
|
padding: 0.5rem 0.875rem;
|
|
}
|
|
|
|
.modal-dialog {
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
/* Stack buttons on mobile */
|
|
.modal-footer .btn {
|
|
flex: 1;
|
|
min-width: 100px;
|
|
}
|
|
}
|
|
|
|
/* VERY HIGH ZOOM ADJUSTMENTS */
|
|
@media (min-resolution: 150dpi) {
|
|
.custom-input {
|
|
font-size: 1.125rem;
|
|
padding: 0.875rem 1.125rem;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.btn {
|
|
font-size: 1.125rem;
|
|
padding: 0.875rem 1.75rem;
|
|
}
|
|
}
|
|
|
|
/* LOW ZOOM (80%) ADJUSTMENTS */
|
|
@media (max-width: 768px) and (min-resolution: 96dpi) {
|
|
.modal-dialog {
|
|
max-width: 95vw;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* LARGE SCREEN OPTIMIZATION */
|
|
@media (min-width: 1920px) {
|
|
.container-fluid {
|
|
padding-left: 5%;
|
|
padding-right: 5%;
|
|
}
|
|
|
|
.modal-xl {
|
|
max-width: 1400px;
|
|
}
|
|
}
|
|
|
|
/* BUTTON ICONS */
|
|
.btn i {
|
|
font-size: 0.875em;
|
|
}
|
|
|
|
.btn-sm i {
|
|
font-size: 0.75em;
|
|
}
|
|
|
|
/* MODAL SCROLLBAR STYLING */
|
|
.modal-body::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
|
|
.modal-body::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.modal-body::-webkit-scrollbar-thumb {
|
|
background: #c1c1c1;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.modal-body::-webkit-scrollbar-thumb:hover {
|
|
background: #a8a8a8;
|
|
}
|
|
|
|
/* ACTION BUTTONS SPACING */
|
|
.btn-use-item,
|
|
.btn-restore-item {
|
|
white-space: nowrap;
|
|
padding: clamp(0.25rem, 0.75vw, 0.35rem) clamp(0.5rem, 1vw, 0.75rem);
|
|
min-height: clamp(1.75rem, 4vh, 2.25rem);
|
|
font-size: clamp(0.75rem, 1.5vw, 0.85rem);
|
|
}
|
|
|
|
/* Prevent wrapping inside action cell */
|
|
.table td:last-child {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Ensure enough space for both buttons */
|
|
.table th:last-child,
|
|
.table td:last-child {
|
|
min-width: 9rem;
|
|
}
|
|
|
|
/* ZOOM-LEVEL INDICATOR (for debugging) */
|
|
.zoom-level-indicator {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
z-index: 9999;
|
|
display: none; /* Hidden by default */
|
|
}
|
|
|
|
/* SECTION TITLES IN MODAL */
|
|
.section-title {
|
|
font-size: clamp(1rem, 2.5vw, 1.25rem);
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
padding-bottom: 0.5rem;
|
|
border-bottom: 2px solid #667eea;
|
|
margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
|
|
}
|
|
|
|
/* RESPONSIVE MODAL FOOTER */
|
|
@media (max-width: 768px) {
|
|
.modal-footer {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.modal-footer .btn {
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.modal-footer .btn:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
/* ZOOM-ADAPTIVE MODAL MAX HEIGHT */
|
|
@media (max-height: 500px) {
|
|
.modal-dialog {
|
|
max-height: 95vh;
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: 60vh;
|
|
}
|
|
}
|
|
|
|
/* PRINT STYLES */
|
|
@media print {
|
|
.modal {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: white;
|
|
}
|
|
|
|
.modal-dialog {
|
|
max-width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.modal-content {
|
|
box-shadow: none;
|
|
border: 1px solid #ddd;
|
|
}
|
|
}
|
|
/* 🔒 FORCE USE + RESTORE IN ONE SINGLE ROW */
|
|
|
|
/* Stop wrapping in Actions column */
|
|
.table td:last-child {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Override flex-wrap only for Use/Restore container */
|
|
.table td:last-child .d-flex {
|
|
flex-wrap: nowrap !important;
|
|
}
|
|
|
|
/* Compact + inline buttons */
|
|
.btn-use-item,
|
|
.btn-restore-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
padding: 0.35rem 0.65rem;
|
|
min-height: 2.2rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Ensure column never collapses */
|
|
.table th:last-child,
|
|
.table td:last-child {
|
|
min-width: 9rem;
|
|
}
|
|
|
|
</style>
|
|
|
|
@endsection |