@extends('layouts.app')
@section('title', 'Maintenance windows')

@section('content')
    <div class="page-head">
        <div><h1>Maintenance windows</h1>
            <p>Suppress false alarms during planned work.</p></div>
        <button type="button" class="btn" data-modal="window-modal">+ Schedule window</button>
    </div>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Title</th><th>Window</th><th>Scope</th><th>Owner</th><th>Status</th><th>Impact</th><th></th></tr>
                    </thead>
                    <tbody>
                    @forelse ($windows as $window)
                        <tr>
                            <td><strong>{{ $window->title }}</strong>
                                <div class="tiny muted">{{ \Illuminate\Support\Str::limit($window->description, 80) }}</div></td>
                            <td class="small nowrap">
                                {{ $window->starts_at->format('d M Y H:i') }}<br>{{ $window->ends_at->format('d M Y H:i') }}
                                @if ($window->is_active)
                                    <span class="badge warning">live now</span>
                                @endif
                            </td>
                            <td class="small">{{ $window->scope_description }}</td>
                            <td class="small">{{ $window->createdBy?->name ?? '—' }}</td>
                            <td><span class="badge {{ status_color($window->status === 'completed' ? 'active' : $window->status) }}">{{ $window->status }}</span></td>
                            <td class="small">{{ $window->impact }}</td>
                            <td class="right nowrap">
                                @if ($window->status === 'scheduled')
                                    <form method="POST" action="{{ route('maintenance.update', $window) }}">@csrf @method('PUT')
                                        <input type="hidden" name="status" value="in_progress">
                                        <button type="submit" class="btn xs secondary">Start</button></form>
                                @elseif ($window->status === 'in_progress')
                                    <form method="POST" action="{{ route('maintenance.update', $window) }}">@csrf @method('PUT')
                                        <input type="hidden" name="status" value="completed">
                                        <button type="submit" class="btn xs success">Complete</button></form>
                                @endif
                                <form method="POST" action="{{ route('maintenance.destroy', $window) }}"
                                      data-confirm="Delete this maintenance window?">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="btn xs danger">Delete</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7">
                            @include('components.empty-state', ['icon' => '&#9874;', 'title' => 'No maintenance windows',
                                'message' => 'Scheduled windows suppress alerts for the affected scope.',
                                'action' => '<button type="button" class="btn sm" data-modal="window-modal">+ Schedule window</button>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal-backdrop" id="window-modal">
        <div class="modal">
            <form method="POST" action="{{ route('maintenance.store') }}">
                @csrf
                <div class="modal-head"><h3>Schedule maintenance</h3>
                    <button type="button" class="modal-close" data-modal-close>&times;</button></div>
                <div class="modal-body">
                    <div class="form-grid cols-1">
                        <div class="field"><label>Title <span class="req">*</span></label>
                            <input type="text" name="title" required placeholder="Firmware upgrade — Accra core router"></div>
                        <div class="form-grid">
                            <div class="field"><label>Starts <span class="req">*</span></label>
                                <input type="datetime-local" name="starts_at" required></div>
                            <div class="field"><label>Ends <span class="req">*</span></label>
                                <input type="datetime-local" name="ends_at" required></div>
                        </div>
                        <div class="field"><label>Scope <span class="req">*</span></label>
                            <select name="scope" required>
                                <option value="site">Site</option>
                                <option value="device">Device</option>
                                <option value="network">Whole network</option>
                            </select></div>
                        <div class="field"><label>Site</label>
                            <select name="site_id">
                                <option value="">Not site-scoped</option>
                                @foreach ($sites as $site)
                                    <option value="{{ $site->id }}">{{ $site->name }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Device</label>
                            <select name="device_id">
                                <option value="">Not device-scoped</option>
                                @foreach ($devices as $device)
                                    <option value="{{ $device->id }}">{{ $device->name }}</option>
                                @endforeach
                            </select></div>
                        <div class="field"><label>Expected impact</label>
                            <input type="text" name="impact" placeholder="Brief customer-facing impact"></div>
                        <div class="field"><label>Description</label>
                            <textarea name="description" rows="3"></textarea></div>
                        <label class="check"><input type="checkbox" name="notify_customers" value="1"> Notify affected customers</label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn secondary" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Schedule window</button>
                </div>
            </form>
        </div>
    </div>
@endsection