@extends('layouts.app')
@section('content')
<style>
    .tg-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
    .tg-page-title  { font-size:1.45rem; font-weight:700; color:var(--sb-text-primary,#0f172a); margin:0; }
    .tg-page-sub    { font-size:.8rem; color:var(--sb-text-secondary,#64748b); margin-top:2px; }
    .tg-table-card { background:#fff; border:1px solid var(--sb-border,#e2e8f0); border-radius:14px; box-shadow:0 2px 10px rgba(15,23,42,.06); overflow:hidden; }
    .tg-table { width:100%; border-collapse:collapse; font-size:.845rem; }
    .tg-table thead tr { border-bottom:1px solid var(--sb-border,#e2e8f0); background:#f8fafc; }
    .tg-table th { padding:10px 14px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; white-space:nowrap; text-align:left; }
    .tg-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
    .tg-table tbody tr:last-child td { border-bottom:0; }
    .tg-table tbody tr:hover { background:#f8fafc; }
</style>

<div class="tg-page-header">
    <div>
        <h1 class="tg-page-title">Time Schedules</h1>
        <p class="tg-page-sub">Define when your business is open. Schedules are used by Time Conditions for call routing.</p>
    </div>
    <div class="d-flex gap-2 mt-2 mt-md-0">
        <a href="{{ route('applications.timeconditions.index') }}" class="btn btn-outline-secondary btn-sm">← Back to Time Conditions</a>
        <a href="{{ route('applications.timegroups.create') }}" class="btn btn-primary btn-sm">+ New Schedule</a>
    </div>
</div>

@foreach (['success', 'info', 'error'] as $k)
    @if (session($k))
        <div class="alert {{ $k === 'error' ? 'alert-danger' : ($k === 'info' ? 'alert-info' : 'alert-success') }} alert-dismissible fade show">
            {{ session($k) }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif
@endforeach

<div class="tg-table-card">
    <table class="tg-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Timezone</th>
                <th class="text-center">Rules</th>
                <th class="text-center">Status</th>
                <th class="text-end">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($timegroups as $tg)
                <tr>
                    <td><strong>{{ $tg->name }}</strong></td>
                    <td><small class="text-secondary">{{ $tg->timezone }}</small></td>
                    <td class="text-center">
                        <span class="badge {{ $tg->rules_count > 0 ? 'bg-primary' : 'bg-secondary' }}">{{ $tg->rules_count }} {{ Str::plural('rule', $tg->rules_count) }}</span>
                    </td>
                    <td class="text-center">
                        @if($tg->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Inactive</span>
                        @endif
                    </td>
                    <td class="text-end">
                        <a href="{{ route('applications.timegroups.edit', $tg->id) }}" class="btn btn-outline-primary btn-sm">Edit</a>
                        <form method="POST" action="{{ route('applications.timegroups.destroy', $tg->id) }}" class="d-inline" onsubmit="return confirm('Delete schedule {{ $tg->name }}?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="5" class="text-center py-5">
                        <div style="color:#94a3b8;">
                            <div style="font-size:.85rem;">No schedules created yet.</div>
                            <a href="{{ route('applications.timegroups.create') }}" class="btn btn-primary btn-sm mt-3">Create your first schedule</a>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

@if($timegroups->hasPages())
    <div class="mt-3">{{ $timegroups->links() }}</div>
@endif
@endsection