@extends('layouts.app')

@section('tajuk', 'Saluran Bermasalah')

@section('kandungan')
    <div class="kad">
        <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.5rem;">
            <h1 class="mb-0">Saluran Bermasalah</h1>
            <span class="lencana lencana-kuning">{{ $bermasalah->count() }} saluran bermasalah</span>
        </div>
        <p class="teks-kecil mb-0">Tanda saluran yang bermasalah supaya diserlahkan kuning dalam dashboard kehadiran.</p>
    </div>

    @if ($errors->any())
        <div class="makluman makluman-ralat">{{ $errors->first() }}</div>
    @endif

    <div class="kad">
        <form method="GET" action="{{ route('saluran.index') }}">
            <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:0 0.75rem;">
                @if (auth()->user()->isSuperadmin())
                    <div>
                        <label for="dun_id">DUN</label>
                        <select id="dun_id" name="dun_id" onchange="this.form.submit()">
                            <option value="">— Semua DUN —</option>
                            @foreach ($senaraiDun as $dun)
                                <option value="{{ $dun->id }}" @selected($dunId == $dun->id)>
                                    {{ $dun->code }} — {{ $dun->nama }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <div>
                    <label for="pusat_id">Pusat Mengundi</label>
                    <select id="pusat_id" name="pusat_id" onchange="this.form.submit()">
                        <option value="">— Semua Pusat —</option>
                        @foreach ($senaraiPusat as $pusat)
                            <option value="{{ $pusat->id }}" @selected(request('pusat_id') == $pusat->id)>
                                {{ $pusat->nama }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>
        </form>
    </div>

    <div class="kad" style="padding:0;">
        <div class="jadual-bekas">
            <table class="jadual jadual-responsif">
                <thead>
                    <tr>
                        <th>Bil</th>
                        <th>Pusat Mengundi</th>
                        <th>Saluran</th>
                        <th>KTM</th>
                        <th>Status</th>
                        <th>Catatan</th>
                        <th>Tindakan</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($senaraiSaluran as $i => $s)
                        @php
                            $flag = $bermasalah->get($s->id);
                            $p = $ktm->get($s->id)?->permohonan;
                        @endphp
                        <tr class="baris-data {{ $flag ? 'baris-bermasalah' : '' }}">
                            <td data-label="Bil">{{ $i + 1 }}</td>
                            <td data-label="Pusat Mengundi">{{ $s->pusatMengundi?->nama ?? '-' }}</td>
                            <td data-label="Saluran"><strong>Saluran {{ $s->nombor_saluran }}</strong></td>
                            <td data-label="KTM">
                                {{ $p?->nama_ic ?? '-' }}
                                @if ($p?->telefonDigits())
                                    <div class="baris-tindakan" style="margin-top:0.25rem">
                                        <a href="tel:{{ $p->telefonDigits() }}" class="btn btn-kecil btn-luar">📞 Call</a>
                                        <a href="{{ $p->whatsappUrl() }}" target="_blank" rel="noopener" class="btn btn-kecil btn-hijau">WhatsApp</a>
                                    </div>
                                @endif
                            </td>
                            <td data-label="Status">
                                @if ($flag)
                                    <span class="lencana lencana-kuning">BERMASALAH</span>
                                    <div class="teks-kecil">{{ $flag->created_at->format('d/m/Y h:i A') }}<br>oleh {{ $flag->dilaporOleh?->name }}</div>
                                @else
                                    <span class="lencana lencana-hijau">OK</span>
                                @endif
                            </td>
                            <td data-label="Catatan">{{ $flag?->catatan ?? '-' }}</td>
                            <td data-label="Tindakan">
                                @if ($flag)
                                    <form method="POST" action="{{ route('saluran.destroy', $s->id) }}" style="margin:0"
                                          onsubmit="return confirm('Buang tanda bermasalah pada Saluran {{ $s->nombor_saluran }} ({{ $s->pusatMengundi?->nama }})?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-kecil btn-luar">Buang Tanda</button>
                                    </form>
                                @else
                                    <form method="POST" action="{{ route('saluran.store') }}" style="margin:0; display:flex; gap:0.4rem; flex-wrap:wrap;">
                                        @csrf
                                        <input type="hidden" name="saluran_id" value="{{ $s->id }}">
                                        <input type="text" name="catatan" placeholder="Catatan (pilihan)" maxlength="500"
                                               style="margin:0; padding:0.35rem 0.6rem; font-size:0.85rem; width:auto; flex:1 1 140px;">
                                        <button type="submit" class="btn btn-kecil" style="background: var(--kuning);">Tanda Bermasalah</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr class="baris-tiada">
                            <td colspan="7" class="teks-tengah">Tiada saluran dijumpai.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="jadual-kaki">
            <span class="teks-kecil">{{ $senaraiSaluran->count() }} saluran dipaparkan</span>
        </div>
    </div>
@endsection