@extends('layouts.master')

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

@push('styles')
@include('partials._diary-design')
<style>
/* ── List-specific ── */
.filter-bar {
    display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    padding:16px 22px; border-bottom:1.5px solid var(--rule);
    background:var(--paper);
}
.tab-group {
    display:flex; gap:4px; background:var(--paper);
    border:1.5px solid var(--rule); border-radius:var(--r-md); padding:3px;
}
.tab-group a {
    padding:6px 14px; border-radius:7px;
    font-size:.79rem; font-weight:600; text-decoration:none;
    color:var(--ink-muted); transition:all .15s; white-space:nowrap;
}
.tab-group a:hover { background:var(--blue-pale); color:var(--blue); }
.tab-group a.active { background:var(--surface); color:var(--blue); box-shadow:var(--sh-sm); }

.filter-selects { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.filter-selects select {
    padding:6px 30px 6px 10px; font-family:var(--font-sans);
    font-size:.78rem; color:var(--ink); background:var(--surface);
    border:1.5px solid var(--rule-strong); border-radius:var(--r-sm);
    cursor:pointer; transition:border-color .15s; appearance:auto;
}
.filter-selects select:focus { outline:none; border-color:var(--blue); }

/* Search bar */
.list-search-wrap {
    padding:14px 22px; border-bottom:1.5px solid var(--rule);
    display:flex; align-items:center; gap:10px;
}
.list-search-inner { position:relative; flex:1; max-width:400px; }
.list-search-inner .si { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-size:.82rem; pointer-events:none; }
#tableSearch {
    width:100%; padding:9px 36px 9px 32px;
    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); transition:border-color .2s, box-shadow .2s;
}
#tableSearch:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(29,111,206,.1); }
#clearSearch {
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; color:var(--ink-muted);
    font-size:.8rem; padding:0; display:none;
}
#clearSearch:hover { color:var(--rose); }
#search-count { font-size:.75rem; color:var(--ink-muted); font-weight:500; white-space:nowrap; }

/* Bulk toolbar */
.bulk-toolbar {
    display:none; align-items:center; justify-content:space-between;
    padding:10px 22px; background:#fffbeb; border-bottom:1.5px solid #fde68a;
    font-size:.83rem; color:#92400e; font-weight:500;
}
.bulk-toolbar.visible { display:flex; }

