@extends('layouts.app')

@section('title', 'Jadwal Absen - ' . $device->name)

@section('content')
<style>
    .dv-form-card {
        background: #fff;
        border-radius: 14px;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 1px 3px rgba(13,43,94,0.06);
        padding: 28px 32px;
        max-width: 760px;
    }

    .dv-form-title { font-size: 18px; font-weight: 700; color: #0D2B5E; margin: 0 0 4px 0; }
    .dv-form-sub { font-size: 12.5px; color: rgba(0,0,0,0.45); margin: 0 0 24px 0; }

    .dv-alert { padding: 11px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 500; margin-bottom: 18px; }
    .dv-alert.success { background: #dcfce7; color: #16a34a; }
    .dv-alert.warning { background: #fef3c7; color: #b45309; }

    .dv-info-box {
        background: #F7F9FC;
        border-radius: 10px;
        padding: 14px 16px;
        font-size: 12px;
        color: rgba(0,0,0,0.55);
        margin-bottom: 20px;
        line-height: 1.6;
    }
    .dv-info-box strong { color: #0D2B5E; }

    .dv-btn-primary { background: #F5B800; color: #0D2B5E; font-weight: 700; font-size: 12.5px; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; display: inline-block; }
    .dv-btn-primary:hover { background: #e0a600; color: #0D2B5E; }

    .dv-btn-ghost { background: transparent; color: #0D2B5E; font-weight: 600; font-size: 11.5px; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(13,43,94,0.2); cursor: pointer; }
    .dv-btn-ghost:hover { background: rgba(13,43,94,0.05); }

    .dv-btn-danger { background: transparent; color: #dc2626; font-weight: 600; font-size: 11.5px; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(220,38,38,0.25); cursor: pointer; }
    .dv-btn-danger:hover { background: rgba(220,38,38,0.06); }

    .dv-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
    .dv-table th {
        text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em;
        color: rgba(0,0,0,0.4); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .dv-table td { padding: 10px; font-size: 12.5px; color: rgba(0,0,0,0.75); border-bottom: 1px solid rgba(0,0,0,0.05); vertical-align: middle; }
    .dv-table tr:last-child td { border-bottom: none; }

    .dv-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; display: inline-block; }
    .dv-badge.synced { background: #dcfce7; color: #16a34a; }
    .dv-badge.pending { background: #fef3c7; color: #b45309; }

    .dv-actions { display: flex; gap: 6px; }
    .dv-empty { font-size: 12.5px; color: rgba(0,0,0,0.4); padding: 24px 0; text-align: center; }
</style>

<div class="dv-form-card">
    <h1 class="dv-form-title">Jadwal Jam Absen</h1>
    <p class="dv-form-sub">{{ $device->name }} ({{ $device->ip_address }})</p>

    @if (session('success'))
        <div class="dv-alert success">{{ session('success') }}</div>
    @endif
    @if (session('warning'))
        <div class="dv-alert warning">{{ session('warning') }}</div>
    @endif

    <div class="dv-info-box">
        Jadwal di sini <strong>khusus device ini</strong> — device lain tidak ikut berubah.
        Di luar jam yang diatur, wajah siswa yang pakai jadwal tersebut <strong>tidak akan dikenali</strong>
        (pintu tidak terbuka), meskipun wajahnya sudah terdaftar.
    </div>

    @if ($schedules->isEmpty())
        <div class="dv-empty">Belum ada jadwal untuk device ini.</div>
    @else
        <table class="dv-table">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Template No.</th>
                    <th>Jam</th>
                    <th>Hari</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach ($schedules as $schedule)
                    <tr>
                        <td>{{ $schedule->name }}</td>
                        <td>{{ $schedule->plan_template_no }}</td>
                        <td>{{ $schedule->begin_time->format('H:i') }} - {{ $schedule->end_time->format('H:i') }}</td>
                        <td>
                            @php
                                $days = $schedule->days ?? \App\Models\DeviceSchedule::ALL_DAYS;
                            @endphp
                            {{ count($days) === 7 ? 'Setiap hari' : implode(', ', $days) }}
                        </td>
                        <td>
                            @if ($schedule->is_synced)
                                <span class="dv-badge synced">Tersinkron</span>
                            @else
                                <span class="dv-badge pending" title="{{ $schedule->last_error }}">Gagal / Belum sync</span>
                            @endif
                        </td>
                        <td>
                            <div class="dv-actions">
                                <form action="{{ route('devices.schedules.sync', [$device, $schedule]) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="dv-btn-ghost">Sync Ulang</button>
                                </form>
                                <form action="{{ route('devices.schedules.destroy', [$device, $schedule]) }}" method="POST"
                                      onsubmit="return confirm('Hapus jadwal &quot;{{ $schedule->name }}&quot;?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="dv-btn-danger">Hapus</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    @endif

    <a href="{{ route('devices.schedules.create', $device) }}" class="dv-btn-primary">+ Tambah Jadwal</a>
</div>
@endsection