@extends('admin.layout.master_layout')

@section('title')
    المشاريع
@stop
@section('css')
<style>
    .sortable-ghost {
    opacity: 0.4;
    background: #f8f9fa;
}
.dynamic-field-row {
    transition: background-color .15s ease;
}


</style>
@stop

@section('page-content')

<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-page__container m-body">
    <div class="m-grid__item m-grid__item--fluid m-wrapper">

        <div class="m-subheader">
            <div class="d-flex align-items-center" style="justify-content: space-between;">

                <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                    <li class="m-nav__item m-nav__item--home">
                        <a href="#" class="m-nav__link m-nav__link--icon">
                            <i class="m-nav__link-icon la la-home"></i>
                        </a>
                    </li>
                    <li class="m-nav__item">
                        <a href="{{ route('admin.dashboard.view') }}" class="m-nav__link">
                            <span class="m-nav__link-text">الرئيسية</span>
                        </a>
                    </li>
                    <li class="m-nav__separator">-</li>
                    <li class="m-nav__item">
                        <a href="/admin/projects" class="m-nav__link">
                            <span class="m-nav__link-text">المشاريع</span>
                        </a>
                    </li>
                </ul>

                <div class="m-demo__preview m-demo__preview--btn">
                    @can('add_projects')
                        <button type="button" class="btn btn-danger m-btn m-btn--custom add_page_modal">
                            <span>
                                <i class="la la-plus"></i>
                                <span>إضافة مشروع جديد</span>
                            </span>
                        </button>
                    @endcan
                </div>

            </div>
        </div>

        <div class="m-content">

            <div class="filter row mb-4 mt-2">

                <div class="col-md-3">
                    <input type="text" name="name"  class="form-control name" placeholder="البحث">
                </div>


                    <div class="col-md-3">
                    <input type="text" name="from_date"  class="form-control date-picker from_date" placeholder="من تاريخ">
                </div>

                  <div class="col-md-3">
                    <input type="text" name="to_date"  class="form-control date-picker to_date" placeholder="إلى تاريخ">
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="render-table">
                        @include('admin.projects.table-data')
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('admin.projects.sub.add')
@include('admin.uploads.upload')
@include('admin.system_constants.sub.add')
@stop

@section('js')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script src="https://cdn.ckeditor.com/4.22.1/full/ckeditor.js"></script>

