@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()">&times;</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()">&times;</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