@extends('layouts.app')
@section('title','Management Alerts')

@push('styles')
<style>
.management-alerts-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}
.management-alert-stat {
    min-width: 0;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
}
.management-alert-stat-label { font-size: .75rem; line-height: 1rem; color: var(--muted-foreground); }
.management-alert-stat-value { margin-top: 3px; font-size: 1.375rem; line-height: 1.6rem; font-weight: 650; letter-spacing: -.025em; color: var(--foreground); }
.management-alert-stat-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 999px; background: var(--muted-foreground); opacity: .45; }
.management-alert-stat-dot.warning { background: var(--warning); opacity: .9; }
.management-alert-stat-dot.danger { background: var(--destructive); opacity: .9; }
.management-alert-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 8px; margin-bottom: 12px; }
.management-alert-filters .mf-input { min-width: 0; width: 100%; }
.management-alert-filters .mf-btn { white-space: nowrap; }
.management-alert-action-stack { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.management-alert-resolution { display: flex; align-items: center; gap: 6px; min-width: 260px; }
.management-alert-resolution .mf-input { min-width: 150px; flex: 1 1 180px; }
.management-alert-settings { margin-top: 16px; }
.management-alert-settings .mf-form-section-body { padding: 14px 16px 16px; }
.management-alert-settings-toggle { margin-bottom: 14px; }
.management-alert-settings-toggle .mf-option { align-items: center; }
.management-alert-settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.management-alert-settings-grid > div { min-width: 0; }
.management-alert-settings-grid .mf-input { width: 100%; }
.management-alert-settings-actions { margin-top: 14px; display: flex; justify-content: flex-end; }
@media (max-width: 1100px) { .management-alert-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .management-alerts-summary, .management-alert-filters, .management-alert-settings-grid { grid-template-columns: 1fr; }
    .management-alert-filters .mf-btn { width: 100%; }
    .management-alert-resolution { min-width: 0; width: 100%; flex-wrap: wrap; }
    .management-alert-resolution .mf-input { flex-basis: 100%; }
    .management-alert-settings-actions .mf-btn { width: 100%; }
}
</style>
@endpush

@section('content')
<x-ui.page-toolbar title="Management Alerts" description="Threshold and workflow alerts generated from permanent branch records." :breadcrumbs="[['label'=>'Dashboard','url'=>route('dashboard')],['label'=>'Management Alerts']]">
    <x-slot:actions>
        @can('calendar.view')<a class="mf-btn" href="{{ route('calendar.index') }}">Calendar</a>@endcan
    </x-slot:actions>
</x-ui.page-toolbar>

<div class="management-alerts-summary">
    <div class="management-alert-stat"><div><div class="management-alert-stat-label">Open alerts</div><div class="management-alert-stat-value">{{ $summary['open'] }}</div></div><span class="management-alert-stat-dot warning" aria-hidden="true"></span></div>
    <div class="management-alert-stat"><div><div class="management-alert-stat-label">Acknowledged</div><div class="management-alert-stat-value">{{ $summary['acknowledged'] }}</div></div><span class="management-alert-stat-dot" aria-hidden="true"></span></div>
    <div class="management-alert-stat"><div><div class="management-alert-stat-label">Critical active</div><div class="management-alert-stat-value">{{ $summary['critical'] }}</div></div><span class="management-alert-stat-dot danger" aria-hidden="true"></span></div>
</div>

<form method="GET" class="management-alert-filters">
    <select class="mf-input" name="status"><option value="">All statuses</option>@foreach($statuses as $status)<option value="{{ $status }}" @selected(request('status')===$status)>{{ str($status)->headline() }}</option>@endforeach</select>
    <select class="mf-input" name="type"><option value="">All alert types</option>@foreach($types as $type)<option value="{{ $type }}" @selected(request('type')===$type)>{{ str($type)->replace('_',' ')->headline() }}</option>@endforeach</select>
    <select class="mf-input" name="branch_id"><option value="">All branches</option>@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected((string)request('branch_id')===(string)$branch->id)>{{ $branch->name }}</option>@endforeach</select>
    <button class="mf-btn mf-btn-primary" type="submit">Apply filters</button>
</form>

<div class="mf-table-frame">
    <table class="mf-table" data-standard-table>
        <thead><tr><th>Alert</th><th>Branch</th><th>Occurred</th><th>Severity</th><th>Status</th><th>Action</th></tr></thead>
        <tbody>
            @forelse($alerts as $alert)
                <tr>
                    <td><div class="font-medium">{{ $alert->title }}</div><div class="mt-0.5 max-w-xl text-xs text-muted-foreground">{{ $alert->message }}</div></td>
                    <td>{{ $alert->branch?->name ?? 'Company' }}</td>
                    <td>{{ $alert->occurred_at->format('d M Y H:i') }}</td>
                    <td><span class="mf-badge {{ $alert->severity==='critical'?'mf-badge-danger':($alert->severity==='warning'?'mf-badge-warning':'mf-badge-info') }}">{{ ucfirst($alert->severity) }}</span></td>
                    <td>{{ str($alert->status)->headline() }}</td>
                    <td>
                        @if($alert->status!=='resolved')
                            <div class="management-alert-action-stack">
                                @if($alert->status==='open')
                                    @can('acknowledge',$alert)
                                    <form method="POST" action="{{ route('management-alerts.acknowledge',$alert) }}">@csrf<button class="mf-btn mf-btn-sm">Acknowledge</button></form>
                                    @endcan
                                @endif
                                @can('resolve',$alert)
                                <form method="POST" action="{{ route('management-alerts.resolve',$alert) }}" class="management-alert-resolution">@csrf<input class="mf-input" name="resolution_note" required placeholder="Resolution note"><button class="mf-btn mf-btn-primary mf-btn-sm">Resolve</button></form>
                                @endcan
                                @if(auth()->user()->cannot('acknowledge', $alert) && auth()->user()->cannot('resolve', $alert))
                                    <span class="text-xs text-muted-foreground">View only</span>
                                @endif
                            </div>
                        @else
                            <span class="text-xs text-muted-foreground">{{ $alert->resolved_at?->format('d M Y H:i') ?? 'Resolved' }}</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="text-center text-muted-foreground">No management alerts match the selected filters.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $alerts->links() }}</div>

