@extends('user.layouts.app')
@section('css')
    @if($siteConfig['ui']['card_style'] === 'modern')
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/order-card/order-card-modern.css') }}">
    @else
        <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/order-card/order-card.css') }}">
    @endif
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/dropdown/dropdown.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/orders.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/complaints.css') }}">
@endsection

@section('title')
    الشكاوى والاقتراحات
@endsection

@section('content')
    <div class="content-wrapper" x-data="complaintsData" x-cloak>
        <div class="">
            <div class="page-header">
                <x-lucide-message-square width="24" height="24" />
                <h1>الشكاوى والاقتراحات</h1>
            </div>

            <div class="container-fluid mb-3">

                <div class="d-flex justify-content-sm-start justify-content-between align-items-center pb-2 gap-2 gap-sm-4 flex-wrap">

                    <!-- Type Filter -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.typeTimeout)"
                        @mouseleave="if(open) window.typeTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.typeTimeout)"
                            :class="{ 'filter-active': filters.type !== 'all' }">
                            <x-lucide-tag width="16" height="16" />
                            <span class="filter-display-text" x-text="getTypeFilterText()"></span>
                            <span x-show="filters.type !== 'all'" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                        <div class="dropdown-menu"
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            @click.stop>
                            <div class="status-filter-form">
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.type === 'all' }"
                                    @click="setTypeFilter('all'); open=false; clearTimeout(window.typeTimeout);">
                                    الكل <x-lucide-list width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.type === 'complaint' }"
                                    @click="setTypeFilter('complaint'); open=false; clearTimeout(window.typeTimeout);">
                                    شكوى <x-lucide-triangle-alert width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.type === 'suggestion' }"
                                    @click="setTypeFilter('suggestion'); open=false; clearTimeout(window.typeTimeout);">
                                    اقتراح <x-lucide-lightbulb width="16" height="16" />
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Status Filter -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.statusTimeout)"
                        @mouseleave="if(open) window.statusTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.statusTimeout)"
                            :class="{ 'filter-active': filters.status !== 'all' }">
                            <x-lucide-filter width="16" height="16" />
                            <span class="filter-display-text" x-text="getStatusFilterText()"></span>
                            <span x-show="filters.status !== 'all'" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                        <div class="dropdown-menu"
                            x-show="open"
                            x-transition:enter="transition ease-out duration-100"
                            x-transition:enter-start="opacity-0 transform scale-95"
                            x-transition:enter-end="opacity-100 transform scale-100"
                            x-transition:leave="transition ease-in duration-75"
                            x-transition:leave-start="opacity-100 transform scale-100"
                            x-transition:leave-end="opacity-0 transform scale-95"
                            @click.stop>
                            <div class="status-filter-form">
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'all' }"
                                    @click="setStatusFilter('all'); open=false; clearTimeout(window.statusTimeout);">
                                    الكل <x-lucide-list width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'pending' }"
                                    @click="setStatusFilter('pending'); open=false; clearTimeout(window.statusTimeout);">
                                    معلّقة <x-lucide-clock width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'under_review' }"
                                    @click="setStatusFilter('under_review'); open=false; clearTimeout(window.statusTimeout);">
                                    قيد المراجعة <x-lucide-eye width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'resolved' }"
                                    @click="setStatusFilter('resolved'); open=false; clearTimeout(window.statusTimeout);">
                                    تم الحل <x-lucide-check-circle width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.status === 'rejected' }"
                                    @click="setStatusFilter('rejected'); open=false; clearTimeout(window.statusTimeout);">
                                    مرفوضة <x-lucide-x-circle width="16" height="16" />
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Add Complaint Button -->
                    <a href="{{ route('complaints.create') }}" class="ui-button btn-custom-primary add-complaint-btn">
                        <x-lucide-plus-circle width="16" height="16" />
                        <span>تقديم شكوى أو اقتراح</span>
                    </a>

                </div>

                <div class="container-fluid my-4">
                    <!-- Loading indicator -->
                    <div class="col-12 text-center" x-show="loading" x-cloak>
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">جاري التحميل...</span>
                        </div>
                    </div>

                    <!-- No complaints message -->
                    <div class="col-12 text-center" x-show="!loading && (!filteredComplaints || filteredComplaints.length === 0)" x-cloak>
                        <p>لا توجد شكاوى أو اقتراحات</p>
                    </div>

                    <!-- Complaints container -->
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-2" x-show="!loading" x-cloak>
                        <template x-for="complaint in filteredComplaints" :key="complaint.id">
                            <div class="col">
                                <a :href="'{{ route('complaints.show', ['id' => '__ID__']) }}'.replace('__ID__', complaint.id)"
                                    class="complaint-card">
                                    <div class="item-card">
                                        <div class="card-body">
                                            <div class="item-header">
                                                <div>
                                                    <span class="complaint-type-badge"
                                                        :class="'type-' + complaint.type"
                                                        x-text="complaint.type_display"></span>
                                                    <span class="complaint-status-badge"
                                                        :class="'status-' + complaint.status"
                                                        x-text="complaint.status_display"></span>
                                                </div>
                                            </div>
                                            <div class="complaint-subject" x-text="complaint.subject"></div>
                                            <div class="complaint-date" x-text="formatDate(complaint.created_at)"></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </template>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('complaintsData', () => ({
                complaints: [],
                loading: true,
                filters: {
                    type: 'all',
                    status: 'all',
                },

                init() {
                    this.loadFiltersFromURL();
                    this.fetchComplaints();
                },

                get filteredComplaints() {
                    let result = this.complaints;
                    if (this.filters.type !== 'all') {
                        result = result.filter(c => c.type === this.filters.type);
                    }
                    if (this.filters.status !== 'all') {
                        result = result.filter(c => c.status === this.filters.status);
                    }
                    return result;
                },

                loadFiltersFromURL() {
                    const urlParams = new URLSearchParams(window.location.search);
                    this.filters.type = urlParams.get('type') || 'all';
                    this.filters.status = urlParams.get('status') || 'all';
                },

                updateURL() {
                    const urlParams = new URLSearchParams();
                    if (this.filters.type && this.filters.type !== 'all') urlParams.set('type', this.filters.type);
                    if (this.filters.status && this.filters.status !== 'all') urlParams.set('status', this.filters.status);
                    const newURL = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
                    window.history.pushState({}, '', newURL);
                },

                async fetchComplaints() {
                    this.loading = true;
                    try {
                        const response = await axios.get('{{ route('complaints.index') }}', {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        });
                        const data = response?.data ?? {};
                        if (data.success) {
                            this.complaints = data.complaints ?? [];
                        } else {
                            this.complaints = [];
                        }
                    } catch (error) {
                        console.error('Error fetching complaints:', error);
                        this.complaints = [];
                    } finally {
                        this.loading = false;
                    }
                },

                setTypeFilter(type) {
                    this.filters.type = type || 'all';
                    this.updateURL();
                },

                setStatusFilter(status) {
                    this.filters.status = status || 'all';
                    this.updateURL();
                },

                getTypeFilterText() {
                    switch (this.filters.type) {
                        case 'all': return 'الكل';
                        case 'complaint': return 'شكوى';
                        case 'suggestion': return 'اقتراح';
                        default: return 'الكل';
                    }
                },

                getStatusFilterText() {
                    switch (this.filters.status) {
                        case 'all': return 'الكل';
                        case 'pending': return 'معلّقة';
                        case 'under_review': return 'قيد المراجعة';
                        case 'resolved': return 'تم الحل';
                        case 'rejected': return 'مرفوضة';
                        default: return 'الكل';
                    }
                },

                formatDate(dateString) {
                    if (typeof formatDate !== 'undefined') {
                        return formatDate(dateString, true);
                    }
                    if (!dateString) return '';
                    try {
                        const date = new Date(dateString);
                        return date.toLocaleDateString('ar-EG', {
                            year: 'numeric',
                            month: 'numeric',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                            hour12: true
                        });
                    } catch (e) {
                        return '';
                    }
                },
            }));
        });
    </script>
@endsection