@extends('layouts.master')

@section('title', 'Diary - ')

@push('styles')
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
/* ═══ DIARY DESIGN SYSTEM ═══ */
:root {
    --ink:        #0f1923;
    --ink-soft:   #3a4a5c;
    --ink-muted:  #7a8fa6;
    --paper:      #fafcfe;
    --surface:    #ffffff;
    --rule:       #dce8f2;
    --rule-strong:#b8d0e8;

    --blue:       #1d6fce;
    --blue-light: #2d87f0;
    --blue-pale:  #e8f2fd;
    --blue-deep:  #124fa0;

    --amber:      #d97706;
    --amber-pale: #fef3cd;
    --rose:       #dc2626;
    --rose-pale:  #fee2e2;
    --emerald:    #059669;
    --emerald-pale:#d1fae5;
    --slate:      #64748b;
    --slate-pale: #f1f5f9;

    --font-serif: 'Lora', Georgia, serif;
    --font-sans:  'Outfit', sans-serif;

    --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 22px;
    --sh-sm: 0 1px 4px rgba(15,25,35,.07);
    --sh-md: 0 4px 16px rgba(15,25,35,.09);
    --sh-lg: 0 10px 36px rgba(15,25,35,.12);
    --sh-blue: 0 6px 22px rgba(29,111,206,.22);
}

/* ─── BREADCRUMB / TOP NAV ─── */
.diary-topnav {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 500;
    color: var(--ink-muted);
    margin-bottom: 28px;
    letter-spacing: .02em;
}
.diary-topnav a {
    color: var(--blue);
    text-decoration: none;
    transition: color .15s;
}
.diary-topnav a:hover { color: var(--blue-deep); }
.diary-topnav .sep { opacity: .45; }
.diary-topnav .current { color: var(--ink-soft); font-weight: 600; }

/* ─── PAGE WRAPPER ─── */
.diary-hub {
    max-width: 680px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

/* ─── PAGE HEADER ─── */
.hub-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 32px;
    animation: slideUp .5s ease both;
}
.hub-icon {
    width: 54px; height: 54px; flex-shrink: 0;
    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);
}
.hub-title {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -.015em;
    margin: 0 0 5px;
}
.hub-sub {
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--ink-muted);
    font-weight: 400;
}

/* ─── SEARCH ─── */
.hub-search-wrap {
    position: relative;
    margin-bottom: 24px;
    animation: slideUp .5s .07s ease both;
}
.hub-search-wrap .search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--ink-muted);
    font-size: .85rem;
    pointer-events: none;
}
#searchInput {
    width: 100%;
    padding: 11px 14px 11px 38px;
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 400;
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--rule-strong);
    border-radius: var(--r-md);
    transition: border-color .2s, box-shadow .2s;
    box-shadow: var(--sh-sm);
}
#searchInput::placeholder { color: var(--ink-muted); }
#searchInput:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(29,111,206,.12), var(--sh-sm);
}

/* ─── OPTION CARDS ─── */
.option-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--surface);
    border: 1.5px solid var(--rule);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--ink);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .15s;
    box-shadow: var(--sh-sm);
    animation: slideUp .5s ease both;
}
.option-item:nth-child(1) { animation-delay: .1s; }
.option-item:nth-child(2) { animation-delay: .17s; }
.option-item:nth-child(3) { animation-delay: .24s; }

.option-item:hover {
    border-color: var(--blue);
    box-shadow: var(--sh-md), 0 0 0 3px rgba(29,111,206,.08);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--ink);
}
.option-item:active { transform: translateY(0); }

.option-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    transition: transform .2s;
}
.option-item:hover .option-icon { transform: scale(1.08); }

.opt-add    .option-icon { background: var(--blue-pale);    color: var(--blue); }
.opt-manage .option-icon { background: var(--slate-pale);   color: var(--slate); }
.opt-cal    .option-icon { background: var(--emerald-pale); color: var(--emerald); }
.opt-dash   .option-icon { background: var(--amber-pale);   color: var(--amber); }

