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

@section('content')
    <div class="page-head">
        <div><h1>Maintenance windows</h1>
            <p>Suppress alerting on devices that are being worked on, and tell customers in advance.</p></div>
        <div class="row-actions">
            <a href="{{ route('noc') }}" class="btn ghost">&larr; NOC</a>
            <button type="button" class="btn" data-modal="mw-modal">+ Schedule window</button>
        </div>
    </div>

    <div class="card">
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Window</th><th>Type</th><th>Starts</th><th>Ends</th>
                        <th class="num">Devices</th><th>Suppression</th><th>Status</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($windows as $window)
                        @php
                            $inProgress = $window->starts_at->isPast() && $window->ends_at->isFuture();
                            $isDone = $window->ends_at->isPast();
                            $deviceCount = is_array($window->device_ids) ? count($window->device_ids) : 0;
                        @endphp
                        <tr>
                            <td>
                                <strong>{{ $window->title }}</strong>
                                @if ($window->description)
                                    <div class="muted small">{{ Str::limit($window->description, 90) }}</div>
                                @endif
                            </td>
                            <td><span class="chip {{ $window->type === 'emergency' ? 'warn' : '' }}">{{ title_case_words($window->type) }}</span></td>
                            <td class="mono small">{{ $window->starts_at->format('j M Y H:i') }}</td>
                            <td class="mono small">{{ $window->ends_at->format('j M Y H:i') }}</td>
                            <td class="num">{{ $deviceCount }}</td>
                            <td class="small">
                                @if ($window->suppress_alerts)<span class="badge info">alerts muted</span>@endif
                                @if ($window->notify_customers)<span class="badge warn">customers notified</span>@endif
                                @unless ($window->suppress_alerts || $window->notify_customers)
                                    <span class="muted">none</span>
                                @endunless
                            </td>
                            <td>
                                <span class="badge {{ status_color($window->status) }}">{{ title_case_words($window->status) }}</span>
                                @if ($inProgress)<span class="badge warn">in progress</span>@endif
                            </td>
                            <td class="right">
                                @if (! $isDone && $window->status !== 'completed')
                                    <form method="POST" action="{{ route('maintenance.complete', $window) }}"
                                          data-confirm="Mark this window as completed?">
                                        @csrf
                                        <button type="submit" class="btn small ghost">Complete</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="8">
                            @include('components.empty-state', [
                                'title' => 'No maintenance scheduled',
                                'message' => 'Plan a window before taking equipment down for work.',
                            ])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>

            @if ($windows->hasPages())
                {{ $windows->links('partials.pagination') }}
            @endif
        </div>
    </div>

    {{-- Schedule modal --}}
    <div class="modal-backdrop" id="mw-modal">
        <div class="modal wide">
            <div class="modal-head">
                <h3>Schedule a maintenance window</h3>
                <button type="button" class="icon-btn" data-modal-close aria-label="Close">&times;</button>
            </div>
            <form method="POST" action="{{ route('maintenance.store') }}">
                @csrf
                <div class="modal-body">
                    <div class="field">
                        <label for="mw-title">Title</label>
                        <input type="text" id="mw-title" name="title" required maxlength="180"
                               placeholder="Firmware upgrade — ACCRA-CORE-RTR-01">
                    </div>
                    <div class="field">
                        <label for="mw-desc">Description</label>
                        <textarea id="mw-desc" name="description" rows="3" maxlength="5000"
                                  placeholder="RouterOS upgrade from 7.14.3 to 7.15. Expect a 10-minute interruption."></textarea>
                    </div>
                    <div class="form-grid">
                        <div class="field">
                            <label for="mw-type">Type</label>
                            <select id="mw-type" name="type" required>
                                <option value="planned">Planned</option>
                                <option value="emergency">Emergency</option>
                            </select>
                        </div>
                        <div class="field">
                            <label for="mw-start">Starts</label>
                            <input type="datetime-local" id="mw-start" name="starts_at" required>
                        </div>
                        <div class="field">
                            <label for="mw-end">Ends</label>
                            <input type="datetime-local" id="mw-end" name="ends_at" required>
                        </div>
                    </div>

                    <div class="field">
                        <label>Affected devices</label>
                        <div class="checklist">
                            @foreach ($devices as $device)
                                <label class="check">
                                    <input type="checkbox" name="device_ids[]" value="{{ $device->id }}">
                                    <span class="mono small">{{ $device->name }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    <div class="field">
                        <label class="check">
                            <input type="checkbox" name="suppress_alerts" value="1" checked>
                            <span>Suppress alerts for these devices during the window</span>
                        </label>
                        <label class="check">
                            <input type="checkbox" name="notify_customers" value="1">
                            <span>Notify affected customers before the window starts</span>
                        </label>
                    </div>
                </div>
                <div class="modal-foot">
                    <button type="button" class="btn ghost" data-modal-close>Cancel</button>
                    <button type="submit" class="btn">Schedule</button>
                </div>
            </form>
        </div>
    </div>
@endsection