@extends('admin.layout.master_layout')

@section('title')
    الاستديو
@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/studios" 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_studios')
                        <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">
                    <div class="form-valid">
                        <select  class="form-control city_filter_id" id="">
                            <option value="">المدينة</option>
                            @foreach($data['cities'] as $cities)
                                <option value="{{$cities->id}}">{{$cities->name_ar}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="col-md-3">
                    <div class="form-valid">
                        <select  class="form-control intervention_filter_id" id="">
                            <option value="">نوع التدخل</option>
                            @foreach($data['interventions'] as $interventions)
                                <option value="{{$interventions->id}}">{{$interventions->name_ar}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                   
            </div>
            
            <div class="row">
                <div class="col-xl-12">
                    <div class="render-table">
                        @include('admin.studios.table-data')
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

@include('admin.studios.sub.add')
@include('admin.uploads.upload')

@include('admin.system_constants.sub.add')

@stop

@section('js')
<script>
    
    /* ======================================================================
       دوال مساعدة
    ====================================================================== */

    // إظهار / إخفاء حقول الصورة والفيديو حسب النوع
    function toggleTypeFields(typeVal) {
        if (typeVal == '2') {
            // فيديو
            $('.studio-image-wrapper').slideUp(200);
            $('.studio-video-wrapper').slideDown(200);
            $('#studio_image').val('');
            $('.img_review img').attr('src', '/admin/assets/app/media/no_image.jpg');
        } else {
            // صورة
            $('.studio-video-wrapper').slideUp(200);
            $('.studio-image-wrapper').slideDown(200);
            $('#video_url').val('');
            $('.video-preview').hide();
            $('.youtube-preview-frame').attr('src', '');
        }
    }

    // استخراج YouTube Video ID من رابط
    function getYouTubeId(url) {
        if (!url) return '';
        var match = url.match(/(?:v=|\/embed\/|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
        return match ? match[1] : '';
    }

    // عرض معاينة فيديو يوتيوب
    function showVideoPreview(url) {
        var videoId = getYouTubeId(url);
        if (videoId) {
            $('.youtube-preview-frame').attr('src', 'https://www.youtube.com/embed/' + videoId);
            $('.video-preview').show();
        } else {
            $('.youtube-preview-frame').attr('src', '');
            $('.video-preview').hide();
        }
    }
    
     
        $(document).on('change','.city_filter_id,.intervention_filter_id',function(e){
             refreshTable()
        })
        $('.name').keypress(function (e) {
            if (e.which == 13) {
                refreshTable()
                return false;   
            }
        });
        
    function refreshTable() {
        var page = $('.pagination .active span').text() || 1;
        var city_id = $('.city_filter_id').val();
        var intervention_id = $('.intervention_filter_id').val();
        var name = $('.name').val();
        $.ajax({
            url: '/admin/studios?page=' + page,
            data:{city_id:city_id,intervention_id:intervention_id,name:name},
            type: "GET",
            success: function (data) { $('.render-table').html(data); }
        });
    }

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

        // تغيير نوع المحتوى
        $(document).on('change', '#studio_type', function () {
            toggleTypeFields($(this).val());
        });

        // معاينة فيديو يوتيوب عند لصق الرابط
        $(document).on('input', '#video_url', function () {
            showVideoPreview($(this).val());
        });

        // فتح المودال للإضافة
        $(document).on('click', '.add_page_modal', function () {
            $('#addNewpageForm')[0].reset();
            $('.rowIdUpdate').val(0);
            $('#studioModalLabel').text('إضافة عنصر جديد للاستديو');
            $('.details_ar, .details_en, #neighborhood').val('');
            $('#studio_type').val('1');
            $('#video_url').val('');
            $('.img_review img').attr('src', '/admin/assets/app/media/no_image.jpg');
            $('.studio-image-wrapper').show();
            $('.studio-video-wrapper').hide();
            $('.video-preview').hide();
            $('.youtube-preview-frame').attr('src', '');
            $('#add_page').modal('show');
        });

        // إرسال الفورم
        $(document).on('submit', '#addNewpageForm', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            var id = $('.rowIdUpdate').val();
            var url = id == 0 ? "/admin/studios/add" : "/admin/studios/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: 'حسناً' });
                    }
                }
            });
        });

        // التعديل
        $(document).on('click', '.updateDetails', function () {
            var id = $(this).data('id');
            $.ajax({
                url: "/admin/studios/edit", type: "GET", dataType: "JSON", data: { id: id },
                success: function (data) {
                    if (data.status == true) {
                        var d = data.data;
                        $('#studioModalLabel').text('تعديل بيانات الاستديو');
                        $('.rowIdUpdate').val(d.id);

                        $('#city_id').val(d.city_id);
                        $('#intervention_id').val(d.intervention_id);
                        $('#neighborhood').val(d.neighborhood);

                        $('.title_ar').val(d.title_ar);
                        $('.title_en').val(d.title_en);
                        $('.details_ar').val(d.details_ar);
                        $('.details_en').val(d.details_en);

                        // النوع
                        var type = d.type || 1;
                        $('#studio_type').val(type);
                        toggleTypeFields(type);

                        if (type == 2) {
                            // فيديو
                            $('#video_url').val(d.video_url);
                            showVideoPreview(d.video_url);
                        } else {
                            // صورة
                            $('#studio_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');
                            }
                        }

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

        // الحذف
        $(document).on('click', '.delete', function () {
            var id = $(this).data('id');
            Swal.fire({
                title: 'هل أنت متأكد؟', text: 'تريد حذف هذا العنصر من الاستديو', type: 'warning',
                showCancelButton: true, confirmButtonText: 'نعم، احذف', cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.value) {
                    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
                    $.ajax({
                        url: "/admin/studios/delete", type: "POST", dataType: "JSON", data: { id: id },
                        success: function (data) {
                            if (data.status == true) { Swal.fire('تم الحذف!', '', 'success'); refreshTable(); }
                        }
                    });
                }
            });
        });
    });
</script>
<script>
    
$(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/studios/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: "حسنا" });
                    }
                }
            });
        }
    });
});
</script>
@stop