Pdf Changes Done
This commit is contained in:
@@ -8,6 +8,7 @@ use App\Models\InvoiceItem;
|
||||
use App\Models\InvoiceInstallment;
|
||||
use App\Models\InvoiceChargeGroup;
|
||||
use App\Models\InvoiceChargeGroupItem;
|
||||
use App\Models\User;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Log;
|
||||
use Illuminate\Support\Facades\Storage;
|
||||
@@ -20,9 +21,9 @@ class AdminInvoiceController extends Controller
|
||||
// -------------------------------------------------------------
|
||||
public function index(Request $request)
|
||||
{
|
||||
// Container relation सह invoices load करतो
|
||||
$query = Invoice::with(['items', 'customer', 'container']);
|
||||
|
||||
// Search
|
||||
if ($request->filled('search')) {
|
||||
$search = $request->search;
|
||||
$query->where(function ($q) use ($search) {
|
||||
@@ -31,12 +32,10 @@ class AdminInvoiceController extends Controller
|
||||
});
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if ($request->filled('status') && $request->status !== 'all') {
|
||||
$query->where('status', $request->status);
|
||||
}
|
||||
|
||||
// Date range filter (invoice_date वर)
|
||||
if ($request->filled('start_date')) {
|
||||
$query->whereDate('invoice_date', '>=', $request->start_date);
|
||||
}
|
||||
@@ -45,27 +44,38 @@ class AdminInvoiceController extends Controller
|
||||
$query->whereDate('invoice_date', '<=', $request->end_date);
|
||||
}
|
||||
|
||||
// Latest first
|
||||
$invoices = $query->latest()->get();
|
||||
|
||||
return view('admin.invoice', compact('invoices'));
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// POPUP VIEW (AJAX)
|
||||
// POPUP VIEW + CUSTOMER DATA SYNC
|
||||
// -------------------------------------------------------------
|
||||
public function popup($id)
|
||||
{
|
||||
$invoice = Invoice::with([
|
||||
'items',
|
||||
'customer',
|
||||
'container',
|
||||
'chargeGroups.items.item',
|
||||
'chargeGroups.items',
|
||||
])->findOrFail($id);
|
||||
|
||||
// demo update असेल तर ठेव/काढ
|
||||
$invoice->update([
|
||||
'customer_email' => 'test@demo.com',
|
||||
'customer_address' => 'TEST ADDRESS',
|
||||
'pincode' => '999999',
|
||||
]);
|
||||
|
||||
$shipment = null;
|
||||
|
||||
return view('admin.popup_invoice', compact('invoice', 'shipment'));
|
||||
// आधीच group मध्ये असलेले item ids
|
||||
$groupedItemIds = $invoice->chargeGroups
|
||||
->flatMap(fn($group) => $group->items->pluck('invoice_item_id'))
|
||||
->unique()
|
||||
->values()
|
||||
->toArray();
|
||||
|
||||
return view('admin.popup_invoice', compact('invoice', 'shipment', 'groupedItemIds'));
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
@@ -177,7 +187,7 @@ class AdminInvoiceController extends Controller
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// 🔹 UPDATE INVOICE ITEMS (price + ttl_amount)
|
||||
// UPDATE INVOICE ITEMS
|
||||
// -------------------------------------------------------------
|
||||
public function updateItems(Request $request, Invoice $invoice)
|
||||
{
|
||||
@@ -236,6 +246,12 @@ class AdminInvoiceController extends Controller
|
||||
$invoice->gst_percent = $gstPercent;
|
||||
$invoice->save();
|
||||
|
||||
// ⭐ Total Charges (groups समावेत) पुन्हा कॅलक्युलेट
|
||||
$chargeGroupsTotal = $invoice->chargeGroups()->sum('total_charge');
|
||||
$invoice->charge_groups_total = $chargeGroupsTotal;
|
||||
$invoice->grand_total_with_charges = $invoice->final_amount_with_gst + $chargeGroupsTotal;
|
||||
$invoice->save();
|
||||
|
||||
Log::info('✅ Invoice items updated & totals recalculated', [
|
||||
'invoice_id' => $invoice->id,
|
||||
'final_amount' => $invoice->final_amount,
|
||||
@@ -245,13 +261,15 @@ class AdminInvoiceController extends Controller
|
||||
'cgst_percent' => $invoice->cgst_percent,
|
||||
'sgst_percent' => $invoice->sgst_percent,
|
||||
'igst_percent' => $invoice->igst_percent,
|
||||
'charge_groups_total' => $invoice->charge_groups_total,
|
||||
'grand_total_with_charges' => $invoice->grand_total_with_charges,
|
||||
]);
|
||||
|
||||
return back()->with('success', 'Invoice items updated successfully.');
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// PDF GENERATION USING mPDF
|
||||
// PDF GENERATION
|
||||
// -------------------------------------------------------------
|
||||
public function generateInvoicePDF($invoice)
|
||||
{
|
||||
@@ -302,7 +320,10 @@ class AdminInvoiceController extends Controller
|
||||
|
||||
$invoice = Invoice::findOrFail($invoice_id);
|
||||
$paidTotal = $invoice->installments()->sum('amount');
|
||||
$remaining = $invoice->final_amount_with_gst - $paidTotal;
|
||||
|
||||
// 👇 Total Charges (grand_total_with_charges) वरून remaining
|
||||
$grandTotal = $invoice->grand_total_with_charges;
|
||||
$remaining = $grandTotal - $paidTotal;
|
||||
|
||||
if ($request->amount > $remaining) {
|
||||
return response()->json([
|
||||
@@ -331,11 +352,12 @@ class AdminInvoiceController extends Controller
|
||||
'installment' => $installment,
|
||||
'totalPaid' => $newPaid,
|
||||
'gstAmount' => $invoice->gst_amount,
|
||||
'finalAmountWithGst' => $invoice->final_amount_with_gst,
|
||||
'finalAmountWithGst' => $grandTotal, // इथे grand total पाठव
|
||||
'baseAmount' => $invoice->final_amount,
|
||||
'remaining' => max(0, $invoice->final_amount_with_gst - $newPaid),
|
||||
'isCompleted' => $newPaid >= $invoice->final_amount_with_gst,
|
||||
'remaining' => max(0, $grandTotal - $newPaid),
|
||||
'isCompleted' => $newPaid >= $grandTotal,
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
@@ -349,33 +371,31 @@ class AdminInvoiceController extends Controller
|
||||
$installment->delete();
|
||||
|
||||
$paidTotal = $invoice->installments()->sum('amount');
|
||||
$remaining = $invoice->final_amount_with_gst - $paidTotal;
|
||||
|
||||
if ($remaining > 0 && $invoice->status === 'paid') {
|
||||
$invoice->update(['status' => 'pending']);
|
||||
}
|
||||
$grandTotal = $invoice->grand_total_with_charges;
|
||||
$remaining = $grandTotal - $paidTotal;
|
||||
|
||||
return response()->json([
|
||||
'status' => 'success',
|
||||
'message' => 'Installment deleted.',
|
||||
'totalPaid' => $paidTotal,
|
||||
'gstAmount' => $invoice->gst_amount,
|
||||
'finalAmountWithGst' => $invoice->final_amount_with_gst,
|
||||
'finalAmountWithGst' => $grandTotal, // इथेही
|
||||
'baseAmount' => $invoice->final_amount,
|
||||
'remaining' => $remaining,
|
||||
'isZero' => $paidTotal == 0,
|
||||
]);
|
||||
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------
|
||||
// CHARGE GROUP SAVE (NEW)
|
||||
// CHARGE GROUP SAVE (no AJAX branch)
|
||||
// -------------------------------------------------------------
|
||||
public function storeChargeGroup(Request $request, $invoiceId)
|
||||
{
|
||||
$invoice = Invoice::with('items')->findOrFail($invoiceId);
|
||||
|
||||
$data = $request->validate([
|
||||
'group_name' => 'nullable|string|max:255',
|
||||
'group_name' => 'required|string|max:255',
|
||||
'basis_type' => 'required|in:ttl_qty,amount,ttl_cbm,ttl_kg',
|
||||
'basis_value' => 'required|numeric',
|
||||
'rate' => 'required|numeric|min:0.0001',
|
||||
@@ -384,9 +404,19 @@ class AdminInvoiceController extends Controller
|
||||
'item_ids.*' => 'integer|exists:invoice_items,id',
|
||||
]);
|
||||
|
||||
$exists = InvoiceChargeGroup::where('invoice_id', $invoice->id)
|
||||
->where('group_name', $data['group_name'])
|
||||
->exists();
|
||||
|
||||
if ($exists) {
|
||||
return back()
|
||||
->withErrors(['group_name' => 'This group name is already used for this invoice.'])
|
||||
->withInput();
|
||||
}
|
||||
|
||||
$group = InvoiceChargeGroup::create([
|
||||
'invoice_id' => $invoice->id,
|
||||
'group_name' => $data['group_name'] ?? null,
|
||||
'group_name' => $data['group_name'],
|
||||
'basis_type' => $data['basis_type'],
|
||||
'basis_value' => $data['basis_value'],
|
||||
'rate' => $data['rate'],
|
||||
@@ -400,39 +430,14 @@ class AdminInvoiceController extends Controller
|
||||
]);
|
||||
}
|
||||
|
||||
if ($request->ajax()) {
|
||||
// load items with invoice item relation
|
||||
$group->load(['items.item']);
|
||||
// ⭐ Charge groups नुसार Total Charges सेट करा
|
||||
$chargeGroupsTotal = $invoice->chargeGroups()->sum('total_charge');
|
||||
$grandTotal = $invoice->final_amount_with_gst + $chargeGroupsTotal;
|
||||
|
||||
// prepare simple array for JS
|
||||
$itemsPayload = $group->items->map(function ($gi) {
|
||||
$it = $gi->item;
|
||||
return [
|
||||
'description' => $it->description,
|
||||
'qty' => $it->qty,
|
||||
'ttlqty' => $it->ttl_qty,
|
||||
'cbm' => $it->cbm,
|
||||
'ttlcbm' => $it->ttl_cbm,
|
||||
'kg' => $it->kg,
|
||||
'ttlkg' => $it->ttl_kg,
|
||||
'amount' => $it->ttl_amount,
|
||||
];
|
||||
});
|
||||
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Charge group created successfully.',
|
||||
'group' => [
|
||||
'id' => $group->id,
|
||||
'group_name' => $group->group_name,
|
||||
'basis_type' => $group->basis_type,
|
||||
'basis_value' => $group->basis_value,
|
||||
'rate' => $group->rate,
|
||||
'total_charge'=> $group->total_charge,
|
||||
'items' => $itemsPayload,
|
||||
],
|
||||
$invoice->update([
|
||||
'charge_groups_total' => $chargeGroupsTotal,
|
||||
'grand_total_with_charges' => $grandTotal,
|
||||
]);
|
||||
}
|
||||
|
||||
return redirect()
|
||||
->back()
|
||||
|
||||
@@ -70,11 +70,13 @@ class AdminOrderController extends Controller
|
||||
'invoices.final_amount_with_gst',
|
||||
'invoices.status as invoice_status',
|
||||
'invoices.mark_no',
|
||||
'invoices.container_id', // <<< हे नक्की घाल
|
||||
'containers.container_number',
|
||||
'containers.container_date',
|
||||
DB::raw('COALESCE(invoices.company_name, mark_list.company_name) as company_name'),
|
||||
DB::raw('COALESCE(invoices.customer_name, mark_list.customer_name) as customer_name')
|
||||
)
|
||||
|
||||
->when($request->filled('search'), function ($q) use ($request) {
|
||||
$search = trim($request->search);
|
||||
$q->where(function ($qq) use ($search) {
|
||||
|
||||
@@ -10,6 +10,8 @@ use App\Models\InvoiceItem;
|
||||
use Illuminate\Http\Request;
|
||||
use Maatwebsite\Excel\Facades\Excel;
|
||||
use Carbon\Carbon;
|
||||
use Barryvdh\DomPDF\Facade\Pdf;
|
||||
use Illuminate\Support\Facades\Storage; // <-- added for Excel download
|
||||
|
||||
class ContainerController extends Controller
|
||||
{
|
||||
@@ -280,10 +282,7 @@ class ContainerController extends Controller
|
||||
->withInput();
|
||||
}
|
||||
|
||||
/*
|
||||
* FORMULA CHECK – UPDATED WITH AMOUNT FIX + NUMBER SANITIZER
|
||||
*/
|
||||
|
||||
// FORMULA CHECK
|
||||
$cleanNumber = function ($value) {
|
||||
if (is_string($value)) {
|
||||
$value = str_replace(',', '', trim($value));
|
||||
@@ -311,7 +310,6 @@ class ContainerController extends Controller
|
||||
$desc = $essentialColumns['desc_col'] !== null ? (string)($row[$essentialColumns['desc_col']] ?? '') : '';
|
||||
$mark = $essentialColumns['itemno_col'] !== null ? (string)($row[$essentialColumns['itemno_col']] ?? '') : '';
|
||||
|
||||
// expected
|
||||
$expTtlQty = $qty * $ctn;
|
||||
$expTtlCbm = $cbm * $ctn;
|
||||
$expTtlKg = $kg * $ctn;
|
||||
@@ -350,7 +348,6 @@ class ContainerController extends Controller
|
||||
}
|
||||
|
||||
if (!empty($rowErrors)) {
|
||||
// full row data map for excel table
|
||||
$rowData = [];
|
||||
foreach ($header as $colIndex => $headingText) {
|
||||
$value = $row[$colIndex] ?? null;
|
||||
@@ -368,7 +365,7 @@ class ContainerController extends Controller
|
||||
}
|
||||
}
|
||||
|
||||
// MARK CHECK: strict - collect ALL marks + unmatched rows
|
||||
// MARK CHECK
|
||||
$marksFromExcel = [];
|
||||
foreach ($cleanedRows as $item) {
|
||||
$row = $item['row'];
|
||||
@@ -397,7 +394,6 @@ class ContainerController extends Controller
|
||||
$markErrors = [];
|
||||
|
||||
if (!empty($unmatchedMarks)) {
|
||||
|
||||
foreach ($cleanedRows as $item) {
|
||||
$row = $item['row'];
|
||||
$offset = $item['offset'];
|
||||
@@ -525,15 +521,17 @@ class ContainerController extends Controller
|
||||
$invoice = new Invoice();
|
||||
$invoice->container_id = $container->id;
|
||||
// $invoice->customer_id = $customerId;
|
||||
|
||||
// इथे Mark No सेट करतो
|
||||
$invoice->mark_no = $firstMark;
|
||||
|
||||
$invoice->invoice_number = $this->generateInvoiceNumber();
|
||||
$invoice->invoice_date = now()->toDateString();
|
||||
// NEW (add this):
|
||||
$invoice->due_date = Carbon::parse($invoice->invoice_date)->addDays(10)->format('Y-m-d');
|
||||
|
||||
// invoice_date = container_date
|
||||
$invoice->invoice_date = $container->container_date;
|
||||
|
||||
// due_date = container_date + 10 days
|
||||
$invoice->due_date = Carbon::parse($invoice->invoice_date)
|
||||
->addDays(10)
|
||||
->format('Y-m-d');
|
||||
|
||||
if ($snap) {
|
||||
$invoice->customer_name = $snap['customer_name'] ?? null;
|
||||
@@ -627,40 +625,120 @@ class ContainerController extends Controller
|
||||
->where('id', $rowId)
|
||||
->first();
|
||||
|
||||
if (!$row) continue;
|
||||
if (!$row) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// original update
|
||||
// 1) update container_rows.data
|
||||
$data = $row->data ?? [];
|
||||
foreach ($cols as $colHeader => $value) {
|
||||
$data[$colHeader] = $value;
|
||||
}
|
||||
$row->update([
|
||||
'data' => $data,
|
||||
]);
|
||||
$row->update(['data' => $data]);
|
||||
|
||||
// 2) normalize keys
|
||||
$normalizedMap = [];
|
||||
foreach ($data as $key => $value) {
|
||||
if ($key === null || $key === '') {
|
||||
continue;
|
||||
}
|
||||
|
||||
$normKey = strtoupper((string)$key);
|
||||
$normKey = str_replace([' ', '/', '-', '.'], '', $normKey);
|
||||
$normalizedMap[$normKey] = $value;
|
||||
}
|
||||
|
||||
// helper: get first numeric value from given keys
|
||||
$getFirstNumeric = function (array $map, array $possibleKeys) {
|
||||
foreach ($possibleKeys as $search) {
|
||||
$normSearch = strtoupper($search);
|
||||
$normSearch = str_replace([' ', '/', '-', '.'], '', $normSearch);
|
||||
|
||||
foreach ($map as $nKey => $value) {
|
||||
if (strpos($nKey, $normSearch) !== false) {
|
||||
if (is_numeric($value)) {
|
||||
return (float)$value;
|
||||
}
|
||||
if (is_string($value) && is_numeric(trim($value))) {
|
||||
return (float)trim($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
// 3) read values – QTY vs TTLQTY separately
|
||||
$ctnKeys = ['CTN', 'CTNS'];
|
||||
$qtyKeys = ['QTY', 'PCS', 'PIECES']; // per-carton qty
|
||||
$ttlQtyKeys = ['ITLQTY', 'TOTALQTY', 'TTLQTY']; // total qty
|
||||
$cbmKeys = ['TOTALCBM', 'TTLCBM', 'ITLCBM', 'CBM'];
|
||||
$kgKeys = ['TOTALKG', 'TTKG', 'KG', 'WEIGHT'];
|
||||
$amountKeys = ['AMOUNT', 'TTLAMOUNT', 'TOTALAMOUNT'];
|
||||
|
||||
$ctn = $getFirstNumeric($normalizedMap, $ctnKeys);
|
||||
|
||||
// per carton qty
|
||||
$qty = $getFirstNumeric($normalizedMap, $qtyKeys);
|
||||
|
||||
// total qty direct from TOTALQTY/TTLQTY/ITLQTY
|
||||
$ttlQ = $getFirstNumeric($normalizedMap, $ttlQtyKeys);
|
||||
|
||||
// if total column is 0 then compute ctn * qty
|
||||
if ($ttlQ == 0 && $ctn && $qty) {
|
||||
$ttlQ = $ctn * $qty;
|
||||
}
|
||||
|
||||
$cbm = $getFirstNumeric($normalizedMap, ['CBM']);
|
||||
$ttlC = $getFirstNumeric($normalizedMap, ['TOTALCBM', 'TTLCBM', 'ITLCBM']);
|
||||
if ($ttlC == 0 && $cbm && $ctn) {
|
||||
$ttlC = $cbm * $ctn;
|
||||
}
|
||||
|
||||
$kg = $getFirstNumeric($normalizedMap, ['KG', 'WEIGHT']);
|
||||
$ttlK = $getFirstNumeric($normalizedMap, ['TOTALKG', 'TTKG']);
|
||||
if ($ttlK == 0 && $kg && $ctn) {
|
||||
$ttlK = $kg * $ctn;
|
||||
}
|
||||
|
||||
$price = $getFirstNumeric($normalizedMap, ['PRICE', 'RATE']);
|
||||
$amount = $getFirstNumeric($normalizedMap, $amountKeys);
|
||||
if ($amount == 0 && $price && $ttlQ) {
|
||||
$amount = $price * $ttlQ;
|
||||
}
|
||||
|
||||
// 4) get description
|
||||
$desc = null;
|
||||
foreach (['DESCRIPTION', 'DESC'] as $dKey) {
|
||||
$normD = str_replace([' ', '/', '-', '.'], '', strtoupper($dKey));
|
||||
foreach ($normalizedMap as $nKey => $v) {
|
||||
if (strpos($nKey, $normD) !== false) {
|
||||
$desc = is_string($v) ? trim($v) : $v;
|
||||
break 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// extra: update linked invoice items & invoice totals
|
||||
$rowIndex = $row->row_index;
|
||||
|
||||
$ctn = (float) ($data['CTN'] ?? $data['CTNS'] ?? 0);
|
||||
$qty = (float) ($data['QTY'] ?? 0);
|
||||
$ttlQ = (float) ($data['TTLQTY'] ?? $data['TOTALQTY'] ?? $data['TTL/QTY'] ?? ($ctn * $qty));
|
||||
$price = (float) ($data['PRICE'] ?? 0);
|
||||
$cbm = (float) ($data['CBM'] ?? 0);
|
||||
$ttlC = (float) ($data['TOTALCBM'] ?? $data['TTL CBM'] ?? ($cbm * $ctn));
|
||||
$kg = (float) ($data['KG'] ?? 0);
|
||||
$ttlK = (float) ($data['TOTALKG'] ?? $data['TTL KG'] ?? ($kg * $ctn));
|
||||
$amount = (float) ($data['AMOUNT'] ?? ($price * $ttlQ));
|
||||
$desc = $data['DESCRIPTION'] ?? $data['DESC'] ?? null;
|
||||
|
||||
// 5) find linked invoice_items
|
||||
$items = InvoiceItem::where('container_id', $container->id)
|
||||
->where('container_row_index', $rowIndex)
|
||||
->get();
|
||||
|
||||
if ($items->isEmpty() && $desc) {
|
||||
$items = InvoiceItem::where('container_id', $container->id)
|
||||
->whereNull('container_row_index')
|
||||
->where('description', $desc)
|
||||
->get();
|
||||
}
|
||||
|
||||
// 6) update invoice_items + recalc invoice totals
|
||||
foreach ($items as $item) {
|
||||
$item->description = $desc;
|
||||
$item->ctn = $ctn;
|
||||
$item->qty = $qty;
|
||||
$item->ttl_qty = $ttlQ;
|
||||
$item->qty = $qty; // per carton
|
||||
$item->ttl_qty = $ttlQ; // total
|
||||
$item->price = $price;
|
||||
$item->ttl_amount = $amount;
|
||||
$item->cbm = $cbm;
|
||||
@@ -703,17 +781,15 @@ class ContainerController extends Controller
|
||||
->with('success', 'Excel rows updated successfully.');
|
||||
}
|
||||
|
||||
// app/Http/Controllers/ContainerController.php
|
||||
public function updateStatus(Request $request, Container $container)
|
||||
{
|
||||
public function updateStatus(Request $request, Container $container)
|
||||
{
|
||||
$request->validate([
|
||||
'status' => 'required|in:pending,in-progress,completed,cancelled',
|
||||
'status' => 'required|in:container-ready,export-custom,international-transit,arrived-at-india,import-custom,warehouse,domestic-distribution,out-for-delivery,delivered',
|
||||
]);
|
||||
|
||||
$container->status = $request->status;
|
||||
$container->save();
|
||||
|
||||
// जर AJAX असेल तर JSON दे
|
||||
if ($request->wantsJson() || $request->ajax()) {
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
@@ -721,15 +797,23 @@ public function updateStatus(Request $request, Container $container)
|
||||
]);
|
||||
}
|
||||
|
||||
// normal form submit असेल तर redirect
|
||||
return back()->with('success', 'Container status updated.');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public function destroy(Container $container)
|
||||
{
|
||||
$container->delete();
|
||||
return redirect()->route('containers.index')->with('success', 'Container deleted.');
|
||||
|
||||
if (request()->wantsJson() || request()->ajax()) {
|
||||
return response()->json([
|
||||
'success' => true,
|
||||
'message' => 'Container deleted',
|
||||
]);
|
||||
}
|
||||
|
||||
return redirect()
|
||||
->route('containers.index')
|
||||
->with('success', 'Container deleted.');
|
||||
}
|
||||
|
||||
private function generateInvoiceNumber(): string
|
||||
@@ -755,4 +839,105 @@ public function updateStatus(Request $request, Container $container)
|
||||
|
||||
return 'INV-' . $year . '-' . str_pad($nextSeq, 6, '0', STR_PAD_LEFT);
|
||||
}
|
||||
|
||||
public function downloadPdf(Container $container)
|
||||
{
|
||||
$container->load('rows');
|
||||
|
||||
$pdf = Pdf::loadView('admin.container_pdf', [
|
||||
'container' => $container,
|
||||
])->setPaper('a4', 'landscape');
|
||||
|
||||
$fileName = 'container-'.$container->container_number.'.pdf';
|
||||
|
||||
return $pdf->download($fileName);
|
||||
}
|
||||
|
||||
public function downloadExcel(Container $container)
|
||||
{
|
||||
if (!$container->excel_file) {
|
||||
abort(404, 'Excel file not found on record.');
|
||||
}
|
||||
|
||||
// Stored path like "containers/abc.xlsx"
|
||||
$path = $container->excel_file;
|
||||
|
||||
if (!Storage::exists($path)) {
|
||||
abort(404, 'Excel file missing on server.');
|
||||
}
|
||||
|
||||
$fileName = 'container-'.$container->container_number.'.xlsx';
|
||||
|
||||
return Storage::download($path, $fileName);
|
||||
}
|
||||
|
||||
|
||||
public function popupPopup(Container $container)
|
||||
{
|
||||
// existing show सारखाच data वापरू
|
||||
$container->load('rows');
|
||||
|
||||
// summary आधीपासून index() मध्ये जसा काढतोस तसाच logic reuse
|
||||
$rows = $container->rows ?? collect();
|
||||
|
||||
$totalCtn = 0;
|
||||
$totalQty = 0;
|
||||
$totalCbm = 0;
|
||||
$totalKg = 0;
|
||||
|
||||
$ctnKeys = ['CTN', 'CTNS'];
|
||||
$qtyKeys = ['ITLQTY', 'TOTALQTY', 'TTLQTY', 'QTY', 'PCS', 'PIECES'];
|
||||
$cbmKeys = ['TOTALCBM', 'TTLCBM', 'ITLCBM', 'CBM'];
|
||||
$kgKeys = ['TOTALKG', 'TTKG', 'KG', 'WEIGHT'];
|
||||
|
||||
$getFirstNumeric = function (array $data, array $possibleKeys) {
|
||||
$normalizedMap = [];
|
||||
foreach ($data as $key => $value) {
|
||||
if ($key === null) continue;
|
||||
$normKey = strtoupper((string)$key);
|
||||
$normKey = str_replace([' ', ',', '-', '.', "\n", "\r", "\t"], '', $normKey);
|
||||
$normalizedMap[$normKey] = $value;
|
||||
}
|
||||
|
||||
foreach ($possibleKeys as $search) {
|
||||
$normSearch = strtoupper($search);
|
||||
$normSearch = str_replace([' ', ',', '-', '.', "\n", "\r", "\t"], '', $normSearch);
|
||||
|
||||
foreach ($normalizedMap as $nKey => $value) {
|
||||
if (strpos($nKey, $normSearch) !== false) {
|
||||
if (is_numeric($value)) {
|
||||
return (float)$value;
|
||||
}
|
||||
if (is_string($value) && is_numeric(trim($value))) {
|
||||
return (float)trim($value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
foreach ($rows as $row) {
|
||||
$data = $row->data ?? [];
|
||||
if (!is_array($data)) continue;
|
||||
|
||||
$totalCtn += $getFirstNumeric($data, $ctnKeys);
|
||||
$totalQty += $getFirstNumeric($data, $qtyKeys);
|
||||
$totalCbm += $getFirstNumeric($data, $cbmKeys);
|
||||
$totalKg += $getFirstNumeric($data, $kgKeys);
|
||||
}
|
||||
|
||||
$summary = [
|
||||
'total_ctn' => round($totalCtn, 2),
|
||||
'total_qty' => round($totalQty, 2),
|
||||
'total_cbm' => round($totalCbm, 3),
|
||||
'total_kg' => round($totalKg, 2),
|
||||
];
|
||||
|
||||
return view('admin.partials.container_popup_readonly', [
|
||||
'container' => $container,
|
||||
'summary' => $summary,
|
||||
]);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -11,6 +11,8 @@ class InvoiceItem extends Model
|
||||
|
||||
protected $fillable = [
|
||||
'invoice_id',
|
||||
'container_id', // Container mapping
|
||||
'container_row_index', // Container row index
|
||||
|
||||
'description',
|
||||
'ctn',
|
||||
@@ -38,7 +40,6 @@ class InvoiceItem extends Model
|
||||
return $this->belongsTo(Invoice::class);
|
||||
}
|
||||
|
||||
|
||||
public function chargeGroupItems()
|
||||
{
|
||||
return $this->hasMany(InvoiceChargeGroupItem::class, 'invoice_item_id');
|
||||
@@ -114,4 +115,3 @@ class InvoiceItem extends Model
|
||||
return $basis * $rate;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -89,10 +89,11 @@ class User extends Authenticatable implements JWTSubject
|
||||
{
|
||||
return [];
|
||||
}
|
||||
public function invoices()
|
||||
{
|
||||
return $this->hasMany(\App\Models\Invoice::class, 'customer_id', 'id');
|
||||
}
|
||||
public function invoices()
|
||||
{
|
||||
return $this->hasMany(\App\Models\Invoice::class, 'customer_id', 'customer_id');
|
||||
}
|
||||
|
||||
|
||||
// App\Models\User.php
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ return new class extends Migration
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('containers', function (Blueprint $table) {
|
||||
$table->string('status', 20)
|
||||
$table->string('status', 21)
|
||||
->default('pending')
|
||||
->after('container_date');
|
||||
});
|
||||
|
||||
@@ -6,21 +6,24 @@ use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up()
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('invoices', function (Blueprint $table) {
|
||||
$table->date('duedate')->nullable()->after('invoicedate');
|
||||
// column आधीच आहे का हे check करून, नसेल तरच add करायचा
|
||||
if (!Schema::hasColumn('invoices', 'due_date')) {
|
||||
$table->date('due_date')
|
||||
->nullable()
|
||||
->after('invoice_date');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
public function down()
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('invoices', function (Blueprint $table) {
|
||||
$table->dropColumn('duedate');
|
||||
if (Schema::hasColumn('invoices', 'due_date')) {
|
||||
$table->dropColumn('due_date');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*/
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('containers', function (Blueprint $table) {
|
||||
$table->string('status', 50)->change();
|
||||
});
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('containers', function (Blueprint $table) {
|
||||
$table->string('status', 20)->change();
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
BIN
public/invoices/invoice-INV-2026-000110.pdf
Normal file
BIN
public/invoices/invoice-INV-2026-000110.pdf
Normal file
Binary file not shown.
BIN
public/invoices/invoice-INV-2026-000116.pdf
Normal file
BIN
public/invoices/invoice-INV-2026-000116.pdf
Normal file
Binary file not shown.
BIN
public/invoices/invoice-INV-2026-000117.pdf
Normal file
BIN
public/invoices/invoice-INV-2026-000117.pdf
Normal file
Binary file not shown.
BIN
public/invoices/invoice-INV-2026-000134.pdf
Normal file
BIN
public/invoices/invoice-INV-2026-000134.pdf
Normal file
Binary file not shown.
@@ -0,0 +1,102 @@
|
||||
<div class="container-fluid py-2">
|
||||
|
||||
{{-- Top info cards (container / date / status) --}}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Container Name</small>
|
||||
<div class="fw-semibold">{{ $container->container_name ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Container No</small>
|
||||
<div class="fw-semibold">{{ $container->container_number ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Container Date</small>
|
||||
<div class="fw-semibold">
|
||||
{{ $container->container_date ? \Carbon\Carbon::parse($container->container_date)->format('d-m-Y') : '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Status</small>
|
||||
<div class="fw-semibold text-capitalize">{{ $container->status ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Totals (CTN / Qty / CBM / KG) --}}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Total CTN</small>
|
||||
<div class="fw-semibold">{{ $summary['total_ctn'] ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Total Qty</small>
|
||||
<div class="fw-semibold">{{ $summary['total_qty'] ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Total CBM</small>
|
||||
<div class="fw-semibold">{{ $summary['total_cbm'] ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 mb-2">
|
||||
<div class="card p-2">
|
||||
<small class="text-muted">Total KG</small>
|
||||
<div class="fw-semibold">{{ $summary['total_kg'] ?? '-' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Excel rows – same headings as container_show --}}
|
||||
@php
|
||||
$allHeadings = [];
|
||||
foreach ($container->rows as $row) {
|
||||
if (is_array($row->data)) {
|
||||
$allHeadings = array_unique(array_merge($allHeadings, array_keys($row->data)));
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
<div class="table-responsive" style="max-height: 500px; border-radius: 8px;">
|
||||
<table class="table table-sm table-bordered align-middle">
|
||||
<thead class="table-warning">
|
||||
<tr>
|
||||
<th style="width: 40px;">#</th>
|
||||
@foreach($allHeadings as $heading)
|
||||
<th>{{ $heading }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($container->rows as $index => $row)
|
||||
<tr>
|
||||
<td>{{ $index + 1 }}</td>
|
||||
@foreach($allHeadings as $heading)
|
||||
@php
|
||||
$val = is_array($row->data) ? ($row->data[$heading] ?? '') : '';
|
||||
@endphp
|
||||
<td>{{ $val }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="{{ count($allHeadings) + 1 }}" class="text-center text-muted py-3">
|
||||
No Excel rows for this container.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -2603,11 +2603,12 @@ function renderPaymentTable(list){
|
||||
<td>${escapeHtml(entry.entry_date)}</td>
|
||||
<td>${escapeHtml(entry.description)}</td>
|
||||
|
||||
<!-- Order Quantity - Clickable number without box -->
|
||||
<td>
|
||||
<button type="button" class="entry-link"
|
||||
onclick="openEntryOrdersModal('${escapeHtml(entry.entry_no)}')">
|
||||
<span onclick="openEntryOrdersModal('${escapeHtml(entry.entry_no)}')"
|
||||
style="cursor: pointer; color: #276dea; font-weight: 600; text-decoration: underline; text-decoration-color: #ccc;">
|
||||
${entry.order_quantity ?? '-'}
|
||||
</button>
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td>${escapeHtml(entry.region)}</td>
|
||||
@@ -2680,7 +2681,6 @@ function renderPaymentTable(list){
|
||||
|
||||
|
||||
|
||||
|
||||
function cycleToggle(btn) {
|
||||
// वर्तमान position घेऊन पुढचा स्टेट कॅल्क्युलेट करा
|
||||
let pos = parseInt(btn.dataset.pos || '0', 10); // 0 = unpaid, 1 = pending, 2 = paid
|
||||
|
||||
@@ -98,9 +98,7 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.filter-title i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
.filter-title i { color: var(--primary-color); }
|
||||
|
||||
.filter-grid {
|
||||
display: grid;
|
||||
@@ -108,9 +106,7 @@
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
position: relative;
|
||||
}
|
||||
.filter-group { position: relative; }
|
||||
|
||||
.filter-group label {
|
||||
display: block;
|
||||
@@ -139,9 +135,7 @@
|
||||
box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.1);
|
||||
}
|
||||
|
||||
.filter-input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.filter-input::placeholder { color: #94a3b8; }
|
||||
|
||||
.filter-actions {
|
||||
display: flex;
|
||||
@@ -212,9 +206,7 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.card-header h2 i {
|
||||
color: white;
|
||||
}
|
||||
.card-header h2 i { color: white; }
|
||||
|
||||
.stats-badge {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
@@ -239,9 +231,7 @@
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.container-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.container-item:last-child { border-bottom: none; }
|
||||
|
||||
.container-header {
|
||||
display: flex;
|
||||
@@ -297,40 +287,92 @@
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
/* STATUS DROPDOWN (badge look) */
|
||||
.status-dropdown {
|
||||
position: relative;
|
||||
min-width: 190px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status-dropdown-toggle {
|
||||
padding: 8px 16px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid var(--border-color);
|
||||
background: #ffffff;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.3px;
|
||||
display: inline-flex;
|
||||
color: var(--dark-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status-badge i {
|
||||
font-size: 10px;
|
||||
.status-dropdown-toggle span { white-space: nowrap; }
|
||||
|
||||
.status-dropdown-menu {
|
||||
position: absolute;
|
||||
top: -230%;
|
||||
right: 0;
|
||||
z-index: 30;
|
||||
background: #ffffff;
|
||||
border-radius: 14px;
|
||||
padding: 8px 0;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border: 1px solid var(--border-color);
|
||||
width: 220px;
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
.status-dropdown-menu.open { display: block; }
|
||||
|
||||
.status-option {
|
||||
padding: 6px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--dark-text);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: background 0.15s;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.status-in-progress {
|
||||
background: #dbeafe;
|
||||
color: #1d4ed8;
|
||||
.status-option:hover { background: #eef2ff; }
|
||||
|
||||
.status-option .dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
.status-option.active .dot {
|
||||
background: #22c55e;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
/* COLOR MAPPING per status – dropdown tint + main toggle text color */
|
||||
.status-option.status-container-ready { background: #eff6ff; color: #1d4ed8; }
|
||||
.status-option.status-export-custom { background: #fff7ed; color: #b45309; }
|
||||
.status-option.status-international-transit { background: #f5f3ff; color: #4c1d95; }
|
||||
.status-option.status-arrived-at-india { background: #ecfdf5; color: #15803d; }
|
||||
.status-option.status-import-custom { background: #fffbeb; color: #92400e; }
|
||||
.status-option.status-warehouse { background: #f4f4f5; color: #374151; }
|
||||
.status-option.status-domestic-distribution { background: #faf5ff; color: #6d28d9; }
|
||||
.status-option.status-out-for-delivery { background: #eff6ff; color: #1d4ed8; }
|
||||
.status-option.status-delivered { background: #ecfdf5; color: #15803d; }
|
||||
|
||||
.status-dropdown-toggle.status-container-ready { background: #eff6ff; color: #1d4ed8; }
|
||||
.status-dropdown-toggle.status-export-custom { background: #fff7ed; color: #b45309; }
|
||||
.status-dropdown-toggle.status-international-transit { background: #f5f3ff; color: #4c1d95; }
|
||||
.status-dropdown-toggle.status-arrived-at-india { background: #ecfdf5; color: #15803d; }
|
||||
.status-dropdown-toggle.status-import-custom { background: #fffbeb; color: #92400e; }
|
||||
.status-dropdown-toggle.status-warehouse { background: #f4f4f5; color: #374151; }
|
||||
.status-dropdown-toggle.status-domestic-distribution { background: #faf5ff; color: #6d28d9; }
|
||||
.status-dropdown-toggle.status-out-for-delivery { background: #eff6ff; color: #1d4ed8; }
|
||||
.status-dropdown-toggle.status-delivered { background: #ecfdf5; color: #15803d; }
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
@@ -373,39 +415,7 @@
|
||||
color: white;
|
||||
}
|
||||
|
||||
.update-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
color: var(--dark-text);
|
||||
background: white;
|
||||
min-width: 140px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.update-btn {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.update-btn:hover {
|
||||
background: #3b5de6;
|
||||
}
|
||||
.update-form { position: relative; }
|
||||
|
||||
.no-results {
|
||||
text-align: center;
|
||||
@@ -444,16 +454,13 @@
|
||||
animation: slideIn 0.3s ease;
|
||||
}
|
||||
|
||||
.success-message i {
|
||||
font-size: 20px;
|
||||
}
|
||||
.success-message i { font-size: 20px; }
|
||||
|
||||
@keyframes slideIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* 🔥 Totals section */
|
||||
.totals-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||||
@@ -504,9 +511,7 @@
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.filter-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.filter-grid { grid-template-columns: 1fr; }
|
||||
.container-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@@ -519,13 +524,8 @@
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.update-form {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
.status-select, .update-btn {
|
||||
width: 100%;
|
||||
}
|
||||
.update-form { width: 100%; }
|
||||
.status-dropdown { width: 100%; }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -569,10 +569,15 @@
|
||||
<label><i class="fas fa-tag"></i> Status</label>
|
||||
<select name="status" class="filter-select">
|
||||
<option value="">All Status</option>
|
||||
<option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="in-progress" {{ request('status') == 'in-progress' ? 'selected' : '' }}>In Progress</option>
|
||||
<option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
|
||||
<option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
|
||||
<option value="container-ready" {{ request('status') == 'container-ready' ? 'selected' : '' }}>Container Ready</option>
|
||||
<option value="export-custom" {{ request('status') == 'export-custom' ? 'selected' : '' }}>Export Custom</option>
|
||||
<option value="international-transit" {{ request('status') == 'international-transit' ? 'selected' : '' }}>International Transit</option>
|
||||
<option value="arrived-at-india" {{ request('status') == 'arrived-at-india' ? 'selected' : '' }}>Arrived at India</option>
|
||||
<option value="import-custom" {{ request('status') == 'import-custom' ? 'selected' : '' }}>Import Custom</option>
|
||||
<option value="warehouse" {{ request('status') == 'warehouse' ? 'selected' : '' }}>Warehouse</option>
|
||||
<option value="domestic-distribution" {{ request('status') == 'domestic-distribution' ? 'selected' : '' }}>Domestic Distribution</option>
|
||||
<option value="out-for-delivery" {{ request('status') == 'out-for-delivery' ? 'selected' : '' }}>Out for Delivery</option>
|
||||
<option value="delivered" {{ request('status') == 'delivered' ? 'selected' : '' }}>Delivered</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@@ -610,22 +615,31 @@
|
||||
<p>Get started by creating your first container</p>
|
||||
</div>
|
||||
@else
|
||||
@php
|
||||
$labels = [
|
||||
'container-ready' => 'Container Ready',
|
||||
'export-custom' => 'Export Custom',
|
||||
'international-transit' => 'International Transit',
|
||||
'arrived-at-india' => 'Arrived at India',
|
||||
'import-custom' => 'Import Custom',
|
||||
'warehouse' => 'Warehouse',
|
||||
'domestic-distribution' => 'Domestic Distribution',
|
||||
'out-for-delivery' => 'Out for Delivery',
|
||||
'delivered' => 'Delivered',
|
||||
];
|
||||
@endphp
|
||||
|
||||
@foreach($containers as $container)
|
||||
@php
|
||||
$status = $container->status;
|
||||
$statusClass = match ($status) {
|
||||
'completed' => 'status-completed',
|
||||
'in-progress' => 'status-in-progress',
|
||||
'cancelled' => 'status-cancelled',
|
||||
default => 'status-pending',
|
||||
};
|
||||
$status = $container->status ?? 'container-ready';
|
||||
$statusLabel = $labels[$status] ?? ucfirst(str_replace('-', ' ', $status));
|
||||
@endphp
|
||||
|
||||
<div class="container-item">
|
||||
<div class="container-header">
|
||||
<div class="container-info">
|
||||
<div class="container-avatar">
|
||||
{{ substr($container->container_name, 0, 2) }}
|
||||
{{ strtoupper(substr($container->container_name, 0, 2)) }}
|
||||
</div>
|
||||
<div class="container-details">
|
||||
<h3>{{ $container->container_name }}</h3>
|
||||
@@ -647,13 +661,35 @@
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<span class="status-badge {{ $statusClass }}">
|
||||
<i class="fas fa-circle"></i>
|
||||
<span class="status-text">
|
||||
{{ ucfirst(str_replace('-', ' ', $status)) }}
|
||||
</span>
|
||||
</span>
|
||||
@can('containers.update_status')
|
||||
<form action="{{ route('containers.update-status', $container->id) }}"
|
||||
method="POST"
|
||||
class="update-form ajax-status-form"
|
||||
data-container-id="{{ $container->id }}">
|
||||
@csrf
|
||||
|
||||
@php $statusClass = 'status-' . $status; @endphp
|
||||
|
||||
<div class="status-dropdown">
|
||||
<div class="status-dropdown-toggle {{ $statusClass }}">
|
||||
<span class="status-dropdown-label">
|
||||
{{ $statusLabel }}
|
||||
</span>
|
||||
<i class="fas fa-chevron-down" style="font-size:11px;color:#4b5563;"></i>
|
||||
</div>
|
||||
<div class="status-dropdown-menu">
|
||||
@foreach($labels as $value => $label)
|
||||
@php $optClass = 'status-' . $value; @endphp
|
||||
<div class="status-option {{ $optClass }} {{ $status === $value ? 'active' : '' }}"
|
||||
data-status="{{ $value }}">
|
||||
<span class="dot"></span>
|
||||
<span>{{ $label }}</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endcan
|
||||
|
||||
@can('container.update')
|
||||
<a href="{{ route('containers.show', $container->id) }}" class="action-btn view-btn">
|
||||
@@ -661,26 +697,10 @@
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
@can('containers.update_status')
|
||||
<form action="{{ route('containers.update-status', $container->id) }}"
|
||||
method="POST"
|
||||
class="update-form ajax-status-form"
|
||||
data-container-id="{{ $container->id }}">
|
||||
@csrf
|
||||
<select name="status" class="status-select">
|
||||
<option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="in-progress" {{ $status === 'in-progress' ? 'selected' : '' }}>In Progress</option>
|
||||
<option value="completed" {{ $status === 'completed' ? 'selected' : '' }}>Completed</option>
|
||||
<option value="cancelled" {{ $status === 'cancelled' ? 'selected' : '' }}>Cancelled</option>
|
||||
</select>
|
||||
</form>
|
||||
@endcan
|
||||
|
||||
|
||||
|
||||
@can('container.delete')
|
||||
<form action="{{ route('containers.destroy', $container->id) }}" method="POST"
|
||||
onsubmit="return confirm('Are you sure you want to delete this container and all its entries?');">
|
||||
class="delete-form"
|
||||
data-container-id="{{ $container->id }}">
|
||||
@csrf
|
||||
@method('DELETE')
|
||||
<button type="submit" class="action-btn delete-btn">
|
||||
@@ -691,7 +711,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 🔥 Totals instead of first row preview -->
|
||||
<div class="totals-section">
|
||||
<div class="total-card">
|
||||
<div class="total-value">{{ number_format($container->summary['total_ctn'], 1) }}</div>
|
||||
@@ -716,87 +735,121 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelectorAll('.ajax-status-form .status-select').forEach(function (selectEl) {
|
||||
selectEl.addEventListener('change', function (event) {
|
||||
const form = event.target.closest('form');
|
||||
// STATUS DROPDOWN
|
||||
document.querySelectorAll('.status-dropdown').forEach(function (wrapper) {
|
||||
const toggle = wrapper.querySelector('.status-dropdown-toggle');
|
||||
const menu = wrapper.querySelector('.status-dropdown-menu');
|
||||
|
||||
toggle.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
document.querySelectorAll('.status-dropdown-menu.open').forEach(m => {
|
||||
if (m !== menu) m.classList.remove('open');
|
||||
});
|
||||
menu.classList.toggle('open');
|
||||
});
|
||||
|
||||
menu.querySelectorAll('.status-option').forEach(function (opt) {
|
||||
opt.addEventListener('click', function () {
|
||||
const status = this.dataset.status;
|
||||
const form = wrapper.closest('form');
|
||||
const labelEl = wrapper.querySelector('.status-dropdown-label');
|
||||
const toggleEl= wrapper.querySelector('.status-dropdown-toggle');
|
||||
|
||||
// UI: dropdown label + active item
|
||||
menu.querySelectorAll('.status-option').forEach(o => o.classList.remove('active'));
|
||||
this.classList.add('active');
|
||||
labelEl.textContent = this.querySelector('span:nth-child(2)').textContent;
|
||||
menu.classList.remove('open');
|
||||
|
||||
// toggle रंग class reset करून नवा status-* दे
|
||||
toggleEl.className = 'status-dropdown-toggle';
|
||||
toggleEl.classList.add('status-' + status);
|
||||
|
||||
const url = form.getAttribute('action');
|
||||
const token = form.querySelector('input[name="_token"]').value;
|
||||
const status = event.target.value;
|
||||
|
||||
console.log('Sending status update:', url, status);
|
||||
const formData = new FormData();
|
||||
formData.append('_token', token);
|
||||
formData.append('status', status);
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-CSRF-TOKEN': token,
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ status: status })
|
||||
body: formData
|
||||
})
|
||||
.then(async res => {
|
||||
console.log('Response status:', res.status);
|
||||
let data = null;
|
||||
try { data = await res.json(); } catch (e) {}
|
||||
console.log('Response body:', data);
|
||||
|
||||
if (!res.ok || !data || !data.success) {
|
||||
alert('Status update failed');
|
||||
return;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
alert('Network error while updating status');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// 👉 UI update (badge text + color)
|
||||
const item = form.closest('.container-item');
|
||||
const badge = item.querySelector('.status-badge');
|
||||
document.addEventListener('click', function () {
|
||||
document.querySelectorAll('.status-dropdown-menu.open')
|
||||
.forEach(m => m.classList.remove('open'));
|
||||
});
|
||||
|
||||
// text
|
||||
// text
|
||||
const pretty = data.status.replace('-', ' ');
|
||||
const textEl = badge.querySelector('.status-text');
|
||||
if (textEl) {
|
||||
textEl.textContent =
|
||||
pretty.charAt(0).toUpperCase() + pretty.slice(1);
|
||||
// DELETE VIA AJAX
|
||||
document.querySelectorAll('.delete-form').forEach(function (form) {
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!confirm('Are you sure you want to delete this container and all its entries?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// classes
|
||||
badge.classList.remove(
|
||||
'status-pending',
|
||||
'status-in-progress',
|
||||
'status-completed',
|
||||
'status-cancelled'
|
||||
);
|
||||
const url = form.getAttribute('action');
|
||||
const token = form.querySelector('input[name="_token"]').value;
|
||||
const item = form.closest('.container-item');
|
||||
|
||||
if (data.status === 'pending') {
|
||||
badge.classList.add('status-pending');
|
||||
} else if (data.status === 'in-progress') {
|
||||
badge.classList.add('status-in-progress');
|
||||
} else if (data.status === 'completed') {
|
||||
badge.classList.add('status-completed');
|
||||
} else if (data.status === 'cancelled') {
|
||||
badge.classList.add('status-cancelled');
|
||||
const formData = new FormData();
|
||||
formData.append('_token', token);
|
||||
formData.append('_method', 'DELETE');
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
.then(async res => {
|
||||
let data = null;
|
||||
try { data = await res.json(); } catch (e) {}
|
||||
|
||||
if (!res.ok || !data || !data.success) {
|
||||
alert('Delete failed');
|
||||
return;
|
||||
}
|
||||
|
||||
if (item) {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'translateX(-10px)';
|
||||
setTimeout(() => item.remove(), 200);
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Error:', err);
|
||||
alert('Network error while updating status');
|
||||
.catch(() => {
|
||||
alert('Network error while deleting container');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@endsection
|
||||
|
||||
@@ -137,6 +137,10 @@
|
||||
Some rows in your Excel file have formula or mark issues.
|
||||
See the table below, and detailed messages after the table.
|
||||
</div>
|
||||
<ul class="small mb-0 ps-3">
|
||||
<li>Red highlighted rows indicate formula mismatches in the uploaded Excel data.</li>
|
||||
<li>Yellow highlighted rows indicate marks from the Excel file that do not match any record in the system.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -183,11 +187,9 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{-- Formula error rows --}}
|
||||
{{-- Formula error rows (red – formula mismatch, critical) --}}
|
||||
@foreach($formulaErrors as $fe)
|
||||
@php
|
||||
$rowData = $fe['data'] ?? [];
|
||||
@endphp
|
||||
@php $rowData = $fe['data'] ?? []; @endphp
|
||||
@if(!empty($rowData))
|
||||
<tr class="table-danger">
|
||||
<td>{{ $fe['excel_row'] }}</td>
|
||||
@@ -199,11 +201,9 @@
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Mark error rows --}}
|
||||
{{-- Mark error rows (yellow – mark not found, warning) --}}
|
||||
@foreach($markErrors as $me)
|
||||
@php
|
||||
$rowData = $me['data'] ?? [];
|
||||
@endphp
|
||||
@php $rowData = $me['data'] ?? []; @endphp
|
||||
@if(!empty($rowData))
|
||||
<tr class="table-warning">
|
||||
<td>{{ $me['excel_row'] }}</td>
|
||||
@@ -292,7 +292,9 @@
|
||||
|
||||
<div class="col-md-6">
|
||||
<label class="cm-form-label">Container Date</label>
|
||||
<input type="date" name="container_date"
|
||||
<input type="date"
|
||||
name="container_date" {{-- name fix --}}
|
||||
id="containerdate" {{-- JS साठी जुना id ठेवला --}}
|
||||
class="form-control cm-form-control"
|
||||
value="{{ old('container_date') }}">
|
||||
</div>
|
||||
@@ -322,4 +324,26 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const dateInput = document.getElementById('containerdate');
|
||||
if (!dateInput) return;
|
||||
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(today.getDate()).padStart(2, '0');
|
||||
const todayStr = `${year}-${month}-${day}`;
|
||||
|
||||
// Todays date
|
||||
dateInput.min = todayStr;
|
||||
|
||||
// old date remove
|
||||
if (dateInput.value && dateInput.value < todayStr) {
|
||||
dateInput.value = todayStr;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
|
||||
202
resources/views/admin/container_pdf.blade.php
Normal file
202
resources/views/admin/container_pdf.blade.php
Normal file
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Container {{ $container->container_number }} Summary</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; }
|
||||
body {
|
||||
font-family: DejaVu Sans, sans-serif;
|
||||
font-size: 10px;
|
||||
margin: 10px;
|
||||
background: #e5e7ff;
|
||||
}
|
||||
|
||||
/* COMMON CARD GRID – 4 equal columns, 2 rows */
|
||||
.card-grid {
|
||||
display: table;
|
||||
width: 100%;
|
||||
border-spacing: 8px 6px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.card-row {
|
||||
display: table-row;
|
||||
}
|
||||
.card {
|
||||
display: table-cell;
|
||||
width: 25%;
|
||||
padding: 7px 10px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 4px 12px rgba(15,35,52,0.18);
|
||||
color: #0f172a;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* INFO CARDS (FIRST ROW) */
|
||||
.info-id { background: #e0f2ff; border-left: 4px solid #2563eb; }
|
||||
.info-no { background: #dcfce7; border-left: 4px solid #22c55e; }
|
||||
.info-date { background: #fee2e2; border-left: 4px solid #ef4444; }
|
||||
.info-name { background: #fef9c3; border-left: 4px solid #f59e0b; }
|
||||
|
||||
/* TOTAL CARDS (SECOND ROW) */
|
||||
.total-ctn { background: #dbeafe; border-left: 4px solid #1d4ed8; }
|
||||
.total-qty { background: #bbf7d0; border-left: 4px solid #16a34a; }
|
||||
.total-cbm { background: #fef3c7; border-left: 4px solid #d97706; }
|
||||
.total-kg { background: #fecaca; border-left: 4px solid #dc2626; }
|
||||
|
||||
.label-text {
|
||||
font-size: 9px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
color: #4b5563;
|
||||
}
|
||||
.value-text-small {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
margin-top: 2px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.value-text-big {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* TABLE – solid yellow header like screenshot */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 6px;
|
||||
table-layout: fixed;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
th, td {
|
||||
border: 1px solid #e5e7eb;
|
||||
padding: 4px 3px;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
th {
|
||||
background: #fbd85d; /* इथे solid yellow */
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: #0c0909;
|
||||
}
|
||||
td {
|
||||
font-size: 9px;
|
||||
color: #111827;
|
||||
}
|
||||
tr:nth-child(even) td {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
thead { display: table-header-group; }
|
||||
tr { page-break-inside: avoid; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@php
|
||||
$totalCtn = 0;
|
||||
$totalQty = 0;
|
||||
$totalCbm = 0.0;
|
||||
$totalKg = 0.0;
|
||||
|
||||
foreach ($container->rows as $row) {
|
||||
if (!is_array($row->data)) continue;
|
||||
foreach ($row->data as $h => $v) {
|
||||
$norm = strtoupper(str_replace([' ', '/', '-', '.'],'', $h));
|
||||
$val = is_numeric(str_replace([','], '', $v)) ? floatval(str_replace([','], '', $v)) : 0;
|
||||
|
||||
if (str_contains($norm, 'TOTALCTN') || $norm === 'CTN' || str_contains($norm,'TOTALCNTR') || str_contains($norm,'TOTALCARTON')) {
|
||||
$totalCtn += $val;
|
||||
}
|
||||
if (str_contains($norm,'TOTALQTY') || str_contains($norm,'ITLQTY') || str_contains($norm,'TTLQTY')) {
|
||||
$totalQty += $val;
|
||||
}
|
||||
if (str_contains($norm,'TOTALCBM') || str_contains($norm,'TTLCBM') || str_contains($norm,'ITLCBM')) {
|
||||
$totalCbm += $val;
|
||||
}
|
||||
if (str_contains($norm,'TOTALKG') || str_contains($norm,'TTKG')) {
|
||||
$totalKg += $val;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$allHeadings = [];
|
||||
foreach ($container->rows as $row) {
|
||||
if (is_array($row->data)) {
|
||||
$allHeadings = array_unique(array_merge($allHeadings, array_keys($row->data)));
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
{{-- TWO ROW GRID – FIRST: INFO / SECOND: TOTALS --}}
|
||||
<div class="card-grid">
|
||||
<div class="card-row">
|
||||
<div class="card info-id">
|
||||
<div class="label-text">Container ID</div>
|
||||
<div class="value-text-small">{{ $container->id }}</div>
|
||||
</div>
|
||||
<div class="card info-no">
|
||||
<div class="label-text">Container Number</div>
|
||||
<div class="value-text-small">{{ $container->container_number }}</div>
|
||||
</div>
|
||||
<div class="card info-date">
|
||||
<div class="label-text">Container Date</div>
|
||||
<div class="value-text-small">
|
||||
{{ $container->container_date ? $container->container_date->format('d-m-Y') : '-' }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card info-name">
|
||||
<div class="label-text">Container Name</div>
|
||||
<div class="value-text-small">
|
||||
{{ $container->container_name ?? '-' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-row">
|
||||
<div class="card total-ctn">
|
||||
<div class="label-text">Total CTN</div>
|
||||
<div class="value-text-big">{{ number_format($totalCtn, 0) }}</div>
|
||||
</div>
|
||||
<div class="card total-qty">
|
||||
<div class="label-text">Total QTY</div>
|
||||
<div class="value-text-big">{{ number_format($totalQty, 0) }}</div>
|
||||
</div>
|
||||
<div class="card total-cbm">
|
||||
<div class="label-text">Total CBM</div>
|
||||
<div class="value-text-big">{{ number_format($totalCbm, 3) }}</div>
|
||||
</div>
|
||||
<div class="card total-kg">
|
||||
<div class="label-text">Total KG</div>
|
||||
<div class="value-text-big">{{ number_format($totalKg, 2) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- FULL TABLE --}}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:18px;">#</th>
|
||||
@foreach($allHeadings as $heading)
|
||||
<th>{{ $heading }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach($container->rows as $index => $row)
|
||||
<tr>
|
||||
<td>{{ $index + 1 }}</td>
|
||||
@foreach($allHeadings as $heading)
|
||||
<td>{{ $row->data[$heading] ?? '' }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,7 +6,13 @@
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
|
||||
|
||||
/* ── TOP HEADER CARD ── */
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.cm-header-card {
|
||||
background: linear-gradient(100deg, #4c6fff 0%, #8e54e9 100%);
|
||||
border-radius: 14px;
|
||||
@@ -34,13 +40,13 @@
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* ── MAIN CARD ── */
|
||||
.cm-main-card {
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
box-shadow: 0 4px 20px rgba(15,35,52,0.10);
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.cm-main-card .card-header {
|
||||
background: #fff;
|
||||
@@ -57,30 +63,138 @@
|
||||
color: #1a2340;
|
||||
}
|
||||
|
||||
/* ── INFO STRIP ── */
|
||||
.cm-info-strip {
|
||||
.cm-info-cards-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 cards one row */
|
||||
gap: 14px;
|
||||
padding: 14px 18px 8px 18px;
|
||||
}
|
||||
.cm-info-card {
|
||||
border-radius: 16px;
|
||||
padding: 12px 14px;
|
||||
display: flex;
|
||||
gap: 28px;
|
||||
padding: 12px 20px 0 20px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 4px 16px rgba(15,35,52,0.12);
|
||||
border: 1px solid rgba(148,163,184,0.25);
|
||||
background: #fff;
|
||||
min-height: 70px;
|
||||
}
|
||||
.cm-info-label {
|
||||
.cm-info-card-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
box-shadow: 0 3px 10px rgba(15,23,42,0.10);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cm-info-card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.cm-info-card-label {
|
||||
font-size: 11px;
|
||||
color: #8a93a6;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
.cm-info-value {
|
||||
font-size: 13px;
|
||||
letter-spacing: 0.4px;
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
color: #1a2340;
|
||||
}
|
||||
.cm-info-card-value {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cm-card-container {
|
||||
background: linear-gradient(135deg, #e0f2ff, #eef4ff);
|
||||
}
|
||||
.cm-card-container .cm-info-card-icon {
|
||||
background: linear-gradient(135deg, #2563eb, #4f46e5);
|
||||
color: #e5edff;
|
||||
}
|
||||
.cm-card-date {
|
||||
background: linear-gradient(135deg, #ecfdf3, #e0fbea);
|
||||
}
|
||||
.cm-card-date .cm-info-card-icon {
|
||||
background: linear-gradient(135deg, #16a34a, #22c55e);
|
||||
color: #ecfdf3;
|
||||
}
|
||||
.cm-card-excel {
|
||||
background: linear-gradient(135deg, #fff7ed, #fffbeb);
|
||||
}
|
||||
.cm-card-excel .cm-info-card-icon {
|
||||
background: linear-gradient(135deg, #f97316, #fb923c);
|
||||
color: #fff7ed;
|
||||
}
|
||||
|
||||
/* TOTAL BOXES */
|
||||
.cm-total-cards-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
padding: 4px 18px 14px 18px;
|
||||
}
|
||||
.cm-total-card {
|
||||
border-radius: 18px;
|
||||
padding: 12px 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
box-shadow: 0 8px 30px rgba(15,23,42,0.08);
|
||||
border: 1px solid rgba(148,163,184,0.25);
|
||||
}
|
||||
.cm-total-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 999px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 17px;
|
||||
flex-shrink: 0;
|
||||
color: #0f172a;
|
||||
background: #fff;
|
||||
box-shadow: 0 4px 14px rgba(15,23,42,0.15);
|
||||
}
|
||||
.cm-total-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
.cm-total-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #4b5563;
|
||||
}
|
||||
.cm-total-value {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #111827;
|
||||
}
|
||||
.cm-total-card-ctn {
|
||||
background: linear-gradient(135deg, #e0f2ff, #eef2ff);
|
||||
border-left: 4px solid #3b82f6;
|
||||
}
|
||||
.cm-total-card-qty {
|
||||
background: linear-gradient(135deg, #dcfce7, #ecfdf5);
|
||||
border-left: 4px solid #22c55e;
|
||||
}
|
||||
.cm-total-card-cbm {
|
||||
background: linear-gradient(135deg, #fef9c3, #fffbeb);
|
||||
border-left: 4px solid #f59e0b;
|
||||
}
|
||||
.cm-total-card-kg {
|
||||
background: linear-gradient(135deg, #fee2e2, #fef2f2);
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
|
||||
/* ── FILTER BAR ── */
|
||||
.cm-filter-bar {
|
||||
padding: 12px 20px 0 20px;
|
||||
padding: 4px 20px 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@@ -106,59 +220,50 @@
|
||||
box-shadow: 0 0 0 3px rgba(76,111,255,0.1);
|
||||
}
|
||||
|
||||
/* ── TABLE SCROLL OUTER ── */
|
||||
.cm-table-scroll-outer {
|
||||
margin: 10px 14px 0 14px;
|
||||
border-radius: 14px 14px 0 0;
|
||||
/* इथे overflow: hidden होते, ते visible केले */
|
||||
overflow-x: auto; /* फक्त horizontal scroll हवा असेल तर */
|
||||
overflow-y: visible;
|
||||
border: 1.5px solid #b8920e;
|
||||
border-bottom: none;
|
||||
box-shadow: 0 -2px 10px rgba(184,146,14,0.10);
|
||||
border-radius: 14px;
|
||||
border: 1.5px solid #c9a359;
|
||||
box-shadow: 0 4px 14px rgba(76,111,255,0.18);
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ── TABLE WRAPPER ── */
|
||||
.cm-table-wrapper {
|
||||
position: relative;
|
||||
/* इथे max-height, overflow auto काढले, जे inner scroll देत होते */
|
||||
max-height: none;
|
||||
overflow: visible;
|
||||
border-top: none;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
/* ── TABLE STYLES ── */
|
||||
.cm-table {
|
||||
font-size: 12px;
|
||||
min-width: 1100px;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
font-family: 'DM Sans', sans-serif;
|
||||
}
|
||||
|
||||
/* Sticky header – light header color */
|
||||
.cm-table thead tr th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 3;
|
||||
background: #fde4b3;
|
||||
color: #0a0a09;
|
||||
background: linear-gradient(100deg, #fde4b3 0%, #fbd48a 100%);
|
||||
color: #0c0909;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
padding: 11px 14px;
|
||||
border-bottom: 2px solid #fde4b3;
|
||||
border-right: 1px solid #fde4b3;
|
||||
border-bottom: 2px solid rgba(255,255,255,0.15);
|
||||
border-right: 1px solid rgba(255,255,255,0.18);
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
letter-spacing: 0.2px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.18);
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
|
||||
}
|
||||
.cm-table thead tr th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.cm-table thead tr th:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* # column – narrower */
|
||||
.cm-table thead tr th:first-child,
|
||||
.cm-table tbody tr td:first-child {
|
||||
width: 46px;
|
||||
@@ -166,8 +271,6 @@
|
||||
max-width: 46px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Body rows */
|
||||
.cm-table tbody tr td {
|
||||
padding: 8px 14px;
|
||||
border-bottom: 1px solid #f0f3fb;
|
||||
@@ -178,28 +281,23 @@
|
||||
vertical-align: middle;
|
||||
background: #fff;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cm-table tbody tr td:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
/* Zebra */
|
||||
.cm-table tbody tr:nth-child(even) td {
|
||||
background: #f8f9ff;
|
||||
}
|
||||
/* Hover */
|
||||
.cm-table tbody tr:hover td {
|
||||
background: #edf3ff !important;
|
||||
}
|
||||
|
||||
/* Row number td */
|
||||
.cm-row-num {
|
||||
color: #8a93a6;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Editable cell input */
|
||||
.cm-cell-input {
|
||||
width: 100%;
|
||||
min-width: 90px;
|
||||
@@ -223,103 +321,278 @@
|
||||
background: #fff;
|
||||
box-shadow: 0 0 0 3px rgba(76,111,255,0.12);
|
||||
}
|
||||
.cm-cell-readonly {
|
||||
background: #f3f4ff;
|
||||
cursor: not-allowed;
|
||||
border-color: #e2e3ff;
|
||||
}
|
||||
|
||||
/* Save button */
|
||||
.cm-save-btn {
|
||||
font-size: 12.5px;
|
||||
.cm-save-btn-floating {
|
||||
position: fixed;
|
||||
right: 26px;
|
||||
bottom: 22px;
|
||||
z-index: 50;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
border-radius: 20px;
|
||||
padding: 7px 18px;
|
||||
border-radius: 22px;
|
||||
padding: 8px 20px;
|
||||
background: linear-gradient(90deg, #4c6fff, #8e54e9);
|
||||
border: none;
|
||||
color: #fff;
|
||||
box-shadow: 0 3px 10px rgba(76,111,255,0.22);
|
||||
box-shadow: 0 4px 16px rgba(76,111,255,0.35);
|
||||
transition: opacity 0.2s, transform 0.15s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cm-save-btn:hover {
|
||||
opacity: 0.92;
|
||||
.cm-save-btn-floating:hover {
|
||||
opacity: 0.94;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.cm-save-btn-floating.cm-disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cm-toast {
|
||||
position: fixed;
|
||||
right: 26px;
|
||||
bottom: 70px;
|
||||
background: #0f172a;
|
||||
color: #f9fafb;
|
||||
font-size: 12.5px;
|
||||
padding: 8px 14px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 8px 24px rgba(15,23,42,0.25);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s, transform 0.2s;
|
||||
transform: translateY(8px);
|
||||
z-index: 60;
|
||||
}
|
||||
.cm-toast.cm-show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.cm-empty {
|
||||
padding: 30px 20px;
|
||||
color: #8a93a6;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Scrollbar styling – आता फक्त horizontal ला लागू होईल */
|
||||
.cm-table-scroll-outer::-webkit-scrollbar { height: 6px; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-track { background: #f0f3fb; border-radius: 4px; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-thumb { background: #c5cce8; border-radius: 4px; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-thumb:hover { background: #8a99d0; }
|
||||
.cm-table-scroll-outer::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-track {
|
||||
background: #f0f3fb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-thumb {
|
||||
background: #c5cce8;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.cm-table-scroll-outer::-webkit-scrollbar-thumb:hover {
|
||||
background: #8a99d0;
|
||||
}
|
||||
|
||||
@media (max-width: 991px) {
|
||||
.cm-total-cards-row {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.cm-header-card .card-body { flex-direction: column; align-items: flex-start; }
|
||||
.cm-info-strip { gap: 16px; }
|
||||
.cm-table-scroll-outer { overflow-x: auto; }
|
||||
.cm-table { min-width: 900px; }
|
||||
.cm-header-card .card-body {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.cm-info-cards-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.cm-table-scroll-outer {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.cm-table-wrapper {
|
||||
min-width: 900px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.cm-total-cards-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid cm-wrapper">
|
||||
|
||||
{{-- TOP GRADIENT HEADER --}}
|
||||
<div class="card cm-header-card">
|
||||
<div class="card-body">
|
||||
<div>
|
||||
<h4 class="cm-header-title">
|
||||
Container: {{ $container->container_number }}
|
||||
</h4>
|
||||
<h4 class="cm-header-title">Container {{ $container->container_number }}</h4>
|
||||
<div class="cm-header-sub">
|
||||
Edit loading list directly — scroll horizontally & vertically like Excel.
|
||||
Edit loading list directly – like Excel. TT columns auto‑calculate from CTN, QTY, CBM, KG, PRICE.
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('containers.index') }}" class="btn btn-light btn-sm">
|
||||
← Back to list
|
||||
<div class="d-flex gap-2">
|
||||
<a href="{{ route('containers.index') }}" class="btn btn-light btn-sm">Back to list</a>
|
||||
|
||||
<a href="{{ route('containers.download.pdf', $container->id) }}"
|
||||
class="btn btn-sm btn-outline-primary">
|
||||
Download PDF
|
||||
</a>
|
||||
|
||||
<a href="{{ route('containers.download.excel', $container->id) }}"
|
||||
class="btn btn-sm btn-outline-success">
|
||||
Download Excel
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- MAIN CARD --}}
|
||||
<div class="card cm-main-card">
|
||||
|
||||
<div class="card-header">
|
||||
<h5>Container Information</h5>
|
||||
@if(!$container->rows->isEmpty())
|
||||
<button type="submit"
|
||||
form="cm-edit-rows-form"
|
||||
class="cm-save-btn">
|
||||
💾 Save Changes
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- INFO STRIP --}}
|
||||
<div class="cm-info-strip">
|
||||
<div class="cm-info-item">
|
||||
<div class="cm-info-label">Container</div>
|
||||
<div class="cm-info-value">{{ $container->container_name }}</div>
|
||||
{{-- 3 INFO CARDS IN SINGLE ROW --}}
|
||||
<div class="cm-info-cards-row">
|
||||
<div class="cm-info-card cm-card-container">
|
||||
<div class="cm-info-card-icon">
|
||||
<i class="bi bi-box-seam"></i>
|
||||
</div>
|
||||
<div class="cm-info-item">
|
||||
<div class="cm-info-label">Date</div>
|
||||
<div class="cm-info-value">{{ $container->container_date?->format('d-m-Y') }}</div>
|
||||
<div class="cm-info-card-body">
|
||||
<div class="cm-info-card-label">Container</div>
|
||||
<div class="cm-info-card-value">
|
||||
{{ $container->container_name ?? $container->container_number }}
|
||||
</div>
|
||||
<div class="cm-info-item">
|
||||
<div class="cm-info-label">Excel File</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cm-info-card cm-card-date">
|
||||
<div class="cm-info-card-icon">
|
||||
<i class="bi bi-calendar-event"></i>
|
||||
</div>
|
||||
<div class="cm-info-card-body">
|
||||
<div class="cm-info-card-label">Date</div>
|
||||
<div class="cm-info-card-value">
|
||||
{{ $container->container_date ? $container->container_date->format('d-m-Y') : '' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cm-info-card cm-card-excel">
|
||||
<div class="cm-info-card-icon">
|
||||
<i class="bi bi-file-earmark-excel"></i>
|
||||
</div>
|
||||
<div class="cm-info-card-body">
|
||||
<div class="cm-info-card-label">Excel File</div>
|
||||
<div class="cm-info-card-value">
|
||||
@if($container->excel_file)
|
||||
<div class="cm-info-value">
|
||||
<a href="{{ \Illuminate\Support\Facades\Storage::url($container->excel_file) }}"
|
||||
target="_blank" style="color:#4c6fff;text-decoration:none;font-weight:600;">
|
||||
📄 Download / View
|
||||
<a href="{{ url($container->excel_file) }}" target="_blank" style="color:#0f172a;text-decoration:none;">
|
||||
Download / View
|
||||
</a>
|
||||
</div>
|
||||
@else
|
||||
<div class="cm-info-value" style="color:#b0b8cc;">Not uploaded</div>
|
||||
<span style="color:#b0b8cc;">Not uploaded</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$totalCtn = 0;
|
||||
$totalQty = 0;
|
||||
$totalCbm = 0.0;
|
||||
$totalKg = 0.0;
|
||||
|
||||
if(!$container->rows->isEmpty()){
|
||||
foreach ($container->rows as $row) {
|
||||
if (!is_array($row->data)) continue;
|
||||
foreach ($row->data as $h => $v) {
|
||||
$norm = strtoupper(str_replace([' ', '/', '-', '.'],'', $h));
|
||||
$val = is_numeric(str_replace([','], '', $v)) ? floatval(str_replace([','], '', $v)) : 0;
|
||||
|
||||
if (str_contains($norm, 'TOTALCTN') || $norm === 'CTN' || str_contains($norm,'TOTALCNTR') || str_contains($norm,'TOTALCARTON')) {
|
||||
$totalCtn += $val;
|
||||
}
|
||||
|
||||
if (
|
||||
str_contains($norm,'TOTALQTY') ||
|
||||
str_contains($norm,'ITLQTY') ||
|
||||
str_contains($norm,'TTLQTY')
|
||||
) {
|
||||
$totalQty += $val;
|
||||
}
|
||||
|
||||
if (
|
||||
str_contains($norm,'TOTALCBM') ||
|
||||
str_contains($norm,'TTLCBM') ||
|
||||
str_contains($norm,'ITLCBM')
|
||||
) {
|
||||
$totalCbm += $val;
|
||||
}
|
||||
|
||||
if (
|
||||
str_contains($norm,'TOTALKG') ||
|
||||
str_contains($norm,'TTKG')
|
||||
) {
|
||||
$totalKg += $val;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@endphp
|
||||
|
||||
@if(!$container->rows->isEmpty())
|
||||
<div class="cm-total-cards-row">
|
||||
<div class="cm-total-card cm-total-card-ctn">
|
||||
<div class="cm-total-icon">
|
||||
<i class="bi bi-box"></i>
|
||||
</div>
|
||||
<div class="cm-total-text">
|
||||
<div class="cm-total-label">Total CTN</div>
|
||||
<div class="cm-total-value">
|
||||
{{ number_format($totalCtn, 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cm-total-card cm-total-card-qty">
|
||||
<div class="cm-total-icon">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
</div>
|
||||
<div class="cm-total-text">
|
||||
<div class="cm-total-label">Total QTY</div>
|
||||
<div class="cm-total-value">
|
||||
{{ number_format($totalQty, 0) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cm-total-card cm-total-card-cbm">
|
||||
<div class="cm-total-icon">
|
||||
<i class="bi bi-border-width"></i>
|
||||
</div>
|
||||
<div class="cm-total-text">
|
||||
<div class="cm-total-label">Total CBM</div>
|
||||
<div class="cm-total-value">
|
||||
{{ number_format($totalCbm, 3) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cm-total-card cm-total-card-kg">
|
||||
<div class="cm-total-icon">
|
||||
<i class="bi bi-exclamation-triangle"></i>
|
||||
</div>
|
||||
<div class="cm-total-text">
|
||||
<div class="cm-total-label">Total KG</div>
|
||||
<div class="cm-total-value">
|
||||
{{ number_format($totalKg, 2) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($container->rows->isEmpty())
|
||||
<div class="cm-empty">No entries found for this container.</div>
|
||||
@@ -333,24 +606,16 @@
|
||||
}
|
||||
@endphp
|
||||
|
||||
{{-- FILTER BAR --}}
|
||||
<div class="cm-filter-bar">
|
||||
<span class="cm-row-count">
|
||||
Total rows: {{ $container->rows->count() }} • Edit cells then click "Save Changes"
|
||||
Total rows: {{ $container->rows->count() }} Edit cells then click "Save Changes".
|
||||
</span>
|
||||
<input type="text"
|
||||
id="cmRowSearch"
|
||||
class="cm-filter-input"
|
||||
placeholder="🔍 Quick search..."
|
||||
onkeyup="cmFilterRows()">
|
||||
<input type="text" id="cmRowSearch" class="cm-filter-input"
|
||||
placeholder="Quick search..." onkeyup="cmFilterRows()">
|
||||
</div>
|
||||
|
||||
{{-- EDITABLE TABLE FORM --}}
|
||||
<form id="cm-edit-rows-form"
|
||||
action="{{ route('containers.rows.update', $container->id) }}"
|
||||
method="POST">
|
||||
<form id="cm-edit-rows-form" action="{{ route('containers.rows.update', $container->id) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="cm-table-scroll-outer">
|
||||
<div class="cm-table-wrapper">
|
||||
<table class="cm-table" id="cmExcelTable">
|
||||
@@ -367,12 +632,66 @@
|
||||
<tr>
|
||||
<td class="cm-row-num">{{ $index + 1 }}</td>
|
||||
@foreach($allHeadings as $heading)
|
||||
@php $value = $row->data[$heading] ?? ''; @endphp
|
||||
@php
|
||||
$value = $row->data[$heading] ?? '';
|
||||
|
||||
$norm = strtoupper(str_replace([' ', '/', '-', '.'],'', $heading));
|
||||
|
||||
$isCtn = str_contains($norm, 'CTN');
|
||||
|
||||
$isTotalQty = (
|
||||
str_contains($norm, 'TOTALQTY') ||
|
||||
str_contains($norm, 'ITLQTY') ||
|
||||
str_contains($norm, 'TTLQTY')
|
||||
);
|
||||
$isQty = !$isTotalQty && (
|
||||
str_contains($norm, 'QTY') ||
|
||||
str_contains($norm, 'PCS') ||
|
||||
str_contains($norm, 'PIECES')
|
||||
);
|
||||
|
||||
$isTotalCbm = (
|
||||
str_contains($norm, 'TOTALCBM') ||
|
||||
str_contains($norm, 'TTLCBM') ||
|
||||
str_contains($norm, 'ITLCBM')
|
||||
);
|
||||
$isCbm = !$isTotalCbm && str_contains($norm, 'CBM');
|
||||
|
||||
$isTotalKg = (
|
||||
str_contains($norm, 'TOTALKG') ||
|
||||
str_contains($norm, 'TTKG')
|
||||
);
|
||||
$isKg = !$isTotalKg && (str_contains($norm, 'KG') || str_contains($norm, 'WEIGHT'));
|
||||
|
||||
$isPrice = (str_contains($norm, 'PRICE') || str_contains($norm, 'RATE'));
|
||||
|
||||
$isAmount = (
|
||||
str_contains($norm, 'AMOUNT') ||
|
||||
str_contains($norm, 'TTLAMOUNT') ||
|
||||
str_contains($norm, 'TOTALAMOUNT')
|
||||
);
|
||||
|
||||
$isTotalColumn = $isTotalQty || $isTotalCbm || $isTotalKg || $isAmount;
|
||||
@endphp
|
||||
<td>
|
||||
<input type="text"
|
||||
class="cm-cell-input"
|
||||
<input
|
||||
type="text"
|
||||
class="cm-cell-input {{ $isTotalColumn ? 'cm-cell-readonly' : '' }}"
|
||||
name="rows[{{ $row->id }}][{{ $heading }}]"
|
||||
value="{{ $value }}">
|
||||
value="{{ $value }}"
|
||||
data-row-id="{{ $row->id }}"
|
||||
data-col-key="{{ $heading }}"
|
||||
data-ctn="{{ $isCtn ? '1' : '0' }}"
|
||||
data-qty="{{ $isQty ? '1' : '0' }}"
|
||||
data-ttlqty="{{ $isTotalQty ? '1' : '0' }}"
|
||||
data-cbm="{{ $isCbm ? '1' : '0' }}"
|
||||
data-ttlcbm="{{ $isTotalCbm ? '1' : '0' }}"
|
||||
data-kg="{{ $isKg ? '1' : '0' }}"
|
||||
data-ttlkg="{{ $isTotalKg ? '1' : '0' }}"
|
||||
data-price="{{ $isPrice ? '1' : '0' }}"
|
||||
data-amount="{{ $isAmount ? '1' : '0' }}"
|
||||
@if($isTotalColumn) readonly @endif
|
||||
>
|
||||
</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@@ -384,9 +703,17 @@
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@if(!$container->rows->isEmpty())
|
||||
<button id="cmSaveBtnFloating" class="cm-save-btn-floating">
|
||||
Save Changes
|
||||
</button>
|
||||
<div id="cmToast" class="cm-toast">
|
||||
Changes saved successfully.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<script>
|
||||
function cmFilterRows() {
|
||||
const input = document.getElementById('cmRowSearch');
|
||||
@@ -394,7 +721,6 @@
|
||||
const filter = input.value.toLowerCase();
|
||||
const table = document.getElementById('cmExcelTable');
|
||||
if (!table) return;
|
||||
|
||||
const rows = table.getElementsByTagName('tr');
|
||||
for (let i = 1; i < rows.length; i++) {
|
||||
const cells = rows[i].getElementsByTagName('td');
|
||||
@@ -409,5 +735,157 @@
|
||||
rows[i].style.display = match ? '' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const form = document.getElementById('cm-edit-rows-form');
|
||||
const btn = document.getElementById('cmSaveBtnFloating');
|
||||
const toast = document.getElementById('cmToast');
|
||||
const table = document.getElementById('cmExcelTable');
|
||||
|
||||
function showToast(message, isError = false) {
|
||||
if (!toast) return;
|
||||
toast.textContent = message;
|
||||
toast.style.background = isError ? '#b91c1c' : '#0f172a';
|
||||
toast.classList.add('cm-show');
|
||||
setTimeout(() => toast.classList.remove('cm-show'), 2500);
|
||||
}
|
||||
|
||||
function parseNumber(str) {
|
||||
if (!str) return 0;
|
||||
const cleaned = String(str).replace(/,/g, '').trim();
|
||||
const val = parseFloat(cleaned);
|
||||
return isNaN(val) ? 0 : val;
|
||||
}
|
||||
|
||||
function formatNumber(val, decimals) {
|
||||
if (isNaN(val)) val = 0;
|
||||
return val.toFixed(decimals);
|
||||
}
|
||||
|
||||
function recalcRow(row) {
|
||||
const inputs = row.querySelectorAll('.cm-cell-input');
|
||||
|
||||
let ctn = 0, qty = 0, ttlQty = 0;
|
||||
let cbm = 0, ttlCbm = 0;
|
||||
let kg = 0, ttlKg = 0;
|
||||
let price = 0, amount = 0;
|
||||
|
||||
let ctnInput = null,
|
||||
qtyInput = null,
|
||||
ttlQtyInput = null,
|
||||
cbmInput = null,
|
||||
ttlCbmInput = null,
|
||||
kgInput = null,
|
||||
ttlKgInput = null,
|
||||
priceInput = null,
|
||||
amountInput = null;
|
||||
|
||||
inputs.forEach(inp => {
|
||||
const val = parseNumber(inp.value);
|
||||
|
||||
if (inp.dataset.ctn === '1') {
|
||||
ctn = val;
|
||||
ctnInput = inp;
|
||||
} else if (inp.dataset.qty === '1') {
|
||||
qty = val;
|
||||
qtyInput = inp;
|
||||
} else if (inp.dataset.ttlqty === '1') {
|
||||
ttlQty = val;
|
||||
ttlQtyInput = inp;
|
||||
} else if (inp.dataset.cbm === '1') {
|
||||
cbm = val;
|
||||
cbmInput = inp;
|
||||
} else if (inp.dataset.ttlcbm === '1') {
|
||||
ttlCbm = val;
|
||||
ttlCbmInput = inp;
|
||||
} else if (inp.dataset.kg === '1') {
|
||||
kg = val;
|
||||
kgInput = inp;
|
||||
} else if (inp.dataset.ttlkg === '1') {
|
||||
ttlKg = val;
|
||||
ttlKgInput = inp;
|
||||
} else if (inp.dataset.price === '1') {
|
||||
price = val;
|
||||
priceInput = inp;
|
||||
} else if (inp.dataset.amount === '1') {
|
||||
amount = val;
|
||||
amountInput = inp;
|
||||
}
|
||||
});
|
||||
|
||||
if (ttlQtyInput && ctnInput && qtyInput) {
|
||||
const newTtlQty = ctn * qty;
|
||||
ttlQtyInput.value = formatNumber(newTtlQty, 0);
|
||||
ttlQty = newTtlQty;
|
||||
}
|
||||
|
||||
if (ttlCbmInput && cbmInput && ctnInput) {
|
||||
const newTtlCbm = cbm * ctn;
|
||||
ttlCbmInput.value = formatNumber(newTtlCbm, 3);
|
||||
ttlCbm = newTtlCbm;
|
||||
}
|
||||
|
||||
if (ttlKgInput && kgInput && ctnInput) {
|
||||
const newTtlKg = kg * ctn;
|
||||
ttlKgInput.value = formatNumber(newTtlKg, 2);
|
||||
ttlKg = newTtlKg;
|
||||
}
|
||||
|
||||
if (amountInput && priceInput && ttlQtyInput) {
|
||||
const newAmount = price * ttlQty;
|
||||
amountInput.value = formatNumber(newAmount, 2);
|
||||
amount = newAmount;
|
||||
}
|
||||
}
|
||||
|
||||
if (table) {
|
||||
table.addEventListener('input', function (e) {
|
||||
const target = e.target;
|
||||
if (!target.classList.contains('cm-cell-input')) return;
|
||||
|
||||
if (target.classList.contains('cm-cell-readonly') || target.hasAttribute('readonly')) {
|
||||
target.blur();
|
||||
return;
|
||||
}
|
||||
|
||||
const row = target.closest('tr');
|
||||
if (row) {
|
||||
recalcRow(row);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (form && btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
btn.classList.add('cm-disabled');
|
||||
const formData = new FormData(form);
|
||||
|
||||
fetch(form.action, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
|
||||
},
|
||||
body: formData
|
||||
})
|
||||
.then(async res => {
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(text || 'Failed to save');
|
||||
}
|
||||
return res.json().catch(() => ({}));
|
||||
})
|
||||
.then(() => {
|
||||
showToast('Changes saved successfully.');
|
||||
})
|
||||
.catch(() => {
|
||||
showToast('Error while saving changes.', true);
|
||||
})
|
||||
.finally(() => {
|
||||
btn.classList.remove('cm-disabled');
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
overflow-x: hidden; /* Prevent horizontal scroll on body */
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
@@ -22,7 +22,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* New Stats Container */
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
@@ -43,9 +42,7 @@
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.stat-card:hover { transform: translateY(-2px); }
|
||||
|
||||
.stat-card.warning {
|
||||
border-left-color: #f59e0b;
|
||||
@@ -57,16 +54,6 @@
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
|
||||
}
|
||||
|
||||
.stat-card.danger {
|
||||
border-left-color: #ef4444;
|
||||
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
|
||||
}
|
||||
|
||||
.stat-card.info {
|
||||
border-left-color: #3b82f6;
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
}
|
||||
|
||||
.stat-card.secondary {
|
||||
border-left-color: #8b5cf6;
|
||||
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
|
||||
@@ -91,46 +78,19 @@
|
||||
.stat-card.warning .stat-icon {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.warning .stat-icon i {
|
||||
color: #f59e0b;
|
||||
}
|
||||
.stat-card.warning .stat-icon i { color: #f59e0b; }
|
||||
|
||||
.stat-card.success .stat-icon {
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.success .stat-icon i {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-icon {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.danger .stat-icon i {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.stat-card.info .stat-icon {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.stat-card.info .stat-icon i {
|
||||
color: #3b82f6;
|
||||
}
|
||||
.stat-card.success .stat-icon i { color: #10b981; }
|
||||
|
||||
.stat-card.secondary .stat-icon {
|
||||
background: rgba(139, 92, 246, 0.1);
|
||||
}
|
||||
.stat-card.secondary .stat-icon i { color: #8b5cf6; }
|
||||
|
||||
.stat-card.secondary .stat-icon i {
|
||||
color: #8b5cf6;
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
flex: 1;
|
||||
}
|
||||
.stat-content { flex: 1; }
|
||||
|
||||
.stat-value {
|
||||
font-size: 22px;
|
||||
@@ -147,14 +107,13 @@
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* Updated Search Container - Wider with icon on left */
|
||||
.search-container {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 10px;
|
||||
padding: 6px 12px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
width: 350px; /* Increased width */
|
||||
width: 350px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -210,7 +169,6 @@
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Updated Table Styles - Fixed horizontal scroll */
|
||||
.table-glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 10px;
|
||||
@@ -219,7 +177,6 @@
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Single gradient for entire header - Blue to Purple */
|
||||
.table thead {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
}
|
||||
@@ -232,20 +189,9 @@
|
||||
border: none;
|
||||
font-family: 'Inter', sans-serif;
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #667eea 0%);;
|
||||
|
||||
background: linear-gradient(135deg, #667eea 0%);
|
||||
}
|
||||
|
||||
/* Remove individual curved borders */
|
||||
.table-header:first-child {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
|
||||
.table-header:last-child {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
/* Apply rounded corners to the entire header container */
|
||||
.table-container thead tr:first-child th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
@@ -254,7 +200,6 @@
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
/* Updated Table Column Alignment */
|
||||
.table > :not(caption) > * > * {
|
||||
padding: 14px 12px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
@@ -263,44 +208,35 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Center align specific columns */
|
||||
.table > :not(caption) > * > *:nth-child(2), /* Customer ID */
|
||||
.table > :not(caption) > * > *:nth-child(3), /* Orders */
|
||||
.table > :not(caption) > * > *:nth-child(4), /* Total */
|
||||
.table > :not(caption) > * > *:nth-child(5) { /* Create Date */
|
||||
.table > :not(caption) > * > *:nth-child(2),
|
||||
.table > :not(caption) > * > *:nth-child(3),
|
||||
.table > :not(caption) > * > *:nth-child(4),
|
||||
.table > :not(caption) > * > *:nth-child(5) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Customer Info column should remain left-aligned */
|
||||
.table > :not(caption) > * > *:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
.table > :not(caption) > * > *:first-child { text-align: left; }
|
||||
|
||||
/* Status and Actions columns should remain as is */
|
||||
.table > :not(caption) > * > *:nth-child(6), /* Status */
|
||||
.table > :not(caption) > * > *:nth-child(7) { /* Actions */
|
||||
.table > :not(caption) > * > *:nth-child(6),
|
||||
.table > :not(caption) > * > *:nth-child(7),
|
||||
.table > :not(caption) > * > *:nth-child(8),
|
||||
.table > :not(caption) > * > *:nth-child(9) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Updated header alignment to match */
|
||||
.table-header:nth-child(2),
|
||||
.table-header:nth-child(3),
|
||||
.table-header:nth-child(4),
|
||||
.table-header:nth-child(5) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Customer Info header stays left */
|
||||
.table-header:first-child {
|
||||
text-align: Center;
|
||||
}
|
||||
|
||||
/* Status and Actions headers stay centered */
|
||||
.table-header:nth-child(5),
|
||||
.table-header:nth-child(6),
|
||||
.table-header:nth-child(7) {
|
||||
.table-header:nth-child(7),
|
||||
.table-header:nth-child(8),
|
||||
.table-header:nth-child(9) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-header:first-child { text-align: Center; }
|
||||
|
||||
.customer-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
@@ -374,7 +310,7 @@
|
||||
|
||||
.customer-info-column {
|
||||
min-width: 220px;
|
||||
max-width: 220px; /* Added max-width to prevent overflow */
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
@@ -391,31 +327,25 @@
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Remove customer-stats since we're adding columns */
|
||||
|
||||
/* Enhanced table styling - Fixed horizontal scroll */
|
||||
.table-container {
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
width: 100%; /* Ensure container takes full width */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Fix table responsiveness */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Ensure table doesn't exceed container */
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: 0;
|
||||
table-layout: auto; /* Changed to auto for better column distribution */
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
/* Fix for search and filter section */
|
||||
.search-filter-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -439,11 +369,10 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* New columns styling */
|
||||
.orders-column, .total-column, .customer-id-column, .create-date-column {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
min-width: 80px; /* Added minimum widths for consistency */
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.orders-count {
|
||||
@@ -458,7 +387,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ---------- Pagination Styles ---------- */
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -485,14 +413,10 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
.pagination-img-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
color: #1a2951;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
@@ -500,20 +424,19 @@
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
.pagination-img-btn:hover:not(:disabled) {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
.pagination-img-btn:disabled {
|
||||
background: #f8fafc;
|
||||
color: #cbd5e0;
|
||||
border-color: #e2e8f0;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.pagination-page-btn {
|
||||
@@ -551,61 +474,11 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
color: #9ba5bb;
|
||||
font-size: 13px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* Image-based pagination buttons */
|
||||
.pagination-img-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination-img-btn:hover:not(:disabled) {
|
||||
background: #1a2951;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-img-btn:disabled {
|
||||
background: #f8fafc;
|
||||
border-color: #e2e8f0;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.pagination-img-btn img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
filter: brightness(0) saturate(100%) invert(26%) sepia(89%) saturate(748%) hue-rotate(201deg) brightness(93%) contrast(89%);
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination-img-btn:hover:not(:disabled) img {
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(106%) contrast(101%);
|
||||
}
|
||||
|
||||
.pagination-img-btn:disabled img {
|
||||
filter: brightness(0) saturate(100%) invert(84%) sepia(8%) saturate(165%) hue-rotate(179deg) brightness(89%) contrast(86%);
|
||||
}
|
||||
|
||||
/* Mobile responsive fixes */
|
||||
@media (max-width: 1200px) {
|
||||
.table > :not(caption) > * > * {
|
||||
padding: 12px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.customer-info-column {
|
||||
min-width: 180px;
|
||||
max-width: 180px;
|
||||
@@ -613,65 +486,42 @@
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.search-container {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.stats-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.search-container { width: 280px; }
|
||||
.stats-container { grid-template-columns: repeat(2, 1fr); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.stats-container {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.stats-container { grid-template-columns: repeat(2, 1fr); }
|
||||
.search-filter-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-section {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.search-section { justify-content: center; }
|
||||
.search-container { width: 100%; }
|
||||
.filter-section {
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pagination-controls { justify-content: center; }
|
||||
.table > :not(caption) > * > * {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.customer-info-column {
|
||||
min-width: 150px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.customer-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
@@ -680,19 +530,12 @@
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.stats-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.table-responsive {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.stats-container { grid-template-columns: 1fr; }
|
||||
.table-responsive { font-size: 12px; }
|
||||
.customer-info-column {
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
|
||||
.premium-badge,
|
||||
.regular-badge,
|
||||
.status-badge {
|
||||
@@ -703,14 +546,11 @@
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<!-- Header - Removed gradient -->
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h4 style="color: #2c3e50; font-weight: 700; font-family: 'Inter', sans-serif;">Customer List</h4>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards with NEW DESIGN -->
|
||||
<div class="stats-container">
|
||||
<!-- Total Customers -->
|
||||
<div class="stat-card">
|
||||
<div class="stat-icon">
|
||||
<i class="bi bi-people-fill"></i>
|
||||
@@ -721,7 +561,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- New This Month -->
|
||||
<div class="stat-card warning">
|
||||
<div class="stat-icon">
|
||||
<i class="bi bi-person-plus"></i>
|
||||
@@ -739,7 +578,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Customers -->
|
||||
<div class="stat-card success">
|
||||
<div class="stat-icon">
|
||||
<i class="bi bi-activity"></i>
|
||||
@@ -755,7 +593,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Premium Customers -->
|
||||
<div class="stat-card secondary">
|
||||
<div class="stat-icon">
|
||||
<i class="bi bi-award-fill"></i>
|
||||
@@ -772,10 +609,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter Section -->
|
||||
<div class="glass-card p-3 mb-3">
|
||||
<div class="search-filter-container">
|
||||
<!-- Search Section - Wider with icon on left -->
|
||||
<div class="search-section">
|
||||
<form method="GET" action="{{ route('admin.customers.index') }}" class="d-flex align-items-center">
|
||||
<div class="search-container">
|
||||
@@ -792,7 +627,6 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="filter-section">
|
||||
<a href="{{ route('admin.customers.index', ['status'=>'active', 'search'=>$search ?? '']) }}"
|
||||
class="filter-btn {{ ($status ?? '') == 'active' ? 'active' : '' }}">
|
||||
@@ -818,7 +652,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Customer List Table -->
|
||||
<div class="table-container">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover align-middle mb-0">
|
||||
@@ -828,8 +661,8 @@
|
||||
<th class="table-header">Customer ID</th>
|
||||
<th class="table-header">Orders</th>
|
||||
<th class="table-header">Order Total</th>
|
||||
<th class="table-header">Total Payable</th> {{-- NEW --}}
|
||||
<th class="table-header">Remaining</th> {{-- NEW --}}
|
||||
<th class="table-header">Total Payable</th>
|
||||
<th class="table-header">Remaining</th>
|
||||
<th class="table-header">Create Date</th>
|
||||
<th class="table-header">Status</th>
|
||||
<th class="table-header" width="100">Actions</th>
|
||||
@@ -839,19 +672,22 @@
|
||||
<tbody id="customersTableBody">
|
||||
@forelse($customers as $c)
|
||||
@php
|
||||
// Invoice total (with GST)
|
||||
$totalPayable = $c->invoices->sum('final_amount_with_gst');
|
||||
// Orders = invoice count
|
||||
$ordersCount = $c->invoices->count();
|
||||
|
||||
// Order Total = items total from all invoices (final_amount)
|
||||
$orderTotal = $c->invoices->sum('final_amount');
|
||||
|
||||
// Total payable = grand total with GST + groups
|
||||
$totalPayable = $c->invoices->sum('grand_total_with_charges');
|
||||
|
||||
// Total paid via installments
|
||||
$totalPaid = $c->invoices
|
||||
->flatMap(fn($inv) => $inv->installments)
|
||||
->sum('amount');
|
||||
$totalPaid = $c->invoiceInstallments->sum('amount');
|
||||
|
||||
// Remaining amount
|
||||
$remainingAmount = max($totalPayable - $totalPaid, 0);
|
||||
@endphp
|
||||
<tr>
|
||||
<!-- Customer Info Column -->
|
||||
<td class="customer-info-column">
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="customer-avatar me-3">
|
||||
@@ -872,20 +708,17 @@
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Customer ID -->
|
||||
<td class="customer-id-column">
|
||||
<span class="fw-bold text-primary">{{ $c->customer_id }}</span>
|
||||
</td>
|
||||
|
||||
<!-- Orders Column -->
|
||||
<td class="orders-column">
|
||||
<span class="orders-count">{{ $c->orders->count() }}</span>
|
||||
<span class="orders-count">{{ $ordersCount }}</span>
|
||||
</td>
|
||||
|
||||
<!-- Total Column -->
|
||||
<td class="total-column">
|
||||
<span class="total-amount">
|
||||
₹{{ number_format($c->orders->sum('ttl_amount'), 2) }}
|
||||
₹{{ number_format($orderTotal, 2) }}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
@@ -907,16 +740,10 @@
|
||||
@endif
|
||||
</td>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Create Date -->
|
||||
<td class="create-date-column">
|
||||
<span class="text-muted">{{ $c->created_at ? $c->created_at->format('d-m-Y') : '-' }}</span>
|
||||
</td>
|
||||
|
||||
<!-- Status -->
|
||||
<td>
|
||||
@if($c->status === 'active')
|
||||
<span class="status-badge active-status">Active</span>
|
||||
@@ -925,7 +752,6 @@
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<!-- Actions -->
|
||||
<td>
|
||||
<div class="d-flex justify-content-center">
|
||||
<a href="{{ route('admin.customers.view', $c->id) }}"
|
||||
@@ -945,7 +771,7 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="text-center py-4">
|
||||
<td colspan="9" class="text-center py-4">
|
||||
<i class="bi bi-people display-4 text-muted d-block mb-2"></i>
|
||||
<span class="text-muted">No customers found.</span>
|
||||
</td>
|
||||
@@ -956,14 +782,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div class="pagination-container">
|
||||
<div class="pagination-info" id="pageInfo">
|
||||
Showing {{ $customers->firstItem() ?? 0 }} to {{ $customers->lastItem() ?? 0 }} of {{ $customers->total() }} entries
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<button class="pagination-img-btn" id="prevPageBtn" title="Previous page" {{ $customers->onFirstPage() ? 'disabled' : '' }}>
|
||||
<!-- Left arrow SVG -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
@@ -977,7 +801,6 @@
|
||||
@endfor
|
||||
</div>
|
||||
<button class="pagination-img-btn" id="nextPageBtn" title="Next page" {{ $customers->hasMorePages() ? '' : 'disabled' }}>
|
||||
<!-- Right arrow SVG -->
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
@@ -988,7 +811,6 @@
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add hover effects to table rows
|
||||
const tableRows = document.querySelectorAll('.table tbody tr');
|
||||
tableRows.forEach(row => {
|
||||
row.addEventListener('mouseenter', function() {
|
||||
@@ -1000,7 +822,6 @@
|
||||
});
|
||||
});
|
||||
|
||||
// Pagination button handlers
|
||||
document.getElementById('prevPageBtn').addEventListener('click', function() {
|
||||
@if(!$customers->onFirstPage())
|
||||
window.location.href = '{{ $customers->previousPageUrl() }}';
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
@section('page-title', 'Customer Details')
|
||||
|
||||
@section('content')
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
@@ -33,10 +32,12 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg,
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(102, 126, 234, 0.03) 0%,
|
||||
rgba(118, 75, 162, 0.03) 50%,
|
||||
rgba(16, 185, 129, 0.03) 100%);
|
||||
rgba(16, 185, 129, 0.03) 100%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -81,10 +82,12 @@
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg,
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.1) 50%,
|
||||
transparent 100%);
|
||||
transparent 100%
|
||||
);
|
||||
animation: headerShimmer 8s infinite linear;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
@@ -333,7 +336,7 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Buttons - FIXED POSITIONING */
|
||||
/* Buttons */
|
||||
.btn-back {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
@@ -358,10 +361,12 @@
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent);
|
||||
transparent
|
||||
);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
@@ -397,10 +402,12 @@
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg,
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent);
|
||||
transparent
|
||||
);
|
||||
transition: left 0.6s ease;
|
||||
}
|
||||
|
||||
@@ -497,7 +504,7 @@
|
||||
.animation-delay-3 { animation-delay: 0.3s; }
|
||||
.animation-delay-4 { animation-delay: 0.4s; }
|
||||
|
||||
/* Header Button Container - FIXED */
|
||||
/* Header Button Container */
|
||||
.header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -541,7 +548,8 @@
|
||||
}
|
||||
|
||||
@media (max-width: 576px) {
|
||||
.btn-back, .btn-outline-secondary {
|
||||
.btn-back,
|
||||
.btn-outline-secondary {
|
||||
padding: 10px 20px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -560,8 +568,7 @@
|
||||
</style>
|
||||
|
||||
<div class="container py-4">
|
||||
|
||||
{{-- HEADER - FIXED BUTTON POSITION --}}
|
||||
{{-- HEADER --}}
|
||||
<div class="page-header animate-fade-in">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-md-8">
|
||||
@@ -586,7 +593,7 @@
|
||||
<div class="col-auto">
|
||||
<div class="avatar-container">
|
||||
<div class="customer-avatar">
|
||||
{{ strtoupper(substr($customer->customer_name,0,1)) }}
|
||||
{{ strtoupper(substr($customer->customer_name, 0, 1)) }}
|
||||
</div>
|
||||
<div class="avatar-status {{ $customer->status == 'active' ? 'status-active' : 'status-inactive' }}"></div>
|
||||
</div>
|
||||
@@ -703,42 +710,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- {{-- Total Payable --}}
|
||||
<div class="stats-card amount">
|
||||
{{-- Total Payable --}}
|
||||
<div class="col-md-4 animate-fade-in animation-delay-3">
|
||||
<div class="stats-card marks">
|
||||
<div class="stats-icon">
|
||||
<i class="bi bi-wallet2"></i>
|
||||
</div>
|
||||
<div class="stats-value">₹{{ number_format($totalPayable, 2) }}</div>
|
||||
<div class="stats-label">Total Payable</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Total Remaining --}}
|
||||
{{-- Remaining Amount --}}
|
||||
<div class="col-md-4 animate-fade-in animation-delay-3">
|
||||
<div class="stats-card marks">
|
||||
<div class="stats-icon">
|
||||
<i class="bi bi-exclamation-circle"></i>
|
||||
</div>
|
||||
<div class="stats-value">₹{{ number_format($totalRemaining, 2) }}</div>
|
||||
<div class="stats-label">Remaining Amount</div>
|
||||
</div> -->
|
||||
<div class="col-md-4 animate-fade-in animation-delay-3">
|
||||
<div class="stats-card marks">
|
||||
<div class="stats-icon">
|
||||
<i class="bi bi-hash"></i>
|
||||
</div>
|
||||
<div class="stats-value">₹{{ number_format($totalPayable, 2) }}</div>
|
||||
<div class="stats-label">Total Payable</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 animate-fade-in animation-delay-3">
|
||||
<div class="stats-card marks">
|
||||
<div class="stats-icon">
|
||||
<i class="bi bi-hash"></i>
|
||||
</div>
|
||||
<div class="stats-value">₹{{ number_format($totalRemaining, 2) }}</div>
|
||||
<div class="stats-label">Remaining Amount</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{-- Mark Count --}}
|
||||
<div class="col-md-4 animate-fade-in animation-delay-3">
|
||||
@@ -783,20 +775,23 @@
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// Add hover effects to interactive elements
|
||||
const interactiveElements = document.querySelectorAll('.info-card, .stats-card, .mark-item');
|
||||
|
||||
interactiveElements.forEach(element => {
|
||||
element.addEventListener('mouseenter', function() {
|
||||
this.style.transform = this.classList.contains('mark-item') ? 'translateX(5px)' : 'translateY(-5px)';
|
||||
element.addEventListener('mouseenter', function () {
|
||||
if (this.classList.contains('mark-item')) {
|
||||
this.style.transform = 'translateX(5px)';
|
||||
} else {
|
||||
this.style.transform = 'translateY(-5px)';
|
||||
}
|
||||
});
|
||||
|
||||
element.addEventListener('mouseleave', function() {
|
||||
element.addEventListener('mouseleave', function () {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
@@ -817,5 +812,4 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
@@ -1298,7 +1298,7 @@ body {
|
||||
</div>
|
||||
|
||||
<!-- ORDER MANAGEMENT -->
|
||||
<div class="order-mgmt-box">
|
||||
<!-- <div class="order-mgmt-box">
|
||||
<div class="order-mgmt-bar">
|
||||
<span class="order-mgmt-title"><i class="bi bi-table"></i> Order Management</span>
|
||||
@can('order.create')
|
||||
@@ -1307,9 +1307,9 @@ body {
|
||||
</button>
|
||||
@endcan
|
||||
</div>
|
||||
<div class="order-mgmt-main">
|
||||
<div class="order-mgmt-main"> -->
|
||||
<!-- RECENT ORDERS TABLE -->
|
||||
<div class="card shadow-sm">
|
||||
<!-- <div class="card shadow-sm">
|
||||
<div class="card-header">
|
||||
<strong>Recent Orders</strong>
|
||||
<span style="font-size:13px;color:rgba(255,255,255,0.8);margin-left:10px;">
|
||||
@@ -1421,20 +1421,20 @@ body {
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Pagination Controls -->
|
||||
<div class="pagination-container">
|
||||
<!-- <div class="pagination-container">
|
||||
<div class="pagination-info" id="pageInfo">Showing 1 to 10 of {{ $orders->count() }} entries</div>
|
||||
<div class="pagination-controls">
|
||||
<button class="pagination-img-btn" id="prevPageBtn" title="Previous page">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 12L6 8L10 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="pagination-pages" id="paginationPages">
|
||||
</button> -->
|
||||
<!-- <div class="pagination-pages" id="paginationPages"> -->
|
||||
<!-- Page numbers will be inserted here -->
|
||||
</div>
|
||||
<!-- </div>
|
||||
<button class="pagination-img-btn" id="nextPageBtn" title="Next page">
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 4L10 8L6 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
@@ -1447,7 +1447,7 @@ body {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- CREATE ORDER MODAL -->
|
||||
<div class="create-order-modal" id="createOrderModal">
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||
|
||||
/*Remove horizontal scroll bar*/
|
||||
html, body {
|
||||
/* html, body {
|
||||
overflow-x: hidden !important;
|
||||
font-family: 'Inter', sans-serif !important;
|
||||
}
|
||||
} */
|
||||
|
||||
/* Invoice Management Styles */
|
||||
.invoice-management-box {
|
||||
@@ -50,43 +50,50 @@
|
||||
color: #336ad3;
|
||||
}
|
||||
|
||||
/* Tools Row Styling */
|
||||
/* ===== UPDATED FILTER BAR WITH DATE RANGE ===== */
|
||||
.invoice-tools-row {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
|
||||
padding: 25px 30px;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
flex-wrap: wrap;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
||||
box-shadow: 0 10px 25px -5px rgba(99, 102, 241, 0.3);
|
||||
position: relative;
|
||||
border-radius: 17px 17px 0 0;
|
||||
top:5px;
|
||||
}
|
||||
|
||||
.filter-bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Search Box Styling */
|
||||
.search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 10px 18px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
|
||||
border: 1.5px solid #e2e8f0;
|
||||
min-width: 380px;
|
||||
flex: 1;
|
||||
max-width: 500px;
|
||||
border-radius: 50px;
|
||||
padding: 8px 20px;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.08), inset 0 1px 2px rgba(255,255,255,0.5);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
flex: 2;
|
||||
min-width: 250px;
|
||||
transition: all 0.3s ease;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.search-box:focus-within {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
|
||||
box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25);
|
||||
transform: translateY(-2px);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.search-box i {
|
||||
color: #64748b;
|
||||
color: #667eea;
|
||||
margin-right: 12px;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
@@ -95,93 +102,189 @@
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
color: #334155;
|
||||
color: #1f2937;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-box input::placeholder {
|
||||
color: #94a3b8;
|
||||
color: #9ca3af;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* .search-btn {
|
||||
background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 5px 10px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: 3px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
white-space: nowrap;
|
||||
} */
|
||||
|
||||
.search-btn:hover {
|
||||
background: linear-gradient(90deg, #3264f8, #3acfff 140%);
|
||||
box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
/* Filter Selects Styling */
|
||||
.filter-select-wrapper {
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
width: 100%;
|
||||
background: white;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
border-radius: 50px;
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
color: #1f2937;
|
||||
outline: none;
|
||||
min-width: 160px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 15px center;
|
||||
background-size: 16px;
|
||||
}
|
||||
|
||||
.filter-select:hover {
|
||||
background-color: white;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
border-color: white;
|
||||
box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.create-invoice-btn {
|
||||
background: linear-gradient(90deg, #226ad6, #46b4fd 123%);
|
||||
padding: 12px 28px;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
box-shadow: 0 2px 13px #dde7fa42;
|
||||
transition: all 0.3s ease;
|
||||
/* ===== NEW: Status dropdown option colors ===== */
|
||||
.filter-select option[value="paid"] {
|
||||
background-color: #d1fae5;
|
||||
color: #065f46;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-select option[value="pending"] {
|
||||
background-color: #fef3c7;
|
||||
color: #d97706;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-select option[value="overdue"] {
|
||||
background-color: #e9d5ff;
|
||||
color: #6b21a8;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.filter-select option[value="all"] {
|
||||
background-color: white;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
/* For Firefox compatibility */
|
||||
.filter-select option {
|
||||
padding: 8px;
|
||||
}
|
||||
/* ===== END status dropdown option colors ===== */
|
||||
|
||||
/* Date Range Styling */
|
||||
.date-range-wrapper {
|
||||
flex: 1.5;
|
||||
min-width: 280px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
/* background: rgba(255, 255, 255, 0.2); */
|
||||
padding: 5px 12px;
|
||||
border-radius: 50px;
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.create-invoice-btn:hover {
|
||||
background: linear-gradient(90deg, #3264f8, #3acfff 140%);
|
||||
box-shadow: 0 4px 25px #5ab8f880;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transform: translateY(-2px);
|
||||
.date-input-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: white;
|
||||
border-radius: 50px;
|
||||
padding: 5px 12px;
|
||||
flex: 1;
|
||||
border: 1px solid rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.date-input-container i {
|
||||
color: #667eea;
|
||||
margin-right: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: #1f2937;
|
||||
font-family: 'Inter', sans-serif;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.date-input::placeholder {
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1100px) {
|
||||
.filter-bar-container {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.date-range-wrapper {
|
||||
min-width: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.invoice-tools-row {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.filter-bar-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.filter-select-wrapper {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.date-range-wrapper {
|
||||
min-width: 100%;
|
||||
flex-direction: column;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
padding: 0;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-input-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* ===== END UPDATED FILTER BAR ===== */
|
||||
|
||||
.invoice-management-main {
|
||||
background: #fff;
|
||||
border-radius: 0 0 17px 17px;
|
||||
@@ -569,37 +672,6 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Date Range Picker Styles */
|
||||
.date-range-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
background: white;
|
||||
border: 1.5px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
padding: 10px 12px;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
outline: none;
|
||||
min-width: 140px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.04);
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.date-input:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.date-separator {
|
||||
color: #000000ff;
|
||||
font-weight: 500;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Stats Summary - Centered */
|
||||
.stats-summary {
|
||||
display: grid;
|
||||
@@ -950,17 +1022,6 @@
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 1200px) {
|
||||
.invoice-tools-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
max-width: 100%;
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
@@ -978,10 +1039,6 @@
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.invoice-tools-row {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.table th, .table td {
|
||||
font-size: 13px;
|
||||
padding: 15px 10px;
|
||||
@@ -1003,21 +1060,6 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.create-invoice-btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.invoice-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@@ -1033,15 +1075,6 @@
|
||||
display: block;
|
||||
}
|
||||
|
||||
.date-range-container {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.stats-summary {
|
||||
grid-template-columns: 1fr;
|
||||
margin: 20px;
|
||||
@@ -1079,11 +1112,6 @@
|
||||
min-width: auto;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
padding: 8px 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1096,56 +1124,58 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- TOOLS ROW - Search, Filter, Create Button -->
|
||||
<!-- UPDATED FILTER BAR WITH DATE RANGE -->
|
||||
<div class="invoice-tools-row">
|
||||
<!-- Search Box with Button -->
|
||||
<form method="GET" action="{{ route('admin.invoices.index') }}">
|
||||
<div class="invoice-tools-row">
|
||||
<div style="display:flex; align-items:center; flex:1; max-width:500px; min-width:380px;">
|
||||
<form method="GET" action="{{ route('admin.invoices.index') }}" style="width: 100%;">
|
||||
<div class="filter-bar-container">
|
||||
<!-- Search Box -->
|
||||
<div class="search-box">
|
||||
<i class="bi bi-search"></i>
|
||||
<input type="text"
|
||||
id="invoiceSearch"
|
||||
id="searchInput"
|
||||
name="search"
|
||||
value="{{ request('search') }}"
|
||||
placeholder="Search by invoice number, customer name...">
|
||||
</div>
|
||||
<button type="submit" id="searchButton" class="search-btn">
|
||||
Search
|
||||
</button>
|
||||
placeholder="Search Invoices...">
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<!-- Status Filter -->
|
||||
<div class="filter-select-wrapper">
|
||||
<select class="filter-select" id="statusFilter" name="status">
|
||||
<option value="all">All Status</option>
|
||||
<option value="all" {{ request('status')=='all' ? 'selected' : '' }}>All Status</option>
|
||||
<option value="paid" {{ request('status')=='paid' ? 'selected' : '' }}>Paid</option>
|
||||
<option value="pending" {{ request('status')=='pending' ? 'selected' : '' }}>Pending</option>
|
||||
<option value="overdue" {{ request('status')=='overdue' ? 'selected' : '' }}>Overdue</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="date-range-container">
|
||||
<input type="date"
|
||||
<!-- Date Range Filter (FROM - TO) with dd-mm-yyyy format -->
|
||||
<div class="date-range-wrapper">
|
||||
<div class="date-input-container">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
<input type="text"
|
||||
class="date-input"
|
||||
id="startDate"
|
||||
name="start_date"
|
||||
value="{{ request('start_date') }}">
|
||||
value="{{ request('start_date') ? date('d-m-Y', strtotime(request('start_date'))) : '' }}"
|
||||
placeholder="dd-mm-yyyy"
|
||||
onfocus="(this.type='date')"
|
||||
onblur="if(!this.value) this.type='text'">
|
||||
</div>
|
||||
<span class="date-separator">to</span>
|
||||
<input type="date"
|
||||
<div class="date-input-container">
|
||||
<i class="bi bi-calendar3"></i>
|
||||
<input type="text"
|
||||
class="date-input"
|
||||
id="endDate"
|
||||
name="end_date"
|
||||
value="{{ request('end_date') }}">
|
||||
value="{{ request('end_date') ? date('d-m-Y', strtotime(request('end_date'))) : '' }}"
|
||||
placeholder="dd-mm-yyyy"
|
||||
onfocus="(this.type='date')"
|
||||
onblur="if(!this.value) this.type='text'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
<!-- Create Invoice Button -->
|
||||
<!-- <a href="{{ route('admin.invoices.create') }}" class="create-invoice-btn">
|
||||
<i class="bi bi-plus-circle"></i> Create Invoice
|
||||
</a> -->
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="invoice-management-main no-extra-space">
|
||||
@@ -1186,6 +1216,7 @@
|
||||
<th class="column-header">#</th>
|
||||
<th class="column-header">Invoice Number</th>
|
||||
<th class="column-header">Customer</th>
|
||||
<th class="column-header">Container</th> {{-- NEW --}}
|
||||
<th class="column-header">Final Amount</th>
|
||||
<th class="column-header">GST %</th>
|
||||
<th class="column-header">Total w/GST</th>
|
||||
@@ -1194,9 +1225,9 @@
|
||||
<th class="column-header">Due Date</th>
|
||||
<th class="column-header">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</thead>
|
||||
|
||||
<tbody id="invoicesTableBody">
|
||||
<tbody id="invoicesTableBody">
|
||||
@php
|
||||
$totalInvoices = $invoices->count();
|
||||
$sortedInvoices = $invoices->sortByDesc('created_at'); // Latest first
|
||||
@@ -1217,11 +1248,33 @@
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="customer-cell">{{ $invoice->customer_name }}</td>
|
||||
<td class="customer-cell">
|
||||
{{ $invoice->customer_name }}
|
||||
</td>
|
||||
|
||||
<td class="amount-cell">₹{{ number_format($invoice->final_amount, 2) }}</td>
|
||||
<td class="gst-cell">{{ $invoice->gst_percent }}%</td>
|
||||
<td class="amount-cell">₹{{ number_format($invoice->final_amount_with_gst, 2) }}</td>
|
||||
{{-- NEW: Container column --}}
|
||||
<td class="customer-cell">
|
||||
@if($invoice->container)
|
||||
{{ $invoice->container->container_number }}
|
||||
{{-- जर फक्त ID हवी असेल तर:
|
||||
#{{ $invoice->container->id }}
|
||||
--}}
|
||||
@else
|
||||
—
|
||||
@endif
|
||||
</td>
|
||||
|
||||
<td class="amount-cell">
|
||||
₹{{ number_format($invoice->final_amount, 2) }}
|
||||
</td>
|
||||
|
||||
<td class="gst-cell">
|
||||
{{ $invoice->gst_percent }}%
|
||||
</td>
|
||||
|
||||
<td class="amount-cell">
|
||||
₹{{ number_format($invoice->final_amount_with_gst, 2) }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<span class="badge badge-{{ $invoice->status }}">
|
||||
@@ -1236,8 +1289,13 @@
|
||||
</span>
|
||||
</td>
|
||||
|
||||
<td class="date-cell">{{ $invoice->invoice_date }}</td>
|
||||
<td class="date-cell">{{ $invoice->due_date }}</td>
|
||||
<td class="date-cell">
|
||||
{{ $invoice->invoice_date }}
|
||||
</td>
|
||||
|
||||
<td class="date-cell">
|
||||
{{ $invoice->due_date }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<a href="{{ route('admin.invoices.edit', $invoice->id) }}"
|
||||
@@ -1248,10 +1306,12 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="10" class="text-muted">No invoices found</td>
|
||||
{{-- 1 new column वाढवलाय म्हणून colspan 11 --}}
|
||||
<td colspan="11" class="text-muted">No invoices found</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1366,7 +1426,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Pagination state
|
||||
@@ -1413,18 +1472,28 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
|
||||
// Search and filter functionality for both desktop and mobile
|
||||
const searchInput = document.getElementById('invoiceSearch');
|
||||
// Function to parse dd-mm-yyyy to Date object
|
||||
function parseDate(dateStr) {
|
||||
if (!dateStr) return null;
|
||||
const parts = dateStr.split('-');
|
||||
if (parts.length === 3) {
|
||||
// dd-mm-yyyy format
|
||||
return new Date(parts[2], parts[1] - 1, parts[0]);
|
||||
}
|
||||
return new Date(dateStr);
|
||||
}
|
||||
|
||||
// Search and filter functionality
|
||||
const searchInput = document.getElementById('searchInput');
|
||||
const statusFilter = document.getElementById('statusFilter');
|
||||
const startDateInput = document.getElementById('startDate');
|
||||
const endDateInput = document.getElementById('endDate');
|
||||
const searchButton = document.getElementById('searchButton');
|
||||
const startDate = document.getElementById('startDate');
|
||||
const endDate = document.getElementById('endDate');
|
||||
|
||||
function filterInvoices() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
const statusValue = statusFilter.value;
|
||||
const startDate = startDateInput.value;
|
||||
const endDate = endDateInput.value;
|
||||
const startDateValue = startDate.value;
|
||||
const endDateValue = endDate.value;
|
||||
|
||||
filteredInvoices = allInvoices.filter(invoice => {
|
||||
let include = true;
|
||||
@@ -1438,18 +1507,23 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (statusValue && invoice.status !== statusValue) {
|
||||
if (statusValue && statusValue !== 'all' && invoice.status !== statusValue) {
|
||||
include = false;
|
||||
}
|
||||
|
||||
// Date filter
|
||||
if (startDate || endDate) {
|
||||
const invoiceDate = new Date(invoice.invoice_date);
|
||||
const start = startDate ? new Date(startDate) : null;
|
||||
const end = endDate ? new Date(endDate) : null;
|
||||
// Date range filter
|
||||
if (startDateValue || endDateValue) {
|
||||
const invoiceDate = parseDate(invoice.invoice_date);
|
||||
|
||||
if (start && invoiceDate < start) include = false;
|
||||
if (end && invoiceDate > end) include = false;
|
||||
if (startDateValue) {
|
||||
const start = parseDate(startDateValue);
|
||||
if (invoiceDate < start) include = false;
|
||||
}
|
||||
|
||||
if (endDateValue) {
|
||||
const end = parseDate(endDateValue);
|
||||
if (invoiceDate > end) include = false;
|
||||
}
|
||||
}
|
||||
|
||||
return include;
|
||||
@@ -1462,14 +1536,14 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// Add event listeners for filtering
|
||||
searchInput.addEventListener('input', filterInvoices);
|
||||
searchButton.addEventListener('click', filterInvoices);
|
||||
statusFilter.addEventListener('change', filterInvoices);
|
||||
startDateInput.addEventListener('change', filterInvoices);
|
||||
endDateInput.addEventListener('change', filterInvoices);
|
||||
startDate.addEventListener('change', filterInvoices);
|
||||
endDate.addEventListener('change', filterInvoices);
|
||||
|
||||
// Also trigger search on Enter key in search input
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
filterInvoices();
|
||||
}
|
||||
});
|
||||
@@ -1559,7 +1633,8 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const mobileContainer = document.getElementById('mobileInvoicesContainer');
|
||||
|
||||
if (filteredInvoices.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" class="text-muted">No invoices found</td></tr>';
|
||||
// 1 column वाढवल्यामुळे colspan 11
|
||||
tbody.innerHTML = '<tr><td colspan="11" class="text-muted">No invoices found</td></tr>';
|
||||
mobileContainer.innerHTML = '<div class="text-muted text-center py-4">No invoices found</div>';
|
||||
return;
|
||||
}
|
||||
@@ -1590,6 +1665,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
</div>
|
||||
</td>
|
||||
<td class="customer-cell">${invoice.customer_name}</td>
|
||||
<!-- NEW: Container column -->
|
||||
<td class="customer-cell">
|
||||
${invoice.container ? (invoice.container.container_number ?? '—') : '—'}
|
||||
</td>
|
||||
<td class="amount-cell">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
||||
<td class="gst-cell">${invoice.gst_percent}%</td>
|
||||
<td class="amount-cell">₹${parseFloat(invoice.final_amount_with_gst).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
|
||||
@@ -1639,6 +1718,13 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
<span class="mobile-detail-label">Customer</span>
|
||||
<span class="mobile-detail-value">${invoice.customer_name}</span>
|
||||
</div>
|
||||
<!-- NEW: Container for mobile -->
|
||||
<div class="mobile-detail-item">
|
||||
<span class="mobile-detail-label">Container</span>
|
||||
<span class="mobile-detail-value">
|
||||
${invoice.container ? (invoice.container.container_number ?? '—') : '—'}
|
||||
</span>
|
||||
</div>
|
||||
<div class="mobile-detail-item">
|
||||
<span class="mobile-detail-label">Amount</span>
|
||||
<span class="mobile-detail-value">₹${parseFloat(invoice.final_amount).toLocaleString('en-IN', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</span>
|
||||
@@ -1683,11 +1769,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
@@ -1,7 +1,9 @@
|
||||
@extends('admin.layouts.app')
|
||||
|
||||
|
||||
@section('page-title', 'Edit Invoice')
|
||||
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
:root {
|
||||
@@ -460,11 +462,12 @@
|
||||
</div>
|
||||
|
||||
@php
|
||||
$totalPaid = $invoice->installments()->sum('amount');
|
||||
$remaining = $invoice->final_amount_with_gst - $totalPaid;
|
||||
// आता helpers वापरू: totalPaid() आणि remainingAmount()
|
||||
$totalPaid = $invoice->totalPaid();
|
||||
$remaining = $invoice->remainingAmount();
|
||||
@endphp
|
||||
|
||||
{{-- Amount Breakdown --}}
|
||||
{{-- Amount Breakdown (items + GST + groups) --}}
|
||||
<div class="amount-breakdown-compact">
|
||||
<h6 class="fw-bold mb-3 text-dark">
|
||||
<i class="fas fa-calculator me-2"></i>Amount Breakdown
|
||||
@@ -506,10 +509,17 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="breakdown-row">
|
||||
<span class="breakdown-label">Charge Groups Total</span>
|
||||
<span class="breakdown-value text-info" id="chargeGroupsTotal">
|
||||
₹{{ number_format($invoice->charge_groups_total, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="breakdown-row" style="border-top: 2px solid #e2e8f0; padding-top: 0.75rem;">
|
||||
<span class="breakdown-label fw-bold">Total Invoice Amount Including GST</span>
|
||||
<span class="breakdown-label fw-bold">Grand Total (Items + GST + Groups)</span>
|
||||
<span class="breakdown-value fw-bold text-dark" id="totalInvoiceWithGst">
|
||||
₹{{ number_format($invoice->final_amount_with_gst, 2) }}
|
||||
₹{{ number_format($invoice->grand_total_with_charges, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -523,18 +533,18 @@
|
||||
<div class="breakdown-row" style="border-bottom: none;">
|
||||
<span class="breakdown-label text-danger">Remaining</span>
|
||||
<span class="breakdown-value fw-bold text-danger" id="remainingAmount">
|
||||
₹{{ number_format($remaining, 2) }}
|
||||
₹{{ number_format(max(0, $remaining), 2) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Installment Summary --}}
|
||||
{{-- Installment Summary (top cards) --}}
|
||||
<div class="summary-grid-compact">
|
||||
<div class="summary-card-compact total">
|
||||
<div class="summary-value-compact text-success" id="totalInvoiceWithGstCard">
|
||||
₹{{ number_format($invoice->final_amount_with_gst, 2) }}
|
||||
₹{{ number_format($invoice->grand_total_with_charges, 2) }}
|
||||
</div>
|
||||
<div class="summary-label-compact">Total Amount</div>
|
||||
<div class="summary-label-compact">Grand Total (Items + GST + Groups)</div>
|
||||
</div>
|
||||
<div class="summary-card-compact paid">
|
||||
<div class="summary-value-compact text-primary">
|
||||
@@ -544,7 +554,7 @@
|
||||
</div>
|
||||
<div class="summary-card-compact remaining">
|
||||
<div class="summary-value-compact text-warning">
|
||||
₹{{ number_format($remaining, 2) }}
|
||||
₹{{ number_format(max(0, $remaining), 2) }}
|
||||
</div>
|
||||
<div class="summary-label-compact">Remaining</div>
|
||||
</div>
|
||||
@@ -621,7 +631,7 @@
|
||||
class="form-control-compact"
|
||||
step="0.01"
|
||||
min="1"
|
||||
max="{{ $remaining }}"
|
||||
max="{{ max(0, $remaining) }}"
|
||||
required
|
||||
placeholder="Enter installment amount">
|
||||
</div>
|
||||
@@ -784,6 +794,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (document.getElementById("gstAmount")) {
|
||||
document.getElementById("gstAmount").textContent = "₹" + formatINR(data.gstAmount);
|
||||
}
|
||||
// grand total आता finalAmountWithGst नाही, पण API अजून तेच key देत आहे,
|
||||
// त्यामुळे इथे फक्त card आणि breakdown value update करतो:
|
||||
if (document.getElementById("totalInvoiceWithGst")) {
|
||||
document.getElementById("totalInvoiceWithGst").textContent = "₹" + formatINR(data.finalAmountWithGst);
|
||||
}
|
||||
@@ -876,7 +888,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const invoiceDateInput = document.querySelector('input[name="invoice_date"]');
|
||||
const dueDateInput = document.querySelector('input[name="due_date"]');
|
||||
@@ -886,14 +897,10 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
const selectedDate = new Date(this.value);
|
||||
|
||||
if (!isNaN(selectedDate.getTime())) {
|
||||
// १० दिवस पुढे नेण्यासाठी logic
|
||||
selectedDate.setDate(selectedDate.getDate() + 10);
|
||||
|
||||
// तारीख YYYY-MM-DD format मध्ये करण्यासाठी
|
||||
const year = selectedDate.getFullYear();
|
||||
const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(selectedDate.getDate()).padStart(2, '0');
|
||||
|
||||
dueDateInput.value = `${year}-${month}-${day}`;
|
||||
}
|
||||
});
|
||||
|
||||
@@ -65,40 +65,77 @@
|
||||
|
||||
.stats-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-left: 4px solid;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px 22px;
|
||||
border-radius: 14px;
|
||||
border-left: 4px solid;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.stat-card.total { border-left-color: #667eea; }
|
||||
.stat-card.paid { border-left-color: #10b981; }
|
||||
.stat-card.pending { border-left-color: #f59e0b; }
|
||||
.stat-card.overdue { border-left-color: #ef4444; }
|
||||
.stat-card.total {
|
||||
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
.stat-card.paid {
|
||||
background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
|
||||
border-left-color: #22c55e;
|
||||
}
|
||||
.stat-card.pending {
|
||||
background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
.stat-card.overdue {
|
||||
background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
.stat-icon-wrap {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.stat-card.total .stat-icon-wrap { background: rgba(59,130,246,0.12); color: #3b82f6; }
|
||||
.stat-card.paid .stat-icon-wrap { background: rgba(34,197,94,0.15); color: #16a34a; }
|
||||
.stat-card.pending .stat-icon-wrap{ background: rgba(245,158,11,0.15); color: #d97706; }
|
||||
.stat-card.overdue .stat-icon-wrap{ background: rgba(239,68,68,0.12); color: #dc2626; }
|
||||
|
||||
.stat-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -483,9 +520,9 @@
|
||||
@media(max-width: 768px) {
|
||||
.orders-title { font-size: 24px; }
|
||||
.orders-container { padding: 16px; }
|
||||
.stats-container { grid-template-columns: 1fr; }
|
||||
.stat-card { padding: 16px; }
|
||||
.stat-value { font-size: 24px; }
|
||||
.stats-container { grid-template-columns: 1fr 1fr; }
|
||||
.stat-card { padding: 14px 16px; }
|
||||
.stat-value { font-size: 22px; }
|
||||
|
||||
.download-section { justify-content: stretch; }
|
||||
.download-btn { flex: 1; justify-content: center; }
|
||||
@@ -497,6 +534,10 @@
|
||||
|
||||
.pagination-container { flex-direction: column; gap: 16px; }
|
||||
}
|
||||
|
||||
@media(max-width: 480px) {
|
||||
.stats-container { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="orders-container">
|
||||
@@ -504,7 +545,6 @@
|
||||
<i class="fas fa-file-invoice-dollar"></i> Invoices Management
|
||||
</div>
|
||||
|
||||
{{-- Stats Cards based on invoices --}}
|
||||
<div class="stats-container">
|
||||
@php
|
||||
$totalInvoices = $invoices->count();
|
||||
@@ -514,22 +554,45 @@
|
||||
@endphp
|
||||
|
||||
<div class="stat-card total">
|
||||
<div class="stat-icon-wrap">
|
||||
<i class="fas fa-file-invoice"></i>
|
||||
</div>
|
||||
<div class="stat-text">
|
||||
<div class="stat-value">{{ $totalInvoices }}</div>
|
||||
<div class="stat-label">Total Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card paid">
|
||||
<div class="stat-icon-wrap">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<div class="stat-text">
|
||||
<div class="stat-value">{{ $paidInvoices }}</div>
|
||||
<div class="stat-label">Paid Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card pending">
|
||||
<div class="stat-icon-wrap">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<div class="stat-text">
|
||||
<div class="stat-value">{{ $pendingInvoices }}</div>
|
||||
<div class="stat-label">Pending Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card overdue">
|
||||
<div class="stat-icon-wrap">
|
||||
<i class="fas fa-exclamation-triangle"></i>
|
||||
</div>
|
||||
<div class="stat-text">
|
||||
<div class="stat-value">{{ $overdueInvoices }}</div>
|
||||
<div class="stat-label">Overdue Invoices</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="download-section">
|
||||
<button class="download-btn pdf" id="downloadPdf" {{ $invoices->count() == 0 ? 'disabled' : '' }}>
|
||||
@@ -570,7 +633,7 @@
|
||||
<tr>
|
||||
<th>Invoice No</th>
|
||||
<th>Invoice Date</th>
|
||||
<th>Mark No</th>
|
||||
{{-- <th>Mark No</th> --}}
|
||||
<th>Container No</th>
|
||||
<th>Container Date</th>
|
||||
<th>Company</th>
|
||||
@@ -586,10 +649,30 @@
|
||||
$status = strtolower($inv->invoice_status ?? 'pending');
|
||||
@endphp
|
||||
<tr>
|
||||
<td>{{ $inv->invoice_number }}</td>
|
||||
<td>
|
||||
@if($inv->invoice_number)
|
||||
<a href="javascript:void(0);"
|
||||
class="invoice-popup-link"
|
||||
data-invoice-id="{{ $inv->id }}">
|
||||
{{ $inv->invoice_number }}
|
||||
</a>
|
||||
@else
|
||||
-
|
||||
@endif
|
||||
</td>
|
||||
<td>{{ $inv->invoice_date ? \Carbon\Carbon::parse($inv->invoice_date)->format('d-m-Y') : '-' }}</td>
|
||||
<td>{{ $inv->mark_no ?? '-' }}</td>
|
||||
<td>{{ $inv->container_number ?? '-' }}</td>
|
||||
{{-- <td>{{ $inv->mark_no ?? '-' }}</td> --}}
|
||||
<td>
|
||||
@if(!empty($inv->container_id) && !empty($inv->container_number))
|
||||
<a href="javascript:void(0);"
|
||||
class="container-popup-link"
|
||||
data-container-id="{{ $inv->container_id }}">
|
||||
{{ $inv->container_number }}
|
||||
</a>
|
||||
@else
|
||||
-
|
||||
@endif
|
||||
</td>
|
||||
<td>{{ $inv->container_date ? \Carbon\Carbon::parse($inv->container_date)->format('d-m-Y') : '-' }}</td>
|
||||
<td>{{ $inv->company_name ?? '-' }}</td>
|
||||
<td>{{ $inv->customer_name ?? '-' }}</td>
|
||||
@@ -633,6 +716,20 @@
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="invoiceModal" tabindex="-1" aria-hidden="true">
|
||||
<div class="modal-dialog modal-xl modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="invoiceModalTitle">Invoice Details</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="invoiceModalBody">
|
||||
<p class="text-center text-muted">Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentPage = 1;
|
||||
const itemsPerPage = 10;
|
||||
@@ -680,7 +777,7 @@
|
||||
const term = searchTerm.toLowerCase();
|
||||
const fields = [
|
||||
inv.invoice_number?.toString().toLowerCase(),
|
||||
inv.mark_no?.toString().toLowerCase(),
|
||||
// inv.mark_no?.toString().toLowerCase(),
|
||||
inv.container_number?.toString().toLowerCase(),
|
||||
inv.company_name?.toString().toLowerCase(),
|
||||
inv.customer_name?.toString().toLowerCase()
|
||||
@@ -711,6 +808,21 @@
|
||||
|
||||
document.getElementById('downloadPdf').addEventListener('click', downloadPdf);
|
||||
document.getElementById('downloadExcel').addEventListener('click', downloadExcel);
|
||||
|
||||
document.addEventListener('click', function(e) {
|
||||
const invLink = e.target.closest('.invoice-popup-link');
|
||||
if (invLink) {
|
||||
e.preventDefault();
|
||||
openInvoicePopup(invLink.dataset.invoiceId);
|
||||
return;
|
||||
}
|
||||
|
||||
const contLink = e.target.closest('.container-popup-link');
|
||||
if (contLink) {
|
||||
e.preventDefault();
|
||||
openContainerPopup(contLink.dataset.containerId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function handleFilter() {
|
||||
@@ -797,7 +909,7 @@
|
||||
tbody.innerHTML = '';
|
||||
|
||||
if (filteredInvoices.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="10" class="text-center py-4 text-muted">No invoices found matching your criteria.</td></tr>';
|
||||
tbody.innerHTML = '<tr><td colspan="9" class="text-center py-4 text-muted">No invoices found matching your criteria.</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -809,10 +921,26 @@
|
||||
const status = (inv.invoice_status || 'pending').toLowerCase();
|
||||
const row = document.createElement('tr');
|
||||
row.innerHTML = `
|
||||
<td>${inv.invoice_number || '-'}</td>
|
||||
<td>
|
||||
${
|
||||
inv.invoice_number
|
||||
? `<a href="javascript:void(0);" class="invoice-popup-link" data-invoice-id="${inv.id}">
|
||||
${inv.invoice_number}
|
||||
</a>`
|
||||
: '-'
|
||||
}
|
||||
</td>
|
||||
<td>${inv.invoice_date ? new Date(inv.invoice_date).toLocaleDateString('en-GB') : '-'}</td>
|
||||
<td>${inv.mark_no || '-'}</td>
|
||||
<td>${inv.container_number || '-'}</td>
|
||||
<!-- <td>${inv.mark_no || '-'}</td> -->
|
||||
<td>
|
||||
${
|
||||
inv.container_id && inv.container_number
|
||||
? `<a href="javascript:void(0);" class="container-popup-link" data-container-id="${inv.container_id}">
|
||||
${inv.container_number}
|
||||
</a>`
|
||||
: '-'
|
||||
}
|
||||
</td>
|
||||
<td>${inv.container_date ? new Date(inv.container_date).toLocaleDateString('en-GB') : '-'}</td>
|
||||
<td>${inv.company_name || '-'}</td>
|
||||
<td>${inv.customer_name || '-'}</td>
|
||||
@@ -828,6 +956,66 @@
|
||||
});
|
||||
}
|
||||
|
||||
function openInvoicePopup(invoiceId) {
|
||||
const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));
|
||||
|
||||
document.getElementById('invoiceModalTitle').textContent = 'Invoice Details';
|
||||
document.getElementById('invoiceModalBody').innerHTML =
|
||||
"<div class='text-center py-4'>" +
|
||||
"<div class='spinner-border text-primary' role='status'></div>" +
|
||||
"<p class='mt-2 text-muted'>Loading invoice details...</p>" +
|
||||
"</div>";
|
||||
|
||||
modal.show();
|
||||
|
||||
fetch(`/admin/invoices/${invoiceId}/popup`)
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error('Network error');
|
||||
return res.text();
|
||||
})
|
||||
.then(html => {
|
||||
document.getElementById('invoiceModalBody').innerHTML = html;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
document.getElementById('invoiceModalBody').innerHTML =
|
||||
"<div class='text-center py-4 text-danger'>" +
|
||||
"<i class='bi bi-exclamation-triangle fs-1'></i>" +
|
||||
"<p class='mt-2'>Failed to load invoice details. Please try again.</p>" +
|
||||
"</div>";
|
||||
});
|
||||
}
|
||||
|
||||
function openContainerPopup(containerId) {
|
||||
const modal = new bootstrap.Modal(document.getElementById('invoiceModal'));
|
||||
|
||||
document.getElementById('invoiceModalTitle').textContent = 'Container Details';
|
||||
document.getElementById('invoiceModalBody').innerHTML =
|
||||
"<div class='text-center py-4'>" +
|
||||
"<div class='spinner-border text-primary' role='status'></div>" +
|
||||
"<p class='mt-2 text-muted'>Loading container details...</p>" +
|
||||
"</div>";
|
||||
|
||||
modal.show();
|
||||
|
||||
fetch(`/admin/containers/${containerId}/popup`)
|
||||
.then(res => {
|
||||
if (!res.ok) throw new Error('Network error');
|
||||
return res.text();
|
||||
})
|
||||
.then(html => {
|
||||
document.getElementById('invoiceModalBody').innerHTML = html;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
document.getElementById('invoiceModalBody').innerHTML =
|
||||
"<div class='text-center py-4 text-danger'>" +
|
||||
"<i class='bi bi-exclamation-triangle fs-1'></i>" +
|
||||
"<p class='mt-2'>Failed to load container details.</p>" +
|
||||
"</div>";
|
||||
});
|
||||
}
|
||||
|
||||
function downloadPdf() {
|
||||
if (filteredInvoices.length === 0) {
|
||||
showNotification('No data available to download', 'warning');
|
||||
|
||||
@@ -477,7 +477,7 @@
|
||||
}
|
||||
|
||||
/* ── SUMMARY ── */
|
||||
.summary-wrap {
|
||||
/* .summary-wrap {
|
||||
padding: 0 2.5rem 2rem;
|
||||
}
|
||||
|
||||
@@ -516,7 +516,79 @@
|
||||
.summary-row .value { font-weight: 700; color: var(--primary); }
|
||||
.summary-row.total .label { font-size: 1rem; font-weight: 700; color: var(--primary); }
|
||||
.summary-row.total .value { font-size: 1.15rem; color: #10b981; }
|
||||
.summary-row .value.red { color: #ef4444; }
|
||||
.summary-row .value.red { color: #ef4444; } */
|
||||
.summary-card-compact {
|
||||
margin: 1.5rem 2.5rem 1.5rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-lg);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* Header full width, curved top corners */
|
||||
.summary-header-compact {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
padding: 0.8rem 1.25rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
border-top-left-radius: var(--radius);
|
||||
border-top-right-radius: var(--radius);
|
||||
}
|
||||
|
||||
/* Icon थोडा highlight */
|
||||
.summary-header-compact i {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.summary-body-compact {
|
||||
padding: 1rem 1.25rem 0.9rem;
|
||||
}
|
||||
|
||||
.summary-row-compact {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.45rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
|
||||
.summary-row-compact:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.summary-row-compact .label {
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.summary-row-compact .value {
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.summary-row-compact.total .label {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.summary-row-compact.total .value {
|
||||
font-size: 1.05rem;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.summary-row-compact.muted .value {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ── FOOTER ── */
|
||||
.invoice-footer {
|
||||
@@ -653,8 +725,8 @@
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════ ID BOXES ═══════════════════════════ -->
|
||||
<div class="id-grid">
|
||||
<!-- Invoice ID -->
|
||||
<!-- <div class="id-grid">
|
||||
|
||||
<div class="id-box">
|
||||
<div class="id-icon-wrap id-icon-blue">
|
||||
<i class="fas fa-receipt"></i>
|
||||
@@ -663,10 +735,10 @@
|
||||
<div class="id-label">Invoice ID</div>
|
||||
<div class="id-value">{{ $invoice->invoice_number }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- Container ID -->
|
||||
<div class="id-box">
|
||||
<!-- <div class="id-box">
|
||||
<div class="id-icon-wrap id-icon-green">
|
||||
<i class="fas fa-box"></i>
|
||||
</div>
|
||||
@@ -684,25 +756,56 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- ═══════════════════════════ DATES ═══════════════════════════ -->
|
||||
<div class="date-strip">
|
||||
<!-- ═══════════════════════════ ID + DATES (ONE ROW) ═══════════════════════════ -->
|
||||
<!-- <div class="date-strip">
|
||||
<div class="date-row">
|
||||
|
||||
{{-- Container ID --}}
|
||||
<div class="date-card" style="flex: 1.2;">
|
||||
<div class="date-icon-wrap" style="background:#ecfeff;color:#0e7490;">
|
||||
<i class="fas fa-box"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="date-label">Container ID</div>
|
||||
<div class="date-value">
|
||||
@if($invoice->container && $invoice->container->container_number)
|
||||
{{ $invoice->container->container_number }}
|
||||
@elseif($invoice->container_id)
|
||||
{{ $invoice->container_id }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- छोटा arrow --}}
|
||||
<div class="date-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
|
||||
{{-- Invoice Date --}}
|
||||
<div class="date-card">
|
||||
<div class="date-icon-wrap">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="date-label">Invoice Date</div>
|
||||
<div class="date-value">{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}</div>
|
||||
<div class="date-value">
|
||||
{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- दुसरा arrow --}}
|
||||
<div class="date-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
|
||||
{{-- Due Date --}}
|
||||
<div class="date-card">
|
||||
<div class="date-icon-wrap" style="background:#fff7ed;color:#f59e0b;">
|
||||
<i class="fas fa-clock"></i>
|
||||
@@ -714,8 +817,74 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
|
||||
<!-- ═══════════════════════════ CONTAINER + INVOICE DATE + DUE DATE (ONE ROW) ═══════════════════════════ -->
|
||||
<div class="date-strip">
|
||||
<div class="date-row">
|
||||
|
||||
{{-- Container ID --}}
|
||||
<div class="date-card" style="flex: 1.2;">
|
||||
<div class="date-icon-wrap" style="background:#ecfeff;color:#0e7490;">
|
||||
<i class="fas fa-box"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="date-label">Container ID</div>
|
||||
<div class="date-value">
|
||||
@if($invoice->container && $invoice->container->container_number)
|
||||
{{ $invoice->container->container_number }}
|
||||
@elseif($invoice->container_id)
|
||||
{{ $invoice->container_id }}
|
||||
@else
|
||||
N/A
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- छोटा arrow --}}
|
||||
<div class="date-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
|
||||
{{-- Invoice Date --}}
|
||||
<div class="date-card">
|
||||
<div class="date-icon-wrap">
|
||||
<i class="fas fa-calendar-alt"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="date-label">Invoice Date</div>
|
||||
<div class="date-value">
|
||||
{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- दुसरा arrow --}}
|
||||
<div class="date-arrow">
|
||||
<i class="fas fa-arrow-right"></i>
|
||||
</div>
|
||||
|
||||
{{-- Due Date --}}
|
||||
<div class="date-card">
|
||||
<div class="date-icon-wrap" style="background:#fff7ed;color:#f59e0b;">
|
||||
<i class="fas fa-clock"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="date-label">Due Date</div>
|
||||
<div class="date-value {{ $invoice->status == 'overdue' ? 'overdue' : '' }}">
|
||||
{{ \Carbon\Carbon::parse($invoice->due_date)->format('M d, Y') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════ CUSTOMER ═══════════════════════════ -->
|
||||
<div class="panel">
|
||||
@@ -788,6 +957,7 @@
|
||||
<td class="text-center">
|
||||
<input type="checkbox"
|
||||
class="item-select-checkbox"
|
||||
name="item_ids[]"
|
||||
value="{{ $item->id }}"
|
||||
{{ $alreadyGrouped ? 'disabled' : '' }}>
|
||||
</td>
|
||||
@@ -833,7 +1003,7 @@
|
||||
@endif
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ACTION BAR -->
|
||||
<div class="action-bar">
|
||||
@@ -1065,7 +1235,7 @@
|
||||
@endif
|
||||
|
||||
<!-- ═══════════════════════════ SUMMARY ═══════════════════════════ -->
|
||||
<div class="summary-wrap">
|
||||
<!-- <div class="summary-wrap">
|
||||
<div class="row justify-content-end">
|
||||
<div class="col-md-5">
|
||||
<div class="summary-card">
|
||||
@@ -1107,8 +1277,70 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
{{-- ===== FINAL SUMMARY (POPUP) ===== --}}
|
||||
<div class="summary-card-compact mt-3">
|
||||
<div class="summary-header-compact">
|
||||
<i class="fas fa-calculator"></i>
|
||||
<span>Final Summary</span>
|
||||
</div>
|
||||
|
||||
<div class="summary-body-compact">
|
||||
@if($invoice->tax_type === 'gst')
|
||||
<div class="summary-row-compact">
|
||||
<span class="label">
|
||||
CGST {{ $invoice->cgst_percent ?? $invoice->gst_percent / 2 }}%
|
||||
</span>
|
||||
<span class="value red">
|
||||
₹{{ number_format($invoice->gst_amount / 2, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="summary-row-compact">
|
||||
<span class="label">
|
||||
SGST {{ $invoice->sgst_percent ?? $invoice->gst_percent / 2 }}%
|
||||
</span>
|
||||
<span class="value red">
|
||||
₹{{ number_format($invoice->gst_amount / 2, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
@elseif($invoice->tax_type === 'igst')
|
||||
<div class="summary-row-compact">
|
||||
<span class="label">
|
||||
IGST {{ $invoice->igst_percent ?? $invoice->gst_percent }}%
|
||||
</span>
|
||||
<span class="value red">
|
||||
₹{{ number_format($invoice->gst_amount, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
@else
|
||||
<div class="summary-row-compact">
|
||||
<span class="label">
|
||||
GST {{ $invoice->gst_percent }}%
|
||||
</span>
|
||||
<span class="value red">
|
||||
₹{{ number_format($invoice->gst_amount, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="summary-row-compact">
|
||||
<span class="label">Charge Groups Total</span>
|
||||
<span class="value">
|
||||
₹{{ number_format($invoice->charge_groups_total, 2) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- <div class="summary-row-compact total">
|
||||
<span class="label">Grand Total (Items + GST + Groups)</span>
|
||||
<span class="value">
|
||||
₹{{ number_format($invoice->grand_total_with_charges, 2) }}
|
||||
</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- ═══════════════════════════ FOOTER ═══════════════════════════ -->
|
||||
<div class="invoice-footer">
|
||||
@if($invoice->pdf_path && $showActions)
|
||||
@@ -1125,10 +1357,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
function shareInvoice() {
|
||||
function shareInvoice() {
|
||||
const shareData = {
|
||||
title: "Invoice {{ $invoice->invoice_number }}",
|
||||
text: "Sharing invoice {{ $invoice->invoice_number }}",
|
||||
@@ -1140,7 +1371,29 @@
|
||||
navigator.clipboard.writeText(shareData.url);
|
||||
alert("Link copied! Sharing not supported on this browser.");
|
||||
}
|
||||
}
|
||||
|
||||
function renumberChargeGroups() {
|
||||
const groupsTbody = document.querySelector(
|
||||
'.cg-groups-panel table.invoice-table tbody'
|
||||
);
|
||||
if (!groupsTbody) return;
|
||||
|
||||
let index = 1;
|
||||
|
||||
groupsTbody.querySelectorAll('tr').forEach(row => {
|
||||
if (row.classList.contains('cg-items-row')) return;
|
||||
|
||||
const next = row.nextElementSibling;
|
||||
const isMainGroupRow = next && next.classList.contains('cg-items-row');
|
||||
if (!isMainGroupRow) return;
|
||||
|
||||
const firstCell = row.querySelector('td:first-child');
|
||||
if (firstCell) {
|
||||
firstCell.textContent = index++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const selectAll = document.getElementById('selectAllItems');
|
||||
@@ -1166,6 +1419,8 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
const cgRateHidden = document.getElementById('cgRateHidden');
|
||||
const cgForm = document.getElementById('chargeGroupForm');
|
||||
|
||||
const cgGroupName = document.getElementById('cgGroupName');
|
||||
|
||||
function updateSelectionState() {
|
||||
let selectedCount = 0;
|
||||
itemCheckboxes.forEach(cb => {
|
||||
@@ -1259,7 +1514,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
if (cgAutoTotalInput) cgAutoTotalInput.value = suggested || 0;
|
||||
if (cgTotalChargeInput) {
|
||||
cgTotalChargeInput.value = suggested ? suggested.toFixed(2) : '0';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
itemCheckboxes.forEach(cb => {
|
||||
@@ -1271,7 +1526,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
selectAll.checked = (checked > 0 && checked === total);
|
||||
selectAll.indeterminate = (checked > 0 && checked < total);
|
||||
}
|
||||
if (!chargeGroupBox.classList.contains('d-none')) {
|
||||
if (chargeGroupBox && !chargeGroupBox.classList.contains('d-none')) {
|
||||
fillChargeGroupItemsTable();
|
||||
refreshBasisSummaryAndSuggestion();
|
||||
}
|
||||
@@ -1282,7 +1537,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
selectAll.addEventListener('change', function () {
|
||||
itemCheckboxes.forEach(cb => { if (!cb.disabled) cb.checked = selectAll.checked; });
|
||||
updateSelectionState();
|
||||
if (!chargeGroupBox.classList.contains('d-none')) {
|
||||
if (chargeGroupBox && !chargeGroupBox.classList.contains('d-none')) {
|
||||
fillChargeGroupItemsTable();
|
||||
refreshBasisSummaryAndSuggestion();
|
||||
}
|
||||
@@ -1312,12 +1567,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
}
|
||||
|
||||
// MAIN CHANGE: normal form submit, फक्त hidden item_ids तयार करतो
|
||||
if (cgForm) {
|
||||
cgForm.addEventListener('submit', function (e) {
|
||||
// Stop normal form submit (no page reload)
|
||||
e.preventDefault();
|
||||
|
||||
// 1) Collect selected item IDs
|
||||
cgForm.addEventListener('submit', function () {
|
||||
const selectedIds = [];
|
||||
itemCheckboxes.forEach(cb => {
|
||||
if (cb.checked && !cb.disabled) {
|
||||
@@ -1325,31 +1577,28 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
}
|
||||
});
|
||||
|
||||
// 2) Frontend validations (same as before)
|
||||
if (selectedIds.length === 0) {
|
||||
alert('Please select at least one item for this charge group.');
|
||||
return;
|
||||
// default submit रोखण्यासाठी return false
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!cgBasisSelect || !cgBasisSelect.value) {
|
||||
alert('Please select a basis for this charge group.');
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
!cgTotalChargeInput ||
|
||||
if (!cgTotalChargeInput ||
|
||||
!cgTotalChargeInput.value ||
|
||||
parseFloat(cgTotalChargeInput.value) <= 0
|
||||
) {
|
||||
alert('Please enter total charges for this group.');
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
|
||||
// 3) Remove previously added hidden item_ids[]
|
||||
const oldHidden = cgForm.querySelectorAll('input[name="item_ids[]"]');
|
||||
oldHidden.forEach(el => el.remove());
|
||||
|
||||
// 4) Add fresh hidden item_ids[] for current selection
|
||||
selectedIds.forEach(id => {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
@@ -1358,198 +1607,25 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
cgForm.appendChild(input);
|
||||
});
|
||||
|
||||
// 5) Build AJAX request
|
||||
const url = cgForm.action;
|
||||
const formData = new FormData(cgForm);
|
||||
|
||||
// Optional: disable save button while processing
|
||||
if (cgSaveBtn) {
|
||||
cgSaveBtn.disabled = true;
|
||||
cgSaveBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Saving...';
|
||||
}
|
||||
|
||||
fetch(url, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'X-Requested-With': 'XMLHttpRequest'
|
||||
}
|
||||
})
|
||||
.then(res => {
|
||||
if (!res.ok) {
|
||||
throw new Error('Request failed with status ' + res.status);
|
||||
}
|
||||
return res.json();
|
||||
})
|
||||
.then(data => {
|
||||
if (!data.success) {
|
||||
throw new Error(data.message || 'Failed to create charge group.');
|
||||
}
|
||||
|
||||
const group = data.group;
|
||||
|
||||
// 6) Append new group main row + hidden items row
|
||||
const groupsTbody = document.querySelector(
|
||||
'.cg-groups-panel table.invoice-table tbody'
|
||||
);
|
||||
|
||||
if (groupsTbody && group) {
|
||||
const currentMainRows = groupsTbody.querySelectorAll(
|
||||
'tr:not(.cg-items-row)'
|
||||
).length;
|
||||
const index = currentMainRows + 1;
|
||||
|
||||
// Main summary row (same structure as Blade)
|
||||
const mainRow = document.createElement('tr');
|
||||
mainRow.innerHTML = `
|
||||
<td>${index}</td>
|
||||
<td style="font-weight:600;">
|
||||
${group.group_name ? group.group_name : 'Group #' + group.id}
|
||||
</td>
|
||||
<td>
|
||||
<span style="text-transform:uppercase;font-size:0.75rem;font-weight:700;color:var(--text-muted);">
|
||||
${group.basis_type}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-end" style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;">
|
||||
${Number(group.basis_value).toFixed(3)}
|
||||
</td>
|
||||
<td class="text-end" style="font-family:'JetBrains Mono',monospace;font-size:0.82rem;">
|
||||
${Number(group.rate).toFixed(2)}
|
||||
</td>
|
||||
<td class="text-end price-blue">
|
||||
${Number(group.total_charge).toFixed(2)}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<button type="button"
|
||||
class="cg-toggle-btn cg-toggle-items"
|
||||
data-group-id="${group.id}">
|
||||
<i class="fas fa-eye"></i> View
|
||||
</button>
|
||||
</td>
|
||||
`;
|
||||
|
||||
// Hidden items row (same idea as Blade .cg-items-row)
|
||||
const itemsRow = document.createElement('tr');
|
||||
itemsRow.className = 'cg-items-row d-none';
|
||||
itemsRow.setAttribute('data-group-id', group.id);
|
||||
|
||||
let itemsTableHtml = `
|
||||
<div style="padding:1rem;background:#f8faff;border-radius:8px;margin:0.25rem 0;">
|
||||
<div style="font-weight:700;font-size:0.8rem;margin-bottom:0.6rem;color:var(--primary);">
|
||||
Items in this group
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (!group.items || group.items.length === 0) {
|
||||
itemsTableHtml += `
|
||||
<div style="color:var(--text-muted);font-size:0.82rem;">
|
||||
No items linked.
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
itemsTableHtml += `
|
||||
<div class="table-responsive">
|
||||
<table class="invoice-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Description</th>
|
||||
<th class="text-center">QTY</th>
|
||||
<th class="text-center">TTL QTY</th>
|
||||
<th class="text-center">CBM</th>
|
||||
<th class="text-center">TTL CBM</th>
|
||||
<th class="text-center">KG</th>
|
||||
<th class="text-center">TTL KG</th>
|
||||
<th class="text-end">TTL Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
group.items.forEach((it, idx) => {
|
||||
itemsTableHtml += `
|
||||
<tr>
|
||||
<td>${idx + 1}</td>
|
||||
<td>${it.description ?? ''}</td>
|
||||
<td class="text-center">${it.qty ?? ''}</td>
|
||||
<td class="text-center">${it.ttlqty ?? ''}</td>
|
||||
<td class="text-center">${it.cbm ?? ''}</td>
|
||||
<td class="text-center">${it.ttlcbm ?? ''}</td>
|
||||
<td class="text-center">${it.kg ?? ''}</td>
|
||||
<td class="text-center">${it.ttlkg ?? ''}</td>
|
||||
<td class="text-end">${Number(it.amount ?? 0).toFixed(2)}</td>
|
||||
</tr>
|
||||
`;
|
||||
// इथे e.preventDefault नाही; normal submit होऊ दे
|
||||
return true;
|
||||
});
|
||||
|
||||
itemsTableHtml += `
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
itemsTableHtml += `</div>`;
|
||||
|
||||
itemsRow.innerHTML = `
|
||||
<td colspan="7">
|
||||
${itemsTableHtml}
|
||||
</td>
|
||||
`;
|
||||
|
||||
// Append main row + items row in order
|
||||
groupsTbody.appendChild(mainRow);
|
||||
groupsTbody.appendChild(itemsRow);
|
||||
}
|
||||
|
||||
// 7) Reset Charge Group UI (hide panel, uncheck items)
|
||||
if (chargeGroupBox) {
|
||||
chargeGroupBox.classList.add('d-none');
|
||||
}
|
||||
itemCheckboxes.forEach(cb => {
|
||||
if (!cb.disabled) cb.checked = false;
|
||||
});
|
||||
if (selectAll) {
|
||||
selectAll.checked = false;
|
||||
selectAll.indeterminate = false;
|
||||
}
|
||||
updateSelectionState();
|
||||
|
||||
// Optional: clear form
|
||||
if (cgGroupName) cgGroupName.value = '';
|
||||
if (cgBasisSelect) cgBasisSelect.value = '';
|
||||
if (cgRateInput) cgRateInput.value = '';
|
||||
if (cgBasisValueSpan) cgBasisValueSpan.textContent = '0';
|
||||
if (cgBasisLabelSpan) cgBasisLabelSpan.textContent = '–';
|
||||
if (cgSuggestedTotalSpan) cgSuggestedTotalSpan.textContent = '0';
|
||||
if (cgTotalChargeInput) cgTotalChargeInput.value = '';
|
||||
})
|
||||
|
||||
.catch(err => {
|
||||
console.error(err);
|
||||
alert('Error creating charge group. Please try again.');
|
||||
})
|
||||
.finally(() => {
|
||||
if (cgSaveBtn) {
|
||||
cgSaveBtn.disabled = false;
|
||||
cgSaveBtn.innerHTML = '<i class="fas fa-save"></i> Save Charge Group';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
updateSelectionState();
|
||||
});
|
||||
|
||||
// View/Hide group items
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.addEventListener('click', function (e) {
|
||||
if (!e.target.classList.contains('cg-toggle-items') &&
|
||||
!e.target.closest('.cg-toggle-items')) return;
|
||||
|
||||
const btn = e.target.closest('.cg-toggle-items') || e.target;
|
||||
const groupId = btn.getAttribute('data-group-id');
|
||||
const row = document.querySelector('.cg-items-row[data-group-id="' + groupId + '"]');
|
||||
if (!row) return;
|
||||
|
||||
row.classList.toggle('d-none');
|
||||
const isHidden = row.classList.contains('d-none');
|
||||
btn.innerHTML = isHidden
|
||||
@@ -1557,6 +1633,25 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
: '<i class="fas fa-eye-slash"></i> Hide';
|
||||
});
|
||||
});
|
||||
|
||||
// simple select all (duplicate राहिला तरी harmless; गरज असल्यास काढू शकतो)
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const selectAll = document.getElementById('selectAllItems');
|
||||
const checkboxes = document.querySelectorAll('.item-select-checkbox');
|
||||
|
||||
if (selectAll) {
|
||||
selectAll.addEventListener('change', function () {
|
||||
checkboxes.forEach(cb => {
|
||||
if (!cb.disabled) {
|
||||
cb.checked = selectAll.checked;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -577,7 +577,7 @@
|
||||
<th>Container Date</th>
|
||||
<th>Company Name</th>
|
||||
<th>Customer Name</th>
|
||||
<th>Mark No</th>
|
||||
{{-- <th>Mark No</th> --}}
|
||||
<th>Invoice No</th>
|
||||
<th>Invoice Date</th>
|
||||
<th>Invoice Amount</th>
|
||||
@@ -609,11 +609,11 @@
|
||||
{{ $r->customer_name ?? '-' }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{{-- <td>
|
||||
<span class="data-highlight" title="{{ $r->mark_no }}">
|
||||
{{ $r->mark_no ?? '-' }}
|
||||
</span>
|
||||
</td>
|
||||
</td> --}}
|
||||
<td>
|
||||
<span class="data-highlight" title="{{ $r->invoice_number }}">
|
||||
{{ $r->invoice_number }}
|
||||
@@ -640,7 +640,7 @@
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="9">
|
||||
<td colspan="8">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-inbox"></i>
|
||||
@@ -799,7 +799,7 @@
|
||||
if (filteredReports.length === 0) {
|
||||
tbody.innerHTML = `
|
||||
<tr>
|
||||
<td colspan="9">
|
||||
<td colspan="8">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">
|
||||
<i class="fas fa-inbox"></i>
|
||||
@@ -842,11 +842,11 @@
|
||||
${report.customer_name || '-'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<!-- <td>
|
||||
<span class="data-highlight" title="${report.mark_no || ''}">
|
||||
${report.mark_no || '-'}
|
||||
</span>
|
||||
</td>
|
||||
</td> -->
|
||||
<td>
|
||||
<span class="data-highlight" title="${report.invoice_number || ''}">
|
||||
${report.invoice_number || '-'}
|
||||
|
||||
@@ -15,11 +15,19 @@
|
||||
@endphp
|
||||
|
||||
<style>
|
||||
/* [ALL YOUR ORIGINAL CSS HERE - SAME AS BEFORE] */
|
||||
@keyframes fadeInUp {0% { transform: translateY(20px); opacity: 0; }100% { transform: translateY(0); opacity: 1; }}
|
||||
.card, .custom-table-wrapper { animation: fadeInUp 0.8s ease both; }
|
||||
.custom-table tbody tr { transition: all 0.25s ease-in-out; }
|
||||
.custom-table tbody tr:hover { background-color: #fffbea; transform: scale(1.01); box-shadow: 0 2px 6px rgba(0,0,0,0.05); }
|
||||
|
||||
/* ✅ ROW HOVER EFFECT COMPLETELY DISABLED */
|
||||
.custom-table tbody tr {
|
||||
transition: none !important;
|
||||
}
|
||||
.custom-table tbody tr:hover {
|
||||
background-color: transparent !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.priority-badge {
|
||||
display: inline-flex; align-items: center; font-size: 13.5px; padding: 6px 16px; border-radius: 12px; font-weight: 600;
|
||||
box-shadow: 0 1px 2px 0 rgba(230, 206, 206, 0.15); width: 90px; min-height: 28px; justify-content: center;
|
||||
@@ -29,18 +37,22 @@
|
||||
.priority-high { background: linear-gradient(135deg, #ff8a8a, #d12929); }
|
||||
.priority-medium { background: linear-gradient(135deg, #ffe390, #f5b041); }
|
||||
.priority-low { background: linear-gradient(135deg, #b8f0c2, #1d8660); }
|
||||
|
||||
.custom-table thead th {
|
||||
text-align: center; font-weight: 700; color: #ffffffff; padding: 14px; font-size: 17px; letter-spacing: 0.5px;
|
||||
border-bottom: 2px solid #bfbfbf; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);;
|
||||
border-bottom: 2px solid #bfbfbf; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.custom-table thead tr:first-child th:first-child { border-top-left-radius: 12px; }
|
||||
.custom-table thead tr:first-child th:last-child { border-top-right-radius: 12px; }
|
||||
.custom-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
|
||||
.custom-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
|
||||
|
||||
.input-group input { border-radius: 10px 0 0 10px; border: 1px solid #ccc; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
|
||||
.input-group .btn { border-radius: 0 10px 10px 0; transition: all 0.2s ease-in-out; }
|
||||
.input-group .btn:hover { background: #ffd65a; border-color: #ffd65a; color: #000; }
|
||||
|
||||
.card { border-radius: 16px; border: none; box-shadow: 0 4px 10px rgba(0,0,0,0.08); background: #fff; }
|
||||
|
||||
.badge {
|
||||
font-size: 11px !important; font-weight: 600 !important; padding: 7px 13px !important; border-radius: 20px !important;
|
||||
text-transform: uppercase; letter-spacing: 0.3px; display: inline-flex !important; align-items: center; justify-content: center;
|
||||
@@ -54,7 +66,12 @@
|
||||
@keyframes pulse {0% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }50% { box-shadow: 0 0 14px rgba(0,0,0,0.15); }100% { box-shadow: 0 0 8px rgba(0,0,0,0.1); }}
|
||||
.count-badge { --bs-badge-padding-x: 0.65em; --bs-badge-padding-y: 0.35em; --bs-badge-font-size: 0.75em; --bs-badge-font-weight: 700; --bs-badge-color: #fff; --bs-badge-border-radius: var(--bs-border-radius); }
|
||||
h4.fw-bold { background: linear-gradient(90deg, #000000ff 0%, #030302ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: 1px; }
|
||||
.custom-table tbody td:last-child { text-align: center !important; vertical-align: middle !important; }
|
||||
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* ===== PAGINATION STYLES ===== */
|
||||
.pagination-container {
|
||||
@@ -283,6 +300,15 @@
|
||||
border: 1px solid #ef4444;
|
||||
}
|
||||
|
||||
/* ✅ TABLE WRAPPER – REMOVE HORIZONTAL SCROLL */
|
||||
.custom-table-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
.custom-table {
|
||||
width: 100%;
|
||||
table-layout: auto;
|
||||
}
|
||||
|
||||
/* Responsive styles */
|
||||
@media (max-width: 768px) {
|
||||
.pagination-container {
|
||||
@@ -307,18 +333,14 @@
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
/* ==============================================
|
||||
PROFILE UPDATE REQUEST BUTTON BADGE FIX
|
||||
============================================== */
|
||||
|
||||
/* Ensure button is positioning context */
|
||||
a.btn.btn-primary.position-relative {
|
||||
/* PROFILE UPDATE REQUEST BUTTON BADGE FIX */
|
||||
a.btn.btn-primary.position-relative {
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Fix badge inside Profile Update Requests button */
|
||||
a.btn.btn-primary.position-relative .badge {
|
||||
a.btn.btn-primary.position-relative .badge {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
min-width: 30px !important;
|
||||
@@ -331,14 +353,7 @@ a.btn.btn-primary.position-relative .badge {
|
||||
justify-content: center;
|
||||
animation: none !important;
|
||||
box-shadow: 0 0 0 2px #ffffff;
|
||||
|
||||
}
|
||||
.custom-table th,
|
||||
.custom-table td {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Counts -->
|
||||
@@ -357,13 +372,11 @@ a.btn.btn-primary.position-relative .badge {
|
||||
@endif
|
||||
</a>
|
||||
@endcan
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Search + Table -->
|
||||
<div class="card mb-4 shadow-sm">
|
||||
<div class="card-body pb-1">
|
||||
<!-- Updated Search Bar with Status Badges in the same line -->
|
||||
<div class="search-container">
|
||||
<form method="GET" action="" class="search-form">
|
||||
<div class="search-input-group">
|
||||
@@ -385,9 +398,21 @@ a.btn.btn-primary.position-relative .badge {
|
||||
|
||||
<div class="table-responsive custom-table-wrapper">
|
||||
<table class="table align-middle mb-0 custom-table">
|
||||
<thead><tr>
|
||||
<th>#</th><th>Request ID</th><th>Name</th><th>Company</th><th>Email</th><th>Mobile</th><th>Address</th><th>Priority</th><th>Date</th><th>Status</th><th>Actions</th>
|
||||
</tr></thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Request ID</th>
|
||||
<th>Name</th>
|
||||
<th>Company</th>
|
||||
<th>Email</th>
|
||||
<th>Mobile</th>
|
||||
<th>Address</th>
|
||||
<th>Priority</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($currentItems as $index => $req)
|
||||
<tr>
|
||||
@@ -399,16 +424,25 @@ a.btn.btn-primary.position-relative .badge {
|
||||
<td>{{ $req->mobile_no }}</td>
|
||||
<td>{{ Str::limit($req->address, 30) }}</td>
|
||||
<td>
|
||||
@if(strtolower($req->priority) == 'high')<span class="priority-badge priority-high">High</span>
|
||||
@elseif(strtolower($req->priority) == 'medium')<span class="priority-badge priority-medium">Medium</span>
|
||||
@elseif(strtolower($req->priority) == 'low')<span class="priority-badge priority-low">Low</span>
|
||||
@else{{ $req->priority ?? 'N/A' }}@endif
|
||||
@if(strtolower($req->priority) == 'high')
|
||||
<span class="priority-badge priority-high">High</span>
|
||||
@elseif(strtolower($req->priority) == 'medium')
|
||||
<span class="priority-badge priority-medium">Medium</span>
|
||||
@elseif(strtolower($req->priority) == 'low')
|
||||
<span class="priority-badge priority-low">Low</span>
|
||||
@else
|
||||
{{ $req->priority ?? 'N/A' }}
|
||||
@endif
|
||||
</td>
|
||||
<td>{{ $req->date }}</td>
|
||||
<td>
|
||||
@if($req->status == 'approved')<span class="badge badge-approved"><i class="bi bi-check-circle-fill status-icon"></i>Approved</span>
|
||||
@elseif($req->status == 'rejected')<span class="badge badge-rejected"><i class="bi bi-x-circle-fill status-icon"></i>Rejected</span>
|
||||
@else<span class="badge badge-pending"><i class="bi bi-clock-fill status-icon"></i>Pending</span>@endif
|
||||
@if($req->status == 'approved')
|
||||
<span class="badge badge-approved"><i class="bi bi-check-circle-fill status-icon"></i>Approved</span>
|
||||
@elseif($req->status == 'rejected')
|
||||
<span class="badge badge-rejected"><i class="bi bi-x-circle-fill status-icon"></i>Rejected</span>
|
||||
@else
|
||||
<span class="badge badge-pending"><i class="bi bi-clock-fill status-icon"></i>Pending</span>
|
||||
@endif
|
||||
</td>
|
||||
<td>
|
||||
@if($req->status == 'pending')
|
||||
@@ -425,7 +459,6 @@ a.btn.btn-primary.position-relative .badge {
|
||||
<span class="text-muted">No Action</span>
|
||||
@endif
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
@empty
|
||||
<tr><td colspan="11" class="text-center text-muted py-4">No records found.</td></tr>
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Hide scrollbar but keep scroll functionality */
|
||||
html,
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:root {
|
||||
--primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
--secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||||
|
||||
@@ -4,7 +4,13 @@
|
||||
|
||||
@section('content')
|
||||
<style>
|
||||
:root {
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
:root {
|
||||
--primary: #4361ee;
|
||||
--primary-dark: #3a56d4;
|
||||
--secondary: #f72585;
|
||||
@@ -18,10 +24,10 @@
|
||||
--card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
--hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Search Bar - Similar to Shipment */
|
||||
.search-staff-bar {
|
||||
/* Search Bar - Similar to Shipment */
|
||||
.search-staff-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
@@ -34,9 +40,8 @@
|
||||
color: white;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-staff-bar::before {
|
||||
}
|
||||
.search-staff-bar::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -45,15 +50,13 @@
|
||||
bottom: 0;
|
||||
background: rgba(255,255,255,0.1);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.search-staff-bar > * {
|
||||
}
|
||||
.search-staff-bar > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.search-staff-bar input,
|
||||
.search-staff-bar select {
|
||||
}
|
||||
.search-staff-bar input,
|
||||
.search-staff-bar select {
|
||||
padding: 12px 16px;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
border-radius: 10px;
|
||||
@@ -63,16 +66,14 @@
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.search-staff-bar input:focus,
|
||||
.search-staff-bar select:focus {
|
||||
}
|
||||
.search-staff-bar input:focus,
|
||||
.search-staff-bar select:focus {
|
||||
background: white;
|
||||
box-shadow: 0 0 0 3px rgba(255,255,255,0.3);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-add-staff {
|
||||
}
|
||||
.btn-add-staff {
|
||||
background: rgba(255,255,255,0.2);
|
||||
backdrop-filter: blur(10px);
|
||||
color: white;
|
||||
@@ -87,24 +88,21 @@
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-add-staff:hover {
|
||||
}
|
||||
.btn-add-staff:hover {
|
||||
background: rgba(255,255,255,0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
}
|
||||
.search-icon {
|
||||
font-size: 20px;
|
||||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
}
|
||||
.user-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.search-staff-bar {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
@@ -113,53 +111,48 @@
|
||||
.search-staff-bar select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Card Styles - Same as Shipment */
|
||||
.card {
|
||||
/* Card Styles - Same as Shipment */
|
||||
.card {
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--card-shadow);
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--hover-shadow);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
}
|
||||
.card-header {
|
||||
background: var(--gradient-primary);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 20px 25px;
|
||||
border-radius: 16px 16px 0 0 !important;
|
||||
}
|
||||
|
||||
.card-header h5 {
|
||||
}
|
||||
.card-header h5 {
|
||||
margin: 0;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Table Styles - Similar to Shipment */
|
||||
.table-responsive {
|
||||
/* Table Styles - Similar to Shipment */
|
||||
.table-responsive {
|
||||
border-radius: 0 0 16px 16px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table {
|
||||
overflow-x: hidden; /* horizontal scroll remove */
|
||||
}
|
||||
.table {
|
||||
margin: 0;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
}
|
||||
.table thead th {
|
||||
background: #f8f9fa;
|
||||
border: none;
|
||||
padding: 16px 12px;
|
||||
@@ -169,32 +162,29 @@
|
||||
vertical-align: middle;
|
||||
border-bottom: 2px solid var(--border);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.table tbody tr {
|
||||
}
|
||||
.table tbody tr {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.table tbody tr:hover {
|
||||
background-color: #f8f9ff;
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.table tbody td {
|
||||
}
|
||||
/* hover stable ठेवण्यासाठी */
|
||||
.table tbody tr:hover {
|
||||
background-color: inherit;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.table tbody td {
|
||||
padding: 14px 12px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.table tbody tr:last-child td {
|
||||
}
|
||||
.table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Status Badges - Similar Style */
|
||||
.badge {
|
||||
/* Status Badges */
|
||||
.badge {
|
||||
padding: 6px 12px !important;
|
||||
border-radius: 20px !important;
|
||||
font-weight: 600 !important;
|
||||
@@ -204,28 +194,25 @@
|
||||
text-align: center !important;
|
||||
display: inline-block !important;
|
||||
line-height: 1.2 !important;
|
||||
}
|
||||
|
||||
.badge-active {
|
||||
}
|
||||
.badge-active {
|
||||
background: linear-gradient(135deg, #d1fae5, #a7f3d0) !important;
|
||||
color: #065f46 !important;
|
||||
border-color: #10b981 !important;
|
||||
}
|
||||
|
||||
.badge-inactive {
|
||||
}
|
||||
.badge-inactive {
|
||||
background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
|
||||
color: #991b1b !important;
|
||||
border-color: #ef4444 !important;
|
||||
}
|
||||
|
||||
.badge-pending {
|
||||
}
|
||||
.badge-pending {
|
||||
background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
|
||||
color: #92400e !important;
|
||||
border-color: #f59e0b !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Employee ID Badge - Similar to Shipment ID */
|
||||
.employee-id-badge {
|
||||
/* Employee ID Badge */
|
||||
.employee-id-badge {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: rgba(67, 97, 238, 0.1);
|
||||
padding: 4px 8px;
|
||||
@@ -234,15 +221,14 @@
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(67, 97, 238, 0.2);
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
/* Action Buttons - Similar Style */
|
||||
.action-buttons {
|
||||
/* Action Buttons */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
}
|
||||
.btn-action {
|
||||
padding: 6px 12px;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
@@ -254,32 +240,28 @@
|
||||
gap: 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-edit {
|
||||
}
|
||||
.btn-edit {
|
||||
background: linear-gradient(135deg, #4cc9f0, #4361ee);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-edit:hover {
|
||||
}
|
||||
.btn-edit:hover {
|
||||
background: linear-gradient(135deg, #38bdf8, #3a56d4);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(76, 201, 240, 0.3);
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
}
|
||||
.btn-delete {
|
||||
background: linear-gradient(135deg, #f87171, #ef4444);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
}
|
||||
.btn-delete:hover {
|
||||
background: linear-gradient(135deg, #ef4444, #dc2626);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
/* Success Message - Similar Style */
|
||||
.alert-success {
|
||||
/* Success Message */
|
||||
.alert-success {
|
||||
background: linear-gradient(135deg, #e6ffed, #d1f7e5);
|
||||
border: 1px solid #b6f0c6;
|
||||
border-left: 4px solid var(--success);
|
||||
@@ -290,9 +272,8 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.alert-success:before {
|
||||
}
|
||||
.alert-success:before {
|
||||
content: '✓';
|
||||
background: var(--success);
|
||||
color: white;
|
||||
@@ -303,25 +284,24 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
/* Empty State */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
.empty-state:before {
|
||||
}
|
||||
.empty-state:before {
|
||||
content: '👤';
|
||||
font-size: 3rem;
|
||||
display: block;
|
||||
margin-bottom: 1rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Role Badges */
|
||||
.role-badge {
|
||||
/* Role Badges */
|
||||
.role-badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 11px;
|
||||
@@ -329,17 +309,16 @@
|
||||
background: rgba(67, 97, 238, 0.1);
|
||||
color: var(--primary);
|
||||
border: 1px solid rgba(67, 97, 238, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Stats Cards - Similar to Shipment Totals */
|
||||
.stats-cards {
|
||||
/* Stats Cards */
|
||||
.stats-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
}
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
background: white;
|
||||
@@ -350,14 +329,12 @@
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
}
|
||||
.stat-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--hover-shadow);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
}
|
||||
.stat-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 10px;
|
||||
@@ -365,54 +342,47 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.stat-icon.total {
|
||||
}
|
||||
.stat-icon.total {
|
||||
background: linear-gradient(135deg, #e6f3ff, #c2d9ff);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stat-icon.active {
|
||||
}
|
||||
.stat-icon.active {
|
||||
background: linear-gradient(135deg, #d1fae5, #a7f3d0);
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.stat-content h3 {
|
||||
}
|
||||
.stat-content h3 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.stat-content p {
|
||||
}
|
||||
.stat-content p {
|
||||
color: var(--gray);
|
||||
margin: 4px 0 0 0;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pagination - Same as Shipment */
|
||||
.pagination-container {
|
||||
/* Pagination - Same as Shipment */
|
||||
.pagination-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 15px;
|
||||
padding: 12px 25px;
|
||||
border-top: 1px solid #eef3fb;
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
}
|
||||
.pagination-info {
|
||||
font-size: 13px;
|
||||
color: #9ba5bb;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
}
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pagination-btn {
|
||||
}
|
||||
.pagination-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
color: #1a2951;
|
||||
@@ -427,23 +397,20 @@
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
}
|
||||
.pagination-btn:hover:not(:disabled) {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-btn:disabled {
|
||||
}
|
||||
.pagination-btn:disabled {
|
||||
background: #f8fafc;
|
||||
color: #cbd5e0;
|
||||
border-color: #e2e8f0;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.pagination-page-btn {
|
||||
}
|
||||
.pagination-page-btn {
|
||||
background: #fff;
|
||||
border: 1px solid #e3eaf6;
|
||||
color: #1a2951;
|
||||
@@ -455,55 +422,47 @@
|
||||
transition: all 0.3s ease;
|
||||
min-width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination-page-btn:hover {
|
||||
}
|
||||
.pagination-page-btn:hover {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-page-btn.active {
|
||||
}
|
||||
.pagination-page-btn.active {
|
||||
background: #1a2951;
|
||||
color: white;
|
||||
border-color: #1a2951;
|
||||
}
|
||||
|
||||
.pagination-pages {
|
||||
}
|
||||
.pagination-pages {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pagination-ellipsis {
|
||||
}
|
||||
.pagination-ellipsis {
|
||||
color: #9ba5bb;
|
||||
font-size: 13px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.stats-cards {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.pagination-container {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
|
||||
@if(session('success'))
|
||||
<div class="alert-success">
|
||||
{{ session('success') }}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
<!-- <!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Laravel Test Page</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Paste the provided CSS here */
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="card shadow-lg border-0 rounded-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h4 class="mb-0">Laravel Gitea Test Page</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h5 class="text-success">✅ Laravel is running successfully!</h5>
|
||||
<p class="mt-3">If you see this page, your Blade views and routing work perfectly.</p>
|
||||
|
||||
<ul class="list-group mt-4">
|
||||
<li class="list-group-item"><strong>PHP Version:</strong> {{ PHP_VERSION }}</li>
|
||||
<li class="list-group-item"><strong>Laravel Version:</strong> {{ app()->version() }}</li>
|
||||
<li class="list-group-item"><strong>Environment:</strong> {{ app()->environment() }}</li>
|
||||
</ul>
|
||||
|
||||
<a href="{{ url('/') }}" class="btn btn-outline-primary mt-4">Go to Home testing done</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html> -->
|
||||
|
||||
@@ -15,7 +15,6 @@ use App\Http\Controllers\Admin\AdminChatController;
|
||||
use Illuminate\Support\Facades\Broadcast;
|
||||
use App\Http\Controllers\ContainerController;
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// Public Front Page
|
||||
// ---------------------------
|
||||
@@ -32,7 +31,7 @@ Route::post('/broadcasting/auth', function (\Illuminate\Http\Request $request) {
|
||||
|
||||
\Log::info('🎯 Broadcasting Auth Request', [
|
||||
'channel' => $request->input('channel_name'),
|
||||
'admin_check'=> auth('admin')->check(),
|
||||
'admin_check' => auth('admin')->check(),
|
||||
'web_check' => auth('web')->check(),
|
||||
]);
|
||||
|
||||
@@ -50,7 +49,6 @@ Route::post('/broadcasting/auth', function (\Illuminate\Http\Request $request) {
|
||||
return response()->json(['message' => 'Unauthenticated'], 403);
|
||||
})->middleware('web');
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// ADMIN LOGIN ROUTES
|
||||
// ---------------------------
|
||||
@@ -62,7 +60,6 @@ Route::prefix('admin')->group(function () {
|
||||
|
||||
Broadcast::routes(['middleware' => ['web']]);
|
||||
|
||||
|
||||
// ==========================================
|
||||
// PROTECTED ADMIN ROUTES (session protected)
|
||||
// ==========================================
|
||||
@@ -93,11 +90,6 @@ Route::prefix('admin')
|
||||
[\App\Http\Controllers\Admin\AdminOrderController::class, 'uploadExcelPreview']
|
||||
)->name('admin.orders.upload.excel.preview');
|
||||
|
||||
|
||||
//---------------------------
|
||||
// CONTAINER ROUTES
|
||||
//---------------------------
|
||||
// Index + list
|
||||
//---------------------------
|
||||
// CONTAINER ROUTES
|
||||
//---------------------------
|
||||
@@ -121,8 +113,11 @@ Route::prefix('admin')
|
||||
|
||||
Route::delete('/containers/{container}', [ContainerController::class, 'destroy'])
|
||||
->name('containers.destroy');
|
||||
Route::get('containers/{container}/download-pdf', [ContainerController::class, 'downloadPdf'])
|
||||
->name('containers.download.pdf');
|
||||
|
||||
|
||||
Route::get('/admin/containers/{container}/download-excel', [ContainerController::class, 'downloadExcel'])
|
||||
->name('containers.download.excel');
|
||||
|
||||
// ---------------------------
|
||||
// USER REQUESTS
|
||||
@@ -149,7 +144,6 @@ Route::prefix('admin')
|
||||
[UserRequestController::class, 'rejectProfileUpdate']
|
||||
)->name('admin.profile.reject');
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// MARK LIST
|
||||
// ---------------------------
|
||||
@@ -159,19 +153,15 @@ Route::prefix('admin')
|
||||
Route::get('/mark-list/status/{id}', [AdminMarkListController::class, 'toggleStatus'])
|
||||
->name('admin.marklist.toggle');
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// ORDERS (UPDATED)
|
||||
// ---------------------------
|
||||
// मुख्य Orders पेज (invoice + container listing)
|
||||
Route::get('/orders', [AdminOrderController::class, 'index'])
|
||||
->name('admin.orders');
|
||||
|
||||
// जुनं list route (असल्या वापरासाठी पण index ला point)
|
||||
Route::get('/orders/list', [AdminOrderController::class, 'index'])
|
||||
->name('admin.orders.index');
|
||||
|
||||
// Order show (old single order view)
|
||||
Route::get('/orders/{id}', [AdminOrderController::class, 'show'])
|
||||
->name('admin.orders.show');
|
||||
|
||||
@@ -193,7 +183,6 @@ Route::prefix('admin')
|
||||
Route::get('/orders/{id}/see', [AdminOrderController::class, 'see'])
|
||||
->name('orders.see');
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// ORDERS (FIXED ROUTES)
|
||||
// ---------------------------
|
||||
@@ -212,7 +201,6 @@ Route::prefix('admin')
|
||||
Route::delete('/orders/{id}/delete', [AdminOrderController::class, 'destroy'])
|
||||
->name('admin.orders.destroy');
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// SHIPMENTS (FIXED ROUTES)
|
||||
// ---------------------------
|
||||
@@ -240,7 +228,6 @@ Route::prefix('admin')
|
||||
Route::get('/shipment/dummy/{id}', [ShipmentController::class, 'dummy'])
|
||||
->name('admin.shipments.dummy');
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// INVOICES
|
||||
// ---------------------------
|
||||
@@ -271,9 +258,10 @@ Route::prefix('admin')
|
||||
Route::post('/admin/invoices/{invoice}/charge-group', [AdminInvoiceController::class, 'storeChargeGroup'])
|
||||
->name('admin.invoices.charge-group.store');
|
||||
|
||||
Route::get('/admin/invoices/create', [InvoiceController::class, 'create'])
|
||||
->name('admin.invoices.create');
|
||||
|
||||
// जर create page वापरायचा असेल तर AdminInvoiceController मध्ये create() असावा.
|
||||
// नसेल तर हा route comment / delete कर.
|
||||
// Route::get('/admin/invoices/create', [AdminInvoiceController::class, 'create'])
|
||||
// ->name('admin.invoices.create');
|
||||
|
||||
// ---------------------------
|
||||
// CUSTOMERS
|
||||
@@ -293,7 +281,6 @@ Route::prefix('admin')
|
||||
Route::post('/customers/{id}/status', [AdminCustomerController::class, 'toggleStatus'])
|
||||
->name('admin.customers.status');
|
||||
|
||||
|
||||
// CHAT
|
||||
Route::get('/chat-support', [AdminChatController::class, 'index'])
|
||||
->name('admin.chat_support');
|
||||
@@ -305,7 +292,6 @@ Route::prefix('admin')
|
||||
->name('admin.chat.send');
|
||||
});
|
||||
|
||||
|
||||
// ==========================================
|
||||
// ADMIN ACCOUNT (AJAX) ROUTES
|
||||
// ==========================================
|
||||
@@ -351,7 +337,6 @@ Route::prefix('admin/account')
|
||||
->name('remove.order.from.entry');
|
||||
});
|
||||
|
||||
|
||||
// ---------------------------
|
||||
// REPORTS DOWNLOAD ROUTES
|
||||
// ---------------------------
|
||||
@@ -373,7 +358,7 @@ Route::middleware(['auth:admin'])
|
||||
Route::resource('staff', AdminStaffController::class);
|
||||
});
|
||||
|
||||
// Extra admin prefix group (तसाच ठेवला)
|
||||
// Extra admin prefix group
|
||||
Route::prefix('admin')->middleware('auth:admin')->group(function () {
|
||||
// ... your routes
|
||||
});
|
||||
@@ -382,6 +367,14 @@ Route::post('/admin/broadcasting/auth', function () {
|
||||
return Broadcast::auth(request());
|
||||
})->middleware('auth:admin');
|
||||
|
||||
Route::get('/admin/invoices/{invoice}/download', [InvoiceController::class, 'download'])
|
||||
// INVOICE DOWNLOAD (AdminInvoiceController वापरून)
|
||||
Route::get('/admin/invoices/{invoice}/download', [AdminInvoiceController::class, 'download'])
|
||||
->name('admin.invoices.download');
|
||||
|
||||
|
||||
// CONTAINER POPUP VIEW
|
||||
// In admin group
|
||||
Route::get('/admin/containers/{container}/popup', [\App\Http\Controllers\ContainerController::class, 'popupPopup'])
|
||||
->name('containers.popup');
|
||||
|
||||
|
||||
Reference in New Issue
Block a user