@extends('layouts.master')

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

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

.form-section {
    background:var(--surface); border:1.5px solid var(--rule);
    border-radius:var(--r-lg); padding:22px; margin-bottom:18px;
    animation:slideUp .45s ease both;
}
.form-section-title {
    font-family:var(--font-serif); font-size:.95rem; font-weight:700;
    color:var(--ink); margin:0 0 18px; padding-bottom:12px;
    border-bottom:1.5px solid var(--rule);
    display:flex; align-items:center; gap:9px;
}
.form-section-title i { color:var(--blue); font-size:.85rem; }

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

.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);
}

/* select arrow override to keep consistent */
.diary-form-control[type="datetime-local"] { cursor:pointer; }
</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>
        <span class="current">Add Entry</span>
    </nav>

    {{-- Page Header --}}
    <div class="diary-page-header">
        <div class="diary-page-header-left">
            <div class="diary-page-icon"><i class="fas fa-plus"></i></div>
            <div>
                <h1 class="diary-page-title">Add Diary Entry</h1>
                <p class="diary-page-sub">Create a new task, meeting, or diary record</p>
            </div>
        </div>
        <div class="diary-page-header-right">
            <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.store') }}" method="POST" id="diaryForm">
        @csrf

        {{-- Section 1: 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">
                    {{-- Date & Time --}}
                    <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"
                               value="{{ old('date_time', ($selectedDate ?? '') ? (($selectedDate ?? '') . 'T' . ($selectedTime ?? '09:00')) : '') }}"
                               required>
                        @error('date_time')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Task Title --}}
                    <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') }}"
                               placeholder="Enter task title" required>
                        @error('task_title')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Client/Case --}}
                    <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') }}"
                               placeholder="Enter client name or case reference">
                        @error('client_case')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Task Type --}}
                    <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') == 'meeting'       ? 'selected' : '' }}>Meeting</option>
                            <option value="draft-review"  {{ old('task_type') == 'draft-review'  ? 'selected' : '' }}>Draft Review</option>
                            <option value="call"          {{ old('task_type') == 'call'          ? 'selected' : '' }}>Phone Call</option>
                            <option value="follow-up"     {{ old('task_type') == 'follow-up'     ? 'selected' : '' }}>Follow-up</option>
                            <option value="internal-task" {{ old('task_type') == 'internal-task' ? 'selected' : '' }}>Internal Task</option>
                            <option value="assignment"    {{ old('task_type') == 'assignment'    ? 'selected' : '' }}>Assignment</option>
                            <option value="other"         {{ old('task_type') == 'other'         ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('task_type')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Assigned To --}}
                    <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') === (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>

        {{-- Section 2: 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">
                    {{-- Priority --}}
                    <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') == 'low'    ? 'selected' : '' }}>Low</option>
                            <option value="medium" {{ old('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="high"   {{ old('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>

                    {{-- Status --}}
                    <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') == 'pending'     ? 'selected' : '' }}>Pending</option>
                            <option value="in-progress" {{ old('status') == 'in-progress' ? 'selected' : '' }}>In Progress</option>
                            <option value="completed"   {{ old('status') == 'completed'   ? 'selected' : '' }}>Completed</option>
                            <option value="deferred"    {{ old('status') == 'deferred'    ? 'selected' : '' }}>Deferred</option>
                        </select>
                        @error('status')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Category --}}
                    <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') === (string) $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('category_id')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Location --}}
                    <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') == 'office'         ? 'selected' : '' }}>Office</option>
                            <option value="courtroom"      {{ old('location') == 'courtroom'      ? 'selected' : '' }}>Courtroom</option>
                            <option value="online-meeting" {{ old('location') == 'online-meeting' ? 'selected' : '' }}>Online Meeting</option>
                            <option value="phone-call"     {{ old('location') == 'phone-call'     ? 'selected' : '' }}>Phone Call</option>
                            <option value="other"          {{ old('location') == 'other'          ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('location')
                            <div class="diary-invalid-msg">{{ $message }}</div>
                        @enderror
                    </div>

                    {{-- Tags --}}
                    <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">
                            @foreach(($tags ?? collect()) as $tag)
                                <option value="{{ $tag->id }}" {{ collect(old('tags', []))->map('intval')->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>

                    {{-- Duration --}}
                    <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" id="duration_hours" style="flex:1;">
                                <option value="0">0 hrs</option>
                                @for($i = 1; $i <= 12; $i++)
                                    <option value="{{ $i }}" {{ old('duration_hours') == $i ? 'selected' : '' }}>{{ $i }} hr{{ $i > 1 ? 's' : '' }}</option>
                                @endfor
                            </select>
                            <select class="diary-form-control" name="duration_minutes" id="duration_minutes" style="flex:1;">
                                <option value="0">0 min</option>
                                <option value="15"  {{ old('duration_minutes') == 15  ? 'selected' : '' }}>15 min</option>
                                <option value="30"  {{ old('duration_minutes') == 30  ? 'selected' : '' }}>30 min</option>
                                <option value="45"  {{ old('duration_minutes') == 45  ? 'selected' : '' }}>45 min</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Section 3: 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 about the task…">{{ old('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 class="form-actions">
                <button type="submit" class="btn-diary btn-diary-primary">
                    <i class="fas fa-save"></i> Save Entry
                </button>
                <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 () {
    /* ── Pre-fill date from URL or now ── */
    var dtInput = document.getElementById('date_time');
    var urlDate = new URLSearchParams(window.location.search).get('date');
    if (dtInput && !dtInput.value) {
        if (urlDate) {
            dtInput.value = urlDate + 'T09:00';
        } else {
            dtInput.value = new Date().toISOString().slice(0, 16);
        }
    }

    /* ── Char counter ── */
    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();
    }

    /* ── Priority indicator ── */
    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();
    }

    /* ── Dirty-state guard ── */
    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 = ''; }
        });
    }

    /* ── Client-side validation ── */
    if (form) {
        form.addEventListener('submit', function (e) {
            var valid = true;
            form.querySelectorAll('[required]').forEach(function (f) {
                f.classList.remove('is-invalid');
                if (!f.value.trim()) { f.classList.add('is-invalid'); valid = false; }
            });
            var dt = document.getElementById('date_time');
            if (dt && !dt.dataset.allowPast) {
                var chosen = new Date(dt.value), now = new Date();
                now.setSeconds(0, 0);
                if (chosen < now) {
                    dt.classList.add('is-invalid');
                    var fb = dt.nextElementSibling;
                    if (!fb || !fb.classList.contains('diary-invalid-msg')) {
                        fb = document.createElement('div');
                        fb.className = 'diary-invalid-msg';
                        dt.insertAdjacentElement('afterend', fb);
                    }
                    fb.textContent = 'Date & time cannot be in the past.';
                    valid = false;
                }
            }
            if (!valid) e.preventDefault();
        });
    }
});
</script>
@endpush