@extends('backend.layouts.master')
@section('content')
    <div class="card">
        <form action="/admin/settings" method="post" enctype="multipart/form-data">
            @csrf
            <div class="card-header">Quản lý trang</div>
            <div class="card-body">
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <div class="row">
                    <div class="col-3">
                        <div class="form-group">
                            <label for="logo">LOGO</label>
                            <div class="col d-flex" style="margin-top: 10px;">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                    <div class="fileupload-new thumbnail"
                                         style="border-radius: 5px;width: 200px; height: 150px;">
                                        <img class="viewImage"
                                             src="{{setting('logo')?: asset('backend/images/account.png')}}"
                                             alt="LOGO"/>
                                    </div>
                                    <div class="fileupload-preview fileupload-exists thumbnail"
                                         style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                                    <div class="d-flex justify-content-center" style="margin-top: 10px;">
                                        <button type="button" class="btn btn-secondary btn-file">
                                            <span class="fileupload-new"><i class="fa fa-picture-o"></i> Chọn ảnh</span>
                                            <span class="fileupload-exists"><i class="fa fa-undo"></i> Thay đổi</span>
                                            <input type="file" id='image' name='logo' class="btn-secondary"/>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="form-group">
                            @php
                                $images = setting('banner') !='' ? json_decode(setting('banner')) : json_decode('[]');
                            @endphp
                            <label for="images" class="control-label alt-flex"><span>Ảnh Banner</span><a class="addImages">Upload
                                    ảnh</a></label>
                            <input type="file" class="hidden images" multiple="multiple" id="images" name="images[]">
                            <input type="hidden" id="images_json" name="images_json" value="{{json_encode($images)}}">
                            <div class="">
                                <div class="imagesUploadBox product-images">
                                    <div class="thumb-list product-photo-grid__item">
                                        @foreach($images as $k => $image)
                                                <div class="thumb-image">
                                                    <img class="" data-src="{{$image->url}}" src="{{url($image->url)}}">
                                                    <div class="overlay">
                                                        <div class="alter-button" data-toggle="modal" data-target="#modal-alt">Alt</div>
                                                        <div class="remove-button"><i class="fa fa-trash"></i></div>
                                                    </div>
                                                </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>



                    <div class="col-md-6 col-sm-12">
                        {!! Form::label('Giới thiệu footer') !!}
                        {!! Form::textArea('intro_footer',setting('intro_footer')?:old('intro_footer'),array('class' => 'form-control')) !!}
                    </div>
                    {{--<div class="col-md-6 col-sm-12">--}}
                        {{--<div class="form-group">--}}
                            {{--<label for="exampleInputEmail1">Video mặc định</label>--}}
                            {{--<input type="text" class="form-control" placeholder="Link video" name="video_default" value="{{setting('video_default')?:old('video_default')}}">--}}
                        {{--</div>--}}
                    {{--</div>--}}
                    <div class="col-md-6 col-sm-12">
                        <label for="">Thông Tin Chuyển Khoản</label>
                        <input type="hidden" class="info_banking" name="info_banking" value="{{setting('info_banking')}}">
                        <div class="row" id="infoBanking">
                            <div class="col-md-6">
                                <div class="form-group required"><label class="">Ngân hàng:<span class="text-danger"> *</span></label> <input type="text" class="form-control input_bank"> <!----></div>
                                <div class="form-group required"><label class="">Số TK:<span class="text-danger"> *</span></label> <input type="text" class="form-control input_so_tk"> <!----></div>
                                <div class="form-group required"><label class="">Chủ TK:<span class="text-danger"> *</span></label> <input type="text" class="form-control input_chu_tk"> <!----></div>
                                <div class="form-group required"><label class="">Chi nhánh</label> <input type="text" class="form-control input_chi_nhanh"> <!----></div>
                                <div class="float-right">
                                    <button class="btn btn-primary btn-sm add_bank" type="button">Thêm mới</button>
                                    <button class="btn btn-danger btn-sm huy_bank" type="button">hủy bỏ</button>
                                </div>
                            </div>
                            <div class="col-md-6"><label>Danh sách</label>
                                <ul class="list-group">
                                    @if(setting('info_banking') != '')
                                        @foreach(json_decode(setting('info_banking')) as $item)
                                        <li class="list-group-item d-flex justify-content-between">
                                            {{$item->ngan_hang}}
                                            <span>
                                                <button type="button" data-id="{{$item->so_tk}}" class="btn btn-sm btn-primary badge-pill edit_bank">Sửa</button>
                                                <button type="button" data-id="{{$item->so_tk}}" class="btn btn-sm btn-danger badge-pill delete_bank">Xóa</button>
                                            </span>
                                        </li>
                                        @endforeach
                                    @endif
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer" style="padding: 0">
                <button type="submit" class="btn btn-primary float-right">Cập nhật</button>
                <div class="list-bank">

                </div>
            </div>
        </form>

    </div>
    <script>
        function readURL(input,view) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    $(view).attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }
        $("#logo").change(function() {
            readURL(this,'.logo');
        });
        $("#banner").change(function() {
            readURL(this,'.banner');
        });

        let info = $('.info_banking').val()
        var is_add_bank = true;
        var data = info ? JSON.parse(info) : [];
        var index_edit = null;
        var item_edit = null;

        console.log(111,data, typeof(data));
        $(document).on('click','.add_bank',function () {
            let input_bank = $('.input_bank').val();
            let input_so_tk = $('.input_so_tk').val();
            let input_chu_tk = $('.input_chu_tk').val();
            let input_chi_nhanh = $('.input_chi_nhanh').val();
            let item = {
                ngan_hang: input_bank,
                so_tk: input_so_tk,
                chu_tk: input_chu_tk,
                chi_nhanh: input_chi_nhanh
            }
            data.push(item)

            if(is_add_bank){
                let html = `
                <li class="list-group-item d-flex justify-content-between">
                    <span class="bank_name">`+input_bank+`</span>
                    <span>
                        <button type="button" data-id="`+input_so_tk+`" class="btn btn-sm btn-primary badge-pill edit_bank">Sửa</button>
                        <button type="button" data-id="`+input_so_tk+`" class="btn btn-sm btn-danger badge-pill delete_bank">Xóa</button>
                    </span>
                </li>
            `
                $('.list-group').append(html)
            } else {
                data[index_edit] = item;
                item_edit.html(input_bank);
                $('.info_banking').val(JSON.stringify(data));
            }


            $('.info_banking').val(JSON.stringify(data));
            resetValue();
        })

        $(document).on('click','.edit_bank',function () {
            item_edit = $(this).closest('li').find('.bank_name');
            is_add_bank = false;
            $('.add_bank').html('Cập nhật');
            let so_tk = $(this).data('id');
            let item = data.filter(f=>{return f.so_tk == so_tk});
            $('.input_bank').val(item[0].ngan_hang);
            $('.input_so_tk').val(item[0].so_tk);
            $('.input_chu_tk').val(item[0].chu_tk);
            $('.input_chi_nhanh').val(item[0].chi_nhanh);

            index_edit = data.findIndex( x => x.so_tk == so_tk );
        })

        $(document).on('click','.delete_bank',function () {
            let so_tk = $(this).data('id');
            let el = $(this).closest('li');
            swal({
                title: 'Bạn có chắc chắn xóa mục này?',
                type: 'error',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                showCloseButton: true,
            }).then(function () {
                data = data.filter(f=> {return f.so_tk != so_tk});
                $('.info_banking').val(JSON.stringify(data));
                el.remove();
            }, function (dismiss) {
            });
        })

        $(document).on('click','.huy_bank',function () {
            resetValue();
        })


        function resetValue () {
            $('.input_bank').val('');
            $('.input_so_tk').val('');
            $('.input_chu_tk').val('');
            $('.input_chi_nhanh').val('');
            $('.add_bank').html('Thêm mới');
            is_add_bank = true;
        }



    </script>

    <script>
        readURL = async function(input, callback) {
            var fileList = []
            for (var i = 0; i < input.files.length; i++) {
                var reader = new FileReader();
                var count = 0;
                reader.onload = function(e) {
                    fileList.push({
                        src: e.target.result,
                        name: input.files[count].name
                    })
                    count++
                    if (count == input.files.length) {
                        callback(fileList)
                    }
                }
                reader.readAsDataURL(input.files[i]);
            }
        }
        $(document).ready(function() {
            // $('#modal-alt').on('show.bs.modal', function(e) {
            //     $(e.target).find('#altText').val('')
            //     $(e.target).find('.btn-primary').removeAttr('data-pos')
            //
            //     var alt = $(e.relatedTarget).closest('.thumb-image').find('img').attr('alt')
            //     var pos = $(e.relatedTarget).closest('.thumb-image').index('.imagesUploadBox .thumb-image')
            //     $(e.target).find('#altText').val(alt)
            //     $(e.target).find('.btn-primary').attr('data-pos',pos)
            // })
            // $('#modal-alt .btn-primary').on('click',function(){
            //     var pos = $(this).attr('data-pos')
            //     var value = $(this).closest('#modal-alt').find('#altText').val()
            //     $('.imagesUploadBox .thumb-image').eq(pos).find('img').attr('alt',value)
            //     $('#modal-alt').modal('hide')
            //     updateImagesJSON()
            // })
            function updateImagesJSON() {
                var list = [];
                $('.thumb-image').each(function(index, image) {
                    list.push({
                        position: index,
                        url: $(image).find('img').attr('data-src'),
                        alt: $(image).find('img').attr('alt')
                    })
                })
                $('#images_json').val(JSON.stringify(list))
            }
            $('body').on('click','.imagesUploadBox .remove-button', function() {
                $(this).closest('.thumb-image').remove()
                updateImagesJSON()
            });
            $('input.images').on('change', function() {
                readURL(this, function(fileList) {
                    var curList = JSON.parse($('#images_json').val())
                    curList = curList.filter((item) => typeof item.new === 'undefined')

                    var last_position = curList.length ? curList[curList.length - 1].position : -1
                    fileList.forEach((file) => {
                        curList.push({
                            position: ++last_position,
                            url: file.src,
                            alt: '',
                            new: true,
                            fileName: file.name
                        })
                    })
                    var html = '',
                        html_main = ''
                    $('.product-images').find('.thumb-image.new').remove();
                    curList.forEach((item, index) => {
                        if (item.new && index != 0) {
                            html += `<div class="thumb-image new">
                        <img class="" src="` + item.url + `" alt="` + item.alt + `">
                        <div class="overlay">
                            <div class="alter-button">Alt</div>
                            <div class="remove-button"><i class="fa fa-trash"></i></div>
                        </div>
                    </div>`
                        }
                        if (index == 0) {
                            html_main = `<div class="thumb-image new">
                        <img class="" src="` + item.url + `" alt="` + item.alt + `">
                        <div class="overlay">
                            <div class="alter-button">Alt</div>
                            <div class="remove-button"><i class="fa fa-trash"></i></div>
                        </div>
                    </div>`
                        }
                    })
                    // if (totallyNew) {
                    //     $('. main-image').append(html_main)
                    // }
                    $('.thumb-list').append(html)
                    $('#images_json').val(JSON.stringify(curList))
                });
            })
        })
    </script>
@endsection