@extends('user.template')

@section('content')

    <!-- Page Title -->
    <div class="page-title">
        <div class="container d-lg-flex justify-content-between align-items-center">
            <h1 class="mb-2 mb-lg-0">Aduan TPS</h1>
            <nav class="breadcrumbs">
                <ol>
                    <li><a href="{{ url('/') }}">Beranda</a></li>
                    <li class="current">Aduan TPS</li>
                </ol>
            </nav>
        </div>
    </div>
    <!-- End Page Title -->

    <section id="contact" class="contact section">

        <div class="container" data-aos="fade">
            <div class="row gy-5 gx-lg-5">

                {{-- KOLOM KIRI --}}
                <div class="col-lg-4">
                    <div class="info">
                        <h3 class="mb-3">TPS yang Diadukan</h3>

                        {{-- FOTO TPS --}}
                        <div class="mb-3 d-none" id="foto-wrapper">
                            <img id="foto-tps" class="img-fluid w-100" style="object-fit:cover; max-height:220px;">
                        </div>

                        {{-- INFO TPS --}}
                        <div id="info-tps">
                            @if ($tps)
                                <p class="mb-1"><strong>{{ $tps->nama_tps }}</strong></p>
                                <p class="mb-1 text-muted">{{ $tps->alamat_tps }}</p>
                            @else
                                <p class="mb-2 text-muted">
                                    Silakan pilih TPS yang akan diadukan
                                </p>

                                <select id="pilih-tps" class="form-select">
                                    <option value="">Pilih TPS</option>
                                    @foreach ($listTps as $item)
                                        <option value="{{ $item->id_tps }}" data-nama="{{ $item->nama_tps }}"
                                            data-alamat="{{ $item->alamat_tps }}"
                                            data-foto="{{ $item->foto_tps ? asset('storage/' . $item->foto_tps) : asset('assets/user/img/no-image.png') }}">
                                            {{ $item->nama_tps }}
                                        </option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- KOLOM KANAN --}}
                <div class="col-lg-8">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <form action="{{ route('user.aduan.store') }}" method="POST" class="aduan-form"
                        enctype="multipart/form-data">
                        @csrf

                        {{-- PENTING --}}
                        <input type="hidden" name="lokasi_tps_id" id="lokasi_tps_id"
                            value="{{ $tps ? $tps->id_tps : '' }}">

                        <div class="row">
                            <div class="col-md-6 form-group">
                                <input type="text" name="nama_pelapor" class="form-control" placeholder="Nama Pelapor"
                                    required>
                            </div>
                            <div class="mt-3 col-md-6 form-group mt-md-0">
                                <input type="tel" name="no_pelapor" class="form-control" placeholder="No. Telp Pelapor"
                                    required>
                            </div>
                        </div>

                        <div class="mt-3 form-group">
                            <input type="text" name="alamat_pelapor" class="form-control" placeholder="Alamat Pelapor"
                                required>
                        </div>

                        <div class="mt-3 form-group">
                            <textarea name="isi_aduan" class="form-control" placeholder="Isi Aduan" required></textarea>
                        </div>

                        {{-- FILE INPUT (SUDAH SERAGAM) --}}
                        <div class="mt-3 form-group">
                            <input type="file" name="bukti_foto" class="form-control file-input" accept="image/*">
                        </div>

                        <div class="mt-4 text-center">
                            <button type="submit" class="px-4 btn btn-success">Kirim Aduan</button>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </section>

    {{-- SCRIPT TPS --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectTps = document.getElementById('pilih-tps');
            const infoTps = document.getElementById('info-tps');
            const fotoWrapper = document.getElementById('foto-wrapper');
            const fotoTps = document.getElementById('foto-tps');
            const inputLokasi = document.getElementById('lokasi_tps_id');

            if (!selectTps) return;

            selectTps.addEventListener('change', function() {
                if (!this.value) return;

                const option = this.options[this.selectedIndex];

                inputLokasi.value = this.value;

                fotoTps.src = option.dataset.foto;
                fotoWrapper.classList.remove('d-none');

                infoTps.innerHTML = `
            <p class="mb-1"><strong>${option.dataset.nama}</strong></p>
            <p class="mb-2 text-muted">${option.dataset.alamat}</p>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="ganti-tps">
                Ganti TPS
            </button>
        `;

                document.getElementById('ganti-tps').onclick = () => {
                    inputLokasi.value = '';
                    fotoWrapper.classList.add('d-none');
                    infoTps.innerHTML =
                        '<p class="mb-2 text-muted">Silakan pilih TPS yang akan diadukan</p>';
                    infoTps.appendChild(selectTps);
                    selectTps.value = '';
                };
            });
        });
    </script>

@endsection