@if(isset($defaultSettings))
<div class="card card-outline card-info mb-4 shadow-sm elevation-2">
    <div class="card-header bg-light">
        <h3 class="card-title text-info font-weight-bold">
            <i class="fas fa-magic mr-1"></i> الإعدادات الافتراضية للنظام
        </h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <ul class="mb-2 list-unstyled">
                    <li class="mb-1"><i class="fas fa-check-circle text-success mr-1"></i> نسبة عمولة المضيف: <strong>{{ $defaultSettings['owner_percentage'] }}%</strong></li>
                    <li><i class="fas fa-check-circle text-success mr-1"></i> نسبة عمولة الزبون: <strong>{{ $defaultSettings['customer_fee_percentage'] }}%</strong></li>
                </ul>
            </div>
            <div class="col-md-6">
                <ul class="mb-2 list-unstyled">
                    <li class="mb-1"><i class="fas fa-check-circle text-success mr-1"></i> الحد الأقصى للموظفين: <strong>{{ $defaultSettings['employee_count'] }}</strong></li>
                    <li><i class="fas fa-check-circle text-success mr-1"></i> الحد الأقصى للعقارات: <strong>{{ $defaultSettings['count_of_units'] }}</strong></li>
                </ul>
            </div>
        </div>
        <button type="button" class="btn btn-sm btn-outline-info mt-2 font-weight-bold" onclick="applyDefaultSettings()">
            <i class="fas fa-sync-alt mr-1"></i> تطبيق الإعدادات الافتراضية على النموذج
        </button>
    </div>
</div>

<script>
    function applyDefaultSettings() {
        if(confirm('هل أنت متأكد من تطبيق الإعدادات الافتراضية؟ سيتم استبدال القيم الحالية في النموذج.')) {
            let ownerField = document.querySelector('input[name="owner_percentage"]');
            let customerField = document.querySelector('input[name="customer_fee_percentage"]');
            let employeeField = document.querySelector('input[name="employee_count"]');
            let unitsField = document.querySelector('input[name="count_of_units"]');
            
            if(ownerField) ownerField.value = '{{ $defaultSettings["owner_percentage"] }}';
            if(customerField) customerField.value = '{{ $defaultSettings["customer_fee_percentage"] }}';
            if(employeeField) employeeField.value = '{{ $defaultSettings["employee_count"] }}';
            if(unitsField) unitsField.value = '{{ $defaultSettings["count_of_units"] }}';
        }
    }
</script>
@endif

<!-- Card 1: بيانات الحساب والاشتراك -->
<div class="card card-outline card-primary mb-4 elevation-2">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-id-card mr-1 text-primary"></i> بيانات الحساب والاشتراك</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="form-group col-md-6">
                {!! Form::label('tbl_user_id', '<i class="fas fa-user text-muted mr-1"></i> ' . __('models/subscriptions.fields.tbl_user_id', [], 'ar') . ':', [], false) !!}
                {!! Form::text('user', $subscription->user?->full_name, ['class' => 'form-control bg-light', 'id' => 'user', 'readonly']) !!}
            </div>

            <div class="form-group col-md-6">
                {!! Form::label('plan', '<i class="fas fa-box text-muted mr-1"></i> ' . __('models/subscriptions.fields.plan', [], 'ar').':', [], false) !!}
                {!! Form::select('plan', __('models/subscriptions.plan', [], 'ar'), null, ['class' => 'form-control select2', 'required', 'id' => 'plan', 'style' => 'width: 100%;']) !!}
            </div>

            <div class="form-group col-md-6">
                {!! Form::label('reserved_payment_mode', '<i class="fas fa-credit-card text-muted mr-1"></i> ' . __('models/subscriptions.fields.reserved_payment_mode', [], 'ar').':', [], false) !!}
                {!! Form::select('reserved_payment_mode', __('models/subscriptions.reserved_payment_mode', [], 'ar'), null, ['class' => 'form-control select2', 'required', 'style' => 'width: 100%;']) !!}
            </div>
        </div>
    </div>
</div>

