@extends('layouts.authenticated')

@section('title', 'Komplain')
@section('page-title', 'Manajemen Komplain')

@section('page-content')
<div class="space-y-6 animate-fade-in" x-data="complaintManager()">
    <!-- Header -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
                <h1 class="text-xl font-semibold text-slate-900 dark:text-white">Komplain</h1>
                <p class="text-slate-500 dark:text-slate-400 mt-1 text-sm">Kelola komplain produk dan mitra</p>
            </div>
            <button @click="openAddModal()" class="inline-flex items-center gap-2 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors text-sm">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                Tambah Komplain
            </button>
        </div>
    </div>

    <!-- Table -->
    <div class="bg-white dark:bg-slate-800 rounded-xl border border-gray-200 dark:border-slate-700 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 dark:bg-slate-700/50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">No. Komplain</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Mitra</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Kategori</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Deskripsi</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Tanggal</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-slate-700">
                    @forelse($complaints as $complaint)
                    <tr class="hover:bg-gray-50 dark:hover:bg-slate-700/50">
                        <td class="px-6 py-4"><span class="text-sm font-mono text-slate-600 dark:text-slate-400">{{ $complaint->complaint_number }}</span></td>
                        <td class="px-6 py-4"><span class="text-sm text-slate-700 dark:text-slate-300">{{ $complaint->partner?->name ?? '-' }}</span></td>
                        <td class="px-6 py-4"><span class="text-sm text-slate-600 dark:text-slate-400">{{ $complaint->category_label }}</span></td>
                        <td class="px-6 py-4"><span class="text-sm text-slate-600 dark:text-slate-400">{{ Str::limit($complaint->description, 40) }}</span></td>
                        <td class="px-6 py-4">
                            @php
                                $colors = ['pending' => 'yellow', 'in_progress' => 'blue', 'resolved' => 'green', 'closed' => 'gray'];
                                $color = $colors[$complaint->status] ?? 'gray';
                            @endphp
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ $color }}-100 text-{{ $color }}-800 dark:bg-{{ $color }}-900/30 dark:text-{{ $color }}-400">{{ $complaint->status_label }}</span>
                        </td>
                        <td class="px-6 py-4"><span class="text-sm text-slate-500 dark:text-slate-400">{{ $complaint->created_at->format('d M Y') }}</span></td>
                        <td class="px-6 py-4 text-right flex items-center justify-end gap-2">
                            <button @click="openStatusModal({{ $complaint->id }}, '{{ $complaint->status }}', '{{ $complaint->resolution ?? '' }}')" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded-lg transition-colors">
                                Ubah Status
                            </button>
                            <button @click="confirmDelete({{ $complaint->id }})" class="px-3 py-1.5 bg-red-600 hover:bg-red-700 text-white text-xs font-medium rounded-lg transition-colors">
                                Hapus
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="7" class="px-6 py-12 text-center text-slate-500">Belum ada komplain.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($complaints->hasPages())
        <div class="px-6 py-4 border-t border-gray-200 dark:border-slate-700">{{ $complaints->links() }}</div>
        @endif
    </div>

    <!-- Add Complaint Modal -->
    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="closeModal()"></div>

            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-xl max-w-2xl w-full"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">

                <form action="{{ route('complaints.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="branch_id" value="{{ auth()->user()->branch_id }}">

                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-slate-700">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Tambah Komplain</h3>
                        <button type="button" @click="closeModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-6 space-y-4">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Mitra</label>
                                <select name="partner_id" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                    <option value="">-- Pilih Mitra (Opsional) --</option>
                                    @foreach($partners as $partner)
                                    <option value="{{ $partner->id }}">{{ $partner->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Kategori <span class="text-red-500">*</span></label>
                                <select name="category" required class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                    <option value="">-- Pilih Kategori --</option>
                                    @foreach($categoryLabels as $key => $label)
                                    <option value="{{ $key }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Deskripsi <span class="text-red-500">*</span></label>
                            <textarea name="description" rows="4" required class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white" placeholder="Jelaskan detail komplain..."></textarea>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex gap-3 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/30">
                        <button type="button" @click="closeModal()" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Batal</button>
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">Simpan Komplain</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Update Status Modal -->
    <div x-show="showStatusModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="closeStatusModal()"></div>

            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-xl max-w-md w-full"
                 x-transition:enter="ease-out duration-300"
                 x-transition:enter-start="opacity-0 scale-95"
                 x-transition:enter-end="opacity-100 scale-100">

                <form :action="'/complaints/' + complaintId + '/update-status'" method="POST">
                    @csrf
                    <input type="hidden" name="_method" value="POST">

                    <!-- Modal Header -->
                    <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-slate-700">
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white">Ubah Status Komplain</h3>
                        <button type="button" @click="closeStatusModal()" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                        </button>
                    </div>

                    <!-- Modal Body -->
                    <div class="p-6 space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Status <span class="text-red-500">*</span></label>
                            <select name="status" x-model="statusForm.status" required class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white">
                                <option value="pending">Pending - Menunggu tindak lanjut</option>
                                <option value="in_progress">In Progress - Sedang ditindaklanjuti</option>
                                <option value="resolved">Resolved - Telah diselesaikan</option>
                                <option value="closed">Closed - Ditutup</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Resolusi / Catatan</label>
                            <textarea name="resolution" x-model="statusForm.resolution" rows="3" class="w-full px-4 py-2.5 bg-white dark:bg-slate-700 border border-gray-300 dark:border-slate-600 rounded-lg text-slate-900 dark:text-white" placeholder="Tulis resolusi atau catatan penyelesaian..."></textarea>
                        </div>
                    </div>

                    <!-- Modal Footer -->
                    <div class="flex gap-3 p-6 border-t border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-700/30">
                        <button type="button" @click="closeStatusModal()" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Batal</button>
                        <button type="submit" class="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg">Update Status</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div x-show="showDeleteModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 py-8">
            <div class="fixed inset-0 bg-black/50" @click="showDeleteModal = false"></div>
            <div class="relative bg-white dark:bg-slate-800 rounded-xl shadow-lg max-w-md w-full p-6">
                <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">Hapus Komplain?</h3>
                <p class="text-sm text-slate-500 dark:text-slate-400 mb-6">Tindakan ini tidak dapat dibatalkan.</p>
                <form :action="'/complaints/' + deleteId" method="POST" class="flex gap-3">
                    @csrf
                    @method('DELETE')
                    <button type="button" @click="showDeleteModal = false" class="flex-1 px-4 py-2.5 bg-gray-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg">Batal</button>
                    <button type="submit" class="flex-1 px-4 py-2.5 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg">Ya, Hapus</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function complaintManager() {
    return {
        showModal: false,
        showStatusModal: false,
        showDeleteModal: false,
        complaintId: null,
        deleteId: null,
        statusForm: {
            status: 'pending',
            resolution: ''
        },
        openAddModal() { this.showModal = true; },
        closeModal() { this.showModal = false; },
        openStatusModal(complaintId, currentStatus, currentResolution) {
            this.complaintId = complaintId;
            this.statusForm.status = currentStatus;
            this.statusForm.resolution = currentResolution;
            this.showStatusModal = true;
        },
        closeStatusModal() { 
            this.showStatusModal = false; 
            this.complaintId = null;
        },
        confirmDelete(id) { this.deleteId = id; this.showDeleteModal = true; }
    }
}
</script>
@endsection