/* Empty state */
.empty-state {
    text-align:center; padding:60px 20px;
    font-family:var(--font-sans);
}
.empty-state .es-icon {
    font-size:2.4rem; color:var(--rule-strong);
    margin-bottom:16px; display:block;
}
.empty-state h3 { font-family:var(--font-serif); font-size:1.2rem; color:var(--ink); margin:0 0 8px; }
.empty-state p  { font-size:.84rem; color:var(--ink-muted); margin:0 0 20px; }

  /* Action buttons in table */
  .row-actions { display:flex; gap:5px; }
  .row-act-btn {
      width:30px; height:30px; border-radius:var(--r-sm);
      display:flex; align-items:center; justify-content:center;
      font-size:.75rem; text-decoration:none; border:none; cursor:pointer;
      transition:all .15s;
  }
  .row-act-btn.view    { background:var(--blue-pale);    color:var(--blue); }
  .row-act-btn.edit    { background:var(--amber-pale);   color:var(--amber); }
  .row-act-btn.print   { background:var(--slate-pale);   color:var(--slate); }
  .row-act-btn.complete{ background:#dcfce7; color:#166534; }
  .row-act-btn.delete  { background:var(--rose-pale);    color:var(--rose); }
  .row-act-btn:hover   { filter:brightness(.92); transform:scale(1.08); }

/* Checkbox */
.diary-check {
    width:16px; height:16px; cursor:pointer;
    accent-color:var(--blue);
}

/* Pagination override */
.pagination { display:flex; gap:4px; justify-content:center; margin-top:16px; }
.pagination .page-link {
    width:34px; height:34px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-sm); font-size:.8rem; font-weight:600;
    color:var(--blue); background:var(--surface); border:1.5px solid var(--rule);
    text-decoration:none; transition:all .15s;
}
.pagination .page-link:hover { background:var(--blue-pale); }
.pagination .active .page-link { background:var(--blue); color:#fff; border-color:var(--blue); }
.pagination .disabled .page-link { opacity:.4; pointer-events:none; }
</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>
        <span class="current">Entries</span>
    </nav>

    {{-- Page Header --}}
    <div class="diary-page-header">
        <div class="diary-page-header-left">
            <div class="diary-page-icon"><i class="fas fa-list-ul"></i></div>
            <div>
                <h1 class="diary-page-title">Diary Entries</h1>
                <p class="diary-page-sub">View, filter, and manage all diary records</p>
            </div>
        </div>
        <div class="diary-page-header-right">
            <a href="{{ route('modules.processing.diary.calendar') }}" class="btn-diary btn-diary-success">
                <i class="fas fa-calendar-alt"></i> Calendar
            </a>
            <a href="{{ route('modules.processing.diary.dashboard') }}" class="btn-diary btn-diary-ghost">
                <i class="fas fa-chart-bar"></i> Dashboard
            </a>
            <a href="{{ route('modules.processing.diary.add') }}" class="btn-diary btn-diary-primary">
                <i class="fas fa-plus"></i> Add Entry
            </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

    {{-- Main Card --}}
    <div class="diary-card" style="animation:slideUp .45s ease both;">

        {{-- Filter Tabs + Status/Priority selects --}}
        <div class="filter-bar">
            <div class="tab-group">
                <a href="{{ route('modules.processing.diary.list') }}"
                   class="{{ request()->routeIs('modules.processing.diary.list') ? 'active' : '' }}">All</a>
                <a href="{{ route('modules.processing.diary.today') }}"
                   class="{{ request()->routeIs('modules.processing.diary.today') ? 'active' : '' }}">Today</a>
                <a href="{{ route('modules.processing.diary.upcoming') }}"
                   class="{{ request()->routeIs('modules.processing.diary.upcoming') ? 'active' : '' }}">Upcoming</a>
                <a href="{{ route('modules.processing.diary.overdue') }}"
                   class="{{ request()->routeIs('modules.processing.diary.overdue') ? 'active' : '' }}">Overdue</a>
            </div>
            <div class="filter-selects">
                <select id="statusFilter" title="Filter by status">
                    <option value="">All Statuses</option>
                    <option value="pending"     {{ request('status') == 'pending'     ? 'selected' : '' }}>Pending</option>
                    <option value="in-progress" {{ request('status') == 'in-progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="completed"   {{ request('status') == 'completed'   ? 'selected' : '' }}>Completed</option>
                    <option value="deferred"    {{ request('status') == 'deferred'    ? 'selected' : '' }}>Deferred</option>
                </select>
                <select id="priorityFilter" title="Filter by priority">
                    <option value="">All Priorities</option>
                    <option value="high"   {{ request('priority') == 'high'   ? 'selected' : '' }}>High</option>
                    <option value="medium" {{ request('priority') == 'medium' ? 'selected' : '' }}>Medium</option>
                    <option value="low"    {{ request('priority') == 'low'    ? 'selected' : '' }}>Low</option>
                </select>
            </div>
        </div>

        {{-- Search bar --}}
        <div class="list-search-wrap">
            <div class="list-search-inner">
                <i class="fas fa-search si"></i>
                <input type="text" id="tableSearch" placeholder="Search by title, client, type…" autocomplete="off">
                <button type="button" id="clearSearch" title="Clear"><i class="fas fa-times"></i></button>
            </div>
            <span id="search-count"></span>
        </div>

        {{-- Bulk Toolbar --}}
        <div class="bulk-toolbar" id="bulkToolbar">
            <span><strong id="selectedCount">0</strong> entries selected</span>
            <form id="bulkDeleteForm"
                  action="{{ route('modules.processing.diary.bulkDelete') }}"
                  method="POST"
                  onsubmit="return confirm('Permanently delete selected entries?')">
                @csrf @method('DELETE')
                <div id="bulkIds"></div>
                <button type="submit" class="btn-diary btn-diary-danger" style="font-size:.78rem;padding:6px 14px;">
                    <i class="fas fa-trash"></i> Delete Selected
                </button>
            </form>
        </div>

        {{-- Table --}}
        <div class="diary-table-wrap">
            <table class="diary-table">
                <thead>
                    <tr>
                        <th style="width:36px;cursor:default;">
                            <input type="checkbox" id="selectAll" class="diary-check" title="Select all">
                        </th>
                        <th data-sort="0">Date & Time <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="1">Task Title <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="2">Client/Case <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="3">Type <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="4">Priority <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="5">Status <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="6">Location <i class="fas fa-sort sort-icon"></i></th>
                        <th data-sort="7">Duration <i class="fas fa-sort sort-icon"></i></th>
                        <th style="cursor:default;">Actions</th>
                    </tr>
                </thead>
                <tbody>
@forelse($diaryEntries ?? [] as $entry)
                        @php
                            $isQuickEntry = isset($entry['type']) && $entry['type'] === 'quick';
                            $priorityBadge = match($entry['priority'] ?? $entry->priority ?? 'medium') {
                                'high'   => 'danger',
                                'medium' => 'warning',
                                default  => 'muted'
                            };
                            $statusBadge = match($entry['status'] ?? $entry->status ?? 'pending') {
                                'completed'   => 'success',
                                'in-progress' => 'primary',
                                'pending'     => 'warning',
                                'deferred'    => 'muted',
                                default       => 'muted'
                            };
                            $entry_date = $entry['entry_date'] ?? $entry->date_time ?? $entry->entry_date ?? now();
                            $formatted_date = $entry_date->format('M j');
                            $formatted_time = $entry_date->format('g:i A');
                            $task_title = $entry['title'] ?? $entry->task_title ?? 'Untitled';
                            $client_case = $entry['client_case'] ?? $entry->client_case ?? null;
                            $task_type = $entry['task_type'] ?? $entry->task_type ?? 'general';
                            $priority = $entry['priority'] ?? $entry->priority ?? 'medium';
                            $status = $entry['status'] ?? $entry->status ?? 'pending';
                            $location = $entry['location'] ?? $entry->location ?? null;
                             $duration_formatted = $entry['duration_formatted'] ?? $entry->duration_formatted ?? null;
                             $entry_id = $entry['id'] ?? $entry->id;
                             $entry_type = $isQuickEntry ? 'quick' : 'contextual';
                             $isCompleted = (bool) ($entry['is_completed'] ?? $entry->is_completed ?? false) || (string) $status === 'completed';
                         @endphp
                        <tr data-searchable="{{ strtolower($task_title . ' ' . ($client_case ?? '') . ' ' . $task_type . ' ' . $status) }}">
                            <td><input type="checkbox" class="diary-check row-check" value="{{ $entry_type }}:{{ $entry_id }}"></td>
                            <td>
                                <div style="font-weight:600;font-size:.84rem;">{{ $formatted_date }}</div>
                                <div style="font-size:.75rem;color:var(--ink-muted);">{{ $formatted_time }}</div>
                            </td>
                            <td style="font-weight:500;">{{ $task_title }}</td>
                            <td style="color:var(--ink-soft);">{{ $client_case ?? '—' }}</td>
                            <td>
                                @if($isQuickEntry)
                                    <span class="dbadge dbadge-secondary">Quick</span>
                                @else
                                    <span class="dbadge dbadge-info">{{ ucwords(str_replace('-', ' ', $task_type)) }}</span>
                                @endif
                            </td>
                            <td>
                                <span class="dbadge dbadge-{{ $priorityBadge }}">{{ ucfirst($priority) }}</span>
                            </td>
                            <td>
                                <span class="dbadge dbadge-{{ $statusBadge }}">{{ ucwords(str_replace('-', ' ', $status)) }}</span>
                            </td>
                            <td style="color:var(--ink-soft);">{{ $location ? ucwords(str_replace('-', ' ', $location)) : '—' }}</td>
                             <td style="color:var(--ink-soft);">{{ $duration_formatted ?? '—' }}</td>
                             <td>
                                 <div class="row-actions">
                                     <form action="{{ route('modules.processing.diary.entry.complete', ['type' => $entry_type, 'id' => $entry_id]) }}"
                                           method="POST"
                                           style="display:contents;">
                                         @csrf
                                         @method('PATCH')
                                         <input type="hidden" name="is_completed" value="{{ $isCompleted ? 0 : 1 }}">
                                         <button type="submit" class="row-act-btn complete" title="{{ $isCompleted ? 'Mark as Pending' : 'Mark as Completed' }}">
                                             <i class="fas {{ $isCompleted ? 'fa-rotate-left' : 'fa-check' }}"></i>
                                         </button>
                                     </form>
                                     <a href="{{ route('modules.processing.diary.entry.show', ['type' => $entry_type, 'id' => $entry_id]) }}"
                                        class="row-act-btn view" title="View"><i class="fas fa-eye"></i></a>
                                     <a href="{{ route('modules.processing.diary.entry.edit', ['type' => $entry_type, 'id' => $entry_id]) }}"
                                        class="row-act-btn edit" title="Edit"><i class="fas fa-edit"></i></a>
                                     <a href="{{ route('modules.processing.diary.entry.print', ['type' => $entry_type, 'id' => $entry_id]) }}"
                                        target="_blank"
                                        class="row-act-btn print" title="Print"><i class="fas fa-print"></i></a>
                                     <form action="{{ route('modules.processing.diary.entry.destroy', ['type' => $entry_type, 'id' => $entry_id]) }}"
                                           method="POST"
                                           onsubmit="return confirm('Delete this entry?')"
                                           style="display:contents;">
                                         @csrf @method('DELETE')
                                         <button type="submit" class="row-act-btn delete" title="Delete">
                                             <i class="fas fa-trash"></i>
                                         </button>
                                     </form>
                                 </div>
                             </td>
                         </tr>
                    @empty
                        <tr>
                            <td colspan="10">
                                <div class="empty-state">
                                    <i class="fas fa-book-open es-icon"></i>
                                    <h3>No diary entries found</h3>
                                    <p>Get started by adding your first entry.</p>
                                    <a href="{{ route('modules.processing.diary.add') }}" class="btn-diary btn-diary-primary">
                                        <i class="fas fa-plus"></i> Add Your First Entry
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
@if(isset($diaryEntriesPaginated) && $diaryEntriesPaginated->hasPages())
            <div style="padding:16px 22px;border-top:1.5px solid var(--rule);">
                {{ $diaryEntriesPaginated->links() }}
            </div>
        @endif

    </div>{{-- /.diary-card --}}

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

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    /* ── Search ── */
    var searchInput = document.getElementById('tableSearch');
    var clearBtn    = document.getElementById('clearSearch');
    var tableRows   = document.querySelectorAll('table tbody tr[data-searchable]');
    var searchCount = document.getElementById('search-count');

    function runSearch() {
        var q = searchInput.value.toLowerCase().trim();
        var visible = 0;
        tableRows.forEach(function (row) {
            var match = row.dataset.searchable.includes(q);
            row.style.display = match ? '' : 'none';
            if (match) visible++;
        });
        searchCount.textContent = q ? 'Showing ' + visible + ' of ' + tableRows.length : '';
        clearBtn.style.display = q ? 'block' : 'none';
    }
    searchInput.addEventListener('input', runSearch);
    clearBtn.addEventListener('click', function () {
        searchInput.value = '';
        runSearch();
    });

    /* ── Filter selects ── */
    ['statusFilter', 'priorityFilter'].forEach(function (id) {
        var el = document.getElementById(id);
        if (!el) return;
        el.addEventListener('change', function () {
            var url = new URL(window.location.href);
            var key = id === 'statusFilter' ? 'status' : 'priority';
            this.value ? url.searchParams.set(key, this.value) : url.searchParams.delete(key);
            window.location.href = url.toString();
        });
    });

    /* ── Sorting ── */
    (function () {
        var table   = document.querySelector('.diary-table');
        if (!table) return;
        var tbody   = table.querySelector('tbody');
        var headers = table.querySelectorAll('th[data-sort]');
        var lastCol = -1, asc = true;

        headers.forEach(function (th) {
            th.addEventListener('click', function () {
                var col = parseInt(th.dataset.sort, 10);
                var actualCol = col + 1;
                asc = (lastCol === col) ? !asc : true;
                lastCol = col;
                headers.forEach(function (h) {
                    h.querySelector('.sort-icon').className = 'fas fa-sort sort-icon';
                });
                th.querySelector('.sort-icon').className = asc
                    ? 'fas fa-sort-up sort-icon' : 'fas fa-sort-down sort-icon';
                var rows = Array.from(tbody.querySelectorAll('tr[data-searchable]'));
                rows.sort(function (a, b) {
                    var at = (a.querySelectorAll('td')[actualCol]?.textContent || '').trim().toLowerCase();
                    var bt = (b.querySelectorAll('td')[actualCol]?.textContent || '').trim().toLowerCase();
                    return asc ? at.localeCompare(bt) : bt.localeCompare(at);
                });
                rows.forEach(function (r) { tbody.appendChild(r); });
            });
        });
    })();

    /* ── Bulk select ── */
    var selectAll  = document.getElementById('selectAll');
    var checkboxes = document.querySelectorAll('.row-check');
    var bulkBar    = document.getElementById('bulkToolbar');
    var countEl    = document.getElementById('selectedCount');
    var bulkIds    = document.getElementById('bulkIds');

    function updateBulk() {
        var checked = Array.from(checkboxes).filter(function (c) { return c.checked; });
        countEl.textContent = checked.length;
        bulkBar.classList.toggle('visible', checked.length > 0);
        bulkIds.innerHTML = '';
        checked.forEach(function (c) {
            var inp = document.createElement('input');
            inp.type = 'hidden'; inp.name = 'ids[]'; inp.value = c.value;
            bulkIds.appendChild(inp);
        });
    }

    if (selectAll) {
        selectAll.addEventListener('change', function () {
            checkboxes.forEach(function (c) { c.checked = selectAll.checked; });
            updateBulk();
        });
    }
    checkboxes.forEach(function (c) { c.addEventListener('change', updateBulk); });
});
</script>
@endpush