<!-- Card 2: الإعدادات المالية والحدود -->
<div class="card card-outline card-success mb-4 elevation-2">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-chart-line mr-1 text-success"></i> الإعدادات المالية والحدود</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="form-group col-md-4 col-sm-6">
                {!! Form::label('owner_percentage', '<i class="fas fa-percentage text-muted mr-1"></i> ' . __('models/subscriptions.fields.owner_percentage', [], 'ar').':', [], false) !!}
                <div class="input-group">
                    {!! Form::number('owner_percentage', null, ['class' => 'form-control', "step" => ".01"]) !!}
                    <div class="input-group-append"><span class="input-group-text">%</span></div>
                </div>
            </div>

            <div class="form-group col-md-4 col-sm-6">
                {!! Form::label('customer_fee_percentage', '<i class="fas fa-percentage text-muted mr-1"></i> نسبة رسوم العميل:', [], false) !!}
                <div class="input-group">
                    {!! Form::number('customer_fee_percentage', null, ['class' => 'form-control', 'step' => '0.01']) !!}
                    <div class="input-group-append"><span class="input-group-text">%</span></div>
                </div>
            </div>
            
            <div class="form-group col-md-4 col-sm-6">
                {!! Form::label('max_negative_balance', '<i class="fas fa-money-bill-wave text-muted mr-1"></i> أقصى رصيد سلبي مسموح:', [], false) !!}
                {!! Form::number('max_negative_balance', null, ['class' => 'form-control', 'step' => '.01']) !!}
            </div>

            <div class="form-group col-md-6 col-sm-6">
                {!! Form::label('count_of_units', '<i class="fas fa-building text-muted mr-1"></i> ' . __('models/subscriptions.fields.count_of_units', [], 'ar') . ':', [], false) !!}
                {!! Form::number('count_of_units', null, ['class' => 'form-control', 'required', 'id' => 'count_of_units']) !!}
            </div>

            <div class="form-group col-md-6 col-sm-6">
                {!! Form::label('employee_count', '<i class="fas fa-users text-muted mr-1"></i> ' . __('models/subscriptions.fields.employee_count', [], 'ar').':', [], false) !!}
                {!! Form::number('employee_count', null, ['class' => 'form-control', 'required']) !!}
            </div>
        </div>
    </div>
</div>

<!-- Card 3: التواريخ والمدة -->
<div class="card card-outline card-warning mb-4 elevation-2">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-calendar-alt mr-1 text-warning"></i> التواريخ والمدة</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="form-group col-md-4 col-sm-6">
                {!! Form::label('created_at', '<i class="fas fa-clock text-muted mr-1"></i> تاريخ الإنشاء:', [], false) !!}
                {!! Form::text('created_at', optional($subscription->created_at)->format('Y-m-d H:i') ?? now()->format('Y-m-d H:i'), ['class' => 'form-control', 'id' => 'created_at']) !!}
            </div>

            <div class="form-group col-md-4 col-sm-6">
                {!! Form::label('start_at', '<i class="fas fa-calendar-check text-muted mr-1"></i> ' . __('models/subscriptions.fields.start_at', [], 'ar').':', [], false) !!}
                {!! Form::text('start_at', null, ['class' => 'form-control', 'id' => 'start_at', 'required']) !!}
            </div>

            <div class="form-group col-md-4 col-sm-6">
                {!! Form::label('duration_select', '<i class="fas fa-stopwatch text-muted mr-1"></i> ' . __('models/subscriptions.fields.duration', [], 'ar') . ':', [], false) !!}
                {!! Form::select('duration_select', ['' => 'اختيار المدة', '4' => '4 شهور', '6' => '6 شهور', '12' => 'سنة واحدة'], null, ['class' => 'form-control select2', 'id' => 'duration_select', 'style' => 'width: 100%;']) !!}
            </div>

            <div class="form-group col-md-6 col-sm-6">
                {!! Form::label('end_at', '<i class="fas fa-calendar-times text-muted mr-1"></i> ' . __('models/subscriptions.fields.end_at' , [], 'ar').':', [], false) !!}
                {!! Form::text('end_at', null, ['class' => 'form-control', 'id' => 'end_at', 'required']) !!}
            </div>

            <div class="form-group col-md-6 col-sm-6">
                {!! Form::label('duration_in_days', '<i class="fas fa-hashtag text-muted mr-1"></i> ' . __('models/subscriptions.fields.duration_in_days', [], 'ar').':', [], false) !!}
                {!! Form::number('duration_in_days', null, ['class' => 'form-control bg-light', 'id' => 'duration_in_days', 'readonly']) !!}
            </div>
        </div>
    </div>
</div>

