$(document).ready(function () {

    // add keywords
    $(document).on('click', '#add-keyword', function (e) {

        var append = `<div class="row col-lg-12">

                            <div class="form-group col-lg-5">
                                <lable for="keyword_ar">الكلمات المفتاحية بالعربي</lable>
                                <input type="text" name="keyword_ar[]" class="form-control" />
                            </div>

                            <div class="form-group col-lg-5">
                                <lable for="keyword_en">الكلمات المفتاحية بالانجليزي</lable>
                                <input type="text" name="keyword_en[]" class="form-control" />
                            </div>

                            <div class="form-group col-lg-2">
                                <lable for="keyword_en">حذف</lable>
                                <button type="button" class="btn btn-danger btn-block" id="delete-keyword"><i class="fas fa-trash"></i></button>
                            </div>

                    </div>`;

        $('#append-keyword').append(append);

    }); // add keywords

    // delete keywords
    $(document).on('click', '#delete-keyword', function (e) {

        $(this).closest('.row').remove();

    }); // delete keywords




    // add image desc
    var i = 1;
    $(document).on('click', '#add-image-desc', function (e) {
        var append = `<div class="row col-lg-12">

                            <div class="form-group col-lg-2">
                                <lable>الصورة</lable>
                                <div class="input-group">
                                    <div class="custom-file">
                                        <input type="file" name="imagee[]" data-id="image" class="from-control image">
                                    </div>
                                </div>

                            </div>

                            <div class="form-group col-lg-4">
                                <lable for="desc2_ar">الوصف بالعربي</lable>
                                <textarea name="desc2_arr[]" class="form-control"> </textarea>
                            </div>

                            <div class="form-group col-lg-4">
                                <lable for="desc2_en">الوصف بالانجليزي</lable>
                                <textarea name="desc2_enn[]" class="form-control"> </textarea>
                            </div>

                            <div class="form-group col-lg-2">
                                <lable for="keyword_en">حذف</lable>
                                <button type="button" class="btn btn-danger btn-block" id="delete-image-desc"><i class="fas fa-trash"></i></button>
                            </div>

                    </div>`;

        $('#append-image-desc').append(append);
        i++;
    }); // add image desc

    // delete image desc
    $(document).on('click', '#delete-image-desc', function (e) {

        $(this).closest('.row').remove();

    }); // delete keywords

    // delete image desc
    $(document).on('click', '.delete-image-desc-ajax', function (e) {

        var url = $(this).data('url');
        var id = $(this).data('id');
        var button = $(this);
        $.ajax({
            type: 'GET',
            url: url,
            data: {
                id: id,
            },
            dataType: 'json',
            success: function (result) {

                button.closest('.row').remove();

            } // end of success

        }); // end of ajax 


    }); // delete keywords

    // edit image desc
    $(document).on('click', '.edit-image-desc-ajax', function (e) {
        $('#loading-request').css('display' , 'flex');
        var fd = new FormData();
        var url = $(this).data('url');
        var id = $(this).data('id');
        var desc_ar = $('.desc_ar_' + id).val();
        var desc_en = $('.desc_en_' + id).val();
        var image = $('.image_' + id)[0].files[0];
        fd.append('desc_ar', desc_ar);
        fd.append('desc_en', desc_en);
        fd.append('id', id);
        fd.append('image', image);
        fd.append('_token', $('meta[name="csrf-token"]').attr('content'));

        $.ajax({
            url: url,
            type: 'POST',
            data: fd,
            contentType: false,
            processData: false,
            success: function (result) {
                $('#loading-request').css('display' , 'none');
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-start',
                    showConfirmButton: false,
                    timer: 4000,
                    timerProgressBar: true,
                    didOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                })
            
                Toast.fire({
                    icon: 'success',
                    title: "تم التحديث ينجاح"
                })

            } // end of success

        }); // end of ajax 


    }); // delete keywords


});