@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="text-muted mb-2">
                                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">
                <form action="{{ route('user.aduan.store') }}" method="POST"
                    class="php-email-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="col-md-6 form-group mt-3 mt-md-0">
                            <input type="tel" name="no_pelapor" class="form-control"
                                placeholder="No. Telp Pelapor" required>
                        </div>
                    </div>

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

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

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

                    <div class="text-center mt-4">
                        <button type="submit">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="text-muted mb-2">${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="text-muted mb-2">Silakan pilih TPS yang akan diadukan</p>';
            infoTps.appendChild(selectTps);
            selectTps.value = '';
        };
    });
});
</script>

@endsection