<!-- Card 4: سياسات الإلغاء -->
<div class="card card-outline card-danger mb-4 elevation-2">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-ban mr-1 text-danger"></i> سياسات الإلغاء</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="form-group col-md-6">
                {!! Form::label('cancellation_full_refund_days', '<i class="fas fa-undo text-muted mr-1"></i> عدد الأيام للاسترداد الكامل قبل الوصول:', [], false) !!}
                {!! Form::number('cancellation_full_refund_days', null, ['class' => 'form-control', 'min' => 0]) !!}
            </div>

            <div class="form-group col-md-6">
                {!! Form::label('cancellation_partial_refund_percent', '<i class="fas fa-percent text-muted mr-1"></i> نسبة الخصم % :', [], false) !!}
                {!! Form::number('cancellation_partial_refund_percent', isset($subscription) ? $subscription->cancellation_partial_refund_percent * 100 : null, [
                    'class' => 'form-control',
                    'min' => 50,
                    'max' => 100,
                    'step' => 1
                ]) !!}
            </div>

            <div class="form-group col-md-6">
                {!! Form::label('cancellation_partial_refund_day', '<i class="fas fa-calendar-minus text-muted mr-1"></i> عدد الأيام قبل الوصول للاسترداد الجزئي فقط:', [], false) !!}
                {!! Form::number('cancellation_partial_refund_day', null, ['class' => 'form-control', 'min' => 0]) !!}
            </div>

            <div class="form-group col-md-6">
                {!! Form::label('cancellation_full_deduct_day', '<i class="fas fa-times-circle text-muted mr-1"></i> عدد الأيام قبل أو يوم الوصول بدون استرداد:', [], false) !!}
                {!! Form::number('cancellation_full_deduct_day', null, ['class' => 'form-control', 'min' => 0]) !!}
            </div>
        </div>
    </div>
</div>

<!-- Card 5: ملاحظات -->
<div class="card card-outline card-secondary mb-4 elevation-2">
    <div class="card-header">
        <h3 class="card-title font-weight-bold"><i class="fas fa-sticky-note mr-1 text-secondary"></i> ملاحظات</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="form-group col-12 mb-0">
                {!! Form::label('notes', '<i class="fas fa-comment-alt text-muted mr-1"></i> ' . __('models/subscriptions.fields.notes', [], 'ar').':', [], false) !!}
                {!! Form::textarea('notes', null, ['class' => 'form-control', 'maxlength' => 191, 'rows' => 3]) !!}
            </div>
        </div>
    </div>
</div>

@push('page_scripts')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- Select2 -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js" defer></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize select2
        $('.select2').select2({
            theme: 'bootstrap4',
            width: '100%'
        });

        // Initialize Flatpickr for start_at, end_at, and created_at fields (FIXED SYNTAX ERROR)
        flatpickr('#start_at, #end_at, #created_at', {
            enableTime: true,
            dateFormat: "Y-m-d H:i",
            onChange: function () {
                updateDurationInDays();
            }
        });

        // Update end date based on selected duration
        $('#duration_select').on('change', function () {
            const startDate = document.getElementById('start_at').value;
            const durationMonths = parseInt($(this).val());

            if (startDate && durationMonths) {
                const start = new Date(startDate);
                start.setMonth(start.getMonth() + durationMonths);

                const formattedDate = start.toISOString().slice(0, 16).replace('T', ' ');
                document.getElementById('end_at').value = formattedDate;
                
                // Trigger flatpickr change so it updates UI
                if(document.getElementById('end_at')._flatpickr) {
                    document.getElementById('end_at')._flatpickr.setDate(formattedDate);
                }
                
                updateDurationInDays();
            }
        });

        // Update duration_in_days when start_at or end_at is changed
        function updateDurationInDays() {
            const startDate = document.getElementById('start_at').value;
            const endDate = document.getElementById('end_at').value;

            if (startDate && endDate) {
                const start = new Date(startDate);
                const end = new Date(endDate);

                // Calculate the difference in days
                const timeDifference = end - start;
                const daysDifference = timeDifference / (1000 * 3600 * 24);

                if (daysDifference >= 0) {
                    document.getElementById('duration_in_days').value = parseInt(daysDifference);
                } else {
                    // Optional: Show warning instead of aggressive alert
                    console.warn("End date must be after the start date.");
                }
            }
        }
        
        // Initial calculation on load
        setTimeout(function() {
            updateDurationInDays();
        }, 500);
    });
</script>
@endpush