@extends('template')
 @section('title', 'Detail Aduan')
 @section('konten')
     <div class="main-panel">
         <div class="content">
             <div class="page-inner">
                 <div class="page-header">
                     <h4 class="page-title">Detail Aduan</h4>
                     <ul class="breadcrumbs">
                         <li class="nav-home">
                             <a href="/dashboard">
                                 <i class="flaticon-home"></i>
                             </a>
                         </li>
                         <li class="separator">
                             <i class="flaticon-right-arrow"></i>
                         </li>
                         <li class="nav-item">
                             Detail Aduan
                         </li>
                     </ul>
                 </div>
                 <div class="row">
                    <div class="col-md-12">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h5 class="card-title">ID Aduan</h5>
                                <p class="card-text">{{ $aduan->id_aduan }}</p>
                
                                <h5 class="card-title">No Sambungan Rumah</h5>
                                <p class="card-text">{{ $aduan->nosr }}</p>
                
                                <h5 class="card-title">Isi Aduan</h5>
                                <p class="card-text">{{ $aduan->isi_aduan }}</p>
                
                                <h5 class="card-title">Lokasi</h5>
                                <p class="card-text">{{ $aduan->lokasi }}</p>
                
                                @if($aduan->foto)
                                    <h5 class="card-title">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">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">Ubah Status</h5>
                                <form action="{{ route('aduan.updateStatus', $aduan->id_aduan) }}" method="POST">
                                    @csrf
                                    @method('PUT')
                                    <div class="form-group">
                                        <label for="status">Pilih Status Baru</label>
                                        <select class="form-control" id="status" name="status" required>
                                            <option value="Belum Ditanggapi" {{ $aduan->status == 'Belum Ditanggapi' ? 'selected' : '' }}>Belum Ditanggapi</option>
                                            <option value="Sedang Diproses" {{ $aduan->status == 'Sedang Diproses' ? 'selected' : '' }}>Sedang Diproses</option>
                                            <option value="Selesai" {{ $aduan->status == 'Selesai' ? 'selected' : '' }}>Selesai</option>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-info mt-2">
                                        <i class="fa fa-sync-alt"></i> Ubah Status
                                    </button>
                                </form>
                
                                <h5 class="card-title mt-4">Tanggapan Sebelumnya</h5>
                                <div style="max-height: 400px; overflow-y: auto; padding: 5px; 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 == 'Admin' ? '#d4edda' : '#f8d7da' }}; padding: 8px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; word-wrap: break-word;">
                                            <strong style="font-size: 14px;">{{ ucfirst($t->dari) }}:</strong>
                                            <p style="margin-top: 2px; margin-bottom: 4px; font-size: 13px; line-height: 1.3; color: #333;">{{ $t->pesan }}</p>
                                            <small style="font-size: 12px; color: #6c757d;">{{ $t->created_at }}</small>
                                        </div>
                                    @empty
                                        <div style="background-color: #e9ecef; padding: 8px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; word-wrap: break-word;">
                                            Belum ada tanggapan.
                                        </div>
                                    @endforelse
                                </div>
                
                                <h5 class="card-title mt-4">Tanggapi Aduan</h5>
                                <form action="{{ route('aduan.tanggapiadmin', $aduan->id_aduan) }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="dari" value="admin">
                                    <div class="form-group">
                                        <label for="pesan">Pesan Tanggapan</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-reply"></i> Kirim Tanggapan
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>                                
             </div>
         </div>
         <footer class="footer">
             <div class="container-fluid">
                 <nav class="pull-left">
                     <ul class="nav">

                     </ul>
                 </nav>
                 <div class="copyright ml-auto">
                     &copycopyright 2026 - Perumda Air Minum Tirta Bahari
                 </div>
             </div>
         </footer>
     </div>
     <script src="{{ asset('assetsadmin') }}/js/tinymce.min.js"></script>
     <script>
         tinymce.init({
             selector: 'textarea.description',

             height: 300
         });
     </script>
 @endsection