<script>

    /* ======================================================================
       CKEditor (التفاصيل فقط)
    ====================================================================== */
    var NEWS_EDITOR_IDS = [
        @foreach($data['system'] as $system)
            'ckeditor_details_{{ $system->value2 }}',
        @endforeach
    ];
    var editorsReady = false;

    $('#add_page').on('shown.bs.modal', function () {
        if (editorsReady) return;
        NEWS_EDITOR_IDS.forEach(function (editorId) {
            if (typeof CKEDITOR !== 'undefined' && !CKEDITOR.instances[editorId]) {
                CKEDITOR.replace(editorId, {
                    contentsLangDirection: editorId.indexOf('_ar') !== -1 ? 'rtl' : 'ltr',
                    height: 200
                });
            }
        });
        editorsReady = true;
    });

    function setEditorData(editorId, value) {
        if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances[editorId]) {
            CKEDITOR.instances[editorId].setData(value || '');
        }
    }

    function clearEditors() {
        NEWS_EDITOR_IDS.forEach(function (editorId) { setEditorData(editorId, ''); });
    }

    function syncEditors() {
        NEWS_EDITOR_IDS.forEach(function (editorId) {
            if (typeof CKEDITOR !== 'undefined' && CKEDITOR.instances[editorId]) {
                CKEDITOR.instances[editorId].updateElement();
            }
        });
    }

    /* ======================================================================
       الحقول الديناميكية
    ====================================================================== */
    var fieldIndex = 0;

    function addFieldRow(labelAr, labelEn, valueAr, valueEn) {
    labelAr = labelAr || '';
    labelEn = labelEn || '';
    valueAr = valueAr || '';
    valueEn = valueEn || '';
    fieldIndex++;
    var html = '<div class="row mb-2 align-items-center dynamic-field-row" data-index="' + fieldIndex + '">'
        + '<div class="col-md-1 text-center drag-handle" style="cursor:move;font-size:16px;color:#888;">'
        + '    <i class="fa fa-arrows-alt-v"></i>'
        + '</div>'
        + '<div class="col-md-3">'
        + '    <input type="text" name="field_label_ar[]" class="form-control form-control-sm" placeholder="مثال: الجهة الممولة" value="' + escapeHtml(labelAr) + '">'
        + '</div>'
        + '<div class="col-md-3">'
        + '    <input type="text" name="field_label_en[]" class="form-control form-control-sm" placeholder="e.g. Donor" dir="ltr" value="' + escapeHtml(labelEn) + '">'
        + '</div>'
        + '<div class="col-md-2">'
        + '    <input type="text" name="field_value_ar[]" class="form-control form-control-sm" placeholder="القيمة بالعربي" value="' + escapeHtml(valueAr) + '">'
        + '</div>'
        + '<div class="col-md-2">'
        + '    <input type="text" name="field_value_en[]" class="form-control form-control-sm" placeholder="Value in EN" dir="ltr" value="' + escapeHtml(valueEn) + '">'
        + '</div>'
        + '<div class="col-md-1 text-center">'
        + '    <button type="button" class="btn btn-sm btn-danger btn-remove-field" title="حذف">'
        + '        <i class="fa fa-trash px-0"></i>'
        + '    </button>'
        + '</div>'
        + '</div>';
    $('#dynamic-fields-container').append(html);
    updateFieldsUI();
}

    function updateFieldsUI() {
        var count = $('#dynamic-fields-container .dynamic-field-row').length;
        if (count > 0) {
            $('#no-fields-msg').hide();
            $('.fields-count-badge').text(count).show();
        } else {
            $('#no-fields-msg').show();
            $('.fields-count-badge').hide();
        }
    }

    function clearDynamicFields() {
        $('#dynamic-fields-container').empty();
        fieldIndex = 0;
        updateFieldsUI();
    }

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    $(document).on('change','.from_date,.to_date',function(e){
             refreshTable()
        })
        $('.name').keypress(function (e) {
            if (e.which == 13) {
               refreshTable()
                return false;
            }
        });

    function refreshTable() {
        var name = $('.name').val();
           var from_date = $('.from_date').val();
              var to_date = $('.to_date').val();
        var page = $('.pagination .active span').text() || 1;
        $.ajax({
            url: '/admin/projects?page=' + page,
            data:{name:name,from_date:from_date,to_date:to_date},
            type: "GET",
            success: function (data) { $('.render-table').html(data); }
        });
    }

    /* ======================================================================
       Document Ready
    ====================================================================== */
    $(document).ready(function () {

        var fieldsSortable = new Sortable(document.getElementById('dynamic-fields-container'), {
            handle: '.drag-handle',
            animation: 150,
            ghostClass: 'sortable-ghost',
            forceFallback: true
        });

        /* ---- إضافة حقل ---- */
        $(document).on('click', '.btn-add-field', function () {
            addFieldRow();
        });

        /* ---- حذف حقل ---- */
        $(document).on('click', '.btn-remove-field', function () {
            $(this).closest('.dynamic-field-row').remove();
            updateFieldsUI();
        });

        /* ---- فتح المودال للإضافة ---- */
        $(document).on('click', '.add_page_modal', function () {
            $('#addNewpageForm')[0].reset();
            $('.rowIdUpdate').val(0);
            $('#projectModalLabel').text('إضافة مشروع جديد');
            $('.btn_save_page').text('حفظ');

            $('.details_ar, .details_en').val('');
             $('.summary_ar, .summary_en').val('');

            $('#status_id').val('');
            $('#orders').val('');
            $('#project_image').val('');
            $('.img_review img').attr('src', '/admin/assets/app/media/no_image.jpg');

            clearDynamicFields();
            clearEditors();

            // إرجاع التبويب الأول
            $('#projectMainTabs a:first').tab('show');

            $('#add_page').modal('show');
        });

        /* ---- حفظ البيانات ---- */
        $(document).on('submit', '#addNewpageForm', function (e) {
            e.preventDefault();

            syncEditors();

            var formData = new FormData(this);
            var id  = $('.rowIdUpdate').val();
            var url = id == 0 ? "/admin/projects/add" : "/admin/projects/update";

            $('#loading').show();
            $('.btn_save_page').attr('disabled', true);

            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
            $.ajax({
                url: url,
                type: "POST",
                dataType: "JSON",
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    $('#loading').hide();
                    $('.btn_save_page').attr('disabled', false);

                    if (data.status == true) {
                        Swal.fire({ title: '', text: data.data, type: 'success', confirmButtonText: 'حسناً' });
                        $('#add_page').modal('hide');
                        refreshTable();
                    } else if (data.data_validator) {
                        var msg = '';
                        $.each(data.data_validator, function (k, v) { msg += v + '<br>'; });
                        Swal.fire({ title: '', html: msg, type: 'error', confirmButtonText: 'حسناً' });
                    } else {
                        Swal.fire({ title: '', text: data.data, type: 'error', confirmButtonText: 'حسناً' });
                    }
                },
                error: function () {
                    $('#loading').hide();
                    $('.btn_save_page').attr('disabled', false);
                    Swal.fire({ title: '', text: 'حدث خطأ غير متوقع', type: 'error', confirmButtonText: 'حسناً' });
                }
            });
        });

        /* ---- جلب تفاصيل المشروع للتعديل ---- */
        $(document).on('click', '.updateDetails', function () {
            var id = $(this).data('id');
            $.ajax({
                url: "/admin/projects/edit",
                type: "GET",
                dataType: "JSON",
                data: { id: id },
                success: function (data) {
                    if (data.status == true) {
                        var d = data.data;
                        $('#projectModalLabel').text('تعديل بيانات المشروع');
                        $('.btn_save_page').text('تعديل');
                        $('.rowIdUpdate').val(d.id);

                        // البيانات الأساسية
                        $('#status_id').val(d.status_id);
                        $('.title_ar').val(d.title_ar);
                        $('.title_en').val(d.title_en);
                         $('#orders').val(d.orders);

                        // الملخص (نص عادي)
                        $('.summary_ar').val(d.summary_ar);
                        $('.summary_en').val(d.summary_en);

                        // الصورة
                        $('#project_image').val(d.main_image);
                        if (d.main_image) {
                            $('.img_review img').attr('src', '/uploads/' + d.main_image);
                        } else {
                            $('.img_review img').attr('src', '/admin/assets/app/media/no_image.jpg');
                        }

                        // الحقول الديناميكية
                        clearDynamicFields();
                        if (d.custom_fields && d.custom_fields.length > 0) {
                            d.custom_fields.forEach(function (field) {
                                addFieldRow(field.label_ar, field.label_en, field.value_ar, field.value_en);
                            });
                        }

                        // إرجاع التبويب الأول
                        $('#projectMainTabs a:first').tab('show');

                        // تعبئة محرر التفاصيل بعد ظهور المودال
                        $('#add_page').one('shown.bs.modal', function () {
                            @foreach($data['system'] as $system)
                                setEditorData('ckeditor_details_{{ $system->value2 }}', d.details_{{ $system->value2 }});
                            @endforeach
                        });

                        $('#add_page').modal('show');
                    } else {
                        Swal.fire({ title: '', text: data.data, type: 'error', confirmButtonText: 'حسناً' });
                    }
                }
            });
        });

        /* ---- حذف المشروع ---- */
        $(document).on('click', '.delete', function () {
            var id = $(this).data('id');
            Swal.fire({
                title: '', text: 'هل تريد حذف هذا المشروع ؟', type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6', cancelButtonColor: '#d33',
                confirmButtonText: 'حسناً', cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.value) {
                    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
                    $.ajax({
                        url: "/admin/projects/delete",
                        type: "POST",
                        dataType: "JSON",
                        data: { id: id },
                        success: function (data) {
                            if (data.status == true) {
                                Swal.fire('تم الحذف بنجاح', '', 'success');
                                refreshTable();
                            } else {
                                Swal.fire({ title: '', text: data.data, type: 'error', confirmButtonText: 'حسناً' });
                            }
                        }
                    });
                }
            });
        });

    });



