350 lines
14 KiB
PHP
350 lines
14 KiB
PHP
@extends('admin.layouts.app')
|
||
|
||
@section('page-title', 'Add Container')
|
||
|
||
@section('content')
|
||
<style>
|
||
.cm-add-wrapper { padding: 10px 0 20px 0; }
|
||
.cm-add-header-card {
|
||
border-radius: 14px;
|
||
border: none;
|
||
margin-bottom: 18px;
|
||
background: linear-gradient(90deg,#4c6fff,#8e54e9);
|
||
box-shadow: 0 6px 18px rgba(15,35,52,0.18);
|
||
color: #ffffff;
|
||
}
|
||
.cm-add-header-card .card-body {
|
||
padding: 14px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
}
|
||
.cm-add-title { margin: 0; font-size: 20px; font-weight: 600; }
|
||
.cm-add-sub { font-size: 12px; opacity: 0.9; }
|
||
|
||
.cm-add-main-card {
|
||
border-radius: 14px;
|
||
border: none;
|
||
box-shadow: 0 6px 18px rgba(15,35,52,0.12);
|
||
}
|
||
.cm-add-main-card .card-header {
|
||
background:#ffffff;
|
||
border-bottom: 1px solid #edf0f5;
|
||
padding: 10px 18px;
|
||
}
|
||
.cm-add-main-card .card-header h5 {
|
||
margin: 0;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.cm-form-label { font-size: 13px; font-weight: 500; color:#495057; margin-bottom: 4px; }
|
||
.cm-form-control {
|
||
font-size: 13px;
|
||
border-radius: 10px;
|
||
border:1px solid #d0d7e2;
|
||
padding: 8px 11px;
|
||
}
|
||
.cm-form-control:focus {
|
||
border-color:#4c6fff;
|
||
box-shadow:0 0 0 0.15rem rgba(76,111,255,.25);
|
||
}
|
||
|
||
.cm-help-text { font-size: 11px; color:#868e96; margin-top: 2px; }
|
||
.cm-btn-primary { border-radius: 20px; padding: 6px 22px; font-size: 13px; font-weight: 500; }
|
||
.cm-btn-secondary { border-radius: 20px; padding: 6px 18px; font-size: 13px; }
|
||
|
||
.error-card {
|
||
border-radius: 12px;
|
||
border: 1px solid #f5c2c7;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
|
||
}
|
||
|
||
.error-row-box {
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.error-title {
|
||
font-weight: 600;
|
||
font-size: 13px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.error-item {
|
||
font-size: 12px;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.error-item span {
|
||
font-weight: 500;
|
||
}
|
||
</style>
|
||
|
||
<div class="container-fluid cm-add-wrapper">
|
||
|
||
<div class="card cm-add-header-card">
|
||
<div class="card-body">
|
||
<div>
|
||
<h4 class="cm-add-title">Create New Container</h4>
|
||
<div class="cm-add-sub">
|
||
Add container details and upload Kent loading list Excel file.
|
||
</div>
|
||
</div>
|
||
<a href="{{ route('containers.index') }}" class="btn btn-light btn-sm">
|
||
Back to Containers
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card cm-add-main-card">
|
||
<div class="card-header">
|
||
<h5>Add Container</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
{{-- SUCCESS --}}
|
||
@if (session('success'))
|
||
<div class="alert alert-success">
|
||
{{ session('success') }}
|
||
</div>
|
||
@endif
|
||
|
||
{{-- VALIDATION --}}
|
||
@if ($errors->any())
|
||
<div class="alert alert-danger">
|
||
<ul class="mb-0">
|
||
@foreach ($errors->all() as $error)
|
||
<li>{{ $error }}</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- COMBINED ERROR PANEL (summary text) --}}
|
||
@if(session('formula_errors') || session('mark_errors'))
|
||
|
||
<div class="card error-card mb-3">
|
||
<div class="card-header bg-danger text-white small">
|
||
⚠ Excel Validation Issues Found
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="small mb-1">
|
||
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>
|
||
|
||
{{-- 1) Excel-style table at top --}}
|
||
@php
|
||
$formulaErrors = session('formula_errors') ?? [];
|
||
$markErrors = session('mark_errors') ?? [];
|
||
|
||
$allRowsData = [];
|
||
|
||
foreach ($formulaErrors as $fe) {
|
||
if (!empty($fe['data'] ?? null)) {
|
||
$allRowsData[] = $fe['data'];
|
||
}
|
||
}
|
||
|
||
foreach ($markErrors as $me) {
|
||
if (!empty($me['data'] ?? null)) {
|
||
$allRowsData[] = $me['data'];
|
||
}
|
||
}
|
||
|
||
$headings = [];
|
||
if (!empty($allRowsData)) {
|
||
$headings = array_keys($allRowsData[0]);
|
||
}
|
||
@endphp
|
||
|
||
@if(!empty($headings))
|
||
<div class="card mb-3">
|
||
<div class="card-header small">
|
||
Error rows in Excel view
|
||
</div>
|
||
<div class="card-body p-2">
|
||
<div class="table-responsive" style="max-height:260px; overflow:auto;">
|
||
<table class="table table-sm table-bordered mb-0" style="font-size:11.5px;">
|
||
<thead class="table-light">
|
||
<tr>
|
||
<th>Excel Row</th>
|
||
<th>Mark No</th>
|
||
@foreach($headings as $head)
|
||
<th>{{ $head }}</th>
|
||
@endforeach
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{{-- Formula error rows (red – formula mismatch, critical) --}}
|
||
@foreach($formulaErrors as $fe)
|
||
@php $rowData = $fe['data'] ?? []; @endphp
|
||
@if(!empty($rowData))
|
||
<tr class="table-danger">
|
||
<td>{{ $fe['excel_row'] }}</td>
|
||
<td>{{ $fe['mark_no'] }}</td>
|
||
@foreach($headings as $head)
|
||
<td>{{ $rowData[$head] ?? '' }}</td>
|
||
@endforeach
|
||
</tr>
|
||
@endif
|
||
@endforeach
|
||
|
||
{{-- Mark error rows (yellow – mark not found, warning) --}}
|
||
@foreach($markErrors as $me)
|
||
@php $rowData = $me['data'] ?? []; @endphp
|
||
@if(!empty($rowData))
|
||
<tr class="table-warning">
|
||
<td>{{ $me['excel_row'] }}</td>
|
||
<td>{{ $me['mark_no'] }}</td>
|
||
@foreach($headings as $head)
|
||
<td>{{ $rowData[$head] ?? '' }}</td>
|
||
@endforeach
|
||
</tr>
|
||
@endif
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- 2) Detailed per-row error boxes BELOW the table --}}
|
||
<div class="card error-card mb-3">
|
||
<div class="card-header bg-light small">
|
||
Detailed error messages
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
{{-- Formula Errors (detailed) --}}
|
||
@if(session('formula_errors'))
|
||
@foreach(session('formula_errors') as $fe)
|
||
<div class="error-row-box">
|
||
<div class="error-title">
|
||
Row {{ $fe['excel_row'] }}
|
||
@if($fe['mark_no']) | Mark: {{ $fe['mark_no'] }} @endif
|
||
@if($fe['description']) | {{ $fe['description'] }} @endif
|
||
</div>
|
||
|
||
@foreach($fe['errors'] as $field => $detail)
|
||
<div class="error-item text-danger">
|
||
❌ <span>{{ $field }}</span> →
|
||
Expected: {{ number_format($detail['expected'],4) }}
|
||
| Got: {{ number_format($detail['actual'],4) }}
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endforeach
|
||
@endif
|
||
|
||
{{-- Mark Errors (detailed) --}}
|
||
@if(session('mark_errors'))
|
||
@foreach(session('mark_errors') as $me)
|
||
<div class="error-row-box bg-warning bg-opacity-10 border-warning">
|
||
<div class="error-title">
|
||
Row {{ $me['excel_row'] }}
|
||
</div>
|
||
<div class="error-item text-warning">
|
||
❌ Mark <strong>{{ $me['mark_no'] }}</strong> not found in database
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
@endif
|
||
|
||
</div>
|
||
</div>
|
||
|
||
@endif
|
||
|
||
{{-- FORM --}}
|
||
@if (!session('formula_errors') && !session('mark_errors'))
|
||
<form action="{{ route('containers.store') }}" method="POST" enctype="multipart/form-data" class="mt-3">
|
||
@csrf
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label class="cm-form-label">Container Name</label>
|
||
<input type="text" name="container_name"
|
||
class="form-control cm-form-control"
|
||
value="{{ old('container_name') }}"
|
||
placeholder="Enter container name">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="cm-form-label">Container Number</label>
|
||
<input type="text" name="container_number"
|
||
class="form-control cm-form-control"
|
||
value="{{ old('container_number') }}"
|
||
placeholder="Enter container number">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="cm-form-label">Container Date</label>
|
||
<input type="date"
|
||
name="container_date" {{-- name fix --}}
|
||
id="containerdate" {{-- JS साठी जुना id ठेवला --}}
|
||
class="form-control cm-form-control"
|
||
value="{{ old('container_date') }}">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label class="cm-form-label">Loading List Excel</label>
|
||
<input type="file" name="excel_file"
|
||
class="form-control cm-form-control"
|
||
accept=".xls,.xlsx">
|
||
<div class="cm-help-text">
|
||
Upload Kent loading list Excel file (.xls / .xlsx).
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-4 d-flex gap-2">
|
||
<button type="submit" class="btn btn-primary cm-btn-primary">
|
||
Save Container
|
||
</button>
|
||
<a href="{{ route('containers.index') }}" class="btn btn-outline-secondary cm-btn-secondary">
|
||
Cancel
|
||
</a>
|
||
</div>
|
||
</form>
|
||
@endif
|
||
|
||
</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
|