@extends('user.layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/cards/order-card/order-card.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/dropdown/dropdown.css') }}">
@endsection

@section('title')
    الدفعات
@endsection

@section('content')
    <div class="content-wrapper" x-data="payments" x-cloak>
        <div class="">
            <div class="page-header">
                <x-lucide-table 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">

                    <!-- Payment Type Filter -->
                    <div class="dropdown-container" x-data="{ open: false }" @click.outside="open=false"
                        @mouseenter="clearTimeout(window.paymentTypeTimeout)"
                        @mouseleave="if(open) window.paymentTypeTimeout = setTimeout(() => open=false, 500)">
                        <button class="dropdown-toggle ui-button filter-button"
                            @click.prevent="open=!open; clearTimeout(window.paymentTypeTimeout)"
                            :class="{ 'filter-active': filters.paymentType !== 'all' }">
                            <x-lucide-filter width="16" height="16" />
                            <span class="filter-display-text" x-text="getPaymentTypeFilterText()"></span>
                            <span x-show="filters.paymentType !== '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">
                                <template x-for="paymentType in filterConfig.paymentTypes" :key="paymentType.value">
                                    <button type="button" class="dropdown-item"
                                        :class="{ active: filters.paymentType === paymentType.value }"
                                        @click="setPaymentTypeFilter(paymentType.value); open=false; clearTimeout(window.paymentTypeTimeout);">
                                        <span x-text="paymentType.label"></span>
                                    </button>
                                </template>
                            </div>
                        </div>
                    </div>

                    <!-- Advanced Filter Toggle -->
                    <div class="dropdown-container open-left-sm">
                        <button class="dropdown-toggle ui-button" :class="{ 'filter-active': hasActiveAdvancedFilter() }"
                            @click="toggleAdvancedFilters">
                            <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>

                </div>

                <div class="row">
                    <!-- Filter input panels (always visible structure like orders page) -->
                    <div class="col-12">
                        <div class="" id="table-payments-inputs" x-show="filters.showFilterInputs" x-transition
                            x-cloak>

                            <!-- Filters Grid -->
                            <div class="row g-3 mb-3">
                                <!-- First Row: Payment Number -->
                                <div class="col-12 col-md-6">
                                    <div class="filter-section">
                                        <h6 class="filter-section-title">
                                            <x-lucide-hash width="16" height="16" /> رقم الدفعة
                                        </h6>
                                        <div class="input-group">
                                            <div class="input-wrapper">
                                                <input type="text" x-model="filters.paymentNumber" id="payment-number"
                                                    placeholder="أدخل رقم الدفعة" @keyup.enter="getPayments">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Date Filter in Same Row -->
                                <div class="col-12 col-md-6">
                                    <div class="filter-section">
                                        <h6 class="filter-section-title">
                                            <x-lucide-calendar width="16" height="16" /> التاريخ
                                        </h6>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <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="getPayments" @change="getPayments">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <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="getPayments" @change="getPayments">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Action Buttons -->
                            <div class="row">
                                <div class="col-12">
                                    <div
                                        class="d-flex justify-content-center justify-content-md-end align-items-center gap-2 pt-2 border-top">
                                        <button type="button" class="btn-custom-primary" @click="getPayments">
                                            <x-lucide-search width="16" height="16" /> بحث
                                        </button>
                                        <button type="button" class="btn-custom-secondary" @click="clearFilters">
                                            <x-lucide-x-circle width="16" height="16" /> مسح الفلاتر
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-fluid my-4">
                    <!-- Loading indicator -->
                    <div x-show="loading" class="col-12 text-center" x-cloak>
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">جاري التحميل...</span>
                        </div>
                    </div>

                    <!-- No payments message -->
                    <div x-show="!loading && (!payments || payments.length === 0)" class="col-12 text-center" x-cloak>
                        لا توجد دفعات لعرضها
                    </div>
                    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-2" x-cloak>

                        <!-- Payments list -->
                        <template x-for="payment in payments" :key="payment.id">
                            <div class="col">
                                <div class="item-card" :class="getPaymentCardClass(payment.payment_type)">
                                    <div class="payment-type-indicator" :class="payment.payment_type"></div>
                                    <div class="card-body">
                                        <div class="item-header">
                                            <div>
                                                <span class="item-id" dir="ltr"
                                                    x-text="'#' + (payment.payment_number || 'N/A')"></span>
                                                <div class="item-date" x-text="formatDate(payment.created_at)"></div>
                                            </div>
                                            <div class="header-end">
                                                <span class="badge-tag"
                                                    :class="getPaymentBadgeClass(payment.payment_type)">
                                                    <span x-html="getPaymentIconSvg(payment.payment_type)"></span>
                                                    <span class="value-amount"
                                                        :class="getAmountClass(payment.payment_type)"
                                                        x-text="formatAmount(payment.amount)"></span>
                                                </span>
                                                <div class="badge-name"
                                                    x-text="getPaymentTypeArabic(payment.payment_type)">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="details-grid">
                                            <div class="details-item balance">
                                                <span class="details-label">الرصيد:</span>
                                                <div class="details-value comparison-display">
                                                    <span class="value-before"
                                                        x-text="formatAmount(payment.balance_before || 'N/A')"></span>
                                                    <span class="value-separator"><x-lucide-arrow-left width="16" height="16" /></span>
                                                    <span class="value-after"
                                                        :class="(payment.amount || 'N/A') > 0 ? 'color-success' : 'color-danger'"
                                                        x-text="formatAmount(payment.balance_after || 'N/A')">
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>


            </div>


        </div>
    </div>
