@extends('user.template')

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

@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>

                            @error('lokasi_tps_id')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        @endif
                    </div>
                </div>
            </div>

            {{-- KOLOM KANAN --}}
            <div class="col-lg-8">

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

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

                    {{-- HIDDEN TPS --}}
                    <input type="hidden" name="lokasi_tps_id" id="lokasi_tps_id"
                        value="{{ old('lokasi_tps_id', $tps ? $tps->id_tps : '') }}">

                    <div class="row">
                        {{-- NAMA --}}
                        <div class="col-md-6 form-group">
                            <input type="text"
                                name="nama_pelapor"
                                class="form-control"
                                placeholder="Nama Pelapor"
                                value="{{ old('nama_pelapor') }}">

                            @error('nama_pelapor')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>

                        {{-- NO TELP --}}
                        <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"
                                value="{{ old('no_pelapor') }}">

                            @error('no_pelapor')
                                <small class="text-danger">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    {{-- ALAMAT --}}
                    <div class="mt-3 form-group">
                        <input type="text"
                            name="alamat_pelapor"
                            class="form-control"
                            placeholder="Alamat Pelapor"
                            value="{{ old('alamat_pelapor') }}">

                        @error('alamat_pelapor')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    {{-- ISI ADUAN --}}
                    <div class="mt-3 form-group">
                        <textarea name="isi_aduan"
                            class="form-control"
                            placeholder="Isi Aduan">{{ old('isi_aduan') }}</textarea>

                        @error('isi_aduan')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    {{-- FOTO --}}
                    <div class="mt-3 form-group">
                        <input type="file"
                            name="bukti_foto"
                            class="form-control"
                            accept="image/*">

                        @error('bukti_foto')
                            <small class="text-danger">{{ $message }}</small>
                        @enderror
                    </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 PILIH 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