$(document).on('change', '#select-all', function () {
    $('.row-check').prop('checked', this.checked);
    updateBulkActions();
});

$(document).on('change', '.row-check', function () {
    var total   = $('.row-check').length;
    var checked = $('.row-check:checked').length;
    $('#select-all').prop('checked', total === checked);
    updateBulkActions();
});

function updateBulkActions() {
    var count = $('.row-check:checked').length;
    if (count > 0) {
        $('#bulk-actions').slideDown(200);
        $('.selected-count').text(count);
    } else {
        $('#bulk-actions').slideUp(200);
    }
}


$(document).on('click', '.bulk-delete', function () {
    var ids = [];
    $('.row-check:checked').each(function () {
        ids.push($(this).val());
    });

    if (ids.length === 0) return;

    Swal.fire({
        title: '',
        text: 'هل تريد حذف ' + ids.length + ' عنصر؟',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'حذف الكل',
        cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.value) {
            $.ajaxSetup({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
            });
            $.ajax({
                url: "/admin/projects/bulk-delete",
                type: "POST",
                dataType: "JSON",
                data: { ids: ids },
                success: function (data) {
                    if (data['status'] == true) {
                        Swal.fire('تم حذف ' + ids.length + ' عنصر بنجاح', '', 'success');
                        refreshTable();
                    } else {
                        swal({ title: "", text: data["data"], type: "error", confirmButtonText: "حسنا" });
                    }
                }
            });
        }
    });
});


$(document).on('click', '.duplicateProject', function () {
    var id = $(this).data('id');
    Swal.fire({
        title: '', text: 'هل تريد نسخ هذا المشروع بكامل تفاصيله ؟', type: 'question',
        showCancelButton: true,
        confirmButtonColor: '#3085d6', cancelButtonColor: '#d33',
        confirmButtonText: 'نسخ', cancelButtonText: 'إلغاء'
    }).then((result) => {
        if (result.value) {
            $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
            $.ajax({
                url: "/admin/projects/duplicate",
                type: "POST",
                dataType: "JSON",
                data: { id: id },
                success: function (data) {
                    if (data.status == true) {
                        Swal.fire('تم النسخ بنجاح', '', 'success');
                        refreshTable();
                    } else {
                        Swal.fire({ title: '', text: data.data, type: 'error', confirmButtonText: 'حسناً' });
                    }
                },
                error: function () {
                    Swal.fire({ title: '', text: 'حدث خطأ غير متوقع', type: 'error', confirmButtonText: 'حسناً' });
                }
            });
        }
    });
});
</script>
@stop