@extends('layouts.app')
@section('content')
<style>
    .tc-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
    .tc-page-title  { font-size:1.45rem; font-weight:700; color:var(--sb-text-primary,#0f172a); margin:0; }
    .tc-page-sub    { font-size:.8rem; color:var(--sb-text-secondary,#64748b); margin-top:2px; }

    .tc-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; }
    .tc-table { width:100%; border-collapse:collapse; font-size:.845rem; }
    .tc-table thead tr { border-bottom:1px solid var(--sb-border,#e2e8f0); background:#f8fafc; }
    .tc-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; }
    .tc-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
    .tc-table tbody tr:last-child td { border-bottom:0; }
    .tc-table tbody tr:hover { background:#f8fafc; }

    .tc-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:.72rem; font-weight:700; }
    .tc-badge-auto   { background:rgba(100,116,139,.1); color:#475569; }
    .tc-badge-open   { background:rgba(22,163,74,.1); color:#16a34a; }
    .tc-badge-closed { background:rgba(239,68,68,.1); color:#dc2626; }

    .tc-quick-links { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
    .tc-quick-link { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; background:#fff; border:1px solid var(--sb-border,#e2e8f0); border-radius:10px; font-size:.82rem; font-weight:600; color:var(--sb-text-primary,#0f172a); text-decoration:none; transition:all .15s; }
    .tc-quick-link:hover { border-color:var(--sb-primary,#2563eb); color:var(--sb-primary,#2563eb); transform:translateY(-1px); box-shadow:0 4px 12px rgba(37,99,235,.1); }
</style>

<div class="tc-page-header">
    <div>
        <h1 class="tc-page-title">Time Conditions</h1>
        <p class="tc-page-sub">Route calls to different destinations based on time schedules, holidays, and overrides.</p>
    </div>
    <div class="d-flex gap-2 mt-2 mt-md-0">
        <a href="{{ route('applications.timeconditions.create') }}" class="btn btn-primary btn-sm">+ New Time Condition</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

{{-- Quick Links --}}
<div class="tc-quick-links">
    <a href="{{ route('applications.timegroups.index') }}" class="tc-quick-link">
        <i data-lucide="calendar-clock" style="width:16px;height:16px;"></i> Manage Schedules
    </a>
    <a href="{{ route('applications.holiday_calendars.index') }}" class="tc-quick-link">
        <i data-lucide="calendar-days" style="width:16px;height:16px;"></i> Holiday Calendars
    </a>
</div>

<div class="tc-table-card">
    <table class="tc-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Entry Code</th>
                <th>Toggle Code</th>
                <th>Schedule</th>
                <th>Holiday Calendar</th>
                <th class="text-center">Live State</th>
                <th class="text-end">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($items as $tc)
                @php
                    $stateLabel = match ($tc->live_state) {
                        'OPEN' => ['tc-badge-open', 'OPEN (Always In-Hours)'],
                        'CLOSED' => ['tc-badge-closed', 'CLOSED (Always After-Hours)'],
                        default => ['tc-badge-auto', 'AUTO (Following Schedule)'],
                    };
                @endphp
                <tr>
                    <td>
                        <div class="fw-semibold">{{ $tc->name }}</div>
                        @if ($tc->description)
                            <small class="text-secondary">{{ $tc->description }}</small>
                        @endif
                    </td>
                    <td><code>{{ $tc->code }}</code></td>
                    <td>{{ $tc->feature_code ? $tc->feature_code : '—' }}</td>
                    <td>{{ $tc->group?->name ?? '—' }}</td>
                    <td>
                        @if ($tc->use_holidays && $tc->holidayCalendar)
                            {{ $tc->holidayCalendar->name }}
                        @else
                            —
                        @endif
                    </td>
                    <td class="text-center">
                        <span class="tc-badge {{ $stateLabel[0] }}">{{ $stateLabel[1] }}</span>
                    </td>
                    <td class="text-end">
                        <a class="btn btn-outline-primary btn-sm" href="{{ route('applications.timeconditions.edit', $tc->id) }}">Edit</a>
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <div style="color:#94a3b8;">
                            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" class="mb-2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                            <div style="font-size:.85rem;">No time conditions configured yet.</div>
                            <p class="text-secondary small mt-2 mb-3">Create a schedule first, then create a time condition that uses it.</p>
                            <div class="d-flex justify-content-center gap-2">
                                <a href="{{ route('applications.timegroups.create') }}" class="btn btn-outline-secondary btn-sm">1. Create a Schedule</a>
                                <a href="{{ route('applications.timeconditions.create') }}" class="btn btn-primary btn-sm">2. Create Time Condition</a>
                            </div>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

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