@extends('layouts.dashboard')

@section('title', 'Senarai Aduan')

@section('content')

    <div class="w3-container">
        <h2 class="w3-text-black"><i class="fa fa-comment-dots"></i> Senarai Aduan</h2>

        <a href="{{ route('aduan.create') }}" class="w3-button w3-green w3-round w3-margin-bottom">
            <i class="fa fa-plus"></i> Tambah Aduan
        </a>


         {{-- ✅ Notifikasi Global --}}
        @if(session('success'))
            <div id="alert-box" class="w3-panel w3-green w3-round w3-animate-opacity">
                <p>{{ session('success') }}</p>
            </div>
        @endif

        @if(session('error'))
            <div id="alert-box" class="w3-panel w3-red w3-round w3-animate-opacity">
                <p>{{ session('error') }}</p>
            </div>
        @endif

        @yield('content')

        <table class="w3-table w3-bordered w3-striped w3-hoverable w3-white w3-small">
            <tr class="w3-light-grey">
                <th>Pengadu</th>
                <th>No. Telefon</th>
                <th>Aduan</th>
                <th>Tarikh</th>
                <th>Status</th>
                <th>Tindakan</th>
            </tr>

            @forelse($aduan as $item)
                <tr>
                    <td>{{ $item->pengadu }}</td>
                    <td>{{ $item->no_tel }}</td>
                    <td>{{ Str::limit($item->aduan, 40) }}</td>
                    <td>{{ $item->tarikh }}</td>
                    <td>
                        @if($item->status == 'Selesai')
                            <span class="w3-tag w3-green w3-round">Selesai</span>
                        @elseif($item->status == 'Proses')
                            <span class="w3-tag w3-orange w3-round">Dalam Proses</span>
                        @else
                            <span class="w3-tag w3-grey w3-round">Baru</span>
                        @endif
                    </td>
                    <td>
                        <a href="{{ route('aduan.edit', $item->id) }}" class="w3-button w3-blue w3-round-small w3-tiny">
                            <i class="fa fa-pen"></i>
                        </a>
                        <form action="{{ route('aduan.destroy', $item->id) }}" method="POST" style="display:inline">
                            @csrf @method('DELETE')
                            <button onclick="return confirm('Padam aduan ini?')" class="w3-button w3-red w3-round-small w3-tiny">
                                <i class="fa fa-trash"></i>
                            </button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="6" class="w3-center">Tiada aduan</td></tr>
            @endforelse
        </table>
    </div>
@endsection


@stack('scripts')

<script>
    // 🔔 Auto-hide notifikasi selepas 4 saat
    document.addEventListener('DOMContentLoaded', function() {
        const alertBox = document.getElementById('alert-box');
        if (alertBox) {
            setTimeout(() => {
                alertBox.style.transition = 'opacity 0.5s';
                alertBox.style.opacity = '0';
                setTimeout(() => alertBox.remove(), 100); // buang element selepas fade out
            }, 4000); // 4000ms = 4 saat
        }
    });
</script>