@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/balance-transfer.css') }}">
@endsection

@section('title')
    سجل التحويلات
@endsection

@section('content')
    <div class="content-wrapper" x-data="balanceTransfers" x-cloak>
        <div class="">
            <div class="page-header">
                <x-lucide-arrow-left-right 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">
                    <!-- Transfer Type Filter -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.transferTimeout)"
                        @mouseleave="if(open) window.transferTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.transferTimeout)"
                            :class="{ 'filter-active': filters.transferType !== 'all' }">
                            <x-lucide-filter width="16" height="16" />
                            <span class="filter-display-text" x-text="getTransferTypeFilterText()"></span>
                            <span x-show="filters.transferType !== '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.transferType === 'all' }"
                                    @click="setTransferTypeFilter('all'); open=false; clearTimeout(window.transferTimeout);">
                                    الكل <x-lucide-list width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.transferType === 'outgoing' }"
                                    @click="setTransferTypeFilter('outgoing'); open=false; clearTimeout(window.transferTimeout);">
                                    تحويلات صادرة <x-lucide-arrow-up-right width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.transferType === 'incoming' }"
                                    @click="setTransferTypeFilter('incoming'); open=false; clearTimeout(window.transferTimeout);">
                                    تحويلات واردة <x-lucide-arrow-down-left width="16" height="16" />
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Filter -->
                    <div class="dropdown-container open-left-sm" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.advancedTimeout)"
                        @mouseleave="if(open) window.advancedTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button"
                            @click.prevent="open=!open; clearTimeout(window.advancedTimeout)"
                            :class="{ 'filter-active': hasActiveAdvancedFilter() }">
                            <x-lucide-sliders-horizontal width="16" height="16" />
                            <span>بحث متقدم</span>
                            <span x-show="hasActiveAdvancedFilter()" class="filter-indicator" x-cloak>
                                <x-lucide-circle width="8" height="8" />
                            </span>
                        </button>
                        <div class="dropdown-menu advanced-filter-dropdown"
                            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="filter-type-selector">
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.activeFilterType === 'clear' }"
                                    @click="setFilterType('clear'); open=false; clearTimeout(window.advancedTimeout);">
                                    إلغاء البحث <x-lucide-x-circle width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.activeFilterType === 'date' }"
                                    @click="setFilterType('date')">
                                    التاريخ <x-lucide-calendar width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.activeFilterType === 'counterparty' }"
                                    @click="setFilterType('counterparty')">
                                    المستخدم <x-lucide-circle-user width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.activeFilterType === 'mobile' }"
                                    @click="setFilterType('mobile')">
                                    رقم الموبايل <x-lucide-smartphone width="16" height="16" />
                                </button>
                                <button type="button" class="dropdown-item"
                                    :class="{ active: filters.activeFilterType === 'amount' }"
                                    @click="setFilterType('amount')">
                                    المبلغ <x-lucide-banknote width="16" height="16" />
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Filter input panels -->
                    <div class="form-container no-box hidden" :class="{ hidden: !filters.showFilterInputs }"
                        id="table-transfers-inputs" x-cloak>
                        <div class="inputs-to-show" x-show="filters.activeFilterType === 'date'" id="date-filter-inputs"
                            x-cloak>
                            <div class="input-group prefix">
                                <div class="input-wrapper">
                                    <span class="input-prefix">من</span>
                                    <input type="date" x-model="filters.dateFrom" id="date-from"
                                        @keyup.enter="getTransfers">
                                </div>
                            </div>
                            <div class="input-group prefix">
                                <div class="input-wrapper">
                                    <span class="input-prefix">إلى</span>
                                    <input type="date" x-model="filters.dateTo" id="date-to"
                                        @keyup.enter="getTransfers">
                                </div>
                            </div>
                            <div class="d-flex justify-content-end align-items-center">
                                <button type="button" class="btn-custom-secondary" @click="getTransfers">تطبيق</button>
                            </div>
                        </div>
                        <div class="form-row inputs-to-show" x-show="filters.activeFilterType === 'counterparty'"
                            id="counterparty-filter-inputs" x-cloak>
                            <div class="input-group">
                                <label for="counterparty-name">اسم المستخدم:</label>
                                <div class="input-wrapper">
                                    <input type="text" x-model="filters.counterparty" id="counterparty-name"
                                        placeholder="أدخل اسم المستخدم" @keyup.enter="getTransfers">
                                </div>
                            </div>
                            <button type="button" class="btn-custom-secondary" @click="getTransfers">تطبيق</button>
                        </div>
                        <div class="form-row inputs-to-show" x-show="filters.activeFilterType === 'mobile'"
                            id="mobile-filter-inputs" x-cloak>
                            <div class="input-group">
                                <label for="mobile-number">رقم الموبايل:</label>
                                <div class="input-wrapper">
                                    <input type="text" x-model="filters.mobile" id="mobile-number"
                                        placeholder="أدخل رقم الموبايل" @keyup.enter="getTransfers">
                                </div>
                            </div>
                            <button type="button" class="btn-custom-secondary" @click="getTransfers">تطبيق</button>
                        </div>
                        <div class="form-row inputs-to-show" x-show="filters.activeFilterType === 'amount'"
                            id="amount-filter-inputs" x-cloak>
                            <div class="input-group">
                                <label for="amount-min">المبلغ الأدنى:</label>
                                <div class="input-wrapper">
                                    <input type="number" x-model="filters.amountMin" id="amount-min"
                                        placeholder="أدخل المبلغ الأدنى" @keyup.enter="getTransfers">
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="amount-max">المبلغ الأعلى:</label>
                                <div class="input-wrapper">
                                    <input type="number" x-model="filters.amountMax" id="amount-max"
                                        placeholder="أدخل المبلغ الأعلى" @keyup.enter="getTransfers">
                                </div>
                            </div>
                            <button type="button" class="btn-custom-secondary" @click="getTransfers">تطبيق</button>
                        </div>
                    </div>
                </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 transfers message -->
                    <div class="col-12 text-center" x-show="!loading && (!transfers || transfers.length === 0)" x-cloak>
                        <div class="empty-state">
                            <x-lucide-arrow-left-right class="empty-icon" width="40" height="40" />
                            <h3>لا توجد تحويلات</h3>
                            <p>لم يتم العثور على أي تحويلات بناءً على الفلاتر المحددة</p>
                            <a href="{{ route('balance-transfer.create') }}" class="btn-custom-primary">
                                <x-lucide-plus-circle width="16" height="16" />
                                إجراء تحويل جديد
                            </a>
                        </div>
                    </div>

                    <!-- Transfers container -->
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-2" x-show="!loading" x-cloak>
                        <!-- Transfers list -->
                        <template x-for="transfer in transfers" :key="transfer.id">
                            <div class="col">
                                <div class="item-card balance-transfer-card" :class="getTransferCardClass(transfer.type)">
                                    <div class="card-body">
                                        <div class="item-header">
                                            <div>
                                                <span class="item-id" dir="ltr"
                                                    x-text="'#' + (transfer.payment_number || 'N/A')"></span>
                                                <div class="item-date" x-text="formatDate(transfer.created_at)"></div>
                                            </div>
                                            <div class="header-end">
                                                <span class="badge-tag" :class="getTransferBadgeClass(transfer.type)">
                                                    <template x-if="transfer.type === 'incoming'">
                                                        {!! svg('lucide-arrow-down-left', ['width' => 16, 'height' => 16])->toHtml() !!}
                                                    </template>
                                                    <template x-if="transfer.type !== 'incoming'">
                                                        {!! svg('lucide-arrow-up-right', ['width' => 16, 'height' => 16])->toHtml() !!}
                                                    </template>
                                                    <span class="value-amount" :class="getAmountClass(transfer.type)"
                                                        x-text="formatAmount(transfer.amount)"></span>
                                                </span>
                                                <div class="badge-name" x-text="transfer.status"></div>
                                            </div>
                                        </div>

                                        <div class="details-grid">
                                            <div class="details-item">
                                                <span class="details-label">المستخدم:</span>
                                                <div class="details-value" x-text="transfer.counterparty"></div>
                                            </div>
                                            <div class="details-item balance">
                                                <span class="details-label">الرصيد:</span>
                                                <div class="details-value comparison-display">
                                                    <span class="value-before"
                                                        x-text="formatAmount(transfer.balance_before)"></span>
                                                    <span class="value-separator"><x-lucide-arrow-left width="14" height="14" /></span>
                                                    <span class="value-after"
                                                        :class="transfer.type === 'incoming' ? 'color-success' : 'color-danger'"
                                                        x-text="formatAmount(transfer.balance_after)"></span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="details-toggle" @click.prevent.stop="toggleDetails($event)">
                                            @svg('lucide-chevron-down', ['class' => 'toggle-icon', 'width' => '14', 'height' => '14'])
                                        </div>

                                        <div class="extra-details">
                                            <div class="details-grid">
                                                <div class="details-item" x-show="transfer.counterparty_mobile">
                                                    <span class="details-label">رقم الجوال:</span>
                                                    <div class="details-value" x-text="transfer.counterparty_mobile">
                                                    </div>
                                                </div>
                                                <div class="details-item">
                                                    <span class="details-label">المبلغ الأصلي:</span>
                                                    <div class="details-value" x-text="formatAmount(transfer.raw_amount)">
                                                    </div>
                                                </div>
                                                <div class="details-item">
                                                    <span class="details-label">نوع العملية:</span>
                                                    <div class="details-value"
                                                        x-text="transfer.type === 'incoming' ? 'واردة' : 'صادرة'"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('balanceTransfers', () => ({
                transfers: [],
                loading: false,
                userCurrency: @json(Auth::user()->currency ?? null),
                filters: {
                    transferType: 'all',
                    dateFrom: '',
                    dateTo: '',
                    counterparty: '',
                    mobile: '',
                    amountMin: '',
                    amountMax: '',
                    activeFilterType: 'clear',
                    showFilterInputs: false
                },

                init() {
                    this.loadUrlFilters();
                    this.getTransfers();
                },

                async getTransfers() {
                    this.loading = true;
                    try {
                        const params = new URLSearchParams();
                        if (this.filters.dateFrom) params.append('date_from', this.filters
                            .dateFrom);
                        if (this.filters.dateTo) params.append('date_to', this.filters.dateTo);
                        if (this.filters.counterparty) params.append('counterparty', this.filters
                            .counterparty);
                        if (this.filters.mobile) params.append('mobile', this.filters.mobile);
                        if (this.filters.amountMin) params.append('amount_min', this.filters
                            .amountMin);
                        if (this.filters.amountMax) params.append('amount_max', this.filters
                            .amountMax);
                        if (this.filters.transferType !== 'all') params.append('transfer_type', this
                            .filters
                            .transferType);

                        const response = await axios.get(
                            `{{ route('balance-transfer.indexjs') }}?${params}`);

                        if (response.data.error === false) {
                            let transfers = response.data.data.transfers || [];
                            this.transfers = transfers;
                            this.updateUrl();
                        } else {
                            showToast({
                                type: 'error',
                                message: response?.data?.message ||
                                    'حدث خطأ أثناء جلب التحويلات'
                            });
                            console.error('Error fetching transfers:', response?.data?.message);
                            this.transfers = [];
                        }
                    } catch (error) {
                        console.error('Error fetching transfers:', error);
                        this.transfers = [];
                    } finally {
                        this.loading = false;
                    }
                },

                // Transfer type filter
                setTransferTypeFilter(type) {
                    this.filters.transferType = type;
                    this.getTransfers();
                },

                getTransferTypeFilterText() {
                    const types = {
                        'all': 'الكل',
                        'outgoing': 'صادرة',
                        'incoming': 'واردة'
                    };
                    return types[this.filters.transferType] || 'الكل';
                },

                // Advanced filter functionality
                setFilterType(filterType) {
                    this.filters.activeFilterType = filterType || 'clear';
                    this.filters.showFilterInputs = filterType && filterType !== 'clear';

                    if (filterType === 'clear') {
                        this.clearFilters();
                    }
                },

                hasActiveAdvancedFilter() {
                    return this.filters.dateFrom || this.filters.dateTo ||
                        this.filters.counterparty || this.filters.mobile || this.filters.amountMin ||
                        this.filters.amountMax;
                },

                async clearFilters() {
                    this.filters.dateFrom = '';
                    this.filters.dateTo = '';
                    this.filters.counterparty = '';
                    this.filters.mobile = '';
                    this.filters.amountMin = '';
                    this.filters.amountMax = '';
                    this.filters.transferType = 'all';
                    this.filters.activeFilterType = 'clear';
                    this.filters.showFilterInputs = false;

                    // Clear URL parameters
                    window.history.pushState({}, '', window.location.pathname);

                    await this.getTransfers();
                },

                // Card styling methods
                getTransferCardClass(type) {
                    return {
                        'transfer-incoming': type === 'incoming',
                        'transfer-outgoing': type === 'outgoing'
                    };
                },

                getTransferBadgeClass(type) {
                    return {
                        'badge-incoming': type === 'incoming',
                        'badge-outgoing': type === 'outgoing'
                    };
                },

                getTransferIcon(type) {
                    return type === 'incoming' ? 'bi-arrow-down-left' : 'bi-arrow-up-right';
                },

                getAmountClass(type) {
                    return type === 'incoming' ? 'color-success' : 'color-danger';
                },

                // Utility methods
                formatAmount(amount) {
                    if (!amount) return '0';
                    const formatted = parseFloat(amount).toLocaleString('en-US');
                    return formatted + (this.userCurrency ? ' ' + this.userCurrency.name : '');
                },

                formatDate(dateString) {
                    const date = new Date(dateString);
                    return date.toLocaleDateString('en-GB', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: false
                    });
                },

                toggleDetails(event) {
                    const card = event.currentTarget.closest('.item-card');
                    const extraDetails = card.querySelector('.extra-details');
                    const toggleIcon = event.currentTarget.querySelector('.toggle-icon');

                    if (extraDetails.style.display === 'block') {
                        extraDetails.style.display = 'none';
                        toggleIcon.classList.remove('rotated');
                    } else {
                        extraDetails.style.display = 'block';
                        toggleIcon.classList.add('rotated');
                    }
                },

                // URL management
                updateUrl() {
                    const params = new URLSearchParams();
                    if (this.filters.transferType !== 'all') params.append('transfer_type', this.filters
                        .transferType);
                    if (this.filters.dateFrom) params.append('date_from', this.filters.dateFrom);
                    if (this.filters.dateTo) params.append('date_to', this.filters.dateTo);
                    if (this.filters.counterparty) params.append('counterparty', this.filters
                        .counterparty);
                    if (this.filters.mobile) params.append('mobile', this.filters.mobile);
                    if (this.filters.amountMin) params.append('amount_min', this.filters.amountMin);
                    if (this.filters.amountMax) params.append('amount_max', this.filters.amountMax);

                    const newUrl = params.toString() ? `${window.location.pathname}?${params}` : window
                        .location.pathname;
                    window.history.pushState({}, '', newUrl);
                },

                loadUrlFilters() {
                    const params = new URLSearchParams(window.location.search);

                    this.filters.transferType = params.get('transfer_type') || 'all';
                    this.filters.dateFrom = params.get('date_from') || '';
                    this.filters.dateTo = params.get('date_to') || '';
                    this.filters.counterparty = params.get('counterparty') || '';
                    this.filters.mobile = params.get('mobile') || '';
                    this.filters.amountMin = params.get('amount_min') || '';
                    this.filters.amountMax = params.get('amount_max') || '';

                    // Set active filter type based on URL params
                    if (this.filters.dateFrom || this.filters.dateTo) {
                        this.filters.activeFilterType = 'date';
                        this.filters.showFilterInputs = true;
                    } else if (this.filters.counterparty) {
                        this.filters.activeFilterType = 'counterparty';
                        this.filters.showFilterInputs = true;
                    } else if (this.filters.mobile) {
                        this.filters.activeFilterType = 'mobile';
                        this.filters.showFilterInputs = true;
                    } else if (this.filters.amountMin || this.filters.amountMax) {
                        this.filters.activeFilterType = 'amount';
                        this.filters.showFilterInputs = true;
                    }
                }
            }));
        });
    </script>
@endsection