@extends('backend.layouts.app')
@section('content')
    @section('page-css')
        <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet" />
    @endsection

@php
    use App\Upload;
    $getAllProfileImage = [];
@endphp

{{-- New Design --}}
<div class="aiz-titlebar text-left mt-2 mb-3">
    <div class="row align-items-center">
        <div class="col-md-6 col-sm-6">
            <h1 class="h3">{{ translate('All Images CDN') }}</h1>
        </div>
        <div class="col-md-6 col-sm-6 text-md-right d-flex align-items-center">
        <a href="javascript:void(0);" class="add-items-btn ml-auto clearForm" data-toggle="modal"
        data-target="#newAttributes-modal">
        <span><i class="icons icon-plus"></i></span>Add New 
    </a>
        </div>
    </div>
</div>

<div class="admin-list-table pt-0 border-0">
    <div class="headerResponsive py-3 tableTab-freeze" style="border-top:1px solid #d2d2d2;">
        <div class="common-tbl-head m-0 ml-1">
            <div class="common-tbl-heading">{{ translate('Image CDN ') }}</div>
            <div class="selected-prod">Selected CDN' (<span id="sProduct">0</span>)</div>
            <div class="delete-select" id="deletedData" style="display:none"><a href="javascript:void(0);" id="delete_records">Delete Selected <i class="icons icon-delete"></i></a></div>
        </div>
        <!-- <div class="table-search searchnadcolumnbox">
            <i class="icons icon-search-s" id="memberSearch"></i>
            <input type="text" class="form-control form-control-sm searching" id="search" name="search"
                @isset($sort_search) value="{{ $sort_search }}" @endisset placeholder="Search By Name">
        </div> -->
    </div>

    <div class="admin-table table-freezed" id="brandsData">
        <div class="loader_main"  style="  position: relative;top: 50%;left: 40%;transform: translate(50%, 50%);width: 100px;height:50vh;text-align: center;">
            <img width="100" src="{{ url('public/assets/img/ZKZg.gif') }}">
        </div>
    </div>
</div>
@endsection

@section('modal')
@include('modals.delete_modal')

<!--Specification section End-->
<div class="modal right fade newAttributes-modal" data-refresh="true" id="newAttributes-modal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding: 16px 16px 0px 16px;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Add New CDN</h4>
            </div>
            <div class="modal-body" style="padding: 16px 16px 16px 16px;">
                @if ($errors->any())
                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                        @foreach ($errors->all() as $error)
                            <i class="icons icon-error-outline"></i> {{ $error }}
                        @endforeach
                    </div>
                @endif

                <form id="myform" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate(' Name') }}<span class="text-danger ml-1">*</span></label>
                        <input type="text" placeholder="{{ translate('Enter Name') }}" name="image_ref_name" class="form-control">
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:;" id="errorname"></span>
                    </div> 

                    <div class="form-group mb-3 error-text">
                        <label for="name" class="labelstyle">{{ translate('Upload Image') }}<span class="text-danger ml-1">*</span></label>
                        <input type="file" placeholder="{{ translate('000') }}" name="image_path" class="form-control" >
                        <span class="error_class_category text-danger errortextstyle" style="margin-top: 1px;display:;" id="errorstart"></span>
                    </div>
                
                    <div class="form-group mb-3 text-right">
                        <button type="button" id="resetFilter" class="btn btn-primary"style="display: inline;">Reset</button></a>
                        <input class="btn btn-primary" id="saveKeywords"  type="submit" value="{{ translate('Save') }}">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- Update Modal --}}

