@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div class="d-flex align-items-center gap-3">
        <span class="d-inline-block rounded-circle" style="width:18px;height:18px;background:{{ $department->color ?: '#6366f1' }};"></span>
        <div>
            <h4 class="mb-0">{{ $department->name }} <small class="text-secondary">@if($department->code)<code>{{ $department->code }}</code>@endif</small></h4>
            <div class="text-secondary small mt-1">{{ $department->description ?: 'Department statistics' }}</div>
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('applications.departments.edit', $department->id) }}" class="btn btn-outline-primary btn-sm">Edit</a>
        <a href="{{ route('applications.departments.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small">From</label>
                <input type="date" name="from" value="{{ $from }}" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label small">To</label>
                <input type="date" name="to" value="{{ $to }}" class="form-control">
            </div>
            <div class="col-md-2">
                <button class="btn btn-primary w-100">Apply</button>
            </div>
        </form>
    </div>
</div>

<div class="row g-3 mb-3">
    <div class="col-md-3">
        <div class="card"><div class="card-body">
            <div class="text-secondary small">Calls to {{ $department->code ?? 'department' }}</div>
            <h3 class="mb-0">{{ number_format($stats['inbound_to_dept']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card"><div class="card-body">
            <div class="text-secondary small">Answered</div>
            <h3 class="mb-0 text-success">{{ number_format($stats['inbound_answered']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card"><div class="card-body">
            <div class="text-secondary small">Missed</div>
            <h3 class="mb-0 text-danger">{{ number_format($stats['inbound_missed']) }}</h3>
        </div></div>
    </div>
    <div class="col-md-3">
        <div class="card"><div class="card-body">
            <div class="text-secondary small">Avg Talk Time</div>
            <h3 class="mb-0">{{ gmdate('i:s', $stats['avg_billsec']) }}</h3>
        </div></div>
    </div>
</div>

<div class="row g-3">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">Per-member activity</h6>
                @if($stats['member_calls']->isEmpty())
                    <div class="text-secondary small">No members.</div>
                @else
                    <div class="table-responsive">
                        <table class="table table-sm align-middle">
                            <thead>
                                <tr>
                                    <th>Extension</th>
                                    <th class="text-center">Total</th>
                                    <th class="text-center">Answered</th>
                                    <th class="text-center">Missed</th>
                                    <th class="text-center">Avg Talk</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($stats['member_calls'] as $m)
                                    <tr>
                                        <td><code>{{ $m->extension }}</code></td>
                                        <td class="text-center">{{ $m->total }}</td>
                                        <td class="text-center text-success">{{ $m->answered }}</td>
                                        <td class="text-center text-danger">{{ $m->missed }}</td>
                                        <td class="text-center">{{ gmdate('i:s', $m->avg_billsec) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        <div class="card mb-3">
            <div class="card-body">
                <h6 class="mb-3">Busy hours</h6>
                @if($stats['busy_hours']->isEmpty())
                    <div class="text-secondary small">No data.</div>
                @else
                    @php $maxCnt = max($stats['busy_hours']->pluck('cnt')->all() ?: [1]); @endphp
                    <div class="d-flex align-items-end gap-1" style="height:140px">
                        @for($h=0; $h<24; $h++)
                            @php
                                $row = $stats['busy_hours']->firstWhere('hour', $h);
                                $cnt = $row->cnt ?? 0;
                                $pct = $maxCnt > 0 ? ($cnt / $maxCnt * 100) : 0;
                            @endphp
                            <div class="flex-fill text-center" title="{{ $h }}:00 — {{ $cnt }} call(s)">
                                <div class="bg-primary rounded-top" style="height: {{ $pct }}%"></div>
                                <small class="text-secondary" style="font-size:9px">{{ $h }}</small>
                            </div>
                        @endfor
                    </div>
                @endif
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h6 class="mb-3">Top callers</h6>
                @if($stats['top_callers']->isEmpty())
                    <div class="text-secondary small">No data.</div>
                @else
                    <table class="table table-sm">
                        <tbody>
                            @foreach($stats['top_callers'] as $c)
                                <tr>
                                    <td><code>{{ $c->src }}</code><div class="text-secondary small">{{ $c->clid }}</div></td>
                                    <td class="text-end"><span class="badge bg-primary">{{ $c->cnt }}</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection