@extends('layouts.master')

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

@push('styles')
@include('partials._diary-design')
<style>
/* ── Show page ── */
.show-layout {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:20px;
    align-items:start;
}
@media(max-width:900px) {
    .show-layout { grid-template-columns:1fr; }
}

/* Detail info boxes */
.info-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:20px;
}
@media(max-width:600px){ .info-grid { grid-template-columns:1fr; } }

.info-tile {
    display:flex;
    align-items:flex-start;
    gap:14px;
    padding:16px;
    background:var(--paper);
    border:1.5px solid var(--rule);
    border-radius:var(--r-lg);
    transition:border-color .2s;
}
.info-tile:hover { border-color:var(--rule-strong); }

.info-tile-icon {
    width:38px; height:38px; flex-shrink:0;
    border-radius:var(--r-md);
    display:flex; align-items:center; justify-content:center;
    font-size:.9rem;
}
.it-blue    { background:var(--blue-pale);    color:var(--blue); }
.it-emerald { background:var(--emerald-pale); color:var(--emerald); }
.it-amber   { background:var(--amber-pale);   color:var(--amber); }
.it-rose    { background:var(--rose-pale);    color:var(--rose); }
.it-violet  { background:var(--violet-pale);  color:var(--violet); }
.it-slate   { background:var(--slate-pale);   color:var(--slate); }

.info-tile-label {
    font-size:.7rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.07em; color:var(--ink-muted); margin-bottom:4px;
}
.info-tile-value {
    font-size:.92rem; font-weight:600; color:var(--ink);
    line-height:1.3;
}
.info-tile-sub {
    font-size:.77rem; color:var(--ink-muted); margin-top:2px;
}

/* Notes block */
.notes-block {
    background:var(--paper); border:1.5px solid var(--rule);
    border-radius:var(--r-lg); padding:18px;
    border-left:4px solid var(--blue);
}
.notes-block p {
    font-size:.9rem; color:var(--ink-soft); line-height:1.65;
    margin:0; white-space:pre-wrap;
}

/* Sidebar */
.sidebar-card {
    background:var(--surface); border:1.5px solid var(--rule);
    border-radius:var(--r-lg); overflow:hidden; margin-bottom:14px;
}
.sidebar-card-header {
    padding:13px 16px; background:var(--paper);
    border-bottom:1.5px solid var(--rule);
    font-family:var(--font-serif); font-size:.88rem; font-weight:700; color:var(--ink);
}
.sidebar-card-body { padding:16px; }

/* Quick actions */
.quick-actions { display:flex; flex-direction:column; gap:8px; }

/* Meta table */
.meta-table { width:100%; font-size:.78rem; }
.meta-table td { padding:6px 0; vertical-align:top; }
.meta-table td:first-child { color:var(--ink-muted); font-weight:600; padding-right:12px; white-space:nowrap; }
.meta-table td:last-child { color:var(--ink-soft); }

