@extends('layouts.master')

@section('title', 'Quick Diary Entry - Prolex')

@push('styles')
@include('modules.processing.diary._diary-design')
<style>
.quick-entry-page {
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 28px;
}
.quick-form-grid {
    display: grid;
    gap: 20px;
}
@media (max-width: 640px) {
    .quick-form-grid { grid-template-columns: 1fr; }
}
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1.5px solid var(--rule);
}
</style>
@endpush

@section('content')
<div class="quick-entry-page">
    {{-- Breadcrumb --}}
    <nav class="diary-topnav">
        <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>
        <span class="current">Quick Entry</span>
    </nav>

    {{-- Header --}}
    <div style="display:flex;align-items:center,gap:18px;margin-bottom:32px;">
        <div style="width:54px;height:54px;background:linear-gradient(135deg,var(--blue-light),var(--blue-deep));border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;font-size:1.35rem;color:#fff;box-shadow:var(--sh-blue);">
            <i class="fas fa-lightning-bolt"></i>
        </div>
        <div>
            <h1 style="font-family:var(--font-serif);font-size:1.85rem;font-weight:700;color:var(--ink);line-height:1.15;margin:0 0 5px;">Quick Diary Entry</h1>
            <p style="font-family:var(--font-sans);font-size:.82rem;color:var(--ink-muted);margin:0;">Fast entry for simple tasks. No categories or complex fields needed.</p>
        </div>
    </div>

    {{-- Form --}}
    <form action="{{ route('modules.processing.diary.quick-store') }}" method="POST" id="quickForm">
        @csrf

        <div class="diary-card">
            <div class="diary-card-body">
                <div class="quick-form-grid">
                    <div class="diary-form-group">
                        <label class="diary-form-label" for="entry_date">Date <span class="req">*</span></label>
                        <input type="date" class="diary-form-control @error('entry_date') is-invalid @enderror" id="entry_date" name="entry_date" value="{{ old('entry_date', today()) }}" required>
                        @error('entry_date') <div class="diary-invalid-msg">{{ $message }}</div> @enderror
                    </div>

                    <div class="diary-form-group">
                        <label class="diary-form-label" for="task_type">Task Type</label>
                        <select class="diary-form-control @error('task_type') is-invalid @enderror" id="task_type" name="task_type">
                            <option value="">Select Type</option>
                            <option value="meeting" {{ old('task_type') == 'meeting' ? 'selected' : '' }}>Meeting</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="task" {{ old('task_type') == 'task' ? 'selected' : '' }}>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>

                    <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="Brief task description" required maxlength="255">
                        @error('task_title') <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="">Me</option>
                            @foreach($assignees as $assignee)
                                <option value="{{ $assignee->id }}" {{ old('assigned_to') == $assignee->id ? 'selected' : '' }}>
                                    {{ $assignee->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('assigned_to') <div class="diary-invalid-msg">{{ $message }}</div> @enderror
                    </div>

                    <div class="diary-form-group" style="grid-column: 1 / -1;">
                        <label class="diary-form-label" for="notes">Notes (optional)</label>
                        <textarea class="diary-form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="4" placeholder="Any additional details (max 1000 chars)" maxlength="1000">{{ old('notes') }}</textarea>
                        @error('notes') <div class="diary-invalid-msg">{{ $message }}</div> @enderror
                        <div class="char-counter" style="font-size:.75rem;color:var(--ink-muted);text-align:right;margin-top:4px;"><span id="notes-count">0</span>/1000</div>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn-diary btn-diary-primary" style="flex:1;">
                    <i class="fas fa-lightning-bolt"></i> Save Quick Entry
                </button>
                <a href="{{ route('modules.processing.diary.dashboard') }}" class="btn-diary btn-diary-ghost">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Pre-fill today
    const dateField = document.getElementById('entry_date');
    if (dateField && !dateField.value) {
        dateField.value = new Date().toISOString().split('T')[0];
    }

    // Char counter
    const notesField = document.getElementById('notes');
    const countSpan = document.getElementById('notes-count');
    if (notesField && countSpan) {
        notesField.addEventListener('input', function() {
            countSpan.textContent = this.value.length;
        });
    }

    // Form validation
    document.getElementById('quickForm').addEventListener('submit', function(e) {
        const required = this.querySelectorAll('[required]');
        let valid = true;
        required.forEach(field => {
            field.classList.remove('is-invalid');
            if (!field.value.trim()) {
                field.classList.add('is-invalid');
                valid = false;
            }
        });
        if (!valid) e.preventDefault();
    });
});
</script>
@endpush