@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
        <div>
            <h4 class="mb-1">Missed Calls &amp; Callbacks</h4>
            <div class="text-secondary small">
                <a href="{{ route('reports.index') }}" class="text-decoration-none">Reports</a> &nbsp;›&nbsp; Missed Calls
            </div>
        </div>
    </div>

    {{-- Filters --}}
    <form method="GET" class="card mb-3">
        <div class="card-body py-3">
            @include('reports._date-presets')
            <div class="row g-2 align-items-end">
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">From</label>
                    <input type="date" name="from" value="{{ $from }}" class="form-control form-control-sm">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">To</label>
                    <input type="date" name="to" value="{{ $to }}" class="form-control form-control-sm">
                </div>
                <div class="col-6 col-md-3">
                    <label class="form-label small fw-semibold mb-1">Department</label>
                    <select name="department" class="form-select form-select-sm">
                        <option value="">All</option>
                        @foreach($departments as $d)
                            <option value="{{ $d->id }}" {{ (string)$department === (string)$d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-4 col-md-2">
                    <label class="form-label small fw-semibold mb-1">Status</label>
                    <select name="status" class="form-select form-select-sm">
                        <option value="" {{ $status === '' ? 'selected' : '' }}>All</option>
                        <option value="outstanding" {{ $status === 'outstanding' ? 'selected' : '' }}>Outstanding</option>
                        <option value="resolved" {{ $status === 'resolved' ? 'selected' : '' }}>Resolved</option>
                    </select>
                </div>
                <div class="col-2 col-md-1">
                    <button class="btn btn-sm btn-primary w-100">Go</button>
                </div>
            </div>
        </div>
    </form>

    {{-- KPI tiles --}}
    @php
        $tiles = [
            ['label' => 'Callers Missed',  'value' => number_format($kpis['callers']),     'color' => '#3b82f6'],
            ['label' => 'Outstanding',     'value' => number_format($kpis['outstanding']), 'color' => '#dc2626'],
            ['label' => 'Resolved',        'value' => number_format($kpis['resolved']),    'color' => '#16a34a'],
            ['label' => 'Total Attempts',  'value' => number_format($kpis['attempts']),    'color' => '#475569'],
        ];
    @endphp
    <div class="row g-3 mb-3">
        @foreach($tiles as $t)
        <div class="col-6 col-md-3">
            <div class="card h-100"><div class="card-body py-3">
                <div class="text-secondary small">{{ $t['label'] }}</div>
                <div class="fw-bold" style="font-size:1.5rem;color:{{ $t['color'] }};">{{ $t['value'] }}</div>
            </div></div>
        </div>
        @endforeach
    </div>

    <div class="card">
        <div class="card-header bg-white py-2 d-flex justify-content-between align-items-center">
            <strong>Missed callers</strong>
            <span class="text-secondary small">Newest first · grouped by caller</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0 align-middle">
                    <thead>
                        <tr>
                            <th class="ps-3">Caller</th>
                            <th>Name</th>
                            <th>Called</th>
                            <th class="text-center">Attempts</th>
                            <th>First missed</th>
                            <th>Last missed</th>
                            <th>Status</th>
                            <th class="pe-3">Resolved by</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($rows as $r)
                        <tr class="missed-row" style="cursor:pointer;"
                            data-number="{{ $r->number }}"
                            data-name="{{ $r->name }}">
                            <td class="ps-3">
                                <span class="text-decoration-none fw-semibold text-primary">
                                    <i data-lucide="search" style="width:13px;height:13px;"></i> {{ $r->number }}
                                </span>
                            </td>
                            <td>{{ $r->name !== '' ? $r->name : '—' }}</td>
                            <td class="text-secondary">{{ $r->called }}</td>
                            <td class="text-center">
                                @if($r->attempts > 1)
                                    <span class="badge bg-warning-subtle text-warning">{{ $r->attempts }}</span>
                                @else
                                    {{ $r->attempts }}
                                @endif
                            </td>
                            <td class="text-secondary small">{{ \Illuminate\Support\Carbon::parse($r->first_at)->format('d M H:i') }}</td>
                            <td class="text-secondary small">{{ \Illuminate\Support\Carbon::parse($r->last_at)->format('d M H:i') }}</td>
                            <td>
                                @if($r->status === 'outstanding')
                                    <span class="badge bg-danger-subtle text-danger">Outstanding</span>
                                @elseif($r->status === 'got_through')
                                    <span class="badge bg-success-subtle text-success">Got through</span>
                                @else
                                    <span class="badge bg-info-subtle text-info">Called back</span>
                                @endif
                            </td>
                            <td class="pe-3 small text-secondary">
                                @if($r->resolved_by)
                                    <span class="font-monospace">{{ $r->resolved_by }}</span>
                                    <span class="d-block" style="font-size:.72rem;">{{ \Illuminate\Support\Carbon::parse($r->resolved_at)->format('d M H:i') }}</span>
                                @else
                                    —
                                @endif
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="8" class="text-center text-secondary py-4">No missed calls for this period. 🎉</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- Drill-down modal --}}
<div class="modal fade" id="missedDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="missedDetailTitle">Caller detail</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" id="missedDetailBody">
                <div class="text-center text-secondary py-4">Loading…</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary btn-sm" id="missedCallBackBtn">
                    <i data-lucide="phone-outgoing" style="width:14px;height:14px;vertical-align:-2px;"></i> Call back from my extension
                </button>
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const fromVal   = @json($from);
    const toVal     = @json($to);
    const detailUrl = "{{ route('reports.missed-calls.detail') }}";
    const modalEl   = document.getElementById('missedDetailModal');
    if (!modalEl) return;
    const bodyEl  = document.getElementById('missedDetailBody');
    const titleEl = document.getElementById('missedDetailTitle');
    let currentNumber = null;

    function getModal() {
        if (typeof bootstrap === 'undefined') return null;
        return bootstrap.Modal.getOrCreateInstance(modalEl);
    }

    document.querySelectorAll('.missed-row').forEach(function (row) {
        row.addEventListener('click', function () {
            currentNumber = this.dataset.number;
            const nm = (this.dataset.name && this.dataset.name !== '') ? this.dataset.name : currentNumber;
            titleEl.textContent = nm + ' · ' + currentNumber;
            bodyEl.innerHTML = '<div class="text-center text-secondary py-4">Loading…</div>';
            const m = getModal();
            if (m) m.show();
            const url = detailUrl + '?number=' + encodeURIComponent(currentNumber)
                + '&from=' + encodeURIComponent(fromVal) + '&to=' + encodeURIComponent(toVal);
            fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(function (r) { return r.text(); })
                .then(function (html) {
                    bodyEl.innerHTML = html;
                    if (window.lucide && typeof window.lucide.createIcons === 'function') window.lucide.createIcons();
                })
                .catch(function () {
                    bodyEl.innerHTML = '<div class="text-danger text-center py-4">Could not load detail.</div>';
                });
        });
    });

    const cbBtn = document.getElementById('missedCallBackBtn');
    if (cbBtn) {
        cbBtn.addEventListener('click', function () {
            if (currentNumber && typeof clickToDial === 'function') {
                clickToDial(currentNumber);
            } else if (currentNumber) {
                alert('Call back: ' + currentNumber);
            }
        });
    }
});
</script>
@endsection