.option-text { flex: 1; }
.option-label {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 2px;
    display: block;
}
.option-desc {
    font-family: var(--font-sans);
    font-size: .78rem;
    color: var(--ink-muted);
    font-weight: 400;
}
.option-arrow {
    color: var(--rule-strong);
    font-size: .8rem;
    transition: transform .2s, color .2s;
}
.option-item:hover .option-arrow {
    transform: translateX(4px);
    color: var(--blue);
}

/* Left accent bar on hover */
.option-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--blue);
    border-radius: var(--r-sm) 0 0 var(--r-sm);
    transform: scaleY(0);
    transition: transform .2s ease;
    transform-origin: center;
}
.option-item:hover::before { transform: scaleY(1); }

/* Ripple */
.option-item .ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: rippleAnim 550ms linear;
    background: rgba(29,111,206,.12);
    pointer-events: none;
}
@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* No results */
#noResults {
    display: none;
    text-align: center;
    padding: 32px 0;
    font-family: var(--font-sans);
    color: var(--ink-muted);
    font-size: .88rem;
}

/* Animations */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Alerts */
.diary-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: .84rem;
    margin-bottom: 18px;
    animation: slideUp .4s ease both;
}
.diary-alert.success { background: var(--emerald-pale); color: #065f46; border: 1px solid #a7f3d0; }
.diary-alert.error   { background: var(--rose-pale);    color: #991b1b; border: 1px solid #fca5a5; }
.diary-alert .close-btn {
    margin-left: auto; background: none; border: none;
    cursor: pointer; color: inherit; opacity: .6; font-size: .9rem; padding: 0;
}
.diary-alert .close-btn:hover { opacity: 1; }
</style>
@endpush

@section('content')
<div class="diary-hub">
    <div class="alert alert-info" role="alert">
        Redirecting to the Diary Dashboard… If you are not redirected,
        <a href="{{ route('modules.processing.diary.dashboard') }}" class="alert-link">click here</a>.
    </div>

    {{-- Breadcrumb --}}
    <nav class="diary-topnav" aria-label="Breadcrumb">
        <a href="{{ url('/') }}"><i class="fas fa-home"></i></a>
        <span class="sep">/</span>
        <span class="current">Diary</span>
    </nav>

    {{-- Alerts --}}
    @if(session('success'))
        <div class="diary-alert success" role="alert">
            <i class="fas fa-check-circle"></i>
            <span>{{ session('success') }}</span>
            <button class="close-btn" onclick="this.closest('.diary-alert').remove()" aria-label="Dismiss">&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="close-btn" onclick="this.closest('.diary-alert').remove()" aria-label="Dismiss">&times;</button>
        </div>
    @endif

    {{-- Header --}}
    <div class="hub-header">
        <div class="hub-icon"><i class="fas fa-book-open"></i></div>
        <div>
            <h1 class="hub-title">Diary Management</h1>
            <p class="hub-sub">Manage tasks, schedule entries, and track your diary</p>
        </div>
    </div>

    {{-- Search --}}
    <div class="hub-search-wrap">
        <i class="fas fa-search search-icon"></i>
        <input
            type="search"
            id="searchInput"
            placeholder="Search diary options…"
            aria-label="Search diary options"
            autocomplete="off"
        />
    </div>

    {{-- Options --}}
    <div class="option-list" role="list" id="optionList">


        <button class="option-item opt-add" role="listitem" tabindex="0" onclick="showAddEntryModal()" data-label="Add Diary Entry">
            <div class="option-icon"><i class="fas fa-plus"></i></div>
            <div class="option-text">
                <span class="option-label">Add Diary Entry</span>
                <span class="option-desc">Choose Contextual (full) or Quick (simple) entry</span>
            </div>
            <i class="fas fa-chevron-right option-arrow"></i>
        </button>

        {{-- Add Entry Modal --}}
        <div class="modal fade" id="addEntryModal" tabindex="-1" aria-labelledby="addEntryModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-0">
                        <h5 class="modal-title" id="addEntryModalLabel">
                            <i class="fas fa-plus-circle text-primary me-2"></i>Add New Entry
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body text-center py-4">
                        <div class="row g-4">
                            <div class="col-md-6">
                                <a href="{{ route('modules.processing.diary.add') }}" class="btn btn-outline-primary w-100 h-100 p-4 rounded-3 text-decoration-none d-flex flex-column align-items-center" style="min-height: 120px;">
                                    <i class="fas fa-align-left fs-2 mb-3 text-primary"></i>
                                    <strong>Contextual Entry</strong>
                                    <small class="text-muted mt-1">Full form with categories, tags, priority, duration</small>
                                </a>
                            </div>
                            <div class="col-md-6">
                                <a href="{{ route('modules.processing.diary.quick-create') }}" class="btn btn-primary w-100 h-100 p-4 rounded-3 text-decoration-none d-flex flex-column align-items-center" style="min-height: 120px;">
                                    <i class="fas fa-lightning-bolt fs-2 mb-3"></i>
                                    <strong>Quick Entry</strong>
                                    <small class="text-white-50 mt-1">Date, type, title, assignee, notes (5 fields only)</small>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <a href="{{ route('modules.processing.diary.list') }}"
           class="option-item opt-manage" role="listitem" tabindex="0"
           data-label="Manage Diary Entries">
            <div class="option-icon"><i class="fas fa-list-ul"></i></div>
            <div class="option-text">
                <span class="option-label">Manage Diary Entries</span>
                <span class="option-desc">View, search, filter, and bulk-manage all entries</span>
            </div>
            <i class="fas fa-chevron-right option-arrow"></i>
        </a>

        <a href="{{ route('modules.processing.diary.calendar') }}"
           class="option-item opt-cal" role="listitem" tabindex="0"
           data-label="Calendar View">
            <div class="option-icon"><i class="fas fa-calendar-alt"></i></div>
            <div class="option-text">
                <span class="option-label">Calendar View</span>
                <span class="option-desc">Browse entries on an interactive monthly calendar</span>
            </div>
            <i class="fas fa-chevron-right option-arrow"></i>
        </a>

        <a href="{{ route('modules.processing.diary.dashboard') }}"
           class="option-item opt-dash" role="listitem" tabindex="0"
           data-label="Dashboard">
            <div class="option-icon"><i class="fas fa-chart-bar"></i></div>
            <div class="option-text">
                <span class="option-label">Dashboard</span>
                <span class="option-desc">Analytics, stats, and an overview of diary activity</span>
            </div>
            <i class="fas fa-chevron-right option-arrow"></i>
        </a>

    </div>

    <div id="noResults">
        <i class="fas fa-search" style="font-size:1.4rem;margin-bottom:8px;display:block;"></i>
        No options match your search.
    </div>

</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Remove auto-redirect to keep modal working
    // window.location.href = '{{ route('modules.processing.diary.dashboard') }}';

    // Modal function
    window.showAddEntryModal = function() {
        var modal = new bootstrap.Modal(document.getElementById('addEntryModal'));
        modal.show();
    };

    // Ripple effect
    document.querySelectorAll('.option-item').forEach(function (item) {
        item.addEventListener('click', function (e) {
            if (e.target.closest('a')) return; // Skip if clicking link
            
            var ripple = document.createElement('span');
            ripple.classList.add('ripple');
            this.appendChild(ripple);
            var rect = this.getBoundingClientRect();
            var size = Math.max(rect.width, rect.height);
            ripple.style.cssText = 'width:' + size + 'px;height:' + size + 'px;left:' + (e.clientX - rect.left - size/2) + 'px;top:' + (e.clientY - rect.top - size/2) + 'px';
            ripple.addEventListener('animationend', function () { ripple.remove(); });
        });
    });

    // Search
    var input = document.getElementById('searchInput');
    var items = document.querySelectorAll('.option-item');
    var noRes = document.getElementById('noResults');

    if (input) {
        input.addEventListener('input', function () {
            var q = this.value.toLowerCase().trim();
            var visible = 0;
            items.forEach(function (item) {
                var label = (item.dataset.label || item.textContent).toLowerCase();
                var show = !q || label.includes(q);
                item.style.display = show ? '' : 'none';
                if (show) visible++;
            });
            noRes.style.display = (!visible && q) ? 'block' : 'none';
        });
    }
});
</script>
@endpush