@extends('layouts.app')

@section('title', 'Log Gangguan & Off-Air')

@section('page_header')
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-2">
    <div>
        <h4 class="mb-0 fw-bold text-dark d-flex align-items-center gap-2">
            <i class="fa-solid fa-triangle-exclamation text-danger"></i> Log Gangguan & Kejadian Off-Air
        </h4>
        <small class="text-muted">Pencatatan insiden siaran mati (off-air), pemadaman PLN, kerusakan modul, dan investigasi tindakan teknis</small>
    </div>
    <a href="{{ route('incidents.create') }}" class="btn btn-danger">
        <i class="fa-solid fa-plus me-1"></i> Catat Insiden Off-Air Baru
    </a>
</div>
@endsection

@section('content')
<div class="card card-engineering">
    <div class="card-header">
        <div>
            <i class="fa-solid fa-list-check me-2 text-danger"></i>
            <strong>Daftar Laporan Gangguan Pemancar</strong>
        </div>
        <span class="badge bg-secondary font-mono">{{ $incidents->total() }} Total Insiden</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 font-mono small">
                <thead class="table-light">
                    <tr>
                        <th>No. Tiket</th>
                        <th>Pemancar</th>
                        <th>Waktu Off-Air</th>
                        <th>Waktu On-Air</th>
                        <th class="text-center">Durasi Padam</th>
                        <th>Kategori & Dampak</th>
                        <th>Status</th>
                        <th>Pelapor</th>
                        <th class="text-center" style="width: 140px;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($incidents as $inc)
                    @php
                        $statusBadge = match($inc->status) {
                            'Resolved' => 'bg-success',
                            'In_Progress' => 'bg-warning text-dark',
                            default => 'bg-danger animate-pulse',
                        };
                    @endphp
                    <tr>
                        <td class="fw-bold text-dark">{{ $inc->incident_number }}</td>
                        <td>
                            <strong class="text-dark">{{ $inc->transmitter->code }}</strong>
                            <div class="text-muted" style="font-size: 7.5pt;">{{ $inc->transmitter->frequency }}</div>
                        </td>
                        <td>{{ $inc->off_air_at->format('d/m/Y H:i') }} WIB</td>
                        <td>{{ $inc->on_air_at ? $inc->on_air_at->format('d/m/Y H:i') . ' WIB' : '<span class="text-danger fw-bold">Masih Padam</span>' }}</td>
                        <td class="text-center font-mono">
                            <span class="badge bg-light text-dark border">{{ $inc->formatted_duration }}</span>
                        </td>
                        <td>
                            <span class="badge bg-secondary mb-1">{{ $inc->category }}</span>
                            <div class="text-muted" style="font-size: 8pt;">{{ $inc->impact }}</div>
                        </td>
                        <td class="text-center">
                            <span class="badge {{ $statusBadge }}">{{ $inc->status }}</span>
                        </td>
                        <td>{{ $inc->user->name }}</td>
                        <td class="text-center">
                            <div class="btn-group btn-group-sm">
                                <a href="{{ route('incidents.show', $inc->id) }}" class="btn btn-outline-info" title="Lihat Detail">
                                    <i class="fa-solid fa-eye"></i>
                                </a>
                                @if($inc->status !== 'Resolved')
                                <button type="button" class="btn btn-outline-success btn-resolve" data-id="{{ $inc->id }}" data-num="{{ $inc->incident_number }}" title="Selesaikan (Resolve)">
                                    <i class="fa-solid fa-check"></i>
                                </button>
                                @endif
                                <a href="{{ route('incidents.edit', $inc->id) }}" class="btn btn-outline-primary" title="Edit">
                                    <i class="fa-solid fa-pen-to-square"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4 text-muted">
                            <i class="fa-solid fa-circle-check text-success fa-2x mb-2 d-block"></i>
                            Tidak ada catatan gangguan pemancar. Siaran dalam kondisi prima.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($incidents->hasPages())
    <div class="card-footer bg-white p-3">
        {{ $incidents->links() }}
    </div>
    @endif
</div>

<!-- Modal Quick Resolve Incident -->
<div class="modal fade" id="resolveModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title font-mono"><i class="fa-solid fa-check-double me-2"></i> Penyelesaian Gangguan (On-Air Kembali)</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form id="resolveForm" method="POST">
                @csrf
                <div class="modal-body p-4">
                    <p class="small text-muted mb-3" id="resolveInfo"></p>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-secondary">WAKTU ON-AIR KEMBALI *</label>
                        <input type="datetime-local" name="on_air_at" id="resolve_on_air_at" class="form-control font-mono" value="{{ date('Y-m-d\TH:i') }}" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-secondary">PENYEBAB PASTI (ROOT CAUSE)</label>
                        <input type="text" name="cause" class="form-control" placeholder="Contoh: MCB PLN trip akibat petir">
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-semibold text-secondary">TINDAKAN PERBAIKAN (ACTION TAKEN) *</label>
                        <textarea name="action_taken" rows="3" class="form-control" placeholder="Jelaskan tindakan teknisi yang telah dilakukan hingga siaran kembali normal..." required></textarea>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success px-4">
                        <i class="fa-solid fa-check me-1"></i> Tandai Selesai (Resolved)
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).on('click', '.btn-resolve', function() {
        const id = $(this).data('id');
        const num = $(this).data('num');

        $('#resolveForm').attr('action', `/incidents/${id}/resolve`);
        $('#resolveInfo').html(`Menyelesaikan tiket insiden <strong>${num}</strong>.`);
        const modal = new bootstrap.Modal(document.getElementById('resolveModal'));
        modal.show();
    });
</script>
@endpush