@extends('admin.layouts.master')

@section('css')
    @include('admin.helper.tablecss')
@endsection

@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">الشكاوى والاقتراحات</h4>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <a href="{{ route('admin.complaints.statistics') }}" class="btn btn-outline-primary btn-sm">
                <x-lucide-bar-chart-3 width="20" height="20" /> الإحصائيات
            </a>
        </div>
    </div>
@endsection

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card mb-3">
                <div class="card-body">
                    <form id="complaintFilters">
                        <div class="row row-sm">
                            <div class="col-lg-3 mt-2">
                                <label class="mt-0" for="typeFilter">النوع</label>
                                <select class="form-control select2" id="typeFilter">
                                    <option value="">الكل</option>
                                    <option value="complaint">شكوى</option>
                                    <option value="suggestion">اقتراح</option>
                                </select>
                            </div>

                            <div class="col-lg-3 mt-2">
                                <label class="mt-0" for="statusFilter">الحالة</label>
                                <select class="form-control select2" id="statusFilter">
                                    <option value="">كل الحالات</option>
                                    <option value="pending" selected>معلّقة</option>
                                    <option value="under_review">قيد المراجعة</option>
                                    <option value="resolved">تم الحل</option>
                                    <option value="rejected">مرفوضة</option>
                                </select>
                            </div>

                            <div class="col-lg-12 d-flex justify-content-end gap-2 mt-3">
                                <button type="button" id="refresh" class="btn btn-primary">
                                    <x-lucide-refresh-cw width="20" height="20" /> تحديث
                                </button>
                                <button type="button" id="resetFilters" class="btn btn-light">
                                    <x-lucide-undo-2 width="20" height="20" /> تصفير
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">قائمة الشكاوى والاقتراحات</h4>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table text-md-nowrap" id="complaintsTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>النوع</th>
                                    <th>الموضوع</th>
                                    <th>المستخدم</th>
                                    <th>الحالة</th>
                                    <th>تاريخ الإرسال</th>
                                    <th>إجراءات</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    @include('admin.helper.requfilter')
    @include('vue')
    <script>
        $(function() {
            $('.select2').select2({ width: '100%' });

            const urlParams = new URLSearchParams(window.location.search);
            if (!urlParams.has('status')) {
                $('#statusFilter').val('pending').trigger('change');
            }

            const tableColumns = ['id', 'type', 'subject', 'user', 'status', 'created_at', 'actions'];
            const filters = ['type', 'status'];

            const table = initUrlSyncedDatatable({
                selector: '#complaintsTable',
                url: "{{ route('admin.complaints.index') }}",
                columns: tableColumns,
                filters,
                extraOptions: {
                    order: [[0, 'desc']]
                },
                refreshSelector: '#refresh'
            });

            $('#resetFilters').on('click', function() {
                $('#complaintFilters').find('input, select').val('').trigger('change');
                updateUrlWithFilters(filters);
                table.draw();
            });
        });
    </script>
@endsection