@extends('admin::layouts.master')
@php
    $pageTitle = 'کدهای تخفیف';
@endphp

@section('title', 'لیست کدهای تخفیف')
@push('css')
    <style>
        .custom-multiselect {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            max-height: 200px;
            overflow-y: auto;
            background: white;
        }

        .custom-multiselect .option {
            padding: 0.5rem 1rem;
            border-bottom: 1px solid #f8f9fa;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .custom-multiselect .option:hover {
            background-color: #f8f9fa;
        }

        .custom-multiselect .option.selected {
            background-color: #007bff;
            color: white;
        }

        .option input[type="checkbox"] {
            display: none;
        }

        .selected-badge {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            margin: 0.25rem;
            font-size: 0.875rem;
        }

        .selected-container {
            min-height: 40px;
            border: 1px dashed #dee2e6;
            border-radius: 0.375rem;
            padding: 0.5rem;
            margin-bottom: 1rem;
            background: #f8f9fa;
        }

        .search-input {
            border: 1px solid #dee2e6;
            border-radius: 0.375rem;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
            width: 100%;
        }
    </style>
@endpush

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="#">تخفیف‌ها</a></li>
                        <li class="breadcrumb-item active">لیست کدهای تخفیف</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- فیلترها --}}
    <div class="row g-3 mb-3">

        <div class="col-xxl-3">
            <form id="searchForm" action="{{ route('admin.discounts.index') }}" method="GET">
                <div class="search-box">
                    <input type="text" name="q" class="form-control"
                           value="{{ request('q') }}"
                           placeholder="جستجوی کد تخفیف..."/>
                    <i class="ri-search-line search-icon"></i>
                </div>
            </form>
        </div>

        <div class="col-xxl-2">
            <select name="type" class="form-select" form="searchForm">
                <option value="">نوع تخفیف</option>
                <option value="percent" {{ request('type') == 'percent' ? 'selected' : '' }}>درصدی</option>
                <option value="amount" {{ request('type') == 'amount' ? 'selected' : '' }}>مبلغی</option>
            </select>
        </div>

        <div class="col-xxl-2">
            <select name="status" class="form-select" form="searchForm">
                <option value="">وضعیت</option>
                <option value="active" {{ request('status')=='active'?'selected':'' }}>فعال</option>
                <option value="expired" {{ request('status')=='expired'?'selected':'' }}>منقضی</option>
            </select>
        </div>

        <div class="col-xxl-auto col-sm-6 ms-auto">
            <button class="btn btn-primary" type="submit" form="searchForm">
                اعمال فیلتر
            </button>

            <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#discountModal">
                کد تخفیف جدید
            </button>

        </div>

    </div>
    <!-- نمایش وضعیت فیلترهای فعال برای کدهای تخفیف -->
    @if (request()->hasAny(['q', 'type', 'status']))
        <div class="row mb-3">
            <div class="col-12">
                <div class="alert alert-info alert-dismissible fade show py-2" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="bi bi-funnel me-2"></i>
                        <div class="flex-grow-1">
                            <strong>فیلترهای فعال:</strong>

                            @if (request('q'))
                                <span class="badge bg-primary me-1">جستجو: "{{ request('q') }}"</span>
                            @endif

                            @if (request('type'))
                                @php
                                    $typeLabels = [
                                        'percent' => 'درصدی',
                                        'fixed'   => 'مبلغی',
                                    ];
                                @endphp
                                <span
                                    class="badge bg-success me-1">نوع: {{ $typeLabels[request('type')] ?? request('type') }}</span>
                            @endif

                            @if (request('status'))
                                <span class="badge bg-warning me-1">
                                وضعیت: {{ request('status') == 'active' ? 'فعال' : 'منقضی' }}
                            </span>
                            @endif
                        </div>
                        <a href="{{ route('admin.discounts.index') }}" class="btn-close" aria-label="بستن"></a>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- لیست تخفیف‌ها --}}
    <div class="card">
        <div class="card-body">

            <div class="table-responsive">
                <table class="table table-custom align-middle table-borderless table-nowrap">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>کد</th>
                        <th>نوع</th>
                        <th>مقدار</th>
                        <th>تاریخ انقضا</th>
                        <th>وضعیت</th>
                        <th>عملیات</th>
                    </tr>
                    </thead>

                    <tbody>
                    @forelse($discounts as $item)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $item->code }}</td>
                            <td>{{ $item->type == 'percent' ? 'درصدی' : 'مبلغی' }}</td>
                            <td>
                                {{ $item->value }}
                                {{ $item->type == 'percent' ? '%' : 'تومان' }}
                            </td>

                            <td>{{ jdate($item->expires_at)->format('Y-m-d') }}</td>
                            <td>
                                @if($item->isExpired())
                                    <span class="badge bg-danger-subtle text-danger">منقضی</span>
                                @else
                                    <span class="badge bg-success-subtle text-success">فعال</span>
                                @endif
                            </td>

                            <td>
                                <div class="dropdown position-static">
                                    <button class="btn btn-sm btn-subtle-secondary btn-icon" data-bs-toggle="dropdown">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>

                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li><a class="dropdown-item edit-discount-btn"
                                               data-id="{{ $item->id }}" href="#">ویرایش</a></li>

                                        <li><a class="dropdown-item delete-discount-btn"
                                               href="{{route('admin.discounts.destroy' , $item->id)}}">حذف</a></li>
                                    </ul>
                                </div>
                            </td>
                        </tr>

                    @empty
                        <tr>
                            <td colspan="7" class="text-center text-muted py-3">
                                هیچ کد تخفیفی وجود ندارد.
                            </td>
                        </tr>
                    @endforelse
                    </tbody>

                </table>
            </div>

            <!-- Create/Edit Discount Modal -->
            <div class="modal fade" id="discountModal" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                        <form id="discountForm" method="POST">
                            @csrf
                            <input type="hidden" name="_method" id="discountFormMethod" value="POST">
                            <input type="hidden" name="id" id="discount_id">
                            <div class="modal-header">
                                <h5 class="modal-title" id="discountModalTitle">ایجاد کد تخفیف</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <!-- کد، نوع، مقدار، حداکثر استفاده، شروع، انقضا -->
                                <div class="mb-3">
                                    <label for="code" class="form-label">کد تخفیف *</label>
                                    <input type="text" name="code" id="code" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label for="type" class="form-label">نوع *</label>
                                    <select name="type" id="type" class="form-select" required>
                                        <option value="percent">درصدی</option>
                                        <option value="fixed">مبلغی</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label for="value" class="form-label">مقدار *</label>
                                    <input type="number" name="value" id="value" class="form-control" required>
                                </div>
                                <div class="mb-3">
                                    <label for="max_uses" class="form-label">حداکثر استفاده</label>
                                    <input type="number" name="max_uses" id="max_uses" class="form-control">
                                </div>
                                <div class="mb-3">
                                    <label for="starts_at" class="form-label">شروع</label>
                                    <input type="datetime-local" name="starts_at" id="starts_at" class="form-control">
                                </div>
                                <div class="mb-3">
                                    <label for="expires_at" class="form-label">انقضا</label>
                                    <input type="datetime-local" name="expires_at" id="expires_at" class="form-control">
                                </div>

                                <!-- نوع استفاده -->
                                <div class="mb-3">
                                    <label for="is_public" class="form-label">نوع استفاده *</label>
                                    <select name="is_public" id="is_public" class="form-select" required>
                                        <option value="1">عمومی</option>
                                        <option value="0">خصوصی</option>
                                    </select>
                                </div>

                                <!-- کاربران و اشتراک‌ها -->
                                <div id="userSelectContainer" class="mb-3">
                                    <label class="form-label">کاربران خاص</label>
                                    <div class="selected-container mb-2" id="selectedUsersContainer">
                                        <small class="text-muted">هیچ کاربری انتخاب نشده</small>
                                    </div>
                                    <input type="text" class="form-control mb-2 search-input" id="userSearch"
                                           placeholder="جستجو در کاربران...">
                                    <div class="custom-multiselect" id="usersList">
                                        @foreach($users as $user)
                                            <div class="option" data-id="{{ $user->id }}">
                                                <input type="checkbox" name="user_ids[]" value="{{ $user->id }}">
                                                {{ $user->name }} - {{ $user->email }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <div id="subscriptionSelectContainer" class="mb-3">
                                    <label class="form-label">اشتراک خاص</label>
                                    <div class="selected-container mb-2" id="selectedSubscriptionsContainer">
                                        <small class="text-muted">هیچ اشتراکی انتخاب نشده</small>
                                    </div>
                                    <input type="text" class="form-control mb-2 search-input" id="subscriptionSearch"
                                           placeholder="جستجو در اشتراک‌ها...">
                                    <div class="custom-multiselect" id="subscriptionsList">
                                        @foreach($subscriptions as $subscription)
                                            <div class="option" data-id="{{ $subscription->id }}">
                                                <input type="checkbox" name="subscription_ids[]"
                                                       value="{{ $subscription->id }}">
                                                {{ $subscription->name }}
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                <!-- توضیحات -->
                                <div class="mb-3">
                                    <label for="description" class="form-label">توضیحات</label>
                                    <textarea name="description" id="description" class="form-control"
                                              rows="3"></textarea>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">بستن</button>
                                <button type="submit" class="btn btn-primary" id="discountSubmitBtn">ذخیره</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            {{-- Pagination --}}
            @include('components.pagination', ['paginator' => $discounts])
        </div>
    </div>

@endsection
@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const isPublicSelect = document.getElementById('is_public');
            const userContainer = document.getElementById('userSelectContainer');
            const subscriptionContainer = document.getElementById('subscriptionSelectContainer');

            const usersList = document.getElementById('usersList');
            const userOptions = usersList.querySelectorAll('.option');
            const selectedUsersContainer = document.getElementById('selectedUsersContainer');

            const subscriptionsList = document.getElementById('subscriptionsList');
            const subscriptionOptions = subscriptionsList.querySelectorAll('.option');
            const selectedSubscriptionsContainer = document.getElementById('selectedSubscriptionsContainer');

            const selectedUsers = new Set();
            const selectedSubscriptions = new Set();

            function toggleUserSubscriptionSelect() {
                const show = isPublicSelect.value == '0';
                userContainer.style.display = show ? 'block' : 'none';
                subscriptionContainer.style.display = show ? 'block' : 'none';
            }

            isPublicSelect.addEventListener('change', toggleUserSubscriptionSelect);
            toggleUserSubscriptionSelect();

            // --- مدیریت hidden input ---
            function updateHiddenInputs(selectedSet, containerId, inputName) {
                const container = document.getElementById(containerId);
                // حذف همه hidden input قبلی
                container.querySelectorAll('input[type=hidden]').forEach(i => i.remove());
                // اضافه کردن hidden input جدید
                selectedSet.forEach(id => {
                    const input = document.createElement('input');
                    input.type = 'hidden';
                    input.name = inputName + '[]';
                    input.value = id;
                    container.appendChild(input);
                });
            }

            // --- بروزرسانی نمایش انتخاب‌ها ---
            function updateSelectedDisplay(selectedSet, container, options, inputName) {
                container.innerHTML = '';
                if (selectedSet.size === 0) {
                    container.innerHTML = '<small class="text-muted">هیچ موردی انتخاب نشده</small>';
                } else {
                    selectedSet.forEach(id => {
                        const option = [...options].find(o => o.dataset.id == id);
                        if (option) {
                            const badge = document.createElement('span');
                            badge.className = 'selected-badge';
                            badge.innerHTML = option.textContent.trim() +
                                ` <i class="bi bi-x" style="cursor:pointer" onclick="removeSelected('${id}', '${container.id}')"></i>`;
                            container.appendChild(badge);
                        }
                    });
                }
                // بروزرسانی hidden input
                if (container.id === 'selectedUsersContainer') {
                    updateHiddenInputs(selectedSet, container.id, 'user_ids');
                } else if (container.id === 'selectedSubscriptionsContainer') {
                    updateHiddenInputs(selectedSet, container.id, 'subscription_ids');
                }
            }

            window.removeSelected = function (id, containerId) {
                if (containerId === 'selectedUsersContainer') selectedUsers.delete(id);
                if (containerId === 'selectedSubscriptionsContainer') selectedSubscriptions.delete(id);
                updateSelectedDisplay(selectedUsers, selectedUsersContainer, userOptions, 'user_ids');
                updateSelectedDisplay(selectedSubscriptions, selectedSubscriptionsContainer, subscriptionOptions, 'subscription_ids');
                [...userOptions].forEach(o => {
                    if (o.dataset.id === id) o.classList.remove('selected');
                });
                [...subscriptionOptions].forEach(o => {
                    if (o.dataset.id === id) o.classList.remove('selected');
                });
            }

            function optionClickHandler(option, selectedSet, container, options, inputName) {
                const id = option.dataset.id;
                const checkbox = option.querySelector('input[type="checkbox"]');
                if (selectedSet.has(id)) {
                    selectedSet.delete(id);
                    option.classList.remove('selected');
                    checkbox.checked = false;
                } else {
                    selectedSet.add(id);
                    option.classList.add('selected');
                    checkbox.checked = true;
                }
                updateSelectedDisplay(selectedSet, container, options, inputName);
            }

            // --- رویداد کلیک ---
            userOptions.forEach(opt => opt.addEventListener('click', () =>
                optionClickHandler(opt, selectedUsers, selectedUsersContainer, userOptions, 'user_ids')
            ));
            subscriptionOptions.forEach(opt => opt.addEventListener('click', () =>
                optionClickHandler(opt, selectedSubscriptions, selectedSubscriptionsContainer, subscriptionOptions, 'subscription_ids')
            ));

            // --- فیلتر جستجو ---
            document.getElementById('userSearch').addEventListener('input', e => filterOptions(e.target.value, userOptions));
            document.getElementById('subscriptionSearch').addEventListener('input', e => filterOptions(e.target.value, subscriptionOptions));

            function filterOptions(term, options) {
                options.forEach(o => o.style.display = o.textContent.toLowerCase().includes(term.toLowerCase()) ? 'block' : 'none');
            }

            // --- مدال ویرایش ---
            const discountModal = new bootstrap.Modal(document.getElementById('discountModal'));
            const discountForm = document.getElementById('discountForm');
            const modalTitle = document.getElementById('discountModalTitle');

            document.querySelectorAll('.edit-discount-btn').forEach(btn => {
                btn.addEventListener('click', function (e) {
                    e.preventDefault();
                    const id = this.dataset.id;

                    fetch(`/admin/discounts/${id}/edit`)
                        .then(res => res.json())
                        .then(data => {
                            // پر کردن فرم
                            document.getElementById('discount_id').value = data.id;
                            document.getElementById('code').value = data.code;
                            document.getElementById('type').value = data.type;
                            document.getElementById('value').value = data.value;
                            document.getElementById('max_uses').value = data.max_uses ?? '';
                            document.getElementById('starts_at').value = data.starts_at ? data.starts_at.replace(' ', 'T') : '';
                            document.getElementById('expires_at').value = data.expires_at ? data.expires_at.replace(' ', 'T') : '';
                            document.getElementById('is_public').value = data.is_public ? '1' : '0';
                            document.getElementById('description').value = data.description ?? '';
                            toggleUserSubscriptionSelect();

                            // کاربران
                            selectedUsers.clear();
                            if (data.user_ids) data.user_ids.forEach(id => selectedUsers.add(id.toString()));
                            updateSelectedDisplay(selectedUsers, selectedUsersContainer, userOptions, 'user_ids');

                            // اشتراک‌ها
                            selectedSubscriptions.clear();
                            if (data.subscription_ids) data.subscription_ids.forEach(id => selectedSubscriptions.add(id.toString()));
                            updateSelectedDisplay(selectedSubscriptions, selectedSubscriptionsContainer, subscriptionOptions, 'subscription_ids');

                            // عنوان مدال و متد فرم
                            modalTitle.textContent = 'ویرایش کد تخفیف';
                            discountForm.setAttribute('action', `/admin/discounts/${data.id}`);
                            document.getElementById('discountFormMethod').value = 'PUT';

                            discountModal.show();
                        })
                        .catch(err => {
                            console.error(err);
                            alert('خطا در دریافت اطلاعات تخفیف');
                        });
                });
            });

        });
    </script>
@endpush