2025-11-18 14:35:58 +05:30
|
|
|
<div class="p-4">
|
|
|
|
|
<!-- Invoice Header -->
|
|
|
|
|
<div class="row mb-4">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h2 class="fw-bold text-primary mb-1">
|
|
|
|
|
<i class="fas fa-file-invoice me-2"></i>INVOICE
|
|
|
|
|
</h2>
|
|
|
|
|
<h4 class="fw-bold text-dark mb-0">{{ $invoice->invoice_number }}</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6 text-end">
|
|
|
|
|
<div class="d-inline-block bg-light rounded-3 p-3">
|
|
|
|
|
<span class="badge
|
|
|
|
|
@if($invoice->status=='paid') bg-success
|
|
|
|
|
@elseif($invoice->status=='overdue') bg-danger
|
|
|
|
|
@elseif($invoice->status=='pending') bg-warning text-dark
|
|
|
|
|
@else bg-secondary @endif
|
|
|
|
|
fs-6 px-3 py-2">
|
|
|
|
|
<i class="fas
|
|
|
|
|
@if($invoice->status=='paid') fa-check-circle
|
|
|
|
|
@elseif($invoice->status=='overdue') fa-exclamation-circle
|
|
|
|
|
@elseif($invoice->status=='pending') fa-clock
|
|
|
|
|
@else fa-question-circle @endif me-1"></i>
|
|
|
|
|
{{ ucfirst($invoice->status) }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-11-17 10:33:11 +05:30
|
|
|
|
2025-11-18 14:35:58 +05:30
|
|
|
<!-- Dates - Compact Professional Layout -->
|
|
|
|
|
<div class="row mb-3">
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="card border-0 shadow-sm">
|
|
|
|
|
<div class="card-body py-2">
|
|
|
|
|
<div class="row align-items-center text-center">
|
|
|
|
|
<div class="col-md-5">
|
|
|
|
|
<div class="mb-0">
|
|
|
|
|
<div class="text-muted fw-semibold small">INVOICE DATE</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fw-bold text-dark" style="font-size: 0.95rem;">
|
|
|
|
|
{{ \Carbon\Carbon::parse($invoice->invoice_date)->format('M d, Y') }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<div class="date-connector">
|
|
|
|
|
<i class="fas fa-arrow-right text-muted small"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-5">
|
|
|
|
|
<div class="mb-0">
|
|
|
|
|
<div class="text-muted fw-semibold small">DUE DATE</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="fw-bold @if($invoice->status == 'overdue') text-danger @else text-dark @endif" style="font-size: 0.95rem;">
|
|
|
|
|
{{ \Carbon\Carbon::parse($invoice->due_date)->format('M d, Y') }}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-11-17 10:33:11 +05:30
|
|
|
</div>
|
|
|
|
|
|
2025-11-18 14:35:58 +05:30
|
|
|
<!-- Customer Details -->
|
|
|
|
|
<div class="row mb-4">
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="card border-0 shadow-sm">
|
|
|
|
|
<div class="card-header bg-light py-2">
|
|
|
|
|
<h6 class="mb-0 fw-bold text-dark">
|
|
|
|
|
<i class="fas fa-user me-2"></i>Customer Details
|
|
|
|
|
</h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<h6 class="fw-bold text-primary mb-1">{{ $invoice->customer_name }}</h6>
|
|
|
|
|
@if($invoice->company_name)
|
|
|
|
|
<p class="mb-1">
|
|
|
|
|
<strong>Company:</strong> {{ $invoice->company_name }}
|
|
|
|
|
</p>
|
|
|
|
|
@endif
|
|
|
|
|
<p class="mb-1">
|
|
|
|
|
<strong>Mobile:</strong> {{ $invoice->customer_mobile }}
|
|
|
|
|
</p>
|
|
|
|
|
<p class="mb-1">
|
|
|
|
|
<strong>Email:</strong> {{ $invoice->customer_email }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-6">
|
|
|
|
|
<p class="mb-0">
|
|
|
|
|
<strong>Address:</strong><br>
|
|
|
|
|
{{ $invoice->customer_address }}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-11-17 10:33:11 +05:30
|
|
|
|
2025-11-18 14:35:58 +05:30
|
|
|
<!-- Invoice Items -->
|
|
|
|
|
<div class="row mb-4">
|
|
|
|
|
<div class="col-12">
|
|
|
|
|
<div class="card border-0 shadow-sm">
|
|
|
|
|
<div class="card-header bg-light py-2">
|
|
|
|
|
<h6 class="mb-0 fw-bold text-dark">
|
|
|
|
|
<i class="fas fa-list me-2"></i>Invoice Items
|
|
|
|
|
</h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body p-0">
|
|
|
|
|
<div class="table-responsive">
|
|
|
|
|
<table class="table table-bordered table-hover align-middle mb-0">
|
|
|
|
|
<thead class="table-light">
|
|
|
|
|
<tr>
|
|
|
|
|
<th class="text-center">#</th>
|
|
|
|
|
<th>Description</th>
|
|
|
|
|
<th class="text-center">CTN</th>
|
|
|
|
|
<th class="text-center">QTY</th>
|
|
|
|
|
<th class="text-center">TTL/QTY</th>
|
|
|
|
|
<th class="text-center">Unit</th>
|
|
|
|
|
<th class="text-center">Price</th>
|
|
|
|
|
<th class="text-center">TTL Amount</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-center">Shop No</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
@foreach($invoice->items as $i => $item)
|
|
|
|
|
<tr>
|
|
|
|
|
<td class="text-center fw-bold text-muted">{{ $i+1 }}</td>
|
|
|
|
|
<td class="fw-semibold">{{ $item->description }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->ctn }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->qty }}</td>
|
|
|
|
|
<td class="text-center fw-bold">{{ $item->ttl_qty }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->unit }}</td>
|
|
|
|
|
<td class="text-center text-success fw-bold">₹{{ number_format($item->price,2) }}</td>
|
|
|
|
|
<td class="text-center text-primary fw-bold">₹{{ number_format($item->ttl_amount,2) }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->cbm }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->ttl_cbm }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->kg }}</td>
|
|
|
|
|
<td class="text-center">{{ $item->ttl_kg }}</td>
|
|
|
|
|
<td class="text-center">
|
|
|
|
|
<span class="badge bg-light text-dark border">{{ $item->shop_no }}</span>
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
@endforeach
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-11-17 10:33:11 +05:30
|
|
|
|
2025-11-18 14:35:58 +05:30
|
|
|
<!-- Final Summary -->
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-6 offset-md-6">
|
|
|
|
|
<div class="card border-0 bg-light">
|
|
|
|
|
<div class="card-header bg-dark text-white py-2">
|
|
|
|
|
<h6 class="mb-0 fw-bold">
|
|
|
|
|
<i class="fas fa-calculator me-2"></i>Final Summary
|
|
|
|
|
</h6>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
|
|
|
|
|
<span class="fw-semibold">Amount:</span>
|
|
|
|
|
<span class="fw-bold text-dark">₹{{ number_format($invoice->final_amount,2) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-2 pb-1 border-bottom">
|
|
|
|
|
<span class="fw-semibold">GST ({{ $invoice->gst_percent }}%):</span>
|
|
|
|
|
<span class="fw-bold text-danger">₹{{ number_format($invoice->gst_amount,2) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="d-flex justify-content-between align-items-center pt-1">
|
|
|
|
|
<span class="fw-bold text-dark">Total With GST:</span>
|
|
|
|
|
<span class="fw-bold text-success">₹{{ number_format($invoice->final_amount_with_gst,2) }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-11-17 10:33:11 +05:30
|
|
|
</div>
|
2025-11-18 14:35:58 +05:30
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.date-connector {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
color: #6c757d;
|
|
|
|
|
}
|
|
|
|
|
.date-connector i {
|
|
|
|
|
background: #f8f9fa;
|
|
|
|
|
padding: 4px;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
border: 1px solid #e9ecef;
|
|
|
|
|
}
|
|
|
|
|
.card {
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
.table {
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
}
|
|
|
|
|
.table > :not(caption) > * > * {
|
|
|
|
|
padding: 10px 6px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
