@extends('admin.layout')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <!-- DATA TABLE -->
                <div class="card">
                    <form class="form-horizontal" action="save-banner" method="post" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input type="hidden" name="device" value="."/>
                        <div class="card-header">
                            <strong>Thêm banner</strong>
                        </div>
                        <div class="card-body card-block">
                            <div class="row form-group">
                                @php $field = 'title'; $mess = 'Tiêu đề' @endphp
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">{{$mess}}<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="text" name="{{$field}}" placeholder="{{$mess}}" value="{{old($field)}}" class="form-control @if($errors->has($field))is-invalid @endif">
                                    @if($errors->has($field))
                                        <small class="text-danger">{{$errors->get($field)[0]}}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="row form-group">
                                @php $field = 'banner_type'; $mess = 'Kiểu banner' @endphp
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">{{$mess}}<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="text" name="{{$field}}" placeholder="{{$mess}}" value="{{old($field)}}" class="form-control @if($errors->has($field))is-invalid @endif">
                                    @if($errors->has($field))
                                        <small class="text-danger">{{$errors->get($field)[0]}}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="row form-group">
                                @php $field = 'banner_value'; $mess = 'Giá trị' @endphp
                                <div class="col col-md-3">
                                    <label for="text-input" class=" form-control-label">{{$mess}}<em class="red-color">*</em></label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <input type="text" name="{{$field}}" placeholder="{{$mess}}" value="{{old($field)}}" class="form-control @if($errors->has($field))is-invalid @endif">
                                    @if($errors->has($field))
                                        <small class="text-danger">{{$errors->get($field)[0]}}</small>
                                    @endif
                                </div>
                            </div>
                            <div class="row form-group">
                                <div class="col col-md-3">
                                    <label for="file-input" class=" form-control-label">Ảnh</label>
                                </div>
                                <div class="col-12 col-md-9">
                                    <div class="btn btn-primary" style="position: relative">Chọn ảnh
                                        <input type="file" name="image" class="file-small" onchange="onChooseImg(this)">
                                    </div>
                                    <div>
                                        <img src="" id="banner-preview" width="50px" height="50px"/>
                                    </div>
                                    <script type="text/javascript">
                                        function onChooseImg(el) {
                                            var file = el.files[0];
                                            var reader = new FileReader();
                                            reader.onload = function(e) {
                                                document.getElementById('banner-preview').setAttribute('src', e.target.result);
                                            };
                                            reader.readAsDataURL(file);
                                            // document.getElementById('banner-preview').setAttribute('src', reader.url);
                                        }
                                    </script>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer text-right">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fa fa-dot-circle-o"></i> Submit
                            </button>
                            <button type="reset" class="btn btn-danger btn-sm">
                                <i class="fa fa-ban"></i> Reset
                            </button>
                        </div>
                    </form>
                </div>
                <!-- END DATA TABLE -->
            </div>
        </div>
    </div>
@endsection