@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="index.html">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">

                <div class="col-lg-4">
                    <div class="info">

                        <h3 class="mb-3">TPS yang Diadukan</h3>

                        {{-- FOTO TPS --}}
                        <div class="mb-3">
                            <img id="foto-tps"
                                src="{{ $tps && $tps->foto_tps ? asset('storage/' . $tps->foto_tps) : asset('assets/user/img/no-image.png') }}"
                                class="img-fluid w-100" style="object-fit:cover; max-height:220px;" alt="Foto TPS">
                        </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>
                                <input type="hidden" name="lokasi_tps_id" value="{{ $tps->id_tps }}">
                            @else
                                <p class="text-muted mb-2">
                                    Silakan pilih TPS yang akan diadukan
                                </p>

                                <select name="lokasi_tps_id" id="pilih-tps" class="form-select" required>
                                    <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>


                <div class="col-lg-8">
                    <form action="forms/contact.php" method="post" role="form" class="php-email-form">
                        <div class="row">
                            <div class="col-md-6 form-group">
                                <input type="text" name="name" class="form-control" id="name"
                                    placeholder="Your Name" required="">
                            </div>
                            <div class="col-md-6 form-group mt-3 mt-md-0">
                                <input type="email" class="form-control" name="email" id="email"
                                    placeholder="Your Email" required="">
                            </div>
                        </div>
                        <div class="form-group mt-3">
                            <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject"
                                required="">
                        </div>
                        <div class="form-group mt-3">
                            <textarea class="form-control" name="message" placeholder="Message" required=""></textarea>
                        </div>
                        <div class="my-3">
                            <div class="loading">Loading</div>
                            <div class="error-message"></div>
                            <div class="sent-message">Your message has been sent. Thank you!</div>
                        </div>
                        <div class="text-center"><button type="submit">Send Message</button></div>
                    </form>
                </div><!-- End Contact Form -->

            </div>

        </div>

    </section>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const selectTps = document.getElementById('pilih-tps');

            if (selectTps) {
                selectTps.addEventListener('change', function() {
                    const option = this.options[this.selectedIndex];

                    const foto = option.getAttribute('data-foto');
                    const nama = option.getAttribute('data-nama');
                    const alamat = option.getAttribute('data-alamat');

                    // Ganti foto
                    document.getElementById('foto-tps').src = foto;

                    // Ganti info teks
                    document.getElementById('info-tps').insertAdjacentHTML('beforeend', `
                <p class="mt-3 mb-1"><strong>${nama}</strong></p>
                <p class="text-muted">${alamat}</p>
            `);
                });
            }
        });
    </script>

@endsection