@extends('adminlte::layouts.app')

@section('htmlheader_title')    
{{ trans('Upload Image') }}
@endsection

@section('contentheader_title')
{{ trans('Upload Image') }}
@endsection
@section('main-content')
<!-- searchable dropdown -->
<div class="row">

    <div class="col-md-12 ">
        @foreach ($errors->all() as $error)
        <p class="alert alert-warning">{{ $error }}</p>
        @endforeach
        <!-- if there are creation errors, they will show here -->
        <span class="errormessage"></span>
    </div>    
    <div class="col-md-12 ">
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">{{ trans('Page') }} Info</h3>
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            {!! Form::open(array('url' => ('admin/winpoint/store'),'method'=>'POST', 'files'=>true)) !!}
              
            <div class="box-body">
                <div class="form-group">
                    
                    {!! Form::label('Bikes', 'Select Bike *') !!}
                    {!! Form::select('bike_id', [null=>''] + $bikes, null,['class' => 'form-control bike']) !!}
                    <p class="red" id="BikeError"></p>

                    {!! Form::label('title', 'Title') !!}
                    <input type="text" name="title"  class="form-control" id="title">
                    <p class="red" id="TitleError"></p>

                    {!! Form::label('image', 'Challenge Image') !!}
                    <input type="file" name="chellenge_image"  class="form-control" id="chellenge_image" accept="image/*">
                    <p class="red" id="ChellengeimageError"></p>
                    <div class="form-group add-image"></div>

                    {!! Form::label('image', 'Solution Image') !!}
                    <input type="file" name="image"  class="form-control" id="image" accept="image/*" onchange="readURL(this);">
                    <p class="red" id="imageError"></p>
                    
                    <div id="spot-the-ball-demo"></div>

                    <div class="form-group cordinate" style="display:none">
                        <label>{!! Form::label('x-cordinate', 'X Co-ordinate') !!}</label>
                        {!! Form::text('x_cordinate', null, array('class' => 'form-control x_cordinate','readonly')) !!}
                        
                    </div>

                    <div class="form-group cordinate" style="display:none">
                        <label>{!! Form::label('y-cordinate', 'Y Co-ordinate') !!}</label>
                        {!! Form::text('y_cordinate', null, array('class' => 'form-control y_cordinate','readonly')) !!}
                        <p class="red" id="cordinateError"></p>
                    </div>
                    <!-- <div class="img_show">
                        <img class="display_image" src="" alt="{{ trans('') }} "/>
                    </div> -->
                        <!-- id="spot-the-ball-demo"  -->

                    <p class="red" id="pictureError"></p>
                </div>
                <div class="form-group">
                    {!! Form::label('status', 'Status:')   !!}
                    {!! Form::radio('status', '1',true,['class' => 'minimal']) !!}  Active &nbsp;
                    {!! Form::radio('status', '0','',['class' => 'minimal']) !!}  InActive &nbsp;
                </div>
            </div>

            <div class="box-footer">
                {!! Form::submit('Add', array('class' => 'btn btn-primary submit')) !!}
                <a class="btn btn-default btn-close" href="{{ URL::to('admin/winpoint') }}">Cancel</a>
            </div>
            
        </div>


        {!! Form::close() !!}

    </div>

</div>
@push('scripts')
<script type="text/javascript">
    var point       = false;
    var url         = "