331 lines
14 KiB
PHP
331 lines
14 KiB
PHP
@extends('layouts.vertical-individual', ['page_title' => $title ?? 'Monsoon Yatra Activity List'])
|
||
|
||
@section('css')
|
||
<style>
|
||
body .account-pages > .container {
|
||
max-width: 100%;
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.monsoon-yatra-report-page .row {
|
||
--bs-gutter-x: 0;
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
}
|
||
|
||
.monsoon-yatra-report-page .card {
|
||
border-left: 0;
|
||
border-right: 0;
|
||
border-radius: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.monsoon-yatra-report-page .card-body {
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
.monsoon-yatra-report-page .page-header {
|
||
padding-left: 12px;
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.monsoon-yatra-report-table th,
|
||
.monsoon-yatra-report-table td {
|
||
white-space: nowrap;
|
||
vertical-align: middle;
|
||
border: 1px solid #dee2e6;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.monsoon-yatra-report-table thead th {
|
||
text-align: center;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.monsoon-yatra-report-scroll {
|
||
overflow-x: auto;
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.monsoon-yatra-report-table .frozen-col {
|
||
position: sticky;
|
||
left: 0;
|
||
z-index: 2;
|
||
background: #fff;
|
||
min-width: 120px;
|
||
max-width: min(50cqw, 50vw);
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.monsoon-yatra-report-table thead .frozen-col {
|
||
z-index: 3;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.monsoon-yatra-filter-panel {
|
||
background: #f8f9fa;
|
||
border: 1px solid #dee2e6;
|
||
border-radius: 4px;
|
||
padding: 16px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.date-range-fields {
|
||
display: none;
|
||
}
|
||
|
||
.date-range-fields.is-visible {
|
||
display: block;
|
||
}
|
||
|
||
@media (max-width: 767.98px) {
|
||
.monsoon-yatra-filter-panel {
|
||
padding: 8px 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.monsoon-yatra-filter-panel .form-label {
|
||
font-size: 11px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.monsoon-yatra-filter-panel .row {
|
||
--bs-gutter-x: 0.35rem;
|
||
--bs-gutter-y: 0.35rem;
|
||
}
|
||
|
||
.monsoon-yatra-filter-panel .form-select-sm,
|
||
.monsoon-yatra-filter-panel .form-control-sm {
|
||
font-size: 11px;
|
||
padding: 0.2rem 0.35rem;
|
||
}
|
||
|
||
.monsoon-yatra-filter-actions .btn {
|
||
font-size: 11px;
|
||
padding: 0.25rem 0.5rem;
|
||
}
|
||
}
|
||
|
||
.monsoon-yatra-report-pagination {
|
||
padding: 12px 16px;
|
||
border-top: 1px solid #dee2e6;
|
||
background: #fff;
|
||
}
|
||
|
||
.monsoon-yatra-report-pagination .pagination {
|
||
margin-bottom: 0;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
}
|
||
|
||
.monsoon-yatra-report-pagination .page-link {
|
||
padding: 0.25rem 0.55rem;
|
||
font-size: 12px;
|
||
line-height: 1.25;
|
||
}
|
||
|
||
@media (max-width: 767.98px) {
|
||
.monsoon-yatra-report-pagination {
|
||
padding: 10px 8px;
|
||
}
|
||
|
||
.monsoon-yatra-report-pagination .page-link {
|
||
padding: 0.2rem 0.45rem;
|
||
font-size: 11px;
|
||
}
|
||
}
|
||
</style>
|
||
@endsection
|
||
|
||
@section('content')
|
||
@php
|
||
$filters = $filters ?? [];
|
||
$filterOptions = $filterOptions ?? ['zones' => [], 'states' => [], 'educator_hqs' => [], 'educator_names' => []];
|
||
$exportQuery = http_build_query(array_filter(array_merge($filters, !empty($token ?? '') ? ['token' => $token] : []), fn ($v) => $v !== '' && $v !== null));
|
||
$reportQuery = !empty($token ?? '') ? ('?token=' . urlencode($token)) : '';
|
||
@endphp
|
||
<div class="monsoon-yatra-report-page">
|
||
<div class="row mb-3 page-header align-items-end">
|
||
<div class="col-md-6">
|
||
<h4 class="page-title">{{ $title }}</h4>
|
||
<p class="text-muted mb-0">Sorted by Zone, then State. Use filters to narrow by date or attributes.</p>
|
||
</div>
|
||
<div class="col-md-6 text-end">
|
||
@foreach ($buttons ?? [] as $button)
|
||
<a href="{{ $button['link'] }}" class="btn btn-dark btn-sm me-2">{{ $button['title'] }}</a>
|
||
@endforeach
|
||
<a href="{{ $base_url }}/export?{{ $exportQuery }}" class="btn btn-success btn-sm">Export</a>
|
||
</div>
|
||
</div>
|
||
|
||
@if (session()->has('message'))
|
||
<div class="alert alert-success">{{ session()->get('message') }}</div>
|
||
@endif
|
||
@if (session()->has('error'))
|
||
<div class="alert alert-danger">{{ session()->get('error') }}</div>
|
||
@endif
|
||
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form method="get" action="{{ $base_url }}/report" class="monsoon-yatra-filter-panel" id="monsoon-yatra-filter-form">
|
||
@if (!empty($token ?? ''))
|
||
<input type="hidden" name="token" value="{{ $token }}">
|
||
@endif
|
||
<div class="row g-2 g-md-3 align-items-end">
|
||
<div class="col-4 col-md-3">
|
||
<label class="form-label">Date filter</label>
|
||
<select name="date_mode" id="date_mode" class="form-select form-select-sm">
|
||
<option value="single"@if(($filters['date_mode'] ?? 'single') === 'single') selected @endif>Single date</option>
|
||
<option value="range"@if(($filters['date_mode'] ?? '') === 'range') selected @endif>Date range</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-4 col-md-3" id="single-date-field">
|
||
<label class="form-label">Activity date</label>
|
||
<input type="date" name="activity_date" class="form-control form-control-sm" value="{{ $filters['activity_date'] ?? '' }}">
|
||
</div>
|
||
<div class="col-4 col-md-3 date-range-fields @if(($filters['date_mode'] ?? 'single') === 'range') is-visible @endif" id="date-range-fields">
|
||
<label class="form-label">From</label>
|
||
<input type="date" name="date_from" class="form-control form-control-sm" value="{{ $filters['date_from'] ?? '' }}">
|
||
</div>
|
||
<div class="col-4 col-md-3 date-range-fields @if(($filters['date_mode'] ?? 'single') === 'range') is-visible @endif">
|
||
<label class="form-label">To</label>
|
||
<input type="date" name="date_to" class="form-control form-control-sm" value="{{ $filters['date_to'] ?? '' }}">
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<label class="form-label">Zone</label>
|
||
<select name="zone" class="form-select form-select-sm">
|
||
<option value="">All zones</option>
|
||
@foreach ($filterOptions['zones'] as $zone)
|
||
<option value="{{ $zone }}"@if(($filters['zone'] ?? '') === $zone) selected @endif>{{ $zone }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<label class="form-label">State</label>
|
||
<select name="state" class="form-select form-select-sm">
|
||
<option value="">All states</option>
|
||
@foreach ($filterOptions['states'] as $state)
|
||
<option value="{{ $state }}"@if(($filters['state'] ?? '') === $state) selected @endif>{{ $state }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<label class="form-label">Educator HQ</label>
|
||
<select name="educator_hq" class="form-select form-select-sm">
|
||
<option value="">All HQs</option>
|
||
@foreach ($filterOptions['educator_hqs'] as $hq)
|
||
<option value="{{ $hq }}"@if(($filters['educator_hq'] ?? '') === $hq) selected @endif>{{ $hq }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<label class="form-label">Educator Name</label>
|
||
<select name="educator_name" class="form-select form-select-sm">
|
||
<option value="">All educators</option>
|
||
@foreach ($filterOptions['educator_names'] as $educator)
|
||
<option value="{{ $educator }}"@if(($filters['educator_name'] ?? '') === $educator) selected @endif>{{ $educator }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<div class="col-4 col-md-3">
|
||
<label class="form-label">Per page</label>
|
||
<select name="per_page" class="form-select form-select-sm">
|
||
@foreach ([25, 50, 100, 200] as $size)
|
||
<option value="{{ $size }}"@if((int)($filters['per_page'] ?? 50) === $size) selected @endif>{{ $size }}</option>
|
||
@endforeach
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-md-3 monsoon-yatra-filter-actions text-md-start text-end">
|
||
<button type="submit" class="btn btn-primary btn-sm me-1">Apply</button>
|
||
<a href="{{ $base_url }}/report{{ $reportQuery }}" class="btn btn-link btn-sm">Clear</a>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="monsoon-yatra-report-scroll">
|
||
<table class="table table-sm table-bordered monsoon-yatra-report-table mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th class="frozen-col">Date</th>
|
||
<th>State</th>
|
||
<th>Zone</th>
|
||
<th>Educator HQ</th>
|
||
<th>Educator Name</th>
|
||
<th>Educator Manager</th>
|
||
<th>Camp Area</th>
|
||
<th>Time</th>
|
||
<th>MSL Code</th>
|
||
<th>Doctor Name</th>
|
||
<th>Doctor Speciality</th>
|
||
<th>Chemist Name</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@forelse ($rows as $row)
|
||
<tr>
|
||
<td class="frozen-col">{{ $row->activity_date ? \Carbon\Carbon::parse($row->activity_date)->format('d/m/Y') : '' }}</td>
|
||
<td>{{ $row->state }}</td>
|
||
<td>{{ $row->zone }}</td>
|
||
<td>{{ $row->educator_hq }}</td>
|
||
<td>{{ $row->educator_name }}</td>
|
||
<td>{{ $row->educator_manager }}</td>
|
||
<td>{{ $row->camp_area }}</td>
|
||
<td>{{ $row->activity_time }}</td>
|
||
<td>{{ $row->msl_code }}</td>
|
||
<td>{{ $row->doctor_name }}</td>
|
||
<td>{{ $row->doctor_speciality }}</td>
|
||
<td>{{ $row->chemist_name }}</td>
|
||
</tr>
|
||
@empty
|
||
<tr>
|
||
<td colspan="12" class="text-center text-muted">No activity records found.</td>
|
||
</tr>
|
||
@endforelse
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
@if ($rows->hasPages())
|
||
<div class="monsoon-yatra-report-pagination d-flex flex-column flex-md-row justify-content-md-between align-items-center gap-2 mt-3">
|
||
<div class="text-muted small text-center text-md-start mb-0">
|
||
Showing {{ $rows->firstItem() }}–{{ $rows->lastItem() }} of {{ $rows->total() }} records
|
||
(page {{ $rows->currentPage() }} of {{ $rows->lastPage() }})
|
||
</div>
|
||
{{ $rows->links('pagination::bootstrap-4') }}
|
||
</div>
|
||
@elseif ($rows->total() > 0)
|
||
<div class="text-muted small mt-3">{{ $rows->total() }} record(s)</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endsection
|
||
|
||
@section('script')
|
||
<script>
|
||
(function () {
|
||
var dateMode = document.getElementById('date_mode');
|
||
var singleField = document.getElementById('single-date-field');
|
||
var rangeFields = document.querySelectorAll('.date-range-fields');
|
||
|
||
function syncDateFields() {
|
||
var isRange = dateMode && dateMode.value === 'range';
|
||
if (singleField) {
|
||
singleField.style.display = isRange ? 'none' : '';
|
||
}
|
||
rangeFields.forEach(function (el) {
|
||
el.classList.toggle('is-visible', isRange);
|
||
});
|
||
}
|
||
|
||
if (dateMode) {
|
||
dateMode.addEventListener('change', syncDateFields);
|
||
syncDateFields();
|
||
}
|
||
})();
|
||
</script>
|
||
@endsection
|