@extends('admin.layouts.app')

@section('content')
    <section class="section">
        <div class="section-header">
            <h1>إدارة قسم الأكاديمية</h1>
            <div class="section-header-breadcrumb">
                <div class="breadcrumb-item active"><a href="/admin/">{{ trans('admin/main.dashboard') }}</a></div>
                <div class="breadcrumb-item active"><a href="/admin/settings">{{ trans('admin/main.settings') }}</a></div>
                <div class="breadcrumb-item">إدارة قسم الأكاديمية</div>
            </div>
        </div>

        <div class="section-body">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="/admin/settings/home-academy-section" method="post" id="academySectionForm">
                                {{ csrf_field() }}

                                <div class="form-group">
                                    <label class="input-label">عنوان القسم</label>
                                    <input type="text" name="title" value="{{ !empty($academySection) ? $academySection->title : 'الأكاديمية تحتوي على' }}" class="form-control" required>
                                </div>

                                <div class="form-group">
                                    <div class="custom-switches-stacked">
                                        <label class="custom-switch">
                                            <input type="checkbox" name="status" value="1" class="custom-switch-input" {{ !empty($academySection) && $academySection->status ? 'checked' : '' }}>
                                            <span class="custom-switch-indicator"></span>
                                            <span class="custom-switch-description">تفعيل القسم</span>
                                        </label>
                                    </div>
                                </div>

                                <hr>
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h4 class="mb-0">الصناديق (يجب أن تكون 3 صناديق)</h4>
                                    <button type="button" id="addBox" class="btn btn-sm btn-success">إضافة صندوق</button>
                                </div>

                                <div id="boxesContainer">
                                    @if(!empty($academySection) && $academySection->boxes->count() > 0)
                                        @foreach($academySection->boxes as $index => $box)
                                            <div class="box-item card mb-3" data-index="{{ $index }}">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5 class="mb-0">صندوق {{ $index + 1 }}</h5>
                                                        <button type="button" class="btn btn-sm btn-danger remove-box">حذف</button>
                                                    </div>
                                                    
                                                    <div class="form-group">
                                                        <label>العنوان</label>
                                                        <input type="text" name="boxes[{{ $index }}][title]" value="{{ $box->title }}" class="form-control" required>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>الوصف</label>
                                                        <textarea name="boxes[{{ $index }}][description]" class="form-control" rows="3" required>{{ $box->description }}</textarea>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>نوع الأيقونة</label>
                                                        <select name="boxes[{{ $index }}][icon_type]" class="form-control icon-type-select">
                                                            <option value="class" {{ $box->icon_type == 'class' ? 'selected' : '' }}>Class (Font Awesome)</option>
                                                            <option value="image" {{ $box->icon_type == 'image' ? 'selected' : '' }}>صورة</option>
                                                        </select>
                                                    </div>

                                                    <div class="form-group icon-class-group" style="{{ $box->icon_type == 'image' ? 'display:none;' : '' }}">
                                                        <label>اسم الأيقونة (Font Awesome Class)</label>
                                                        <input type="text" name="boxes[{{ $index }}][icon]" value="{{ $box->icon_type == 'class' ? $box->icon : '' }}" class="form-control" placeholder="مثال: fa fa-graduation-cap">
                                                    </div>

                                                    <div class="form-group icon-image-group" style="{{ $box->icon_type == 'class' ? 'display:none;' : '' }}">
                                                        <label>صورة الأيقونة</label>
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <button type="button" class="input-group-text admin-file-manager" data-input="icon_image_{{ $index }}" data-preview="icon_preview_{{ $index }}">
                                                                    <i class="fa fa-chevron-up"></i>
                                                                </button>
                                                            </div>
                                                            <input type="text" name="boxes[{{ $index }}][icon]" id="icon_image_{{ $index }}" value="{{ $box->icon_type == 'image' ? $box->icon : '' }}" class="form-control">
                                                        </div>
                                                        @if($box->icon_type == 'image' && !empty($box->icon))
                                                            <img src="{{ asset($box->icon) }}" id="icon_preview_{{ $index }}" class="img-thumbnail mt-2" style="max-width: 100px;">
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @else
                                        {{-- صناديق افتراضية --}}
                                        <div class="box-item card mb-3" data-index="0">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <h5 class="mb-0">صندوق 1</h5>
                                                    <button type="button" class="btn btn-sm btn-danger remove-box">حذف</button>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label>العنوان</label>
                                                    <input type="text" name="boxes[0][title]" value="دورات تدريبية" class="form-control" required>
                                                </div>

                                                <div class="form-group">
                                                    <label>الوصف</label>
                                                    <textarea name="boxes[0][description]" class="form-control" rows="3" required>احصل على أقوى الدورات التدريبية في المجال النفسي والتربوي وفي مجال صناعة محتوي الأطفال وتطوير المهارات للأم والطفل أونلاين</textarea>
                                                </div>

                                                <div class="form-group">
                                                    <label>نوع الأيقونة</label>
                                                    <select name="boxes[0][icon_type]" class="form-control icon-type-select">
                                                        <option value="class" selected>Class (Font Awesome)</option>
                                                        <option value="image">صورة</option>
                                                    </select>
                                                </div>

                                                <div class="form-group icon-class-group">
                                                    <label>اسم الأيقونة (Font Awesome Class)</label>
                                                    <input type="text" name="boxes[0][icon]" value="fa fa-desktop" class="form-control" placeholder="مثال: fa fa-graduation-cap">
                                                </div>

                                                <div class="form-group icon-image-group" style="display:none;">
                                                    <label>صورة الأيقونة</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <button type="button" class="input-group-text admin-file-manager" data-input="icon_image_0" data-preview="icon_preview_0">
                                                                <i class="fa fa-chevron-up"></i>
                                                            </button>
                                                        </div>
                                                        <input type="text" name="boxes[0][icon]" id="icon_image_0" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="box-item card mb-3" data-index="1">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <h5 class="mb-0">صندوق 2</h5>
                                                    <button type="button" class="btn btn-sm btn-danger remove-box">حذف</button>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label>العنوان</label>
                                                    <input type="text" name="boxes[1][title]" value="منتجات" class="form-control" required>
                                                </div>

                                                <div class="form-group">
                                                    <label>الوصف</label>
                                                    <textarea name="boxes[1][description]" class="form-control" rows="3" required>مجلة إشراقة المجانية للأطفال والتي تم إصدار 8 إصدارات منها إلى الآن</textarea>
                                                </div>

                                                <div class="form-group">
                                                    <label>نوع الأيقونة</label>
                                                    <select name="boxes[1][icon_type]" class="form-control icon-type-select">
                                                        <option value="class" selected>Class (Font Awesome)</option>
                                                        <option value="image">صورة</option>
                                                    </select>
                                                </div>

                                                <div class="form-group icon-class-group">
                                                    <label>اسم الأيقونة (Font Awesome Class)</label>
                                                    <input type="text" name="boxes[1][icon]" value="fa fa-book" class="form-control" placeholder="مثال: fa fa-graduation-cap">
                                                </div>

                                                <div class="form-group icon-image-group" style="display:none;">
                                                    <label>صورة الأيقونة</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <button type="button" class="input-group-text admin-file-manager" data-input="icon_image_1" data-preview="icon_preview_1">
                                                                <i class="fa fa-chevron-up"></i>
                                                            </button>
                                                        </div>
                                                        <input type="text" name="boxes[1][icon]" id="icon_image_1" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="box-item card mb-3" data-index="2">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-center mb-3">
                                                    <h5 class="mb-0">صندوق 3</h5>
                                                    <button type="button" class="btn btn-sm btn-danger remove-box">حذف</button>
                                                </div>
                                                
                                                <div class="form-group">
                                                    <label>العنوان</label>
                                                    <input type="text" name="boxes[2][title]" value="خدمات مجانية" class="form-control" required>
                                                </div>

                                                <div class="form-group">
                                                    <label>الوصف</label>
                                                    <textarea name="boxes[2][description]" class="form-control" rows="3" required>دورات ومقالات علمية ومحاضرات وحلقات فيديو مجانية في المجال النفسي والتربوي</textarea>
                                                </div>

                                                <div class="form-group">
                                                    <label>نوع الأيقونة</label>
                                                    <select name="boxes[2][icon_type]" class="form-control icon-type-select">
                                                        <option value="class" selected>Class (Font Awesome)</option>
                                                        <option value="image">صورة</option>
                                                    </select>
                                                </div>

                                                <div class="form-group icon-class-group">
                                                    <label>اسم الأيقونة (Font Awesome Class)</label>
                                                    <input type="text" name="boxes[2][icon]" value="fa fa-mobile" class="form-control" placeholder="مثال: fa fa-graduation-cap">
                                                </div>

                                                <div class="form-group icon-image-group" style="display:none;">
                                                    <label>صورة الأيقونة</label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <button type="button" class="input-group-text admin-file-manager" data-input="icon_image_2" data-preview="icon_preview_2">
                                                                <i class="fa fa-chevron-up"></i>
                                                            </button>
                                                        </div>
                                                        <input type="text" name="boxes[2][icon]" id="icon_image_2" class="form-control">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>

                                <div class="mt-4">
                                    <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts_bottom')