<div class="modal right fade newAttributes-modal1" data-refresh="true" id="newAttributes-modal1" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header close-btn" style="padding:16px">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 style="border-bottom:1px solid rgba(0,0,0,.1);width:100%;padding:0rem 0 12px 0;font-size:18px;">Edit Image CDN</h4>
            </div>
            <div class="modal-body" id ="editData" style="padding: 0px">
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<script type="text/javascript">
    $(document).ready(function() {
        dataList();

        function dataList(data, url){
            $.ajax({
                url: "{{ url('/admin/image-cdn-data') }}",
                data:data,
                type: 'GET',
                success: function (data) {
                    $("#brandsData").html(data);
                }
            });
        }

        function sort_brands(el) {
            $('#sort_brands').submit();
        }
 
        $(document).on('click', '.clearForm', function() {
            document.getElementById("myform").reset();
            $('.errortextstyle').hide();
        });

        ///// Only numeric value entered
        $(document).on('click', '#saveKeywords', function(event) {
            event.preventDefault();
            var form = $('#myform')[0];
            var formData = new FormData(form);

            $("#errorname").css("display", "none").text('');
            $("#errorstart").css("display", "none").text('');
        
            $.ajax({
                url: "{{ url('/admin/add-image-cdn') }}",
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {

                    console.log(data);
                    if (data.error) {
                        $("#errorname").css("display", "block").text(data.error.image_ref_name);
                        $("#errorstart").css("display", "block").text(data.error.image_path);
                  
                    } else {
                        $("#newAttributes-modal").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success', '{{ translate('New Rules created successfully') }}');
                        dataList();
                    }
                },
                error: function(error) {
                }
            });
        });

        $(document).on('input', '.form-control', function() {
            $(this).closest('.error-text').find('.error_class_category').hide();
        });

        $(document).on('click', '#editUnit', function(e) {
            var id = $(this).data('id');

            $.ajax({
                url: "{{url('admin/edit-image-cdn/')}}/" + id, 
                type: 'GET',
                success: function(response) {
                    $("#editData").html(response); 
                },
                error: function(xhr, status, error) {
                    console.log('Error:', error); 
                }
            });
        });

        $(document).on('click', '#updateKeywords', function(event) {
            event.preventDefault();
            var form = $('#myform1')[0];
            var formData = new FormData(form);
            var id = $(this).data('id');
            var actionUrl = $('#myform1').attr('action');

            $.ajax({
                url: "{{url('/admin/update-image-cdn/')}}/" + id, 
                data: formData,
                processData: false,
                contentType: false,
                type: 'POST',
                success: function(data) {

                    if (data.error) {
                        $("#errorname1").css("display", "block").text(data.error.image_ref_name);
                        $("#errorstart1").css("display", "block").text(data.error.image_path);
                        
                    } else {
                        $("#newAttributes-modal1").modal('hide');
                        $("#brandsData").html(data);
                        AIZ.plugins.notify('success', '{{ translate('New Rules updated successfully') }}');
                        dataList();
                    }
                },
                error: function(error) {
                }
            });
        });

        $(document).on("keypress", "input[name='search']", function(event) {
            if (event.keyCode == 13) {
                var searchTerm = $("input[name='search']").val();
                memberSearchAjax(searchTerm);
            }
        });

        $(document).on("click", "#memberSearch", function(event) {
            var searchTerm = $("input[name='search']").val();
            memberSearchAjax(searchTerm);
        });

        var typingTimer;
        var doneTypingInterval = 1000;

        function memberSearchAjax(searchTerm) {
            var url = "{{ url('/admin/softdelete/ajax_user_data') }}";
            if (searchTerm) {
                var data = {
                    'search': searchTerm
                };
                dataList(data, url);
            } else {
                var data = {
                    'search': ''
                };
                dataList(data, url);
            }
        }

        $(document).on('click', '#resetFilter', function() {
            $('#myform')[0].reset();
            $('#customFile').text('{{ translate('Choose File') }}');
            $('#meta_description_message').hide();
        });

        $(document).on('click','a.page-link',function(event){
            event.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                cache: false,
                success: function(data) {
                    $("#brandsData").html(data);
                }
            });
            $('#sProduct').text('0');
            $('#deletedData').hide();
            $('#restoreData').hide();
        });

        $(document).on('click','#deletebtn', function() {

            var url = $(this).data('href');
            
            var checkThis = $(this); 
            var id = $(this).data('id'); 
            $('#delete-modal').modal({
                backdrop: '',
                keyboard: false
            })
            .one('click', '#delete-link', function(e) {
                $.ajax({

                    url: "{{url('admin/delete-image-cdn/')}}/" + id,
                    type: "GET",
                    success: function(obj) {
                        $('#delete-modal').modal('hide');
                        $('.modal-backdrop').css('display','none');
                        AIZ.plugins.notify('success', '{{ translate('KeyRule deleted successfully') }}');
                        dataList();
                    }
                });
            });
        });

        $(document).on('click', '#checkAll', function() {
            $("#sProduct").text("0");
            if ($(this).is(":checked")) {
                $("#deletedData").css("display", "block");
                $("#restoreData").css("display", "block");
                $(this).closest('table').find('#searchPage tr').addClass('active');
            } else {
                $("#deletedData").css("display", "none");
                $("#restoreData").css("display", "none");
                $(this).closest('table').find('#searchPage tr').removeClass('active');
            }
            $(".product_checkbox").prop("checked", this.checked);
            $("#select_count").html($("input.product_checkbox:checked").length + " Selected");

        });

        $(document).on('click', '.product_checkbox,#checkAll', function() {
            if ($(this).is(':checked')) {
                $(this).closest('tr').addClass('active');
            } else {
                $(this).closest('tr').removeClass('active');
            }
            if ($('.product_checkbox:checked').length == $('.product_checkbox').length) {
                $('#checkAll').prop('checked', true);
                $("#deletedData").css("display", "block");
                $("#restoreData").css("display", "block");
            } else {
                if ($('.product_checkbox:checked').length == "0") {
                    $("#deletedData").css("display", "none");
                    $("#restoreData").css("display", "none");
                } else {
                    $("#deletedData").css("display", "block");
                    $("#restoreData").css("display", "block");
                }
                $('#checkAll').prop('checked', false);
            }
            $("#sProduct").text($("input.product_checkbox:checked").length);
        });


        $(document).on('click', '#delete_records', function() {
            var row = $(this).closest('tr');
            var products = [];
            var deleteModal = $('#delete-modal');
            $(".product_checkbox:checked").each(function() {
                products.push($(this).val());
            });

            if (products.length <= 0) {
                alert("Please select records.");
            } else {
                var selected_values = products.join(",");
                
                deleteModal.modal({
                    backdrop: 'static',
                    keyboard: false
                });
                $('#delete-link').one('click', function(e) {
                    $.ajax({
                        type: "POST",
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: "{{ url('/admin/multiple-delete-image-cdn') }}",
                        cache: false,
                        data: 'emp_id=' + selected_values,

                        success: function(response) {
                            AIZ.plugins.notify('success', '{{ translate('Keys Deleted successfully') }}' );
                            $("#sProduct").text("0");
                            $('#delete-modal').modal('hide');
                            $("#deletedData").hide();
                            dataList();
                        }
                    });
                });
            }
        });

        $('#delete-modal').on('hidden.bs.modal', function() {
            $(this).find('#delete-link').off('click');
        });
    });

</script>
@endsection