@extends('layouts.app')

@section('title', 'Reminder Management')
@section('page-title', 'Reminder Management')

@push('styles')
<style>
    #reminder-calendar .fc-toolbar-title { font-size: 1rem; font-weight: 600; }
    #reminder-calendar .fc-event         { cursor: pointer; font-size: 0.75rem; }
    #reminder-calendar .fc-daygrid-day-number { font-size: 0.78rem; }
</style>
@endpush

@section('content')

{{-- Summary Cards --}}
<div class="row g-3 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-3 p-3 bg-warning bg-opacity-10">
                    <i class="bi bi-bell fs-4 text-warning"></i>
                </div>
                <div>
                    <div class="text-muted small">Pending</div>
                    <div class="fs-3 fw-bold lh-1">{{ $pendingCount }}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-3 p-3 bg-danger bg-opacity-10">
                    <i class="bi bi-bell-fill fs-4 text-danger"></i>
                </div>
                <div>
                    <div class="text-muted small">Overdue</div>
                    <div class="fs-3 fw-bold lh-1">{{ $overdueCount }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- View tabs --}}
<ul class="nav nav-pills mb-3" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="list-tab-btn" data-bs-toggle="pill"
                data-bs-target="#list-pane" type="button" role="tab">
            <i class="bi bi-list-ul me-1"></i>List
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="calendar-tab-btn" data-bs-toggle="pill"
                data-bs-target="#calendar-pane" type="button" role="tab">
            <i class="bi bi-calendar3 me-1"></i>Calendar
        </button>
    </li>
</ul>

<div class="tab-content">

