@extends('layouts.master')

@section('title', 'Edit Diary Entry')

@push('styles')
@include('partials._diary-design')
<style>
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media(max-width:640px){ .form-grid { grid-template-columns:1fr; } }

.priority-indicator {
    display:none; padding:9px 12px; border-radius:var(--r-sm);
    font-size:.78rem; font-weight:600; margin-top:6px;
}

.char-counter {
    font-size:.75rem; color:var(--ink-muted); text-align:right; margin-top:4px;
}
.char-counter.warning { color:var(--rose); }

.form-actions {
    display:flex; gap:10px; align-items:center;
    padding:20px 22px; border-top:1.5px solid var(--rule);
    background:var(--paper); border-radius:0 0 var(--r-xl) var(--r-xl);
}

.edit-badge {
    display:inline-flex; align-items:center; gap:6px;
    padding:4px 12px; border-radius:20px;
    background:var(--amber-pale); color:var(--amber);
    border:1px solid #fde68a; font-size:.75rem; font-weight:600;
}
</style>
@endpush

@section('content')
<div class="diary-page">

    {{-- Breadcrumb --}}
    <nav class="diary-topnav" aria-label="Breadcrumb">
        <a href="{{ url('/') }}"><i class="fas fa-home"></i></a>
        <span class="sep">/</span>
        <a href="{{ route('modules.processing.diary.dashboard') }}">Diary</a>
        <span class="sep">/</span>
        <a href="{{ route('modules.processing.diary.list') }}">Entries</a>
        <span class="sep">/</span>
        <a href="{{ route('modules.processing.diary.show', $diaryEntry->id) }}">#{{ $diaryEntry->id }}</a>
        <span class="sep">/</span>
        <span class="current">Edit</span>
    </nav>

    {{-- Page Header --}}
    <div class="diary-page-header">
        <div class="diary-page-header-left">
            <div class="diary-page-icon" style="background:linear-gradient(135deg,#f59e0b,#d97706);">
                <i class="fas fa-edit"></i>
            </div>
            <div>
                <h1 class="diary-page-title">Edit Diary Entry</h1>
                <p class="diary-page-sub">
                    <span class="edit-badge"><i class="fas fa-hashtag"></i> {{ $diaryEntry->id }}</span>
                    &nbsp;{{ $diaryEntry->task_title }}
                </p>
            </div>
        </div>
        <div class="diary-page-header-right">
            <a href="{{ route('modules.processing.diary.show', $diaryEntry->id) }}" class="btn-diary btn-diary-ghost">
                <i class="fas fa-eye"></i> View
            </a>
            <a href="{{ route('modules.processing.diary.list') }}" class="btn-diary btn-diary-ghost">
                <i class="fas fa-arrow-left"></i> Back to List
            </a>
        </div>
    </div>

    {{-- Alerts --}}
    @if(session('success'))
        <div class="diary-alert success" role="alert">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
            <button class="da-close" onclick="this.closest('.diary-alert').remove()">&times;</button>
        </div>
    @endif
    @if(session('error'))
        <div class="diary-alert error" role="alert">
            <i class="fas fa-exclamation-circle"></i>
            <span>{{ session('error') }}</span>
            <button class="da-close" onclick="this.closest('.diary-alert').remove()">&times;</button>
        </div>
    @endif

    <form action="{{ route('modules.processing.diary.update', $diaryEntry->id) }}" method="POST" id="diaryForm">
        @csrf @method('PUT')

        {{-- Core Details --}}
        <div class="diary-card" style="animation:slideUp .45s ease both;">
            <div class="diary-card-header">
                <h2 class="diary-card-title"><i class="fas fa-info-circle" style="color:var(--blue);margin-right:8px;"></i>Core Details</h2>
            </div>
            <div class="diary-card-body">
                <div class="form-grid">
                    <div class="diary-form-group">
                        <label class="diary-form-label" for="date_time">
                            Date &amp; Time <span class="req">*</span>
                        </label>
                        <input type="datetime-local"
                               class="diary-form-control @error('date_time') is-invalid @enderror"
                               id="date_time" name="date_time"
                               data-allow-past="true"
                               value="{{ old('date_time', $diaryEntry->date_time ? $diaryEntry->date_time->format('Y-m-d\TH:i') : '') }}"
                               required>
                        @error('date_time')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="task_title">
                            Task Title <span class="req">*</span>
                        </label>
                        <input type="text"
                               class="diary-form-control @error('task_title') is-invalid @enderror"
                               id="task_title" name="task_title"
                               value="{{ old('task_title', $diaryEntry->task_title) }}"
                               placeholder="Enter task title" required>
                        @error('task_title')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="client_case">Client / Case</label>
                        <input type="text"
                               class="diary-form-control @error('client_case') is-invalid @enderror"
                               id="client_case" name="client_case"
                               value="{{ old('client_case', $diaryEntry->client_case) }}"
                               placeholder="Enter client name or case reference">
                        @error('client_case')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="task_type">
                            Task Type <span class="req">*</span>
                        </label>
                        <select class="diary-form-control @error('task_type') is-invalid @enderror"
                                id="task_type" name="task_type" required>
                            <option value="">Select Task Type</option>
                            <option value="meeting"       {{ old('task_type', $diaryEntry->task_type) == 'meeting'       ? 'selected' : '' }}>Meeting</option>
                            <option value="draft-review"  {{ old('task_type', $diaryEntry->task_type) == 'draft-review'  ? 'selected' : '' }}>Draft Review</option>
                            <option value="call"          {{ old('task_type', $diaryEntry->task_type) == 'call'          ? 'selected' : '' }}>Phone Call</option>
                            <option value="follow-up"     {{ old('task_type', $diaryEntry->task_type) == 'follow-up'     ? 'selected' : '' }}>Follow-up</option>
                            <option value="internal-task" {{ old('task_type', $diaryEntry->task_type) == 'internal-task' ? 'selected' : '' }}>Internal Task</option>
                            <option value="assignment"    {{ old('task_type', $diaryEntry->task_type) == 'assignment'    ? 'selected' : '' }}>Assignment</option>
                            <option value="other"         {{ old('task_type', $diaryEntry->task_type) == 'other'         ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('task_type')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="assigned_to">Assigned To</label>
                        <select class="diary-form-control @error('assigned_to') is-invalid @enderror"
                                id="assigned_to" name="assigned_to">
                            <option value="">Unassigned</option>
                            @foreach(($assignees ?? collect()) as $assignee)
                                <option value="{{ $assignee->id }}"
                                    {{ (string) old('assigned_to', $diaryEntry->assigned_to) === (string) $assignee->id ? 'selected' : '' }}>
                                    {{ $assignee->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('assigned_to')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                        <div class="diary-form-hint">Required when task type is Assignment.</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Classification --}}
        <div class="diary-card" style="animation:slideUp .45s .08s ease both;">
            <div class="diary-card-header">
                <h2 class="diary-card-title"><i class="fas fa-tags" style="color:var(--amber);margin-right:8px;"></i>Classification</h2>
            </div>
            <div class="diary-card-body">
                <div class="form-grid">
                    <div class="diary-form-group">
                        <label class="diary-form-label" for="priority">
                            Priority <span class="req">*</span>
                        </label>
                        <select class="diary-form-control @error('priority') is-invalid @enderror"
                                id="priority" name="priority" required>
                            <option value="">Select Priority</option>
                            <option value="low"    {{ old('priority', $diaryEntry->priority) == 'low'    ? 'selected' : '' }}>Low</option>
                            <option value="medium" {{ old('priority', $diaryEntry->priority) == 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="high"   {{ old('priority', $diaryEntry->priority) == 'high'   ? 'selected' : '' }}>High</option>
                        </select>
                        @error('priority')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                        <div id="priority-indicator" class="priority-indicator"></div>
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="status">
                            Status <span class="req">*</span>
                        </label>
                        <select class="diary-form-control @error('status') is-invalid @enderror"
                                id="status" name="status" required>
                            <option value="">Select Status</option>
                            <option value="pending"     {{ old('status', $diaryEntry->status) == 'pending'     ? 'selected' : '' }}>Pending</option>
                            <option value="in-progress" {{ old('status', $diaryEntry->status) == 'in-progress' ? 'selected' : '' }}>In Progress</option>
                            <option value="completed"   {{ old('status', $diaryEntry->status) == 'completed'   ? 'selected' : '' }}>Completed</option>
                            <option value="deferred"    {{ old('status', $diaryEntry->status) == 'deferred'    ? 'selected' : '' }}>Deferred</option>
                        </select>
                        @error('status')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="category_id">Category</label>
                        <select class="diary-form-control @error('category_id') is-invalid @enderror"
                                id="category_id" name="category_id">
                            <option value="">No Category</option>
                            @foreach(($categories ?? collect()) as $category)
                                <option value="{{ $category->id }}"
                                    {{ (string) old('category_id', $diaryEntry->category_id) === (string) $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="location">Location</label>
                        <select class="diary-form-control @error('location') is-invalid @enderror"
                                id="location" name="location">
                            <option value="">Select Location</option>
                            <option value="office"         {{ old('location', $diaryEntry->location) == 'office'         ? 'selected' : '' }}>Office</option>
                            <option value="courtroom"      {{ old('location', $diaryEntry->location) == 'courtroom'      ? 'selected' : '' }}>Courtroom</option>
                            <option value="online-meeting" {{ old('location', $diaryEntry->location) == 'online-meeting' ? 'selected' : '' }}>Online Meeting</option>
                            <option value="phone-call"     {{ old('location', $diaryEntry->location) == 'phone-call'     ? 'selected' : '' }}>Phone Call</option>
                            <option value="other"          {{ old('location', $diaryEntry->location) == 'other'          ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('location')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="tags">Tags</label>
                        <select class="diary-form-control @error('tags') is-invalid @enderror"
                                id="tags" name="tags[]" multiple size="4">
                            @php
                                $selectedTags = collect(old('tags', $diaryEntry->tags->pluck('id')->all() ?? []))
                                    ->map(fn ($id) => (int) $id);
                            @endphp
                            @foreach(($tags ?? collect()) as $tag)
                                <option value="{{ $tag->id }}" {{ $selectedTags->contains($tag->id) ? 'selected' : '' }}>
                                    {{ $tag->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('tags')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                        <div class="diary-form-hint">Hold Ctrl (Windows) to select multiple tags.</div>
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label">Duration</label>
                        <div style="display:flex;gap:8px;">
                            <select class="diary-form-control" name="duration_hours" style="flex:1;">
                                <option value="">hrs</option>
                                @for($h = 0; $h <= 12; $h++)
                                    <option value="{{ $h }}" {{ old('duration_hours', $durationHours ?? '') == $h ? 'selected' : '' }}>{{ $h }}h</option>
                                @endfor
                            </select>
                            <select class="diary-form-control" name="duration_minutes" style="flex:1;">
                                <option value="">min</option>
                                @foreach ([0, 15, 30, 45] as $m)
                                    <option value="{{ $m }}" {{ old('duration_minutes', $durationMinutes ?? '') == $m ? 'selected' : '' }}>{{ $m }}m</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="diary-form-hint">Leave blank if duration is unknown.</div>
                        @error('duration_hours') <div class="diary-invalid-msg">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>
        </div>

        {{-- Notes --}}
        <div class="diary-card" style="animation:slideUp .45s .16s ease both;">
            <div class="diary-card-header">
                <h2 class="diary-card-title"><i class="fas fa-sticky-note" style="color:var(--emerald);margin-right:8px;"></i>Notes</h2>
            </div>
            <div class="diary-card-body">
                <div class="diary-form-group" style="margin-bottom:0;">
                    <label class="diary-form-label" for="notes">Additional Notes</label>
                    <textarea class="diary-form-control @error('notes') is-invalid @enderror"
                              id="notes" name="notes" rows="5"
                              placeholder="Additional notes or details…">{{ old('notes', $diaryEntry->notes) }}</textarea>
                    @error('notes')
                        <div class="diary-invalid-msg">{{ $message }}</div>
                    @enderror
                    <div class="char-counter"><span id="notes-count">0</span> / 1000</div>
                </div>
            </div>
            <div style="display:flex;gap:10px;align-items:center;padding:20px 22px;border-top:1.5px solid var(--rule);background:var(--paper);border-radius:0 0 var(--r-xl) var(--r-xl);">
                <button type="submit" class="btn-diary btn-diary-primary">
                    <i class="fas fa-save"></i> Update Entry
                </button>
                <a href="{{ route('modules.processing.diary.show', $diaryEntry->id) }}" class="btn-diary btn-diary-ghost">
                    <i class="fas fa-eye"></i> View Details
                </a>
                <a href="{{ route('modules.processing.diary.list') }}" class="btn-diary btn-diary-ghost">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </div>

    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var notesEl = document.getElementById('notes');
    var notesCount = document.getElementById('notes-count');
    if (notesEl && notesCount) {
        notesEl.maxLength = 1000;
        function updateCount() {
            var len = notesEl.value.length;
            notesCount.textContent = len;
            notesCount.parentElement.classList.toggle('warning', len > 900);
        }
        notesEl.addEventListener('input', updateCount);
        updateCount();
    }

    var priorityMap = {
        high:   { bg:'var(--rose-pale)',    color:'#991b1b', text:'🔴 High Priority — Requires immediate attention' },
        medium: { bg:'var(--amber-pale)',   color:'#92400e', text:'🟡 Medium Priority — Address within the week' },
        low:    { bg:'var(--emerald-pale)', color:'#065f46', text:'🟢 Low Priority — Handle when possible' },
    };
    var prioritySel = document.getElementById('priority');
    var priorityInd = document.getElementById('priority-indicator');
    function updatePriority() {
        var val = prioritySel.value;
        if (val && priorityMap[val]) {
            var p = priorityMap[val];
            priorityInd.style.display = 'block';
            priorityInd.style.background = p.bg;
            priorityInd.style.color = p.color;
            priorityInd.textContent = p.text;
        } else {
            priorityInd.style.display = 'none';
        }
    }
    if (prioritySel) { prioritySel.addEventListener('change', updatePriority); updatePriority(); }

    var formDirty = false;
    var form = document.getElementById('diaryForm');
    if (form) {
        form.addEventListener('change', function () { formDirty = true; });
        form.addEventListener('submit', function () { formDirty = false; });
        window.addEventListener('beforeunload', function (e) {
            if (formDirty) { e.preventDefault(); e.returnValue = ''; }
        });
    }
});
</script>
@endpush