@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">Department Performance</h4>
            <div class="text-secondary small">
                <a href="{{ route('reports.index') }}" class="text-decoration-none">Reports</a> &nbsp;›&nbsp; Department Performance
            </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-4 col-md-2">
                    <button class="btn btn-sm btn-primary w-100">Apply</button>
                </div>
            </div>
        </div>
    </form>

    {{-- Summary tiles --}}
    @php
        $tiles = [
            ['label' => 'Departments',  'value' => number_format($summary['departments']), 'color' => '#3b82f6'],
            ['label' => 'Total Calls',  'value' => number_format($summary['total']),       'color' => '#475569'],
            ['label' => 'Answered',     'value' => number_format($summary['answered']),    'color' => '#16a34a'],
            ['label' => 'Answer Rate',  'value' => $summary['answer_rate'] . '%',          'color' => '#0e7490'],
        ];
    @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="row g-3">
        <div class="col-12 col-xl-5">
            <div class="card h-100">
                <div class="card-header bg-white py-2"><strong>Calls by department</strong></div>
                <div class="card-body"><canvas id="chartDept" height="220"></canvas></div>
            </div>
        </div>
        <div class="col-12 col-xl-7">
            <div class="card h-100">
                <div class="card-header bg-white py-2"><strong>Breakdown</strong></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">Department</th>
                                    <th class="text-center">Members</th>
                                    <th class="text-center">Calls</th>
                                    <th class="text-center">In</th>
                                    <th class="text-center">Out</th>
                                    <th class="text-center">Answer&nbsp;%</th>
                                    <th class="text-center">Missed</th>
                                    <th class="text-end pe-3">Talk</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($rows as $r)
                                <tr>
                                    <td class="ps-3 fw-semibold">{{ $r->name }}</td>
                                    <td class="text-center text-secondary">{{ $r->members }}</td>
                                    <td class="text-center">{{ number_format($r->total) }}</td>
                                    <td class="text-center text-secondary">{{ number_format($r->inbound) }}</td>
                                    <td class="text-center text-secondary">{{ number_format($r->outbound) }}</td>
                                    <td class="text-center">
                                        @php $ar = $r->answer_rate; $c = $ar >= 80 ? 'success' : ($ar >= 50 ? 'warning' : 'danger'); @endphp
                                        @if($r->total > 0)
                                            <span class="badge bg-{{ $c }}-subtle text-{{ $c }}">{{ $ar }}%</span>
                                        @else
                                            <span class="text-secondary">—</span>
                                        @endif
                                    </td>
                                    <td class="text-center text-secondary">{{ number_format($r->noanswer) }}</td>
                                    <td class="text-end pe-3 text-secondary">{{ $r->talk_human }}</td>
                                </tr>
                                @empty
                                <tr><td colspan="8" class="text-center text-secondary py-4">No departments configured.</td></tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
<script>
(function () {
    const chart = @json($chart);
    function ready(fn){ if(document.readyState!=='loading'){fn();} else {document.addEventListener('DOMContentLoaded',fn);} }
    ready(function () {
        if (typeof Chart === 'undefined') return;
        new Chart(document.getElementById('chartDept'), {
            type: 'bar',
            data: { labels: chart.labels, datasets: [
                { label:'Total',    data: chart.total,    backgroundColor:'#3b82f6' },
                { label:'Answered', data: chart.answered, backgroundColor:'#16a34a' },
            ]},
            options: { indexAxis:'y', responsive:true, plugins:{legend:{position:'bottom'}}, scales:{x:{beginAtZero:true}} }
        });
    });
})();
</script>
@endpush