@endsection

@section('js')
    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('payments', () => ({
                payments: [],
                loading: true,
                filterConfig: @json($filterConfig),
                filters: {
                    dateFrom: '',
                    dateTo: '',
                    paymentNumber: '',
                    paymentType: 'all',
                    activeFilterType: 'clear',
                    showFilterInputs: true
                },

                init() {
                    // Set default dates to today before loading from URL
                    const today = this.getTodayDateValue();
                    this.filters.dateFrom = today;
                    this.filters.dateTo = today;
                    this.loadFiltersFromURL();
                    this.getPayments();
                },

                getTodayDateValue() {
                    // Returns YYYY-MM-DD in local time
                    const now = new Date();
                    const year = now.getFullYear();
                    const month = String(now.getMonth() + 1).padStart(2, '0');
                    const day = String(now.getDate()).padStart(2, '0');
                    return `${year}-${month}-${day}`;
                },

                // Loading control methods
                startLoading() {
                    this.loading = true;
                },
                stopLoading() {
                    this.loading = false;
                },

                // URL management methods
                loadFiltersFromURL() {
                    const urlParams = new URLSearchParams(window.location.search);

                    // Load filters from URL, preserving defaults set in init()
                    this.filters.dateFrom = urlParams.get('dateFrom') || this.filters.dateFrom;
                    this.filters.dateTo = urlParams.get('dateTo') || this.filters.dateTo;
                    this.filters.paymentNumber = urlParams.get('payment_number') || '';
                    this.filters.paymentType = urlParams.get('payment_type') || 'all';
                },

                updateURL() {
                    const urlParams = new URLSearchParams();

                    // Add filters to URL params if they have values
                    if (this.filters.dateFrom) urlParams.set('dateFrom', this.filters.dateFrom);
                    if (this.filters.dateTo) urlParams.set('dateTo', this.filters.dateTo);
                    if (this.filters.paymentNumber) urlParams.set('payment_number', this.filters
                        .paymentNumber);
                    if (this.filters.paymentType && this.filters.paymentType !== 'all') urlParams.set(
                        'payment_type', this.filters.paymentType);

                    // Update URL without page reload
                    const newURL = window.location.pathname + (urlParams.toString() ? '?' + urlParams
                        .toString() : '');
                    window.history.pushState({}, '', newURL);
                },

                // Loading control methods
                startLoading() {
                    this.loading = true;
                },

                stopLoading() {
                    this.loading = false;
                },

                async getPayments() {
                    this.startLoading();
                    try {
                        const params = {};

                        // Add filters to params if they have values
                        if (this.filters.dateFrom) params.dateFrom = this.filters.dateFrom;
                        if (this.filters.dateTo) params.dateTo = this.filters.dateTo;
                        if (this.filters.paymentNumber) params.payment_number = this.filters
                            .paymentNumber;
                        if (this.filters.paymentType && this.filters.paymentType !== 'all') params
                            .payment_type = this.filters.paymentType;

                        // Update URL with current filters
                        this.updateURL();

                        const response = await axios.get('{{ route('payments.index') }}', {
                            headers: {
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            params: params
                        });
                        this.payments = response?.data?.payments ?? [];
                        console.log(response?.data?.payments)
                    } catch (error) {
                        console.error('Error fetching payments:', error);
                        this.payments = [];
                    } finally {
                        this.stopLoading();
                    }
                },

                formatDate(dateString) {
                    if (typeof formatDate !== 'undefined') {
                        return formatDate(dateString);
                    }
                    // Fallback if helpers not loaded
                    return new Date(dateString).toLocaleDateString("ar-EG", {
                        year: "numeric",
                        month: "short",
                        day: "2-digit",
                    });
                },

                formatAmount(amount) {
                    const userCurrency = @json(Auth::user()->currency ?? null);
                    if (typeof formatAmount !== 'undefined') {
                        return formatAmount(amount, userCurrency);
                    }
                    // Fallback if helpers not loaded
                    if (!amount) return '0';
                    return parseFloat(amount).toLocaleString('ar-SA') + (userCurrency ? ' ' +
                        userCurrency.name : '');
                },

                // Payment type helper methods
                getPaymentTypeArabic(paymentType) {
                    const paymentTypeObj = this.filterConfig.paymentTypes.find(type => type.value ===
                        paymentType);
                    return paymentTypeObj ? paymentTypeObj.label : paymentType || 'غير محدد';
                },

                getPaymentCardClass(paymentType) {
                    const styles = this.filterConfig.paymentTypeStyles[paymentType];
                    return styles ? styles.cardClass : '';
                },

                getPaymentBadgeClass(paymentType) {
                    const styles = this.filterConfig.paymentTypeStyles[paymentType];
                    return styles ? styles.badgeClass : '';
                },

                getPaymentIcon(paymentType) {
                    const styles = this.filterConfig.paymentTypeStyles[paymentType];
                    return styles ? styles.iconClass : 'banknote';
                },

                getPaymentIconSvg(paymentType) {
                    const iconMap = {
                        'plus-circle': `{!! svg("lucide-plus-circle", ["width" => 16, "height" => 16])->toHtml() !!}`,
                        'minus-circle': `{!! svg("lucide-minus-circle", ["width" => 16, "height" => 16])->toHtml() !!}`,
                        'refresh-cw': `{!! svg("lucide-refresh-cw", ["width" => 16, "height" => 16])->toHtml() !!}`,
                        'arrow-left-right': `{!! svg("lucide-arrow-left-right", ["width" => 16, "height" => 16])->toHtml() !!}`,
                        'percent': `{!! svg("lucide-percent", ["width" => 16, "height" => 16])->toHtml() !!}`,
                        'banknote': `{!! svg("lucide-banknote", ["width" => 16, "height" => 16])->toHtml() !!}`,
                    };
                    const styles = this.filterConfig.paymentTypeStyles[paymentType];
                    const iconClass = styles ? styles.iconClass : 'banknote';
                    const iconName = iconClass.split(' ')[0];
                    return iconMap[iconName] || iconMap['banknote'];
                },

                getAmountClass(paymentType) {
                    const styles = this.filterConfig.paymentTypeStyles[paymentType];
                    return styles ? styles.amountClass : '';
                },

                // formatPaymentAmount(amount, paymentType) {
                //     const userCurrency = @json(Auth::user()->currency ?? null);
                //     if (!amount) return '0';

                //     let formattedAmount = parseFloat(amount).toLocaleString('ar-SA');

                //     // Add prefix based on payment type
                //     if (paymentType === 'charge') {
                //         formattedAmount = '+' + formattedAmount;
                //     } else if (paymentType === 'withdraw') {
                //         formattedAmount = '-' + formattedAmount;
                //     }

                //     return formattedAmount + (userCurrency ? ' ' + userCurrency.name : '');
                // },

                async clearFilters() {
                    // Reset to today's date as default
                    const today = this.getTodayDateValue();
                    this.filters.dateFrom = today;
                    this.filters.dateTo = today;
                    this.filters.paymentNumber = '';
                    this.filters.paymentType = 'all';
                    this.filters.activeFilterType = 'clear';
                    this.filters.showFilterInputs = true;

                    await this.getPayments();
                },

                // Toggle advanced filters visibility
                toggleAdvancedFilters() {
                    this.filters.showFilterInputs = !this.filters.showFilterInputs;
                },

                // Payment type filter methods
                async setPaymentTypeFilter(paymentType) {
                    this.filters.paymentType = paymentType || 'all';
                    await this.getPayments();
                },

                getPaymentTypeFilterText() {
                    const paymentTypeObj = this.filterConfig.paymentTypes.find(type => type.value ===
                        this.filters.paymentType);
                    return paymentTypeObj ? paymentTypeObj.label : 'الكل';
                },

                // Check if any advanced filter is active (not counting today's default date)
                hasActiveAdvancedFilter() {
                    const today = this.getTodayDateValue();
                    const hasNonDefaultDate = (this.filters.dateFrom && this.filters.dateFrom !==
                        today) ||
                        (this.filters.dateTo && this.filters.dateTo !== today);
                    return this.filters.paymentNumber || hasNonDefaultDate;
                }
            }));
        });
    </script>
@endsection