931 lines
28 KiB
PHP
931 lines
28 KiB
PHP
@extends('layouts.customer')
|
|
|
|
@section('title', 'Employee Tasks')
|
|
|
|
@section('content')
|
|
<div class="employee-container">
|
|
<!-- Success/Error Messages -->
|
|
@if(session('success'))
|
|
<div class="alert alert-success">
|
|
<svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-error">
|
|
<svg style="width: 20px; height: 20px;" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Page Header -->
|
|
<div class="page-header">
|
|
<div class="header-icon">
|
|
<svg fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h1>My Tasks</h1>
|
|
<p class="subtitle">Planned treatments and harvests</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Treatments Section -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<svg class="section-icon" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>
|
|
</svg>
|
|
TREATMENTS
|
|
</h2>
|
|
|
|
@if($treatments->count() > 0)
|
|
<!-- Treatment Filter Buttons -->
|
|
<div class="filter-buttons">
|
|
<button class="filter-btn active" data-filter="all" onclick="filterTreatments('all')">
|
|
ALL
|
|
</button>
|
|
<button class="filter-btn" data-filter="watering" onclick="filterTreatments('watering')">
|
|
WATERING
|
|
</button>
|
|
<button class="filter-btn" data-filter="fertilization" onclick="filterTreatments('fertilization')">
|
|
FERTILIZATION
|
|
</button>
|
|
<button class="filter-btn" data-filter="spraying" onclick="filterTreatments('spraying')">
|
|
SPRAYING
|
|
</button>
|
|
<button class="filter-btn" data-filter="pruning" onclick="filterTreatments('pruning')">
|
|
PRUNING
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<table class="tasks-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>ROW ID</th>
|
|
<th>TREATMENT TYPE</th>
|
|
<th>PLANNED DATE</th>
|
|
<th>DETAILS</th>
|
|
<th>ACTION</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($treatments as $task)
|
|
@php
|
|
$isToday = $task->planned_date->isToday();
|
|
$isOverdue = $task->planned_date->isPast() && !$isToday;
|
|
$treatmentType = strtolower(class_basename($task->taskable_type));
|
|
@endphp
|
|
<tr class="{{ $isToday ? 'row-today' : ($isOverdue ? 'row-overdue' : '') }} treatment-row" data-type="{{ $treatmentType }}">
|
|
<td class="task-id">{{ $task->planned_task_id }}</td>
|
|
<td class="row-id">
|
|
@if(isset($task->treatment) && $task->treatment && $task->treatment->vineyardRow)
|
|
Row {{ $task->treatment->vineyardRow->id }}
|
|
@else
|
|
N/A
|
|
@endif
|
|
</td>
|
|
<td class="treatment-type">
|
|
<span class="type-badge type-{{ strtolower(class_basename($task->taskable_type)) }}">
|
|
{{ ucfirst(strtolower(str_replace('App\\Models\\', '', $task->taskable_type))) }}
|
|
</span>
|
|
</td>
|
|
<td class="planned-date">
|
|
{{ $task->planned_date->format('d.m.Y') }}
|
|
@if($isToday)
|
|
<span class="date-badge today">Today</span>
|
|
@elseif($isOverdue)
|
|
<span class="date-badge overdue">Overdue</span>
|
|
@endif
|
|
</td>
|
|
<td class="treatment-details">
|
|
@if($task->taskable_type === 'App\Models\Watering' && $task->taskable)
|
|
<div><strong>Time:</strong> {{ $task->taskable->time_interval ?? '-' }} min</div>
|
|
<div><strong>Amount:</strong> {{ $task->taskable->amount ?? '-' }} L</div>
|
|
@elseif($task->taskable_type === 'App\Models\Fertilization' && $task->taskable)
|
|
<div><strong>Substance:</strong> {{ $task->taskable->substance ?? '-' }}</div>
|
|
<div><strong>Concentration:</strong> {{ $task->taskable->concentration ?? '-' }}%</div>
|
|
@elseif($task->taskable_type === 'App\Models\Spraying' && $task->taskable)
|
|
<div><strong>Pesticide:</strong> {{ $task->taskable->pesticide ?? '-' }}</div>
|
|
<div><strong>Concentration:</strong> {{ $task->taskable->concentration ?? '-' }}%</div>
|
|
@elseif($task->taskable_type === 'App\Models\Pruning' && $task->taskable)
|
|
<div><strong>Method:</strong> {{ $task->taskable->method ?? '-' }}</div>
|
|
<div><strong>Removed:</strong> {{ $task->taskable->percentage_removed ?? '-' }}%</div>
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td class="task-actions">
|
|
<button type="button" class="btn-note" onclick='showNoteModal(@json($task->note ?? 'No note available'), "Treatment #{{ $task->planned_task_id }}")'>VIEW NOTE</button>
|
|
<form action="{{ route('employee.tasks.complete-treatment', $task) }}" method="POST">
|
|
@csrf
|
|
@method('PATCH')
|
|
<button type="submit" class="btn-done">DONE</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<div class="empty-state">
|
|
<p>No pending treatments</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Harvests Section -->
|
|
<div class="section">
|
|
<h2 class="section-title">
|
|
<svg class="section-icon" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
HARVESTS
|
|
</h2>
|
|
|
|
@if($harvests->count() > 0)
|
|
<div class="table-container">
|
|
<table class="tasks-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>ROW ID</th>
|
|
<th>GRAPE VARIETY</th>
|
|
<th>PLANNED DATE</th>
|
|
<th>ACTION</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($harvests as $harvest)
|
|
@php
|
|
$isToday = $harvest->planned_date->isToday();
|
|
$isOverdue = $harvest->planned_date->isPast() && !$isToday;
|
|
@endphp
|
|
<tr class="{{ $isToday ? 'row-today' : ($isOverdue ? 'row-overdue' : '') }}">
|
|
<td class="task-id">{{ $harvest->planned_task_id }}</td>
|
|
<td class="row-id">
|
|
@if($harvest->taskable && $harvest->taskable->vineyardRow)
|
|
Row {{ $harvest->taskable->vineyardRow->id }}
|
|
@else
|
|
N/A
|
|
@endif
|
|
</td>
|
|
<td class="grape-variety">
|
|
@if($harvest->taskable && $harvest->taskable->vineyardRow && $harvest->taskable->vineyardRow->varietyVariation)
|
|
{{ $harvest->taskable->vineyardRow->varietyVariation->grapeVariety->variety_name ?? 'Unknown' }}
|
|
@else
|
|
N/A
|
|
@endif
|
|
</td>
|
|
<td class="planned-date">
|
|
{{ $harvest->planned_date->format('d.m.Y') }}
|
|
@if($isToday)
|
|
<span class="date-badge today">Today</span>
|
|
@elseif($isOverdue)
|
|
<span class="date-badge overdue">Overdue</span>
|
|
@endif
|
|
</td>
|
|
<td class="task-actions">
|
|
<button type="button" class="btn-note" onclick='showNoteModal(@json($harvest->note ?? 'No note available'), "Harvest #{{ $harvest->planned_task_id }}")'>VIEW NOTE</button>
|
|
<button type="button" class="btn-complete" onclick="openHarvestModal({{ $harvest->planned_task_id }}, 'Row {{ $harvest->taskable->vineyardRow->id ?? 'N/A' }}', '{{ $harvest->taskable->vineyardRow->varietyVariation->grapeVariety->variety_name ?? 'N/A' }}', '{{ $harvest->planned_date->format('d.m.Y') }}')">COMPLETE</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<div class="empty-state">
|
|
<p>No pending harvests</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.employee-container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Alerts */
|
|
.alert {
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.alert-success {
|
|
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
|
|
color: #155724;
|
|
border: 2px solid #b1dfbb;
|
|
}
|
|
|
|
.alert-error {
|
|
background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
|
|
color: #721c24;
|
|
border: 2px solid #f1aeb5;
|
|
}
|
|
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 3rem;
|
|
padding: 2rem;
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(137, 180, 217, 0.3);
|
|
}
|
|
|
|
.header-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #1a365d;
|
|
}
|
|
|
|
.header-icon svg {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2.5rem;
|
|
color: #1a365d;
|
|
margin: 0;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #2d5a7b;
|
|
margin: 0;
|
|
}
|
|
|
|
.section {
|
|
background: white;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
padding: 2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: #2d3748;
|
|
margin-bottom: 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.section-icon {
|
|
width: 28px;
|
|
height: 28px;
|
|
color: #89b4d9;
|
|
}
|
|
|
|
/* Filter Buttons */
|
|
.filter-buttons {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
margin-bottom: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-btn {
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 8px;
|
|
border: 2px solid #e2e8f0;
|
|
background: white;
|
|
color: #4a5568;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.filter-btn:hover {
|
|
background: #f7fafc;
|
|
border-color: #cbd5e0;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: white;
|
|
border-color: #89b4d9;
|
|
box-shadow: 0 2px 8px rgba(137, 180, 217, 0.3);
|
|
}
|
|
|
|
.filter-btn.active:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 12px rgba(137, 180, 217, 0.4);
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.tasks-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.tasks-table thead {
|
|
background: #f7fafc;
|
|
}
|
|
|
|
.tasks-table th {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
font-weight: 700;
|
|
font-size: 0.85rem;
|
|
color: #4a5568;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.tasks-table tbody tr {
|
|
border-bottom: 1px solid #e2e8f0;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.tasks-table tbody tr:hover {
|
|
background: #f7fafc;
|
|
}
|
|
|
|
.tasks-table tbody tr:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tasks-table td {
|
|
padding: 1.25rem 1rem;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.task-id {
|
|
font-weight: 600;
|
|
color: #718096;
|
|
}
|
|
|
|
.row-id {
|
|
font-weight: 600;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.treatment-type,
|
|
.grape-variety {
|
|
font-weight: 500;
|
|
}
|
|
|
|
.type-badge {
|
|
display: inline-block;
|
|
padding: 0.4rem 0.9rem;
|
|
border-radius: 6px;
|
|
font-weight: 600;
|
|
font-size: 0.85rem;
|
|
text-transform: capitalize;
|
|
}
|
|
|
|
.type-watering {
|
|
background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%);
|
|
color: #2c5282;
|
|
}
|
|
|
|
.type-fertilization {
|
|
background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
|
|
color: #22543d;
|
|
}
|
|
|
|
.type-spraying {
|
|
background: linear-gradient(135deg, #fed7d7 0%, #fc8181 100%);
|
|
color: #742a2a;
|
|
}
|
|
|
|
.type-pruning {
|
|
background: linear-gradient(135deg, #fbd38d 0%, #f6ad55 100%);
|
|
color: #7c2d12;
|
|
}
|
|
|
|
.planned-date {
|
|
font-weight: 500;
|
|
color: #4a5568;
|
|
}
|
|
|
|
/* Today and Overdue Row Styling */
|
|
.row-today {
|
|
background: linear-gradient(135deg, #fff5ec 0%, #fffaf0 100%) !important;
|
|
}
|
|
|
|
.row-today td {
|
|
border-color: #ed8936;
|
|
}
|
|
|
|
.row-overdue {
|
|
background: linear-gradient(135deg, #fff5f5 0%, #fffafa 100%) !important;
|
|
}
|
|
|
|
.row-overdue td {
|
|
border-color: #f56565;
|
|
}
|
|
|
|
.date-badge {
|
|
display: inline-block;
|
|
padding: 0.125rem 0.5rem;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin-left: 0.5rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.date-badge.today {
|
|
background: #fed7aa;
|
|
color: #7c2d12;
|
|
}
|
|
|
|
.date-badge.overdue {
|
|
background: #fecaca;
|
|
color: #7f1d1d;
|
|
}
|
|
|
|
.treatment-details {
|
|
font-size: 0.85rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.treatment-details div {
|
|
margin: 0.25rem 0;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.treatment-details div strong {
|
|
color: #2d3748;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
min-width: 85px;
|
|
}
|
|
|
|
.task-actions {
|
|
text-align: center !important;
|
|
}
|
|
|
|
.task-actions form {
|
|
display: inline-block;
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.tasks-table th:last-child {
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-done,
|
|
.btn-complete,
|
|
.btn-note {
|
|
padding: 0.6rem 1.5rem;
|
|
border-radius: 8px;
|
|
border: none;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.btn-done {
|
|
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
|
color: white;
|
|
box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
|
|
}
|
|
|
|
.btn-done:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
|
|
}
|
|
|
|
.btn-complete {
|
|
background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
|
|
color: white;
|
|
box-shadow: 0 2px 8px rgba(237, 137, 54, 0.3);
|
|
}
|
|
|
|
.btn-complete:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(237, 137, 54, 0.4);
|
|
}
|
|
|
|
.btn-note {
|
|
background: linear-gradient(135deg, #89b4d9 0%, #a8cce5 100%);
|
|
color: #1a365d;
|
|
box-shadow: 0 2px 8px rgba(137, 180, 217, 0.3);
|
|
}
|
|
|
|
.btn-note:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(137, 180, 217, 0.4);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 3rem 2rem;
|
|
color: #718096;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Mobile Responsive */
|
|
@media (max-width: 768px) {
|
|
.page-header {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-header h1 {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.section {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.tasks-table {
|
|
min-width: 700px;
|
|
}
|
|
|
|
.btn-done,
|
|
.btn-complete,
|
|
.btn-note {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* Modal Overlay */
|
|
.modal-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 2rem;
|
|
max-width: 600px;
|
|
width: 90%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.5rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
font-size: 1.5rem;
|
|
color: #2d3748;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
color: #718096;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-close:hover {
|
|
background: #f7fafc;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.modal-info {
|
|
background: linear-gradient(135deg, #e6f2ff 0%, #f0f8ff 100%);
|
|
border-left: 4px solid #4299e1;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.info-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
}
|
|
|
|
.info-value {
|
|
color: #4a5568;
|
|
}
|
|
|
|
.modal-form-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.modal-form-group label {
|
|
display: block;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.modal-form-input {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.modal-form-input:focus {
|
|
outline: none;
|
|
border-color: #4299e1;
|
|
background: #f7fafc;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 2px solid #e2e8f0;
|
|
}
|
|
|
|
.btn-modal-done {
|
|
flex: 1;
|
|
padding: 0.875rem 1.5rem;
|
|
background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 2px 8px rgba(72, 187, 120, 0.3);
|
|
}
|
|
|
|
.btn-modal-done:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(72, 187, 120, 0.4);
|
|
}
|
|
|
|
.btn-modal-cancel {
|
|
flex: 1;
|
|
padding: 0.875rem 1.5rem;
|
|
background: #f7fafc;
|
|
color: #4a5568;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-modal-cancel:hover {
|
|
background: #edf2f7;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Note Display Modal -->
|
|
<div id="noteModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2 id="note-modal-title">Task Note</h2>
|
|
<button type="button" class="btn-close" onclick="closeNoteModal()">×</button>
|
|
</div>
|
|
|
|
<div class="modal-info">
|
|
<div class="info-row" style="display: block;">
|
|
<p id="note-modal-content" style="white-space: pre-wrap; word-wrap: break-word; margin: 0;">No note available</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-modal-cancel" onclick="closeNoteModal()">CLOSE</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Harvest Completion Modal -->
|
|
<div id="harvestModal" class="modal-overlay">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Complete Harvest</h2>
|
|
<button type="button" class="btn-close" onclick="closeHarvestModal()">×</button>
|
|
</div>
|
|
|
|
<div class="modal-info">
|
|
<div class="info-row">
|
|
<span class="info-label">ID:</span>
|
|
<span class="info-value" id="modal-harvest-id"></span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">ROW ID:</span>
|
|
<span class="info-value" id="modal-row-id"></span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">GRAPE VARIETY:</span>
|
|
<span class="info-value" id="modal-grape-variety"></span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">DATE:</span>
|
|
<span class="info-value" id="modal-date"></span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">USER NAME:</span>
|
|
<span class="info-value">{{ auth()->user()->username }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="harvestCompleteForm" method="POST">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
<input type="hidden" name="user_id" value="{{ auth()->id() }}">
|
|
|
|
<div class="modal-form-group">
|
|
<label for="sugar">SUGAR</label>
|
|
<input type="number" step="0.01" name="sugar" id="sugar" class="modal-form-input" placeholder="Enter sugar level" required>
|
|
</div>
|
|
|
|
<div class="modal-form-group">
|
|
<label for="weight">WEIGHT</label>
|
|
<input type="number" step="0.01" name="weight" id="weight" class="modal-form-input" placeholder="Enter weight" required>
|
|
</div>
|
|
|
|
<div class="modal-form-group">
|
|
<label for="quality">QUALITY</label>
|
|
<select name="quality" id="quality" class="modal-form-input" required>
|
|
<option value="">Select quality</option>
|
|
<option value="excellent">Excellent</option>
|
|
<option value="good">Good</option>
|
|
<option value="fair">Fair</option>
|
|
<option value="poor">Poor</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="modal-actions">
|
|
<button type="button" class="btn-modal-cancel" onclick="closeHarvestModal()">Cancel</button>
|
|
<button type="submit" class="btn-modal-done">DONE</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function openHarvestModal(harvestId, rowId, grapeVariety, date) {
|
|
// Set harvest info
|
|
document.getElementById('modal-harvest-id').textContent = 'ID' + harvestId;
|
|
document.getElementById('modal-row-id').textContent = rowId;
|
|
document.getElementById('modal-grape-variety').textContent = grapeVariety;
|
|
document.getElementById('modal-date').textContent = date;
|
|
|
|
// Set form action
|
|
const form = document.getElementById('harvestCompleteForm');
|
|
form.action = '/employee/tasks/' + harvestId + '/complete-harvest';
|
|
|
|
// Show modal
|
|
document.getElementById('harvestModal').classList.add('active');
|
|
}
|
|
|
|
function closeHarvestModal() {
|
|
document.getElementById('harvestModal').classList.remove('active');
|
|
document.getElementById('harvestCompleteForm').reset();
|
|
}
|
|
|
|
// Close modal on overlay click
|
|
document.getElementById('harvestModal').addEventListener('click', function(e) {
|
|
if (e.target === this) {
|
|
closeHarvestModal();
|
|
}
|
|
});
|
|
|
|
// Close modal on Escape key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
closeHarvestModal();
|
|
closeNoteModal();
|
|
}
|
|
});
|
|
|
|
// Note Modal Functions
|
|
function showNoteModal(note, title) {
|
|
const noteModal = document.getElementById('noteModal');
|
|
const noteModalTitle = document.getElementById('note-modal-title');
|
|
const noteModalContent = document.getElementById('note-modal-content');
|
|
|
|
noteModalTitle.textContent = title;
|
|
noteModalContent.textContent = note || 'No note available';
|
|
|
|
noteModal.classList.add('active');
|
|
}
|
|
|
|
function closeNoteModal() {
|
|
const noteModal = document.getElementById('noteModal');
|
|
noteModal.classList.remove('active');
|
|
}
|
|
|
|
// Close note modal when clicking outside
|
|
document.addEventListener('click', function(e) {
|
|
const noteModal = document.getElementById('noteModal');
|
|
if (e.target === noteModal) {
|
|
closeNoteModal();
|
|
}
|
|
});
|
|
|
|
// Filter Treatments Function
|
|
function filterTreatments(type) {
|
|
// Update active button
|
|
const filterButtons = document.querySelectorAll('.filter-btn');
|
|
filterButtons.forEach(btn => {
|
|
btn.classList.remove('active');
|
|
if (btn.dataset.filter === type) {
|
|
btn.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// Filter rows
|
|
const treatmentRows = document.querySelectorAll('.treatment-row');
|
|
treatmentRows.forEach(row => {
|
|
if (type === 'all' || row.dataset.type === type) {
|
|
row.style.display = '';
|
|
} else {
|
|
row.style.display = 'none';
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
@endsection
|