@extends('layouts.app')
@section('title') Images @endsection


@section('css')
    <link href="{{asset('assets/css/jquery.fancybox.min.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')

    <!-- begin:: Subheader -->
    <div class="kt-subheader   kt-grid__item" id="kt_subheader">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                Images</h3>
            <span class="kt-subheader__separator kt-hidden"></span>
        </div>
    </div>

    <!-- end:: Subheader -->

    <!-- begin:: Content -->

    <div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">

        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                <div class="kt-portlet__head-label">
										<span class="kt-portlet__head-icon">
											<i class="kt-font-brand flaticon2-image-file red"></i>
										</span>
                    <h3 class="kt-portlet__head-title">
                        Images Table
                    </h3>

                </div>
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <div class="kt-portlet__head-actions">
                            &nbsp;
                            <a href="javascript:;" class="btn btn-elevate btn-icon-sm red-btn"
                               data-toggle="modal" data-target="#kt_modal_1">
                                <i class="la la-plus"></i>
                                Update  Images
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kt-portlet__body">

                <!--begin: Datatable -->
                <table class="table table-striped- table-bordered table-hover table-checkable table_1"
                       id="kt_table_1">
                    <thead>
                    <tr>
                        <th class="text-center">Name</th>
                        <th class="text-center">Image</th>
                        <th class="text-center">Action</th>

                    </tr>
                    </thead>
                    <tbody>
                    @if($images->banner_image)

                        <tr>
                            <td class="text-center">Banner Image</td>
                            <td class="text-center">
                                <div style="width: 80px;margin: auto">
                                    <a href="{{asset('assets/uploads/home/'.$images->banner_image)}}" data-fancybox data-caption="{{$images->banner_image}}" data-width="1920" data-height="1080">
                                        <img src="{{asset('assets/uploads/home/'.$images->banner_image)}}" alt="slider{{$images->id}}" class="img-fluid">
                                    </a>
                                </div>
                            </td>

                            <td class="text-center action-ic">
                                <a title="Delete" href="javascript:;"
                                   class="btn btn-sm btn-clean btn-icon btn-icon-md delete">
                                    <i class="la la-remove red"></i>
                                    <input type="hidden" value="banner_image" class="id">
                                </a>
                            </td>
                        </tr>
                        @endif
                        @if($images->background_image)
                        <tr>
                            <td class="text-center">Background Image</td>
                            <td class="text-center">
                                <div style="width: 80px;margin: auto">
                                    <a href="{{asset('assets/uploads/home/'.$images->background_image)}}" data-fancybox data-caption="{{$images->background_image}}" data-width="1920" data-height="1080">
                                        <img src="{{asset('assets/uploads/home/'.$images->background_image)}}" alt="slider{{$images->id}}" class="img-fluid">
                                    </a>
                                </div>
                            </td>

                            <td class="text-center action-ic">
                                <a title="Delete" href="javascript:;"
                                   class="btn btn-sm btn-clean btn-icon btn-icon-md delete">
                                    <i class="la la-remove red"></i>
                                    <input type="hidden" value="background_image" class="id">
                                </a>
                            </td>
                        </tr>
                            @endif

                    </tbody>
                </table>

                <!--end: Datatable -->
            </div>
        </div>

    </div>

    <!-- end:: Content -->
    @if(Auth::user()->roles == 0 || Auth::user()->roles == 2)
        <!--begin::Modal-->
        <div class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Update Home Images</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="error-alert" style="display:none"></div>
                        <form role="form" id="user_form" method="post" class="add_admin">
                            {{csrf_field()}}

                            <div class="form-group">
                                <label for="banner_image">Banner Image:</label>
                                <input type="file" name="banner_image" id="banner_image" class="form-control" multiple>
                            </div>

                            <div class="form-group">
                                <label for="background_image">Background Image:</label>
                                <input type="file" name="background_image" id="background_image" class="form-control" multiple>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn red-btn btn-create">Update</button>
                        <div class="loadingMask">
                            <img src="{{asset('assets/images/loader.gif')}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Modal-->
    @endif
@endsection
@section('js')

    <script>
        $(document).ready(function () {
            var create_levels = function () {
                $('.btn-create').on("click", function () {
                    $(".loadingMask").css('display', 'inline-block');

                    $(".loadingMask").css('display', 'inline-block');

                    $.ajax({
                        method: "post",
                        beforeSend: function () {
                            $(".loadingMask").css('display', 'inline-block');
                        },
                        url: "{{route('homeImages.store')}}",

                        data:
                            new FormData($("#user_form")[0])
                        ,
                        headers: {
                            'X-CSRF-TOKEN': $('input[name="_token"]').val()
                        },
                        async: true,
                        processData: false,
                        contentType: false,
                        success: function (data) {
                            //  wait.resolve();
                            $(".loadingMask").css('display', 'none');
                            if (data.errors) {
                                $('.error-alert p').remove();
                                $('.error-alert').show();
                                // swal("Errors!", "Please Enter all required field!", "error");
                                jQuery.each(data.errors, function (key, value) {

                                    $('.error-alert').append('<p>' + value + '</p>');
                                    $("body, html").animate({scrollTop: 0}, 600);

                                });
                            } else {
                                $('.error-alert p').remove();
                                $('.error-alert').hide();
                                swal.fire({
                                    type: 'success',
                                    title: 'Added successfully',
                                    confirmButtonText: 'Ok!',
                                }).then(function (result) {
                                    if (result.value) {
                                        window.location = "{{route('homeImages.index')}}"
                                    }
                                });
                            }
                        },
                        error: function () {
                            $(".loadingMask").css('display', 'none');
                            alert("Error, Please try again");
                        }
                    });


                });
            };


            var delete_item = function () {
                $('.delete').on("click", function () {
                    var this_item = $(this);
                    var id = $(this).parent().find('.id').val();

                    Swal.fire({
                        title: 'Are you sure?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes',
                        cancelButtonText: 'No'
                    }).then((result) => {
                        if (result.value) {
                            $.ajax({
                                method: "post",
                                url: "{{route('homeImages.destroy')}}",
                                headers: {
                                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                                },
                                data: {
                                    id: id,
                                },
                                async: true,
                                success: function (data) {
                                    $(".loadingMask").css('display', 'none');
                                    if (data.errors) {
                                        Swal.fire("Errors!", "Please select the Category", "error");
                                    } else if (data.message == "ErrorMessage") {
                                        Swal.fire("Errors!", "Sorry! You Can't Delete This Category, Be sure there are no products or Sub Category for this category", "error");
                                    } else if (data.message == "Deleted") {
                                        this_item.parent().parent().remove();
                                        Swal.fire({
                                            type: 'success',
                                            title: 'Deleted successfully!',
                                            confirmButtonText: 'Ok!',
                                        })
                                    }
                                },
                                error: function () {
                                    alert("Error, Please try again.");
                                }
                            });

                        }
                    })


                });
            };
            delete_item();

            create_levels();


            $('[data-fancybox]').fancybox({});

        });


    </script>

    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/js/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/js/jquery.fancybox.min.js')}}" type="text/javascript"></script>
@endsection