/* Quick status select */
.quick-status {
    width:100%;
    padding:9px 12px;
    font-family:var(--font-sans); font-size:.85rem; color:var(--ink);
    background:var(--surface); border:1.5px solid var(--rule-strong);
    border-radius:var(--r-md); cursor:pointer;
    transition:border-color .2s;
}
.quick-status:focus { outline:none; border-color:var(--blue); }
</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">#{{ $diaryEntry->id }}</span>
    </nav>

    {{-- Page Header --}}
    <div class="diary-page-header">
        <div class="diary-page-header-left">
            <div class="diary-page-icon"><i class="fas fa-file-alt"></i></div>
            <div>
                <h1 class="diary-page-title">{{ $diaryEntry->task_title }}</h1>
                <p class="diary-page-sub">
                    Entry #{{ $diaryEntry->id }}
                    &nbsp;·&nbsp; {{ $diaryEntry->formatted_date }}
                    &nbsp;·&nbsp; {{ $diaryEntry->formatted_time }}
                </p>
            </div>
        </div>
        <div class="diary-page-header-right">
            <a href="{{ route('modules.processing.diary.edit', $diaryEntry->id) }}" class="btn-diary btn-diary-warning">
                <i class="fas fa-edit"></i> Edit
            </a>
            <a href="{{ route('modules.processing.diary.list') }}" class="btn-diary btn-diary-ghost">
                <i class="fas fa-arrow-left"></i> Back
            </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

    @php
        $priorityBadge = match($diaryEntry->priority) {
            'high'   => 'danger',
            'medium' => 'warning',
            default  => 'muted'
        };
        $statusBadge = match($diaryEntry->status) {
            'completed'   => 'success',
            'in-progress' => 'primary',
            'pending'     => 'warning',
            'deferred'    => 'muted',
            default       => 'muted'
        };
    @endphp

    <div class="show-layout" style="animation:slideUp .45s ease both;">

        {{-- Main content --}}
        <div>
            {{-- Info tiles --}}
            <div class="info-grid">
                <div class="info-tile">
                    <div class="info-tile-icon it-blue"><i class="fas fa-calendar-alt"></i></div>
                    <div>
                        <div class="info-tile-label">Date &amp; Time</div>
                        <div class="info-tile-value">{{ $diaryEntry->formatted_date }}</div>
                        <div class="info-tile-sub">{{ $diaryEntry->formatted_time }}</div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-violet"><i class="fas fa-tag"></i></div>
                    <div>
                        <div class="info-tile-label">Task Type</div>
                        <div class="info-tile-value">{{ ucwords(str_replace('-', ' ', $diaryEntry->task_type)) }}</div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-amber"><i class="fas fa-user"></i></div>
                    <div>
                        <div class="info-tile-label">Client / Case</div>
                        <div class="info-tile-value">{{ $diaryEntry->client_case ?? 'Not specified' }}</div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-slate"><i class="fas fa-map-marker-alt"></i></div>
                    <div>
                        <div class="info-tile-label">Location</div>
                        <div class="info-tile-value">{{ $diaryEntry->location ? ucwords(str_replace('-', ' ', $diaryEntry->location)) : 'Not specified' }}</div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-rose"><i class="fas fa-exclamation-triangle"></i></div>
                    <div>
                        <div class="info-tile-label">Priority</div>
                        <div class="info-tile-value">
                            <span class="dbadge dbadge-{{ $priorityBadge }}">{{ ucfirst($diaryEntry->priority) }}</span>
                        </div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-emerald"><i class="fas fa-check-circle"></i></div>
                    <div>
                        <div class="info-tile-label">Status</div>
                        <div class="info-tile-value">
                            <span class="dbadge dbadge-{{ $statusBadge }}">{{ ucwords(str_replace('-', ' ', $diaryEntry->status)) }}</span>
                        </div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-slate"><i class="fas fa-folder-open"></i></div>
                    <div>
                        <div class="info-tile-label">Category</div>
                        <div class="info-tile-value">{{ $diaryEntry->category?->name ?? 'Uncategorized' }}</div>
                    </div>
                </div>

                <div class="info-tile">
                    <div class="info-tile-icon it-emerald"><i class="fas fa-user-check"></i></div>
                    <div>
                        <div class="info-tile-label">Assigned To</div>
                        <div class="info-tile-value">{{ $diaryEntry->assignee?->name ?? 'Unassigned' }}</div>
                    </div>
                </div>

                @if($diaryEntry->tags && $diaryEntry->tags->isNotEmpty())
                <div class="info-tile">
                    <div class="info-tile-icon it-amber"><i class="fas fa-tags"></i></div>
                    <div>
                        <div class="info-tile-label">Tags</div>
                        <div class="info-tile-value">
                            {{ $diaryEntry->tags->pluck('name')->implode(', ') }}
                        </div>
                    </div>
                </div>
                @endif

                @if($diaryEntry->duration || $diaryEntry->duration_minutes !== null)
                <div class="info-tile">
                    <div class="info-tile-icon it-blue"><i class="fas fa-clock"></i></div>
                    <div>
                        <div class="info-tile-label">Duration</div>
                        <div class="info-tile-value">{{ $diaryEntry->duration_formatted }}</div>
                    </div>
                </div>
                @endif
            </div>

            {{-- Notes --}}
            @if($diaryEntry->notes)
                <div class="diary-card">
                    <div class="diary-card-header">
                        <h2 class="diary-card-title"><i class="fas fa-sticky-note" style="color:var(--blue);margin-right:8px;"></i>Notes</h2>
                    </div>
                    <div class="diary-card-body">
                        <div class="notes-block">
                            <p>{{ $diaryEntry->notes }}</p>
                        </div>
                    </div>
                </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div>
            {{-- Quick Actions --}}
            <div class="sidebar-card">
                <div class="sidebar-card-header"><i class="fas fa-bolt" style="margin-right:7px;color:var(--blue);"></i>Quick Actions</div>
                <div class="sidebar-card-body">
                    <div class="quick-actions">
                        <a href="{{ route('modules.processing.diary.edit', $diaryEntry->id) }}" class="btn-diary btn-diary-warning" style="justify-content:center;">
                            <i class="fas fa-edit"></i> Edit Entry
                        </a>
                        <a href="{{ route('modules.processing.diary.add') }}" class="btn-diary btn-diary-primary" style="justify-content:center;">
                            <i class="fas fa-plus"></i> Add New Entry
                        </a>
                        <a href="{{ route('modules.processing.diary.dashboard') }}" class="btn-diary btn-diary-ghost" style="justify-content:center;">
                            <i class="fas fa-chart-bar"></i> Dashboard
                        </a>
                        <a href="{{ route('modules.processing.diary.calendar') }}" class="btn-diary btn-diary-success" style="justify-content:center;">
                            <i class="fas fa-calendar-alt"></i> Calendar
                        </a>
                    </div>
                </div>
            </div>

            {{-- Entry Metadata --}}
            <div class="sidebar-card">
                <div class="sidebar-card-header"><i class="fas fa-info-circle" style="margin-right:7px;color:var(--ink-muted);"></i>Entry Info</div>
                <div class="sidebar-card-body">
                    <table class="meta-table">
                        <tr>
                            <td>Entry ID</td>
                            <td>#{{ $diaryEntry->id }}</td>
                        </tr>
                        <tr>
                            <td>Created</td>
                            <td>{{ optional($diaryEntry->created_at)->format('M d, Y H:i') ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td>Updated</td>
                            <td>{{ optional($diaryEntry->updated_at)->format('M d, Y H:i') ?? '—' }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            {{-- Quick Status Update --}}
            <div class="sidebar-card">
                <div class="sidebar-card-header"><i class="fas fa-sync-alt" style="margin-right:7px;color:var(--emerald);"></i>Quick Status Update</div>
                <div class="sidebar-card-body">
                    <form action="{{ route('modules.processing.diary.updateStatus', $diaryEntry->id) }}" method="POST">
                        @csrf @method('PATCH')
                        <label class="diary-form-label" for="quick_status" style="margin-bottom:8px;">Change Status</label>
                        <select class="quick-status" id="quick_status" name="status" onchange="this.form.submit()">
                            <option value="pending"     {{ $diaryEntry->status == 'pending'     ? 'selected' : '' }}>Pending</option>
                            <option value="in-progress" {{ $diaryEntry->status == 'in-progress' ? 'selected' : '' }}>In Progress</option>
                            <option value="completed"   {{ $diaryEntry->status == 'completed'   ? 'selected' : '' }}>Completed</option>
                            <option value="deferred"    {{ $diaryEntry->status == 'deferred'    ? 'selected' : '' }}>Deferred</option>
                        </select>
                        <div class="diary-form-hint" style="margin-top:8px;">Changing this auto-saves immediately.</div>
                    </form>
                </div>
            </div>
        </div>

    </div>{{-- /.show-layout --}}

</div>{{-- /.diary-page --}}
@endsection