@extends('layouts.app')

@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6 row">
                    <h1 class="mr-4">
                        @if (isset($banner))
                             Edit Banner
                        @else
                             Add Banner
                        @endif
                    </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                        <li class="breadcrumb-item active">
                            @if (isset($banner))
                             Edit Banner
                            @else
                                 Add Banner
                            @endif
                        </li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="col-md-6">
                            @if (isset($banner))
                                {!! Form::model($banner, ['route' => ['banner.update', $id], 'method' => 'PUT', 'files' => true])
                                !!}
                                {!! Form::hidden('id', $id) !!} 
                            @else
                                {!! Form::open(['route' => 'banner.store', 'role' => 'form', 'files' => true]) !!}
                            @endif
                            <div class="form-group row">
                                <div class="col-md-6">
                                    {!! Form::label('banner_id', 'Banner ID') !!}
                                        {!! Form::text('banner_id', $id, ['class' => 'form-control',
                                        'required' => 'required', 'readonly']) !!}
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    {!! Form::label('banner_name', 'Banner name') !!}
                                    @if (isset($banner))
                                        {!! Form::text('banner_name', Input::old('banner_name'), ['class' => 'form-control',
                                        'required' => 'required']) !!}
                                    @else
                                        {!! Form::text('banner_name', Input::old('banner_name'), ['class' => 'form-control',
                                        'required' => 'required']) !!}
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                   {!! Form::label('banner_image', 'Image') !!}
                                    <div class="input-group">
                                        <div class="custom-file">
                                            {!! Form::file('banner_image', ['class' => 'custom-file-input', 'id' => 'banner_image', 'accept'
                                            => 'image/*']) !!}
                                            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="form-group row">
                                <div class="col-md-6">
                                    {!! Form::label('banner_url', 'URL') !!}
                                    {!! Form::textarea('banner_url', Input::old('banner_url'), ['autocomplete' => 'off', 'class' =>
                                    'form-control']) !!}
                                </div>
                            </div>
                           
                            <div class="form-group row">
                                 <div class="col-md-6">
                                    {!! Form::label('banner_timer', 'Timer') !!}
                                    {!! Form::number('banner_timer', Input::old('banner_timer'), ['autocomplete' => 'off', 'class' =>
                                    'form-control']) !!}
                                </div>
                            </div>

                            <div class="form-group">
                                {!! Form::submit('Submit', ['class' => 'btn btn-primary']) !!}
                            </div>
                            {{ Form::close() }}
                        </div>
                        <div class="col-md-6">
                            @if(isset($banner) && !empty($banner['banner_image']))
                                <img width="50%" class="mt-2 mb-5 edit-banner-img" src='{{ $banner['banner_image'] }}' />
                            @else
                                <img width="50%" class="mt-2 mb-5 edit-banner-img" src="" />
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $('#banner_image').on('change', function(e) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    $('.edit-banner-img').attr('src', e.target.result);
                }
                reader.readAsDataURL(this.files[0]);
            }
        })

    </script>
@endsection