{{-- ── LIST TAB ─────────────────────────────────────────────────────────────── --}}
<div class="tab-pane fade show active" id="list-pane" role="tabpanel">

    {{-- Filters --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body py-3">
            <form method="GET" action="{{ route('admin.reminders.index') }}" class="row g-2 align-items-end">

                @if(auth()->user()->isAdmin())
                <div class="col-md-3">
                    <label class="form-label small fw-medium mb-1">Assigned To</label>
                    <select name="assigned_to" class="form-select form-select-sm">
                        <option value="">All Staff</option>
                        @foreach($staffList as $staff)
                        <option value="{{ $staff->id }}" {{ request('assigned_to') == $staff->id ? 'selected' : '' }}>
                            {{ $staff->name }}
                        </option>
                        @endforeach
                    </select>
                </div>
                @endif

                <div class="col-md-2">
                    <label class="form-label small fw-medium mb-1">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="pending" {{ $status === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="done"    {{ $status === 'done'    ? 'selected' : '' }}>Done</option>
                        <option value="all"     {{ $status === 'all'     ? 'selected' : '' }}>All</option>
                    </select>
                </div>

                <div class="col-md-2">
                    <label class="form-label small fw-medium mb-1">From Date</label>
                    <input type="date" name="date_from" class="form-control form-control-sm"
                           value="{{ request('date_from') }}">
                </div>

                <div class="col-md-2">
                    <label class="form-label small fw-medium mb-1">To Date</label>
                    <input type="date" name="date_to" class="form-control form-control-sm"
                           value="{{ request('date_to') }}">
                </div>

                <div class="col-auto d-flex gap-2">
                    <button type="submit" class="btn btn-sm btn-primary">
                        <i class="bi bi-search me-1"></i>Filter
                    </button>
                    <a href="{{ route('admin.reminders.index') }}" class="btn btn-sm btn-light">Reset</a>
                </div>

            </form>
        </div>
    </div>

    {{-- Results --}}
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white border-bottom py-3 px-4 d-flex align-items-center justify-content-between">
            <h6 class="fw-semibold mb-0">
                {{ $status === 'done' ? 'Completed' : ($status === 'all' ? 'All Reminders' : 'Pending Reminders') }}
                <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">{{ $reminders->total() }}</span>
            </h6>
        </div>

        @if($reminders->isEmpty())
        <div class="card-body text-center py-5 text-muted">
            <i class="bi bi-bell-slash d-block fs-2 mb-2 opacity-25"></i>
            <p class="small mb-0">No reminders found matching the selected filters.</p>
        </div>
        @else
        <div class="table-responsive">
            <table class="table table-sm table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-4">Message</th>
                        <th>Client / Lead</th>
                        <th>Assigned To</th>
                        <th>Due Date &amp; Time</th>
                        <th>Status</th>
                        <th>Created By</th>
                        @if($status !== 'done')<th></th>@endif
                    </tr>
                </thead>
                <tbody>
                    @foreach($reminders as $reminder)
                    @php
                        $lead      = $reminder->lead;
                        $req       = $lead ? $lead->requirement : null;
                        $client    = $req  ? $req->client       : null;
                        $isOverdue = ! $reminder->is_done && $reminder->remind_at->isPast();
                    @endphp
                    <tr class="{{ $isOverdue ? 'table-warning' : '' }}">
                        <td class="ps-4" style="max-width:280px">
                            <div class="small fw-medium">{{ $reminder->message }}</div>
                        </td>
                        <td class="small">
                            @if($client)
                                <div class="fw-medium">
                                    <a href="{{ route('admin.client.show', $client) }}" class="text-decoration-none text-dark">
                                        {{ $client->full_name }}
                                    </a>
                                </div>
                            @endif
                            @if($lead)
                                <div class="text-muted" style="font-size:0.72rem">
                                    <a href="{{ route('admin.leads.show', $lead) }}" class="text-decoration-none">
                                        <i class="bi bi-funnel me-1"></i>View Lead
                                    </a>
                                    @if($req) · {{ $req->title }} @endif
                                </div>
                            @endif
                        </td>
                        <td class="small">{{ optional($reminder->assignedTo)->name ?? '—' }}</td>
                        <td class="small text-nowrap">
                            {{ $reminder->remind_at->format('d M Y') }}<br>
                            <span class="text-muted">{{ $reminder->remind_at->format('h:i A') }}</span>
                            @if($isOverdue)
                                <span class="badge bg-danger ms-1" style="font-size:0.65rem">Overdue</span>
                            @endif
                        </td>
                        <td>
                            @if($reminder->is_done)
                                <span class="badge bg-success bg-opacity-10 text-success">Done</span>
                                @if($reminder->done_at)
                                <div class="text-muted" style="font-size:0.7rem">
                                    {{ $reminder->done_at->format('d M Y') }}
                                    @if($reminder->doneBy) by {{ $reminder->doneBy->name }} @endif
                                </div>
                                @endif
                            @else
                                <span class="badge bg-warning bg-opacity-10 text-warning">Pending</span>
                            @endif
                        </td>
                        <td class="small text-muted">{{ optional($reminder->createdBy)->name ?? '—' }}</td>
                        @if($status !== 'done')
                        <td>
                            @if(! $reminder->is_done)
                            <form method="POST" action="{{ route('reminders.done', $reminder) }}">
                                @csrf @method('PATCH')
                                <button type="submit" class="btn btn-sm btn-outline-success py-0 px-2">
                                    <i class="bi bi-check-lg me-1"></i>Mark Done
                                </button>
                            </form>
                            @endif
                        </td>
                        @endif
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        @if($reminders->hasPages())
        <div class="card-footer bg-white border-top py-3 px-4">
            {{ $reminders->links() }}
        </div>
        @endif
        @endif
    </div>

</div>{{-- /list-pane --}}

{{-- ── CALENDAR TAB ─────────────────────────────────────────────────────────── --}}
<div class="tab-pane fade" id="calendar-pane" role="tabpanel">
    <div class="card border-0 shadow-sm">
        <div class="card-body p-3 p-md-4">
            <div id="reminder-calendar"></div>
        </div>
    </div>

    {{-- Reminder detail modal --}}
    <div class="modal fade" id="reminder-detail-modal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content border-0 shadow">
                <div class="modal-header py-2 px-3">
                    <h6 class="modal-title fw-semibold mb-0" id="rdm-title" style="font-size:0.875rem"></h6>
                    <button type="button" class="btn-close btn-sm" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body px-3 py-2 small">
                    <div id="rdm-time"   class="text-muted mb-1"></div>
                    <div id="rdm-client" class="mb-1"></div>
                    <div id="rdm-staff"  class="text-muted"></div>
                    <div id="rdm-status" class="mt-2"></div>
                </div>
                <div class="modal-footer py-2 px-3 justify-content-start gap-2">
                    <a id="rdm-lead-link" href="#" class="btn btn-sm btn-primary d-none">
                        <i class="bi bi-funnel me-1"></i>View Lead
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>{{-- /calendar-pane --}}

</div>{{-- /tab-content --}}

@endsection

@push('scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js"></script>
<script>
(function () {
    var calendarEventsUrl = "{{ route('admin.reminders.calendar-events') }}";
    var calendarReady     = false;
    var detailModal       = null;

    document.getElementById('calendar-tab-btn').addEventListener('shown.bs.tab', function () {
        if (calendarReady) return;
        calendarReady = true;
        renderCalendar();
    });

    function renderCalendar() {
        var el = document.getElementById('reminder-calendar');

        var calendar = new FullCalendar.Calendar(el, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left:   'prev,next today',
                center: 'title',
                right:  'dayGridMonth,timeGridWeek',
            },
            height: 'auto',
            events: function (fetchInfo, successCallback, failureCallback) {
                var url = calendarEventsUrl
                    + '?start=' + encodeURIComponent(fetchInfo.startStr)
                    + '&end='   + encodeURIComponent(fetchInfo.endStr);

                fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(function (r) { return r.json(); })
                    .then(successCallback)
                    .catch(failureCallback);
            },
            eventClick: function (info) {
                var ev = info.event;
                var p  = ev.extendedProps;

                document.getElementById('rdm-title').textContent = ev.title;
                document.getElementById('rdm-time').textContent  = ev.start
                    ? ev.start.toLocaleString('en-IN', {
                        day: '2-digit', month: 'short', year: 'numeric',
                        hour: '2-digit', minute: '2-digit',
                      })
                    : '';
                document.getElementById('rdm-client').textContent = p.client  ? 'Client: '   + p.client : '';
                document.getElementById('rdm-staff').textContent  = p.staff   ? 'Assigned: ' + p.staff  : '';
                document.getElementById('rdm-status').innerHTML   = p.is_done
                    ? '<span class="badge bg-success bg-opacity-10 text-success">Done</span>'
                    : (ev.start < new Date()
                        ? '<span class="badge bg-danger bg-opacity-10 text-danger">Overdue</span>'
                        : '<span class="badge bg-warning bg-opacity-10 text-warning">Pending</span>');

                var link = document.getElementById('rdm-lead-link');
                if (p.lead_url) {
                    link.href = p.lead_url;
                    link.classList.remove('d-none');
                } else {
                    link.classList.add('d-none');
                }

                if (! detailModal) {
                    detailModal = new bootstrap.Modal(document.getElementById('reminder-detail-modal'));
                }
                detailModal.show();
            },
            eventDidMount: function (info) {
                var status = info.event.extendedProps.is_done ? 'Done'
                    : (info.event.start < new Date() ? 'Overdue' : 'Pending');
                info.el.setAttribute('title', status + ': ' + info.event.title);
            },
        });

        calendar.render();
    }
}());
</script>
@endpush