@extends('Common::admin.layout.page')

@section('page')
<style>
    /* Input Fields Styling */
    .form-control,
    .select2-selection {
        background-color: #ffffff !important;
        border: 1px solid #ced4da !important;
        border-radius: 6px !important;
        padding: 10px 12px;
        height: auto;
        box-shadow: none;
        transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

    .form-control:focus,
    .select2-container--default.select2-container--open .select2-selection--single {
        border-color: #ced4da !important;
        outline: 0;
        box-shadow: none !important;
        background-color: #ffffff !important;
    }
    /* Placeholder Styling */
    .form-control::placeholder {
        color: #999999 !important;
        opacity: 1;
        font-weight: 400;
    }

    /* Select2 specific tweaks to match */
    .select2-container .select2-selection--single {
        height: 38px !important;
        padding: 5px;
    }
</style>

{{-- ===== Flash Messages ===== --}}
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <i class="fas fa-check-circle"></i> {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <i class="fas fa-exclamation-triangle"></i> {{ session('error') }}
</div>
@endif

{{-- ===== Payout Schedule Form Card ===== --}}
<div class="row mb-4">
    <div class="col-12">
        <div class="card card-outline card-success">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-calendar-alt"></i> {{ __('إعدادات جدول السحب') }}</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.payout_schedule.store') }}" method="POST" id="payoutForm">
                    @csrf

                    <div class="row">
                        {{-- Scope --}}
                        <div class="col-md-3 form-group">
                            <label>{{ __('النطاق') }}</label>
                            <select name="scope" id="scope_select" class="form-control select2" required>
                                <option value="specific_user">{{ __('مستخدم محدد') }}</option>
                                <option value="all_users">{{ __('جميع المستخدمين') }}</option>
                            </select>
                        </div>

                        {{-- Role --}}
                        <div class="col-md-3 form-group">
                            <label>{{ __('نوع المستخدم') }}</label>
                            <select name="role_id" id="role_select" class="form-control select2" required>
                                <option value="">{{ __('اختر نوع المستخدم') }}</option>
                                @foreach($roles as $role)
                                <option value="{{ $role->id }}">
                                    @if($role->name == 'playgroundmaster')
                                    {{ __('Playground Master') }}
                                    @elseif($role->name == 'player')
                                    {{ __('Player') }}
                                    @else
                                    {{ __($role->name) }}
                                    @endif
                                </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- User (for specific) --}}
                        <div class="col-md-6 form-group" id="user_select_col">
                            <label>{{ __('اختر المستخدم') }}</label>
                            <select name="user_id" id="user_select" class="form-control">
                                <option value="">{{ __('اختر نوع المستخدم أولاً ...') }}</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        {{-- Interval --}}
                        <div class="col-md-4 form-group">
                            <label>{{ __('فترة السحب') }}</label>
                            <select name="interval" id="interval_select" class="form-control select2" required>
                                <option value="daily">{{ __('يومي') }}</option>
                                <option value="weekly">{{ __('أسبوعي') }}</option>
                                <option value="monthly">{{ __('شهري') }}</option>
                            </select>
                        </div>

                        {{-- Weekly Anchor --}}
                        <div class="col-md-4 form-group" id="weekly_col" style="display:none;">
                            <label>{{ __('يوم الأسبوع') }}</label>
                            <select name="weekly_anchor" class="form-control select2">
                                <option value="monday">{{ __('الاثنين') }}</option>
                                <option value="tuesday">{{ __('الثلاثاء') }}</option>
                                <option value="wednesday">{{ __('الأربعاء') }}</option>
                                <option value="thursday">{{ __('الخميس') }}</option>
                                <option value="friday">{{ __('الجمعة') }}</option>
                                <option value="saturday">{{ __('السبت') }}</option>
                                <option value="sunday">{{ __('الأحد') }}</option>
                            </select>
                        </div>

                        {{-- Monthly Anchor --}}
                        <div class="col-md-4 form-group" id="monthly_col" style="display:none;">
                            <label>{{ __('يوم الشهر') }}</label>
                            <select name="monthly_anchor" class="form-control select2">
                                @for($i = 1; $i <= 31; $i++)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                            </select>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-save"></i> {{ __('تحديث جدول السحب') }}
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- ===== Users Table ===== --}}
<div class="row">
    <div class="col-12">
        <div class="card card-outline card-info">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-users"></i> {{ __('المستخدمين المتصلين بـ Stripe') }} ({{ $users->total() }})</h3>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('الاسم') }}</th>
                            <th>{{ __('الإيميل') }}</th>
                            <th>{{ __('نوع المستخدم') }}</th>
                            <th>{{ __('حالة الحساب') }}</th>
                            <th>{{ __('Stripe Account') }}</th>
                            <th>{{ __('فترة السحب الحالية') }}</th>
                            <th>{{ __('يوم السحب') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($users as $user)
                        <tr>
                            <td>{{ $user->id }}</td>
                            <td>{{ $user->name }}</td>
                            <td>{{ $user->email }}</td>
                            <td><span class="badge badge-info">{{ $user->role->name ?? '—' }}</span></td>
                            <td>
                                @if($user->stripeconnect_account_status == 'complete')
                                <span class="badge badge-success">{{ __('مكتمل') }}</span>
                                @elseif($user->stripeconnect_account_status == 'pending')
                                <span class="badge badge-warning">{{ __('قيد المراجعة') }}</span>
                                @elseif($user->stripeconnect_account_status == 'restricted')
                                <span class="badge badge-danger">{{ __('مقيد') }}</span>
                                @elseif($user->stripeconnect_account_status)
                                <span class="badge badge-secondary">{{ $user->stripeconnect_account_status }}</span>
                                @else
                                <span class="badge badge-secondary">{{ __('غير محدد') }}</span>
                                @endif
                            </td>
                            <td><code>{{ $user->stripe_account_id }}</code></td>
                            <td>
                                @if($user->payout_interval)
                                <span class="badge badge-success">{{ __($user->payout_interval) }}</span>
                                @else
                                <span class="badge badge-secondary">{{ __('لم يتم التحديد') }}</span>
                                @endif
                            </td>
                            <td>{{ $user->payout_anchor ?? '—' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                <i class="fas fa-info-circle"></i> {{ __('لا يوجد مستخدمين متصلين بـ Stripe') }}
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if($users->hasPages())
            <div class="card-footer clearfix">
                {{ $users->links() }}
            </div>
            @endif
        </div>
    </div>
</div>

<script>
    (function() {
        var scopeSelect = $('#scope_select');
        var roleSelect = $('#role_select');
        var userCol = $('#user_select_col');
        var userSelect = $('#user_select');
        var intervalSelect = $('#interval_select');
        var weeklyCol = $('#weekly_col');
        var monthlyCol = $('#monthly_col');

        function toggleUserCol() {
            if (scopeSelect.val() === 'specific_user') {
                userCol.show();
            } else {
                userCol.hide();
            }
        }

        // Initialize standard Select2 elements for a consistent UI
        $('.select2:not(#user_select)').select2({
            width: '100%'
        });

        function fetchUsers() {
            if (scopeSelect.val() !== 'specific_user') return;
            var roleId = roleSelect.val();
            
            if (userSelect.hasClass('select2-hidden-accessible')) {
                userSelect.select2('destroy');
            }
            userSelect.empty();

            if (!roleId) {
                userSelect.html('<option value="">{{ __("اختر نوع المستخدم أولاً ...") }}</option>');
                return;
            }

            userSelect.select2({
                allowClear: true,
                placeholder: "{{ __('ابحث عن مستخدم بالاسم أو الإيميل...') }}",
                ajax: {
                    url: "{{ route('admin.payout_schedule.users') }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term,
                            role_id: roleId,
                            page: params.page || 1
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: data.results,
                            pagination: data.pagination
                        };
                    },
                    cache: true
                },
                minimumInputLength: 0
            });
        }

        scopeSelect.on('change', function() {
            toggleUserCol();
            fetchUsers();
        });

        roleSelect.on('change', fetchUsers);

        intervalSelect.on('change', function() {
            weeklyCol.hide();
            monthlyCol.hide();
            if ($(this).val() === 'weekly') weeklyCol.show();
            if ($(this).val() === 'monthly') monthlyCol.show();
        });

        toggleUserCol();

        $('#payoutForm').on('submit', function(e) {
            e.preventDefault();
            var form = $(this);
            var submitBtn = form.find('button[type="submit"]');
            var originalBtnHtml = submitBtn.html();
            
            submitBtn.html('<i class="fas fa-spinner fa-spin"></i> {{ __("جاري التحديث...") }}').prop('disabled', true);

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: form.serialize(),
                success: function(response) {
                    Swal.fire({
                        toast: true,
                        position: 'top',
                        icon: 'success',
                        title: response.message || '{{ __("Data Will Be Updated Within One Minute") }}',
                        showConfirmButton: false,
                        timer: 5000
                    });
                    
                    // Reload page after exactly 1 minute to reflect background job processing
                    setTimeout(function() {
                        window.location.reload();
                    }, 60000);
                },
                error: function(xhr) {
                    submitBtn.html(originalBtnHtml).prop('disabled', false);
                    Swal.fire({
                        toast: true,
                        position: 'top',
                        icon: 'error',
                        title: '{{ __("حدث خطأ أثناء التحديث") }}',
                        showConfirmButton: false,
                        timer: 3000
                    });
                }
            });
        });

    })();
</script>
@stop