<script>
    let boxIndex = {{ !empty($academySection) && $academySection->boxes->count() > 0 ? $academySection->boxes->count() : 3 }};

    // إضافة صندوق جديد
    $('#addBox').on('click', function() {
        const boxHtml = `
            <div class="box-item card mb-3" data-index="${boxIndex}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">صندوق ${boxIndex + 1}</h5>
                        <button type="button" class="btn btn-sm btn-danger remove-box">حذف</button>
                    </div>
                    
                    <div class="form-group">
                        <label>العنوان</label>
                        <input type="text" name="boxes[${boxIndex}][title]" class="form-control" required>
                    </div>

                    <div class="form-group">
                        <label>الوصف</label>
                        <textarea name="boxes[${boxIndex}][description]" class="form-control" rows="3" required></textarea>
                    </div>

                    <div class="form-group">
                        <label>نوع الأيقونة</label>
                        <select name="boxes[${boxIndex}][icon_type]" class="form-control icon-type-select">
                            <option value="class" selected>Class (Font Awesome)</option>
                            <option value="image">صورة</option>
                        </select>
                    </div>

                    <div class="form-group icon-class-group">
                        <label>اسم الأيقونة (Font Awesome Class)</label>
                        <input type="text" name="boxes[${boxIndex}][icon]" class="form-control" placeholder="مثال: fa fa-graduation-cap">
                    </div>

                    <div class="form-group icon-image-group" style="display:none;">
                        <label>صورة الأيقونة</label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <button type="button" class="input-group-text admin-file-manager" data-input="icon_image_${boxIndex}" data-preview="icon_preview_${boxIndex}">
                                    <i class="fa fa-chevron-up"></i>
                                </button>
                            </div>
                            <input type="text" name="boxes[${boxIndex}][icon]" id="icon_image_${boxIndex}" class="form-control">
                        </div>
                        <img id="icon_preview_${boxIndex}" class="img-thumbnail mt-2" style="max-width: 100px; display:none;">
                    </div>
                </div>
            </div>
        `;
        
        $('#boxesContainer').append(boxHtml);
        boxIndex++;
        updateBoxNumbers();
    });

    // حذف صندوق
    $(document).on('click', '.remove-box', function() {
        if ($('.box-item').length > 1) {
            $(this).closest('.box-item').remove();
            updateBoxNumbers();
        } else {
            alert('يجب أن يكون هناك صندوق واحد على الأقل');
        }
    });

    // تحديث أرقام الصناديق
    function updateBoxNumbers() {
        $('.box-item').each(function(index) {
            $(this).find('h5').text('صندوق ' + (index + 1));
            $(this).attr('data-index', index);
            
            // تحديث أسماء الحقول
            $(this).find('input, textarea, select').each(function() {
                const name = $(this).attr('name');
                if (name) {
                    const newName = name.replace(/boxes\[\d+\]/, `boxes[${index}]`);
                    $(this).attr('name', newName);
                }
            });
        });
    }

    // تغيير نوع الأيقونة
    $(document).on('change', '.icon-type-select', function() {
        const boxItem = $(this).closest('.box-item');
        const iconType = $(this).val();
        
        if (iconType === 'class') {
            boxItem.find('.icon-class-group').show();
            boxItem.find('.icon-image-group').hide();
        } else {
            boxItem.find('.icon-class-group').hide();
            boxItem.find('.icon-image-group').show();
        }
    });

    // معاينة الصورة عند اختيارها
    $(document).on('change', 'input[id^="icon_image_"]', function() {
        const previewId = $(this).data('preview') || $(this).attr('id').replace('icon_image_', 'icon_preview_');
        const preview = $('#' + previewId);
        const imagePath = $(this).val();
        
        if (imagePath) {
            preview.attr('src', '/' + imagePath).show();
        } else {
            preview.hide();
        }
    });
</script>
@endpush