@extends('layouts.app')

@section('page-pretitle', __('Management'))
@section('page-title', __('Edit Project'))

@section('content')

<style>
    .btn-hover-yellow:hover, .btn-hover-grey:focus {
        background-color: #ffc107 !important;
        color: #fff !important;
    }
</style>

<!-- Flash Messages -->
@if ($errors->any())
<div id="validation-alert" class="alert alert-danger alert-dismissible fade show position-fixed top-0 end-0 m-4 bg-red text-white d-flex align-items-center shadow" role="alert" style="z-index: 950; width: 450px;">
    <div class="flex-grow-1">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    <button type="button" class="btn-close btn-close-white ms-2" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row row-cards">
    <div class="col-12">
        <div class="card shadow-sm p-4">

            <!-- Button to trigger the sidebar -->
            <div class="d-flex justify-content-end align-items-center mb-3">
                <button class="btn btn-icon shadow-sm btn-hover-yellow btn-outline-yellow bg-yellow-lt me-1 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#notesPanel" title="Add License & Renewal">
                    <i class="ti ti-info-hexagon me-1"></i>Add License & Renewal
                </button>
            </div>

            <!-- Offcanvas Sidebar for Important Notes -->
            <div class="offcanvas offcanvas-end" tabindex="-1" id="notesPanel" aria-labelledby="notesPanelLabel">
                <div class="offcanvas-header bg-dark text-white">
                    <h5 class="offcanvas-title" id="notesPanelLabel">
                        <i class="ti ti-info-hexagon"></i> License & Renewal
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
                </div>

                <form action="{{ route('project.notes.update', $project->id) }}" method="POST" class="offcanvas-body">
                    @csrf

                    <div class="card shadow-sm p-3">
                        <div id="notes-wrapper">
                            @foreach ($project->notes as $note)
                                <div class="d-flex justify-content-between note-item row align-items-center mb-3">
                                    <div class="col-md-6">
                                        <label class="form-label">License & Renewal</label>
                                        <input type="text" name="notes[{{ $note->id }}][notes]" class="form-control" value="{{ ucfirst($note->notes) }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Due Date</label>
                                        <input type="date" name="notes[{{ $note->id }}][notes_duedate]" class="form-control" value="{{ $note->notes_duedate->format('Y-m-d') }}">
                                    </div>
                                    <div class="d-flex justify-content-end align-items-center col-md-2">
                                        <button type="button" class="btn btn-danger btn-sm mt-4" onclick="markNoteDeleted(this, '{{ $note->id }}')"><i class="ti ti-trash"></i></button>
                                        {{-- <input type="hidden" name="notes[{{ $note->id }}][_delete]" value="0"> --}}
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Add Note Button -->
                    <div class="d-flex justify-content-between mt-3">
                        <button type="button" class="btn btn-outline-primary btn-sm" onclick="addNewNote()">
                            <i class="ti ti-plus"></i> Add New License & Renewal
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="ti ti-device-floppy me-1"></i> Save
                        </button>
                    </div>
                </form>
            </div>


            <form action="{{ route('project_list.update', [ $project->id] ) }}?{{ http_build_query(request()->query()) }}" method="POST"  enctype="multipart/form-data">
            {{-- <form action="{{ route('project_list.update', $project->id) }}" method="POST" enctype="multipart/form-data"> --}}
                @csrf
                @method('PUT')

                <div class="p-3 mb-4 rounded-3">
                    <div class="row g-3 align-items-center">
                        <!-- Left: Icon and Input -->
                        <div class="col-md-6 d-flex align-items-center">
                            <h3 class="text-primary me-2 mb-0">
                                <i class="ti ti-info-circle"></i>
                            </h3>
                            <input 
                                type="text" 
                                name="ref_no" 
                                id="ref_no" 
                                class="form-control text-uppercase" 
                                placeholder="AHK/PB/MUS/19/01" 
                                value="{{ old('ref_no', $project->ref_no ?? '') }}">
                        </div>

                        <!-- Middle: Info Text -->
                        <div class="col-md-4">
                        <small class="d-block" style="color: var(--tblr-primary, #206bc4);">
                            <strong>{{ __('Reference Info:') }}</strong>
                                UT – Ubahan Tambahan, PB – Pelan Bangunan, ID – Interior Design
                            </small>
                        </div>

                        <!-- Right: Switches -->
                        <div class="col-md-2 d-flex justify-content-start gap-3">
                            <div class="form-check form-switch m-0">
                                <input 
                                    class="form-check-input" 
                                    type="checkbox" 
                                    id="is_registration" 
                                    name="is_registration" 
                                    value="1"
                                    {{ old('is_registration', $project->is_registration ?? false) ? 'checked' : '' }}
                                />
                                <label class="form-check-label small text-primary" for="is_registration">Register</label>
                            </div>

                            {{-- <div class="form-check form-switch m-0">
                                <input class="form-check-input" type="checkbox" id="is_finished" name="is_finished" value="1"
                                    {{ old('is_finished', $project->is_finished ?? false) ? 'checked' : '' }}/>
                                <label class="form-check-label small text-primary" for="is_finished">Finished</label>
                            </div> --}}
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <!-- Description -->
                        <div class="mb-4">
                            <h4 class="mb-2">
                                <i class="ti ti-file-description"></i> {{ __('Project Description') }}
                            </h4>
                            <textarea name="description" id="description" class="form-control text-uppercase" rows="10" required style="text-transform: uppercase;">{{ strtoupper($project->description) }}</textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <!-- Client -->
                        <div class="mb-4">
                            <h4 class="mb-2">
                                <i class="ti ti-user"></i> {{ __('Client') }}
                            </h4>
                            <input type="text" name="client" id="client" class="form-control text-uppercase" value="{{ strtoupper($project->client) }}" style="text-transform: uppercase;" required>
                        </div>

                        <!-- Scope & Project Type -->
                        <div class="row mb-4">
                            <!-- Scope -->
                            <div class="col-md-4">
                                <h4 class="">
                                    <i class="ti ti-clipboard-list"></i> {{ __('Scope') }}
                                </h4>
                                <select name="scope_id" id="scope_id" class="form-control" required>
                                    <option value="" disabled {{ old('scope_id') ? '' : 'selected' }}>{{ __('Select a Scope') }}</option>
                                    @foreach($scopes as $scope)
                                        <option value="{{ $scope->id }}" {{ $project->scope_id == $scope->id ? 'selected' : '' }}>
                                            {{ $scope->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Project Type -->
                            <div class="col-md-4">
                                <h4><i class="ti ti-list-check"></i> {{ __('Project Type') }}</h4>
                                <select name="project_type_id" id="project_type_id" class="form-control">
                                    <option value="" disabled {{ old('project_type_id') ? '' : 'selected' }}>{{ __('Select a Project Type') }}</option>
                                    @foreach($project_type as $type)
                                        <option value="{{ $type->id }}" {{ $project->project_type_id == $type->id ? 'selected' : '' }}>
                                            {{ $type->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Project Phase -->
                            <div class="col-md-4">
                                <h4><i class="ti ti-list-check"></i> {{ __('Project Phase') }}</h4>
                                <select name="project_phase_id" id="project_phase_id" class="form-control">
                                    <option value="" disabled {{ old('project_phase_id', $project->project_phase_id) ? '' : 'selected' }}>
                                        {{ __('Select a Project Phase') }}
                                    </option>
                                    @foreach($project_phase as $phase)
                                        <option value="{{ $phase->id }}" 
                                            {{ old('project_phase_id', $project->project_phase_id) == $phase->id ? 'selected' : '' }} 
                                            class="text-capitalize">
                                            {{ $phase->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>


                        </div>


                        <!-- Dates -->
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <h4 class="mb-2">
                                    <i class="ti ti-calendar-repeat"></i> {{ __('Received Year') }}
                                </h4>
                                <input type="number" name="received_year" id="received_year" class="form-control" value="{{ old('received_year', $project->received_year) }}" min="1900" max="{{ date('Y') }}">
                            </div>
                            <div class="col-md-4">
                                <h4 class="mb-2">
                                    <i class="ti ti-calendar-event"></i> {{ __('Start Date') }}
                                </h4>
                                <input type="date" name="start_date" id="start_date" class="form-control" value="{{ $project->start_date?->format('Y-m-d') }}">
                            </div>
                            <div class="col-md-4">
                                <h4 class="mb-2">
                                    <i class="ti ti-calendar-check"></i> {{ __('End Date') }}
                                </h4>
                                <input type="date" name="end_date" id="end_date" class="form-control" value="{{ $project->end_date?->format('Y-m-d') }}">
                            </div>
                        </div>
                    </div>

                    <!-- Assignees -->
                    <div class="mb-4">
                        <h4 class="mb-2">
                            <i class="ti ti-users"></i> {{ __('Assignees') }} <span class="text-danger">*</span>
                        </h4>
                        <div class="form-selectgroup" id="assignees-group">
                            @foreach($users as $user)
                                <label class="form-selectgroup-item">
                                    <input type="checkbox" name="assignees[]" value="{{ $user->id }}" class="form-selectgroup-input"
                                        {{ in_array($user->id, $project->assignees->pluck('id')->toArray()) ? 'checked' : '' }}>
                                    <span class="form-selectgroup-label">{{ $user->name }}</span>
                                </label>
                            @endforeach
                        </div>
                        <div id="assignees-error" class="text-danger d-none mt-1">Please select at least one assignee.</div>
                    </div>


                    <div class="col-12 mt-4">
                        <!-- Submission Types -->
                        <div id="submission-types-section">
                            <h4 class="mb-2">
                                <i class="ti ti-archive"></i> {{ __('Submission Types') }}
                            </h4>
                            <!-- Submission types content here -->
                            <div class="row">
                                @foreach($submissionTypes as $index => $type)
                                    @php
                                        $submission = $project->submissionTypes->firstWhere('pivot.submission_type_id', $type->id);
                                        $isChecked = $submission && ($submission->pivot->submission_date || $submission->pivot->file_no || $submission->pivot->remarks || $submission->pivot->status_id);
                                    @endphp

                                    <div class="col-md-4 mb-4">
                                        <div class="border p-3 rounded h-100 shadow-sm">
                                            <div class="form-check mb-2">
                                                <input class="form-check-input toggle-submission" type="checkbox"
                                                id="submissionCheck{{ $index }}"
                                                name="submission_types[{{ $index }}][enabled]" value="1"
                                                data-target="submissionFields{{ $index }}"
                                                {{ $isChecked ? 'checked' : '' }}>                                        
                                                <label class="form-check-label" for="submissionCheck{{ $index }}">
                                                    <strong>{{ strtoupper($type->name) }}</strong>
                                                </label>
                                            </div>

                                            <div id="submissionFields{{ $index }}" class="submission-fields" style="{{ $isChecked ? '' : 'display:none;' }}">
                                                <input type="hidden" name="submission_types[{{ $index }}][submission_type_id]" value="{{ $type->id }}">

                                                <div class="row">
                                                    <div class="col-md-6 mb-2">
                                                        <label>Date</label>
                                                        <input type="date" name="submission_types[{{ $index }}][submission_date]" class="form-control" value="{{ $submission->pivot->submission_date ?? '' }}">
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label>File No / ID</label>
                                                        <input type="text" name="submission_types[{{ $index }}][file_no]" class="form-control" value="{{ $submission->pivot->file_no ?? '' }}">
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label>Status</label>
                                                        <select name="submission_types[{{ $index }}][status_id]" class="form-control">
                                                            <option value="">{{ __('Select Status') }}</option>
                                                            @foreach($statuses as $status)
                                                                <option value="{{ $status->id }}" {{ ($submission && $submission->pivot->status_id == $status->id) ? 'selected' : '' }}>
                                                                    {{ Str::title($status->name) }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-6 mb-2">
                                                        <label>Remarks</label>
                                                        <input type="text" name="submission_types[{{ $index }}][remarks]" class="form-control" value="{{ $submission->pivot->remarks ?? '' }}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- Remarks -->
                        <div class="mt-4">
                            <h4 class="mb-2">
                                <i class="ti ti-bookmarks"></i> {{ __('Remarks') }}
                            </h4>
                            <textarea name="remarks" id="remarks" rows="6" class="form-control">{{ $project->remarks }}</textarea>
                        </div>

                        {{-- Project Timeline Table --}}
                        <div class="mt-4">

                            @php
                                $timelines = $project->timelines()->orderBy('timeline_date')->get();
                                $labelDate = __('Date');
                                $labelRemark = __('Remark');
                                $labelAdd = __('Add Another');
                                $labelRemove = __('Remove');
                            @endphp

                            <div class="mt-2">
                                <h4 class="mb-2">
                                    <i class="ti ti-timeline"></i> {{ __('Timeline') }}
                                </h4>

                                <div class="table-responsive">
                                    <table class="table table-sm table-bordered align-middle mb-0" style="font-size: 12px;">
                                        <thead class="table-light">
                                            <tr>
                                                <th style="padding: 6px;">{{ $labelDate }}</th>
                                                <th style="min-width: 250px; padding: 6px;">{{ $labelRemark }}</th>
                                                <th style="width: 1%; padding: 6px; text-align: center;">{{ __('Action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($timelines as $timeline)
                                                <tr id="timeline-row-{{ $timeline->id }}">
                                                    <td style="padding: 6px;">
                                                        <input type="date" name="timelines[{{ $timeline->id }}][timeline_date]" value="{{ $timeline->timeline_date ? \Carbon\Carbon::parse($timeline->timeline_date)->format('Y-m-d') : '' }}" class="form-control form-control-sm">
                                                    </td>
                                                    <td style="padding: 6px;">
                                                        <input type="text" name="timelines[{{ $timeline->id }}][remark]" value="{{ $timeline->remark }}" class="form-control form-control-sm">
                                                    </td>
                                                    <td style="padding: 6px; text-align: center;">
                                                        <button type="button" class="btn btn-sm btn-outline-danger delete-timeline" data-timeline-id="{{ $timeline->id }}">
                                                            <i class="ti ti-x"></i>
                                                        </button>
                                                        <input type="hidden" name="timelines[{{ $timeline->id }}][_delete]" value="0" class="delete-flag">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <!-- New Timelines Section -->
                                <div class="card mt-4 p-4">
                                    <div id="timeline-wrapper">
                                        <div class="timeline-item row mb-3">
                                            <div class="col-md-4">
                                                <label>{{ $labelDate }}</label>
                                                <input type="date" name="timelines[new][0][timeline_date]" class="form-control">
                                            </div>
                                            <div class="col-md-8">
                                                <label>{{ $labelRemark }}</label>
                                                <input type="text" name="timelines[new][0][remark]" class="form-control" placeholder="Enter remark">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                    <div class="text-start">
                                        <button type="button" id="add-timeline" class="btn btn-sm btn-outline-primary mt-2">
                                            <i class="ti ti-plus"></i> {{ $labelAdd }}
                                        </button>
                                    </div>
                            </div>

                            @push('styles')
                            <style>
                                .table-responsive {
                                    overflow-x: auto;
                                    -webkit-overflow-scrolling: touch;
                                }

                                .table td {
                                    vertical-align: middle;
                                }

                                .d-flex {
                                    display: flex;
                                }
                            </style>
                            @endpush
                        </div>


                        <hr>
                        <!-- Images Section -->
                        @if ($project->documents->isNotEmpty())
                            <div class="mt-4">
                                <h3>Uploaded Images</h3>
                                @php
                                    $images = $project->documents->filter(function($doc) {
                                        $ext = pathinfo($doc->path, PATHINFO_EXTENSION);
                                        return in_array(strtolower($ext), ['jpg', 'jpeg', 'png']);
                                    })->values();
                                @endphp
                                @if($images->isEmpty())
                                    <p class="col-12 text-center text-muted">No images uploaded</p>
                                @else
                                    @foreach($images->chunk(4) as $row)
                                        <div class="row mb-3">
                                            @foreach($row as $doc)
                                                <div class="col-md-3 mb-3">
                                                    <div class="position-relative">
                                                        <a href="{{ asset('storage/' . $doc->path) }}" target="_blank">
                                                            <img src="{{ asset('storage/' . $doc->path) }}" alt="{{ $doc->original_name }}" class="img-thumbnail" style="width: 100%; height: 200px; object-fit: cover;">
                                                        </a>
                                                        <div class="form-check d-flex justify-content-center align-items-center gap-2 mt-2">
                                                            <input type="checkbox" name="delete_files[]" value="{{ $doc->id }}" class="form-check-input" id="delete_file_{{ $doc->id }}">
                                                            <label class="form-check-label" for="delete_file_{{ $doc->id }}">Remove</label>
                                                        </div>
                                                        <div class="text-center mt-1" style="font-size: 12px; color: #888;">
                                                            {{ $doc->original_name }}
                                                            @if($doc->uploaded_at)
                                                                <br>
                                                                <span>{{ \Carbon\Carbon::parse($doc->uploaded_at)->format('d-m-Y') }}</span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                            @for($i = $row->count(); $i < 4; $i++)
                                                <div class="col-md-3 mb-3"></div>
                                            @endfor
                                        </div>
                                    @endforeach
                                @endif
                            </div>
                        @else
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h3 class="card-title">Uploaded Images</h3>
                                </div>
                                <div class="card-body">
                                    <p class="text-center text-muted">No images uploaded</p>
                                </div>
                            </div>
                        @endif

                        <!-- Files Section -->
                        @php
                            // Filter only non-image files
                            $files = $project->documents->filter(function($doc) {
                                $ext = pathinfo($doc->path, PATHINFO_EXTENSION);
                                return !in_array(strtolower($ext), ['jpg', 'jpeg', 'png']);
                            });
                        @endphp

                        @if ($files->isNotEmpty())
                            <div class="mt-4">
                                <h3>Uploaded Files</h3>
                                <ol class="list-unstyled card p-3">
                                    @php $fileNumber = 1; @endphp <!-- Initialize file number -->
                                    @foreach ($files as $doc)
                                        <li class="d-flex align-items-center mb-1">
                                            <span class="me-3">{{ $fileNumber++ }}.</span> <!-- File Number -->
                                            <a href="{{ asset('storage/' . $doc->path) }}" target="_blank" style="text-decoration: none;">
                                                <div class="d-flex align-items-center">
                                                    {{-- File Icons --}}
                                                    @if (Str::endsWith($doc->path, 'pdf'))
                                                        <i class="fa fa-file-pdf text-danger" style="font-size: 30px;"></i>
                                                    @elseif (Str::endsWith($doc->path, ['docx', 'doc']))
                                                        <i class="fa fa-file-word text-primary" style="font-size: 30px;"></i>
                                                    @elseif (Str::endsWith($doc->path, ['xls', 'xlsx']))
                                                        <i class="fa fa-file-excel text-success" style="font-size: 30px;"></i>
                                                    @elseif (Str::endsWith($doc->path, 'zip'))
                                                        <i class="fa fa-file-archive text-warning" style="font-size: 30px;"></i>
                                                    @else
                                                        <i class="fa fa-file" style="font-size: 30px;"></i>
                                                    @endif
                                                    <p class="mt-2 ms-3 mb-0">{{ $doc->original_name }}</p>
                                                </div>
                                            </a>
                                            <div class="form-check d-flex justify-content-center align-items-center gap-2 mt-2 mx-3">
                                                <input type="checkbox" name="delete_files[]" value="{{ $doc->id }}" class="form-check-input" id="delete_file_{{ $doc->id }}">
                                                <label class="form-check-label" for="delete_file_{{ $doc->id }}">Remove</label>
                                            </div>
                                        </li>
                                    @endforeach
                                </ol>
                            </div>
                        @else
                            <div class="card mt-4">
                                <div class="card-header">
                                    <h3 class="card-title">Uploaded Files</h3>
                                </div>
                                <div class="card-body">
                                    <p class="text-center text-muted">No files uploaded</p>
                                </div>
                            </div>
                        @endif

                        <!-- File Upload Section -->
                        <div class="form-group mt-4">
                            <h4>Upload New Images or Documents</h4>
                            <div class="card p-3">
                                <label for="new_files_input" class="form-label">Select Images or Documents</label>
                                <input type="file" name="new_files[]" id="new_files_input" class="form-control" multiple accept=".jpg,.jpeg,.png,.pdf,.docx,.txt,.xls,.xlsx,.zip">
                                <small class="text-muted">Allowed types: JPG, PNG, PDF, DOCX, TXT, XLS, XLSX, ZIP. You can select multiple files and upload them multiple times.</small>
                            </div>
                        </div>

                        <div class="mb-3 mt-4">
                            <label for="custom_progress" class="form-label">Custom Progress (%)</label>
                            <input type="number" name="custom_progress" id="custom_progress" class="form-control"
                                min="0" max="100" value="{{ old('custom_progress', $project->custom_progress ?? '') }}">
                        </div>



                {{-- <div class="d-flex justify-content-end mt-4">
                    <a href="{{ route('project_list.index', request()->query()) }}" class="btn btn-outline-secondary mx-2">
                        {{ __('Back') }}
                    </a>
                    <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                </div> --}}
                    <input type="hidden" name="redirect_back_to" value="{{ url()->previous() }}">
                    <div class="d-flex justify-content-end mt-4">
                        @php
                            use Illuminate\Support\Facades\Route;

                            $previousUrl = url()->previous();
                            $projectListUrl = route('project_list.index');
                            $documentsUrl = route('documents.index');
                        @endphp
                        <a href="{{ $previousUrl === $projectListUrl ? $projectListUrl : ($previousUrl === $documentsUrl ? $documentsUrl : url()->previous()) }}"  class="btn btn-outline-secondary mx-2">
                            {{ __('Back') }}
                        </a>
                        <button type="submit" class="btn btn-primary">{{ __('Update') }}</button>
                    </div>

            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.toggle-submission').forEach(toggle => {
        const targetId = toggle.getAttribute('data-target');
        const target = document.getElementById(targetId);
        if (!target) return;

        const updateVisibility = () => {
            if (toggle.checked) {
                target.style.display = 'block';
            } else {
                target.style.display = 'none';
            }
        };

        updateVisibility(); // run on load
        toggle.addEventListener('change', updateVisibility);
    });
    // Flash auto-hide
    const alert = document.getElementById('validation-alert');
    if (alert) {
        setTimeout(() => {
            alert.classList.remove('show');
            alert.classList.add('hide');
            setTimeout(() => alert.remove(), 500);
        }, 3000);
    }

    // Require at least one assignee
    const form = document.querySelector('form');
    const checkboxes = document.querySelectorAll('input[name="assignees[]"]');
    const error = document.getElementById('assignees-error');

    form.addEventListener('submit', e => {
        if (![...checkboxes].some(cb => cb.checked)) {
            e.preventDefault();
            error.classList.remove('d-none');
        } else {
            error.classList.add('d-none');
        }
    });

    const labelDate = @json($labelDate);
    const labelRemark = @json($labelRemark);
    const labelRemove = @json($labelRemove);

    let timelineIndex = document.querySelectorAll('#timeline-wrapper .timeline-item').length;

    // Add new timeline row
    document.getElementById('add-timeline').addEventListener('click', () => {
        const wrapper = document.getElementById('timeline-wrapper');
        const newItem = document.createElement('div');
        newItem.className = 'timeline-item row mb-1';
        newItem.innerHTML = `
            <div class="col-md-4">
                <label>${labelDate}</label>
                <input type="date" name="timelines[new][${timelineIndex}][timeline_date]" class="form-control">
            </div>
            <div class="col-md-8">
                <label>${labelRemark}</label>
                <input type="text" name="timelines[new][${timelineIndex}][remark]" class="form-control" placeholder="Enter remark" required>
            </div>
            <div class="col-md-12 text-end mt-2">
                <button type="button" class="btn btn-sm btn-outline-danger remove-timeline">
                    <i class="ti ti-x"></i>
                </button>
            </div>
        `;
        wrapper.appendChild(newItem);
        timelineIndex++;
    });

    // Remove newly added timeline row
    document.getElementById('timeline-wrapper').addEventListener('click', function (e) {
        if (e.target.closest('.remove-timeline')) {
            e.target.closest('.timeline-item').remove();
        }
    });

    // Flag existing timeline row for deletion
    document.querySelectorAll('.delete-timeline').forEach(btn => {
        btn.addEventListener('click', function () {
            const row = document.getElementById(`timeline-row-${this.dataset.timelineId}`);
            const deleteInput = row.querySelector('.delete-flag');
            if (deleteInput) {
                deleteInput.value = '1';
            }
            row.style.display = 'none';
        });
    });
});

// Make these functions globally available
let noteIndex = 0;

function addNewNote() {
    const wrapper = document.getElementById('notes-wrapper');

    const html = `
        <div class="d-flex justify-content-between note-item row align-items-center mb-3">
            <div class="col-md-6">
                <label class="form-label">License & Renewal</label>
                <input type="text" name="notes[new][${noteIndex}][notes]" class="form-control" placeholder="Add new license & renewal">
            </div>
            <div class="col-md-4">
                <label class="form-label">Due Date</label>
                <input type="date" name="notes[new][${noteIndex}][notes_duedate]" class="form-control">
            </div>
            <div class="col-md-2 d-flex justify-content-end align-items-center">
                <button type="button" class="btn btn-danger btn-sm mt-4" onclick="removeNewNote(this)"><i class="ti ti-trash"></i></button>
            </div>
        </div>
    `;

    wrapper.insertAdjacentHTML('beforeend', html);
    noteIndex++;
}

function removeNewNote(button) {
    button.closest('.note-item').remove();
}

function markNoteDeleted(button, id) {
    // Add a hidden input to tell backend to delete this note
    const form = button.closest('form');
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = `notes[${id}][_delete]`;
    hiddenInput.value = '1';
    form.appendChild(hiddenInput);

    // Remove the note row from the DOM
    button.closest('.note-item').remove();
}



</script>
@endpush