@extends('admin2')

@section('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
@endsection

@section('content')

    @if (session()->has('error'))
        <div class="alert alert-danger">{{ session()->get('error') }}</div>
    @endif
    @if (session()->has('success'))
        <div class="alert alert-success">{{ session()->get('success') }}</div>
    @endif
    @if (count($errors) > 0)
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <!-- BEGIN SAMPLE FORM PORTLET-->
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-red-sunglo">
                        <i class="icon-settings font-red-sunglo"></i>
                        <span class="caption-subject bold uppercase"> Thiết lập mẫu Logo (Mẫu logo này dùng để in ra trong phiếu thu, phiếu chi và hoá đơn )</span>
                    </div>
                </div>
                <div class="portlet-body form">
                    <form role="form" action="{{ url('admin2/setting/create-logo') }}" method="POST" enctype="multipart/form-data">
                        {!! csrf_field() !!}
                        <div class="form-body">
                            <div class="form-group">

                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
                                        @if(empty($item->logo))
                                            <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image"
                                                 alt=""></div>
                                    @else
                                        <img src="/files/{{ $item->logo }}" alt=""></div>
                                @endif
                                <div class="fileinput-preview fileinput-exists thumbnail"
                                     style="max-width: 200px; max-height: 150px;"></div>
                                <div>
                                                                <span class="btn default btn-file">
                                                                    <span class="fileinput-new"> Chọn hình ảnh </span>
                                                                    <span class="fileinput-exists"> Thay đổi </span>
                                                                    <input type="file" name="image"> </span>
                                    <a href="javascript:;" class="btn red fileinput-exists" data-dismiss="fileinput">
                                        Hủy bỏ </a>
                                    @if(!empty($item->id))
                                    <a href="javascript:;" class="btn red delete-img-exists" data-id="{{$item->id}}">
                                        Xóa ảnh </a>
                                        @endif
                                </div>
                            </div>
                            {{--<div class="clearfix margin-top-10">--}}
                            {{--<span class="label label-danger">NOTE!</span> Image preview only works in IE10+, FF3.6+, Safari6.0+, Chrome6.0+ and Opera11.1+. In older browsers the filename is shown instead. </div>--}}

                        </div>
                        <div class="form-actions">
                            <button type="submit" class="btn blue">Lưu</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>

<script>

    $('.ckeditor').ckeditor({
        height: '500px'
    });

    $(document).on('click', '.delete-img-exists', function () {
        var id = $(this).attr('data-id');
        $.confirm({
            title: 'Bạn muốn xóa ảnh này?',

            content: 'Ảnh này sẽ xóa khi xác nhận thao tác!',
            buttons: {
                confirm: {
                    text:'Xác nhận',
                    btnClass: 'btn-blue',
                    action:function () {
                        $.ajax({
                            url: '{{url('admin2/setting/delete-logo')}}',
                            type:'post',
                            data:{
                                id: id,
                            },
                            success:function () {
                                swal({
                                    title: "Thành công!",
                                    text: "Xóa ảnh thành công!",
                                    icon: "success",
                                });
                                location.reload();
                            },
                            error:function (e) {
                                console.log(e);
                            }
                        })
                    }
                },
                cancel: {
                    text:'Hủy bỏ',
                    action: function () {
                        $.alert('Canceled!');
                    },

                }

            }
        });

    })

</script>

@endpush