@extends('Dashboard.layouts.main')

@section('title', 'Daftar Keluhan')

@section('content')
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="page-title-box">
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Keluhan</li>
                        </ol>
                    </div>
                    <h4 class="page-title">Daftar Keluhan</h4>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @endif

                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                @can('customer')
                                <a href="{{ route('complaints.create') }}" class="btn btn-primary mb-2">
                                    <i class="mdi mdi-plus-circle mr-2"></i> Tambah Keluhan
                                </a>
                                @endcan
                            </div>
                            
                            @can('admin')
                            <div class="col-sm-8">
                                <div class="float-right">
                                    {{-- <button type="button" class="btn btn-info mb-2" data-toggle="collapse" data-target="#filterForm">
                                        <i class="fe-filter"></i> Filter
                                    </button> --}}
                                    <button type="button" class="btn btn-danger mb-2 ml-1" onclick="cetakPDF()">
                                        <i class="far fa-file-pdf"></i> Cetak PDF
                                    </button>
                                </div>
                            </div>
                            @endcan
                        </div>

                        @can('admin')
                        <div class="collapse mb-3" id="filterForm">
                            <div class="card card-body">
                                <form action="{{ route('complaints.index') }}" method="GET" id="filter-form">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="jenis_layanan">Jenis Layanan</label>
                                                <input type="text" name="jenis_layanan" id="jenis_layanan" class="form-control" value="{{ request('jenis_layanan') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="tanggal_mulai">Tanggal Mulai</label>
                                                <input type="date" name="tanggal_mulai" id="tanggal_mulai" class="form-control" value="{{ request('tanggal_mulai') }}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label for="tanggal_selesai">Tanggal Selesai</label>
                                                <input type="date" name="tanggal_selesai" id="tanggal_selesai" class="form-control" value="{{ request('tanggal_selesai') }}">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 text-right">
                                            <button type="submit" class="btn btn-primary">
                                                <i class="fe-filter"></i> Terapkan Filter
                                            </button>
                                            <a href="{{ route('complaints.index') }}" class="btn btn-secondary">
                                                <i class="fe-refresh-cw"></i> Reset Filter
                                            </a>
                                            <button type="button" class="btn btn-danger" onclick="cetakPDF()">
                                                <i class="far fa-file-pdf"></i> Cetak PDF dengan Filter
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                        <script>
                            function cetakPDF() {
                                // Salin form filter saat ini
                                const form = document.getElementById('filter-form');
                                const formClone = form.cloneNode(true);
                                
                                // Ubah action dan tambahkan target _blank
                                formClone.action = "{{ route('complaints.all-pdf') }}";
                                formClone.target = "_blank";
                                formClone.style.display = 'none';
                                
                                // Tambahkan ke body, submit, lalu hapus
                                document.body.appendChild(formClone);
                                formClone.submit();
                                document.body.removeChild(formClone);
                            }
                        </script>
                        @endcan

                        <div class="table-responsive">
                            <table class="table table-centered table-striped dt-responsive nowrap w-100" id="datatable">
                                <thead>
                                    <tr>
                                        <th>No</th>
                                        <th>Jenis Layanan</th>
                                        <th>Tanggal Keluhan</th>
                                        <th>Tanggal Dibuat</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($complaints as $index => $complaint)
                                    <tr>
                                        <td>{{ $index + $complaints->firstItem() }}</td>
                                        <td>{{ $complaint->jenis_layanan }}</td>
                                        <td>{{ \Carbon\Carbon::parse($complaint->tanggal_keluhan)->format('d-m-Y') }}</td>
                                        <td>{{ $complaint->created_at->format('d-m-Y H:i') }}</td>
                                        <td>
                                            <div class="btn-group">
                                                <a href="{{ route('complaints.show', $complaint->id) }}" class="btn btn-info btn-sm">
                                                    <i class="fe-eye"></i>
                                                </a>
                                                <a href="{{ route('complaints.pdf', $complaint->id) }}" class="btn btn-danger btn-sm ml-1" target="_blank" data-toggle="tooltip" title="Download PDF">
                                                    <i class="far fa-file-pdf"></i>
                                                </a>
                                                @can('customer')
                                                <a href="{{ route('complaints.edit', $complaint->id) }}" class="btn btn-primary btn-sm ml-1">
                                                    <i class="fe-edit"></i>
                                                </a>
                                                <button type="button" class="btn btn-danger btn-sm ml-1" onclick="confirmDelete('{{ route('complaints.destroy', $complaint->id) }}')">
                                                    <i class="fe-trash"></i>
                                                </button>
                                                @endcan
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="pagination justify-content-center mt-3">
                            {{ $complaints->links() }}
                        </div>

                        @if($complaints->count() == 0)
                        <div class="text-center mt-3">
                            <p>Belum ada data keluhan. <a href="{{ route('complaints.create') }}">Tambahkan keluhan baru</a></p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Sertakan Modal Konfirmasi Hapus -->
@include('layouts.delete-modal')
@endsection