@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        .char-counter {
            font-size: 0.85rem;
            color: #6c757d;
        }
        .char-counter.warning {
            color: #ffc107;
        }
        .char-counter.danger {
            color: #dc3545;
        }
        .badge-offer-preview {
            background-color: #28a745;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
        }
        .badge-discount-preview {
            background-color: #dc3545;
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
        }
        .custom-switch {
            padding-right: 2.25rem;
        }
        .custom-control-label::before,
        .custom-control-label::after {
            right: -2.25rem;
            left: auto;
        }
        .entity-display {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            padding: 0.75rem 1rem;
        }
        .entity-display .entity-type-badge {
            font-size: 0.75rem;
            padding: 0.2rem 0.5rem;
            border-radius: 0.2rem;
        }
        .entity-display .entity-type-badge.game {
            background-color: #6f42c1;
            color: white;
        }
        .entity-display .entity-type-badge.product {
            background-color: #17a2b8;
            color: white;
        }
    </style>
@endsection

@include('admin.helper.tittle', ['title' => 'تعديل العرض الترويجي'])

@section('content')
    <div id='pageid'>
        <div>
            <div class="row">
                <div class="col-md-12 col-xl-12">
                    <form id='promotion-form' method="POST" action="{{ route('admin.promotions.update', $promotion) }}">
                        @csrf
                        @method('PUT')
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="card-title mb-0">تعديل العرض الترويجي</h4>
                                <a href="{{ route('admin.promotions.index') }}" class="btn btn-secondary btn-sm">
                                    <x-lucide-arrow-right width="20" height="20" /> رجوع للقائمة
                                </a>
                            </div>
                            <div class="card-body">
                                @include('admin.partials.alerts')

                                <div class="row">
                                    {{-- Current Entity Display (Read-Only) --}}
                                    <div class="col-lg-6 col-12 mt-3">
                                        <span class="form-label d-block">الكيان المرتبط</span>
                                        <div class="entity-display">
                                            <div class="d-flex align-items-center">
                                                @if($promotion->promotable_type === 'App\Models\Game')
                                                    <span class="entity-type-badge game mr-2">
                                                        <x-lucide-gamepad-2 width="20" height="20" /> لعبة
                                                    </span>
                                                @else
                                                    <span class="entity-type-badge product mr-2">
                                                        <x-lucide-package width="20" height="20" /> منتج
                                                    </span>
                                                @endif
                                                <strong>{{ $promotion->promotable->name ?? 'غير متوفر' }}</strong>
                                            </div>
                                        </div>
                                        <small class="text-muted">لا يمكن تغيير الكيان المرتبط. لتغييره، احذف هذا العرض وأنشئ عرضاً جديداً.</small>
                                    </div>

                                    {{-- Promotion Type Selector --}}
                                    <div class="col-lg-6 col-12 mt-3">
                                        <label class="form-label" for="promotion_type">نوع العرض <span class="text-danger">*</span></label>
                                        <select name="type" id="promotion_type" class="form-control" required>
                                            <option value="offer" {{ old('type', $promotion->type) === 'offer' ? 'selected' : '' }}>
                                                عرض (Offer)
                                            </option>
                                            <option value="discount" {{ old('type', $promotion->type) === 'discount' ? 'selected' : '' }}>
                                                خصم (Discount)
                                            </option>
                                        </select>
                                        <small class="text-muted">
                                            <span id="type-preview" class="{{ old('type', $promotion->type) === 'discount' ? 'badge-discount-preview' : 'badge-offer-preview' }}">
                                                {{ old('type', $promotion->type) === 'discount' ? 'خصم' : 'عرض' }}
                                            </span>
                                        </small>
                                        @error('type')
                                            <small class="text-danger d-block">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Label Input with Character Counter --}}
                                    <div class="col-lg-6 col-12 mt-3">
                                        <label class="form-label" for="label_input">نص العرض <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="label" id="label_input"
                                               value="{{ old('label', $promotion->label) }}" maxlength="50" required
                                               placeholder="مثال: خصم 20% أو عرض خاص">
                                        <div class="d-flex justify-content-between mt-1">
                                            <small class="text-muted">الحد الأقصى 50 حرف</small>
                                            <small class="char-counter">
                                                <span id="char-count">{{ strlen(old('label', $promotion->label)) }}</span>/50
                                            </small>
                                        </div>
                                        @error('label')
                                            <small class="text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>

                                    {{-- Is Active Toggle --}}
                                    <div class="col-lg-6 col-12 mt-3">
                                        <span class="form-label d-block">الحالة</span>
                                        <div class="custom-control custom-switch">
                                            <input type="checkbox" class="custom-control-input" id="is_active"
                                                   name="is_active" value="1"
                                                   {{ old('is_active', $promotion->is_active) ? 'checked' : '' }}>
                                            <label class="custom-control-label" for="is_active">
                                                <span id="status-text">{{ old('is_active', $promotion->is_active) ? 'مفعل' : 'معطل' }}</span>
                                            </label>
                                        </div>
                                        <small class="text-muted">العرض سيظهر فقط عند تفعيله</small>
                                        @error('is_active')
                                            <small class="text-danger d-block">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="text-center mt-4">
                                    <button type="submit" class="col-5 btn btn-primary">
                                        <x-lucide-save width="20" height="20" /> حفظ التغييرات
                                    </button>
                                    <a href="{{ route('admin.promotions.index') }}" class="col-5 btn btn-secondary">
                                        <x-lucide-x width="20" height="20" /> إلغاء
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.formscripts')
    <script>
        $(function() {
            // Promotion type preview
            $('#promotion_type').on('change', function() {
                const type = $(this).val();
                const $preview = $('#type-preview');
                
                if (type === 'offer') {
                    $preview.removeClass('badge-discount-preview').addClass('badge-offer-preview').text('عرض');
                } else {
                    $preview.removeClass('badge-offer-preview').addClass('badge-discount-preview').text('خصم');
                }
            });

            // Character counter for label
            $('#label_input').on('input', function() {
                const length = $(this).val().length;
                const $counter = $('.char-counter');
                const $count = $('#char-count');
                
                $count.text(length);
                
                // Update counter color based on length
                $counter.removeClass('warning danger');
                if (length >= 45) {
                    $counter.addClass('danger');
                } else if (length >= 35) {
                    $counter.addClass('warning');
                }
            });

            // Is active toggle text
            $('#is_active').on('change', function() {
                const $statusText = $('#status-text');
                if ($(this).is(':checked')) {
                    $statusText.text('مفعل');
                } else {
                    $statusText.text('معطل');
                }
            });

            // Trigger initial state for character counter
            $('#label_input').trigger('input');
        });
    </script>
@endsection