@extends('front.layout')
@section('title', 'Riwayat Pengaduan')
@section('konten')
    <style>
        .title:after {
            content: "";
            height: 2px;
            left: 50px;
            position: absolute;
            width: 170px;
            background: #1d0fe0;
            top: 620px;
        }
    </style>
    <style>
        .title1:after {
            content: "";
            height: 2px;
            left: 15px;
            position: absolute;
            width: 100px;
            background: #1d0fe0;
            top: 30px;
        }
    </style>
    <style>
        .title2:after {
            content: "";
            height: 2px;
            left: 15px;
            position: absolute;
            width: 100px;
            background: #0fd9e0;
            top: 390px;
        }
    </style>
    <!-- START SECTION BANNER -->
    <section class="breadcrumb_section bg_gray overlay_bg_blue_90"
        style="background: url({{ asset('assets') }}/images/gedungpdam.png); background-position: center; padding-top:120px; background-repeat:no-repeat; background-size:cover">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="page-title">
                        <h1 style="color: #fff; font-family: 'Otomanopee One', sans-serif;">Riwayat Pengaduan</h1>
                    </div>
                </div>
                <div class="col-sm-6">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-sm-end">
                            <li class="breadcrumb-item"><a href="/" style="color: #fff">Home</a></li>
                            <li class="breadcrumb-item"><a href="/pengaduan" style="color: #fff">Pengaduan</a></li>
                            <li class="breadcrumb-item active" aria-current="page" style="color: #fff">Riwayat Pengaduan</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>
    <!-- END SECTION BANNER -->

    <!-- START SECTION BLOG -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <div class="single_post">
                        <div class="blog_content" style="background-color: #27e27812; padding: 30px; border-bottom: 4px solid #1d0fe0;">
                            <div class="blog_text">
                                <h3 style="font-family: 'Otomanopee One', sans-serif; margin-bottom: 15px;">
                                    <i class="fa fa-info-circle" style="color:#1d0fe0;"></i> Detail Pengaduan
                                </h3>
                                <hr style="width:32%;text-align:left;margin-left:0; border-width: 2px; background-color:#1d0fe0;">
                
                                <div class="card shadow-sm">
                                    <div class="card-body">
                                        <h5 class="card-title mb-3">ID Aduan</h5>
                                        <p class="card-text">{{ $aduan->id_aduan }}</p>
                                
                                        <h5 class="card-title mb-3">No SR</h5>
                                        <p class="card-text">{{ $aduan->nosr }}</p>
                                
                                        <h5 class="card-title mb-3">Isi Aduan</h5>
                                        <p class="card-text">{{ $aduan->isi_aduan }}</p>
                                
                                        <h5 class="card-title mb-3">Lokasi</h5>
                                        <p class="card-text">{{ $aduan->lokasi }}</p>
                                
                                        @if($aduan->foto)
                                            <h5 class="card-title mb-3">Foto</h5>
                                            <img src="{{ asset('foto aduan/' . $aduan->foto) }}" alt="Foto Aduan" class="img-fluid rounded border" style="max-height: 300px;">
                                        @endif
                                
                                        <h5 class="card-title mt-4 mb-3">Status</h5>
                                        @php
                                            $statusColor = match($aduan->status) {
                                                'Belum Ditanggapi' => 'danger',
                                                'Sedang Diproses' => 'warning',
                                                'Selesai' => 'success',
                                                default => 'secondary'
                                            };
                                        @endphp
                                        <span class="badge badge-{{ $statusColor }} py-2 px-3">{{ $aduan->status }}</span>
                                
                                        <h5 class="card-title mt-4 mb-3">Tanggapan</h5>
                                        <div style="max-height: 350px; overflow-y: auto; padding: 10px; background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);">
                                            @forelse ($tanggapan as $t)
                                                <div style="background-color: {{ $t->dari == 'Pelanggan' ? '#d4edda' : '#f8d7da' }}; padding: 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; word-wrap: break-word; display: flex; flex-direction: column;">
                                                    <strong style="font-size: 15px; color: {{ $t->dari == 'Pelanggan' ? '#155724' : '#721c24' }};">{{ ucfirst($t->dari) }}:</strong>
                                                    <p style="margin-top: 4px; margin-bottom: 6px; font-size: 14px; line-height: 1.4; color: #333;">{{ $t->pesan }}</p>
                                                    <small style="font-size: 12px; color: #6c757d; align-self: flex-end;">{{ $t->created_at }}</small>
                                                </div>
                                            @empty
                                                <div style="background-color: #e9ecef; padding: 12px; border-radius: 8px; margin-bottom: 12px; font-size: 14px; word-wrap: break-word;">
                                                    <span class="text-muted">Belum ada tanggapan.</span>
                                                </div>
                                            @endforelse
                                        </div>
                                
                                        <h5 class="card-title mt-4 mb-3">Beri Tanggapan</h5>
                                        <form action="{{ route('aduan.tanggapi', $aduan->id_aduan) }}" method="POST" onsubmit="return validatePesan()">
                                            @csrf
                                            <input type="hidden" name="dari" value="Pelanggan">
                                            <div class="form-group mb-3">
                                                <label for="pesan">Tanggapan Anda</label>
                                                <textarea class="form-control" id="pesan" name="pesan" rows="4" required></textarea>
                                            </div>
                                            <button type="submit" class="btn btn-primary mt-2">
                                                <i class="fa fa-paper-plane"></i> Kirim Tanggapan
                                            </button>
                                        </form>
                                    </div>
                                </div>                                
                            </div>
                        </div>
                    </div>
                </div>                
                          
                <div class="col-lg-3 mt-lg-0 mt-4">
                    <div class="sidebar">
                        <div class="widget">
                            <h5 class="widget_title">Berita Lainnya</h5>
                            <hr
                                style="width:32%;text-align:left;margin-left:0; border-width: 2px; margin-bottom: 30px; background-color:#1d0fe0">
                            <ul class="recent_post border_bottom_dash list_none">
                                @foreach ($beritaterkait as $item)
                                    <li>
                                        <div class="post_footer">
                                            <div class="post_img">
                                                <a href="/detail_berita/{{ $item->id_berita }}"><img style="width: 80px"
                                                        src="{{ asset('foto berita') }}/{{ $item->gambar_berita }}"
                                                        alt="letest_post1"></a>
                                            </div>
                                            <div class="post_content">
                                                <h6><a
                                                        href="/detail_berita/{{ $item->id_berita }}">{{ \Illuminate\Support\Str::words(strip_tags($item->judul_berita), 5, $end = '...') }}</a>
                                                </h6>
                                                <p class="small m-0">
                                                    {{ date('d-m-Y H:i:s', strtotime($item->tanggal_berita)) }}</p>
                                            </div>
                                        </div>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="widget">
                            <h5 class="widget_title">Galeri Lainnya</h5>
                            <hr
                                style="width:32%;text-align:left;margin-left:0; border-width: 2px; background-color:#1d0fe0; margin-bottom: 30px">
                            <ul class="grid_container gutter_medium work_col3 portfolio_gallery portfolio_style1 animation masonry"
                                data-animation="fadeInUp" data-animation-delay="0.04s" style="margin-top: 20px">
                                @foreach ($galeriterkait as $item)
                                    <!-- START PORTFOLIO ITEM -->
                                    <li class="grid_item web-design">
                                        <div class="portfolio_item" style="box-shadow: 1px 1px 8px #11d6e4;">
                                            <a href="#" class="image_link">
                                                <img src="{{ asset('foto galeri') }}/{{ $item->gambar_galeri }}"
                                                    alt="image" style="height:75px" class="d-none d-md-block">
                                                <img src="{{ asset('foto galeri') }}/{{ $item->gambar_galeri }}"
                                                    alt="image" class="d-sm-block d-md-none">
                                            </a>
                                            <div class="portfolio_content">
                                                <div class="link_container">
                                                    <a href="{{ asset('foto galeri') }}/{{ $item->gambar_galeri }}"
                                                        class="image_popup"><i class="ion-image"></i></a>
                                                    <a href="/detail_galeri/{{$item->id_galeri}}" ><i
                                                    class="ion-eye" title="detail"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <!-- END PORTFOLIO ITEM -->
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>

    <script>
        function validatePesan() {
            var pesan = document.getElementById('pesan').value;
            var regex = /^[a-zA-Z0-9.!?, ]*$/;
        
            if (!regex.test(pesan)) {
                alert('Tanggapan hanya boleh mengandung huruf, angka, spasi, titik, koma, tanda seru, dan tanda tanya.');
                return false; // mencegah submit
            }
            return true; // lanjutkan submit
        }
        </script>
@endsection
<!-- END SECTION BLOG -->