@can('management-alerts.settings')
<section class="mf-form-section management-alert-settings">
    <div class="mf-form-section-head"><div><div class="mf-form-section-title">Automation & thresholds</div><div class="mf-form-section-copy">Configure collection automation and the thresholds that generate management alerts. A value of 0 disables amount-based alerts.</div></div></div>
    <div class="mf-form-section-body">
        <form method="POST" action="{{ route('management-alerts.settings') }}" class="mf-form" data-standard-form>@csrf @method('PUT')
            <div class="management-alert-settings-toggle"><label class="mf-option"><input type="checkbox" name="collection_tasks_enabled" value="1" @checked($managementSettings['collection_tasks_enabled'])><span><span class="block font-medium">Automatically create collection tasks</span><span class="mt-0.5 block text-xs text-muted-foreground">Create follow-up work automatically when a loan reaches the configured overdue age.</span></span></label></div>
            <div class="management-alert-settings-grid">
                <div><label class="mf-field-label">Collection task after overdue days</label><input class="mf-input" type="number" min="1" name="collection_task_overdue_days" value="{{ $managementSettings['collection_task_overdue_days'] }}" required></div>
                <div><label class="mf-field-label">Large loan threshold</label><input class="mf-input" type="number" min="0" step="0.01" name="large_loan_threshold" value="{{ $managementSettings['large_loan_threshold'] }}" required></div>
                <div><label class="mf-field-label">Large expense threshold</label><input class="mf-input" type="number" min="0" step="0.01" name="large_expense_threshold" value="{{ $managementSettings['large_expense_threshold'] }}" required></div>
                <div><label class="mf-field-label">Overdue alert after days</label><input class="mf-input" type="number" min="1" name="overdue_alert_days" value="{{ $managementSettings['overdue_alert_days'] }}" required></div>
                <div><label class="mf-field-label">Low account balance threshold</label><input class="mf-input" type="number" min="0" step="0.01" name="low_account_balance_threshold" value="{{ $managementSettings['low_account_balance_threshold'] }}" required></div>
                <div><label class="mf-field-label">Cash shortage threshold</label><input class="mf-input" type="number" min="0" step="0.01" name="cash_shortage_threshold" value="{{ $managementSettings['cash_shortage_threshold'] }}" required></div>
                <div><label class="mf-field-label">Pending approval age (days)</label><input class="mf-input" type="number" min="0" name="pending_approval_days" value="{{ $managementSettings['pending_approval_days'] }}" required></div>
                <div><label class="mf-field-label">Document expiry warning days</label><input class="mf-input" type="number" min="0" name="document_expiry_days" value="{{ $managementSettings['document_expiry_days'] }}" required></div>
            </div>
            <div class="management-alert-settings-actions"><button class="mf-btn mf-btn-primary" type="submit">Save settings</button></div>
        </form>
    </div>
</section>
@endcan
@endsection