@extends('layouts.app')

@section('content')

<div class="col-lg-12">

    <div class="row">
        <div class="col-sm-12">
            <a href="{{route('generalsettings.qrimagehome')}}" class="btn btn-rounded btn-info pull-right">{{translate('Manage QR Images')}}</a>
        </div>
    </div>

   <br>


<div class="panel">
    <div class="panel-heading">
        <h3 class="panel-title">{{translate('Image Information')}}</h3>
    </div>

    <!--Horizontal Form-->
    <!--===================================================-->
    <form class="form-horizontal" action="{{ route('generalsettings.qrimagestore') }}" method="POST" enctype="multipart/form-data">
            @csrf
        <div class="panel-body">

            <div class="form-group">
                <label class="col-sm-3" for="url">{{translate('URL')}}*</label>
                <div class="col-sm-9">
                    <input type="text" id="url" name="url" placeholder="http://example.com/" class="form-control" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3" for="url">{{translate('Image')}}<strong>(678px*304px)*</strong></label>
                    
                    <div class="col-sm-9">
                        <input type="file" id="banner" name="banner" class="form-control" required>
                    </div>
                </div>
            </div>
            <div class="panel-footer text-right">
            <button class="btn btn-purple" type="submit">{{translate('Save')}}</button>
        </div>
        </div>
        
    </form>
    <!--===================================================-->
    <!--End Horizontal Form-->

</div>
    </div>

@endsection
<script type="text/javascript">
    $(document).ready(function(){
        $("#photos").spartanMultiImagePicker({
            fieldName:        'photos[]',
            maxCount:         10,
            rowHeight:        '200px',
            groupClassName:   'col-md-4 col-sm-9 col-xs-6',
            maxFileSize:      '',
            dropFileLabel : "Drop Here",
            onExtensionErr : function(index, file){
                console.log(index, file,  'extension err');
                alert('Please only input png or jpg type file')
            },
            onSizeErr : function(index, file){
                console.log(index, file,  'file size too big');
                alert('File size too big');
            }
        });
    });

</script>