Pdf Changes Done

This commit is contained in:
Utkarsh Khedkar
2026-03-09 10:24:44 +05:30
parent c11467068c
commit 9cc6959396
32 changed files with 3416 additions and 2188 deletions

View File

@@ -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,
rgba(102, 126, 234, 0.03) 0%,
rgba(118, 75, 162, 0.03) 50%,
rgba(16, 185, 129, 0.03) 100%);
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%
);
pointer-events: none;
}
@@ -81,10 +82,12 @@
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
transparent 100%);
background: linear-gradient(
45deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 50%,
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,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.6s ease;
}
@@ -397,10 +402,12 @@
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
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;
@@ -511,47 +518,48 @@
padding: 25px 20px;
text-align: center;
}
.customer-avatar {
width: 80px;
height: 80px;
font-size: 2rem;
}
.page-header {
padding: 20px;
}
.stats-card {
padding: 20px;
}
.stats-value {
font-size: 1.8rem;
}
.header-actions {
justify-content: center;
margin-top: 15px;
}
.page-header .row {
text-align: center;
}
}
@media (max-width: 576px) {
.btn-back, .btn-outline-secondary {
.btn-back,
.btn-outline-secondary {
padding: 10px 20px;
font-size: 0.9rem;
}
.header-actions {
flex-direction: column;
gap: 10px;
width: 100%;
}
.header-actions a {
width: 100%;
justify-content: center;
@@ -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,43 +710,28 @@
</div>
</div>
<!-- {{-- Total Payable --}}
<div class="stats-card amount">
<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>
{{-- Total Remaining --}}
<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> -->
{{-- 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-hash"></i>
<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>
{{-- 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-hash"></i>
<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>
{{-- Mark Count --}}
<div class="col-md-4 animate-fade-in animation-delay-3">
<div class="stats-card marks">
@@ -761,7 +753,7 @@
<span class="badge bg-primary ms-2">{{ $customer->marks->count() }}</span>
</h5>
</div>
<div class="section-body">
@if($customer->marks->count() == 0)
<div class="text-center py-5">
@@ -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)';
});
});
@@ -806,7 +801,7 @@ document.addEventListener('DOMContentLoaded', function() {
statsValues.forEach(value => {
const originalText = value.textContent;
value.textContent = '0';
setTimeout(() => {
value.textContent = originalText;
value.style.transform = 'scale(1.1)';
@@ -817,5 +812,4 @@ document.addEventListener('DOMContentLoaded', function() {
});
});
</script>
@endsection
@endsection