@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.formscss')
    <style>
        .entity-dropdown {
            max-height: 300px;
            overflow-y: auto;
        }
        .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-control.custom-switch {
            padding-right: 2.25rem;
        }
        .custom-control.custom-switch .custom-control-label::before,
        .custom-control.custom-switch .custom-control-label::after {
            right: -2.25rem;
            left: auto;
        }
        .type-preview-wrapper {
            margin-top: 0.5rem;
        }
        #entity-tabs .nav-link.active {
            background-color: #6777ef;
            color: #fff;
            border-color: #6777ef;
        }
    </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.store') }}">
                        @csrf
                        <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')

                                {{-- Section 1: Entity Type Tabs + Entity Selection --}}
                                <div class="form-group">
                                    <label class="form-label mb-2">نوع الكيان <span class="text-danger">*</span></label>
                                    <ul class="nav nav-tabs nav-justified" id="entity-tabs" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link {{ old('entity_type', 'game') === 'game' ? 'active' : '' }}"
                                               id="tab-game" data-toggle="pill" href="#panel-game" role="tab"
                                               aria-controls="panel-game" aria-selected="{{ old('entity_type', 'game') === 'game' ? 'true' : 'false' }}">
                                                <x-lucide-gamepad-2 width="20" height="20" /> لعبة
                                            </a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link {{ old('entity_type') === 'product' ? 'active' : '' }}"
                                               id="tab-product" data-toggle="pill" href="#panel-product" role="tab"
                                               aria-controls="panel-product" aria-selected="{{ old('entity_type') === 'product' ? 'true' : 'false' }}">
                                                <x-lucide-package width="20" height="20" /> منتج
                                            </a>
                                        </li>
                                    </ul>
                                    <div class="tab-content border border-top-0 p-3" id="entity-tab-content">
                                        {{-- Game Tab --}}
                                        <div class="tab-pane fade {{ old('entity_type', 'game') === 'game' ? 'show active' : '' }}"
                                             id="panel-game" role="tabpanel" aria-labelledby="tab-game">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group mb-0">
                                                        <label for="game_id">اختر اللعبة <span class="text-danger">*</span></label>
                                                        <select class="form-control select2" name="game_id" id="game_id" style="width: 100%;">
                                                            <option value="">-- اختر لعبة --</option>
                                                            @foreach ($games as $game)
                                                                <option value="{{ $game->id }}"
                                                                    {{ old('game_id') == $game->id ? 'selected' : '' }}>
                                                                    {{ $game->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                        @error('game_id')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                        @if($games->isEmpty())
                                                            <small class="form-text text-muted">لا توجد ألعاب متاحة (جميع الألعاب لديها عروض)</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Product Tab --}}
                                        <div class="tab-pane fade {{ old('entity_type') === 'product' ? 'show active' : '' }}"
                                             id="panel-product" role="tabpanel" aria-labelledby="tab-product">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="filter_game_id">اختر اللعبة أولاً <span class="text-danger">*</span></label>
                                                        <select class="form-control select2" id="filter_game_id" style="width: 100%;">
                                                            <option value="">-- اختر لعبة لعرض منتجاتها --</option>
                                                            @foreach ($allGames as $game)
                                                                <option value="{{ $game->id }}"
                                                                    {{ old('filter_game_id') == $game->id ? 'selected' : '' }}>
                                                                    {{ $game->name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-6" id="product-selector" style="display: none;">
                                                    <div class="form-group mb-0">
                                                        <label for="product_id">اختر المنتج <span class="text-danger">*</span></label>
                                                        <select class="form-control select2" name="product_id" id="product_id" style="width: 100%;">
                                                            <option value="">-- اختر لعبة أولاً --</option>
                                                        </select>
                                                        @error('product_id')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                        <small class="form-text text-muted" id="product-loading" style="display: none;">
                                                            <x-lucide-loader-2 width="20" height="20" class="animate-spin" /> جاري تحميل المنتجات...
                                                        </small>
                                                        <small class="form-text text-muted" id="no-products-msg" style="display: none;">
                                                            لا توجد منتجات متاحة لهذه اللعبة
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @error('entity_type')
                                        <small class="text-danger">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Hidden entity_type field --}}
                                <input type="hidden" name="entity_type" id="entity_type_input" value="{{ old('entity_type', 'game') }}">

                                <hr>

                                {{-- Section 3: Promotion Details --}}
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <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', 'offer') === 'offer' ? 'selected' : '' }}>
                                                    عرض (Offer)
                                                </option>
                                                <option value="discount" {{ old('type') === 'discount' ? 'selected' : '' }}>
                                                    خصم (Discount)
                                                </option>
                                            </select>
                                            <small class="form-text text-muted type-preview-wrapper mt-3">
                                                <span id="type-preview" class="badge-offer-preview">عرض</span>
                                            </small>
                                            @error('type')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="label_input">نص العرض <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" name="label" id="label_input"
                                                   value="{{ old('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', '')) }}</span>/50
                                                </small>
                                            </div>
                                            @error('label')
                                                <span class="text-danger">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

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

                                {{-- Hidden fields for promotable_type and promotable_id --}}
                                <input type="hidden" name="promotable_type" id="promotable_type" value="{{ old('promotable_type', 'App\Models\Game') }}">
                                <input type="hidden" name="promotable_id" id="promotable_id" value="{{ old('promotable_id') }}">

                                <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() {
            // Initialize Select2
            $('.select2').select2({
                placeholder: 'ابحث واختر...',
                allowClear: true,
                dir: 'rtl'
            });

            // Entity type toggle via tabs
            $('#tab-game').on('shown.bs.tab', function() {
                $('#entity_type_input').val('game');
                $('#promotable_type').val('App\\Models\\Game');
                $('#promotable_id').val($('#game_id').val());
                // Reset product tab
                $('#filter_game_id').val('').trigger('change.select2');
                $('#product_id').empty().append('<option value="">-- اختر لعبة أولاً --</option>').trigger('change.select2');
                $('#product-selector').hide();
                $('#no-products-msg').hide();
            });

            $('#tab-product').on('shown.bs.tab', function() {
                $('#entity_type_input').val('product');
                $('#promotable_type').val('App\\Models\\Product');
                $('#promotable_id').val('');
                // Reset game selector
                $('#game_id').val('').trigger('change.select2');
            });

            // Update promotable_id when game is selected
            $('#game_id').on('change', function() {
                if ($('#entity_type_input').val() === 'game') {
                    $('#promotable_id').val($(this).val());
                }
            });

            // Update promotable_id when product is selected
            $('#product_id').on('change', function() {
                if ($('#entity_type_input').val() === 'product') {
                    $('#promotable_id').val($(this).val());
                }
            });

            // Load products by game (AJAX) when game filter changes
            $('#filter_game_id').on('change', function() {
                const gameId = $(this).val();
                const $productSelect = $('#product_id');
                const $loading = $('#product-loading');
                const $noProducts = $('#no-products-msg');

                // Reset product selector
                $productSelect.empty().append('<option value="">-- اختر منتج --</option>');
                $productSelect.trigger('change.select2');
                $('#promotable_id').val('');
                $noProducts.hide();

                if (!gameId) {
                    $('#product-selector').hide();
                    $productSelect.empty().append('<option value="">-- اختر لعبة أولاً --</option>');
                    $productSelect.trigger('change.select2');
                    return;
                }

                $('#product-selector').show();
                $loading.show();

                $.ajax({
                    url: '{{ route("admin.promotions.products-by-game") }}',
                    type: 'GET',
                    data: { game_id: gameId },
                    success: function(response) {
                        $loading.hide();
                        $productSelect.empty().append('<option value="">-- اختر منتج --</option>');

                        if (response.products && response.products.length > 0) {
                            response.products.forEach(function(product) {
                                $productSelect.append(
                                    $('<option>', { value: product.id, text: product.name })
                                );
                            });
                        } else {
                            $noProducts.show();
                        }

                        $productSelect.trigger('change.select2');
                    },
                    error: function() {
                        $loading.hide();
                        $productSelect.empty().append('<option value="">-- حدث خطأ، حاول مرة أخرى --</option>');
                        $productSelect.trigger('change.select2');
                    }
                });
            });

            // 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
            $('#label_input').trigger('input');
            $('#promotion_type').trigger('change');
        });
    </script>
@endsection