@extends('admin.layouts.master')
@section('css')
    <style>
        .ck-editor__editable
        {
            min-height: 130px !important;
        }
    </style>
@endsection
@section('content')
    <div class="col-lg-12">
    {!! Form::open(array('route' => \App\Helpers\Helper::adminPrefix(). '.store', 'name' => 'user-form',
    'id' => 'user-form', 'autocomplete' => 'off', 'files' => true)) !!}
    <div class="card card-primary card-outline">
        <div class="card-header">
            <h3 class="card-title">{{ __('Create') }} {{ \App\Helpers\Helper::pagePrefix(2) }}</h3>
            <div class="card-tools">
                <div class="btn-group">
                    <button class="btn btn-primary" type="submit"><i class="fa fa-check-circle"></i> Save</button>
                    <a class="btn btn-danger" href="{!! route(\App\Helpers\Helper::adminPrefix()) !!}">
                        <i class="fa fa-times-circle"></i> Cancel
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <div class="form-group">
                        {!! Form::label('cat_id', 'Category :', ['class' => 'control-label']) !!}
                        {!! Form::select('cat_id[]', \App\Helpers\Helper::category(false), old('cat_id'),
                            ['class' => $errors->has('cat_id') ? 'form-control is-invalid' : 'form-control', 'id' => 'cat_id', 'multiple' => 'multiple']) !!}
                        @if ($errors->has('cat_id'))
                            <span class="help-block invalid-feedback">
                                <strong>{{ $errors->first('cat_id') }}</strong>
                            </span>
                        @endif
                    </div>
                    <div class="form-group">
                        {!! Form::label('title', 'Title :', ['class' => 'control-label']) !!}
                        {!! Form::text('title', old('title'), ['class' => $errors->has('title') ? 'form-control is-invalid' : 'form-control',
                        'id' => 'title', 'placeholder' => 'Product title']) !!}
                        @if ($errors->has('title'))
                            <span class="help-block invalid-feedback">
                            <strong>{{ $errors->first('title') }}</strong>
                        </span>
                        @endif
                    </div>
                    <div class="form-group">
                        {!! Form::label('file', 'File :', ['class' => 'control-label']) !!}
                        <div class="custom-file">
                            {!! Form::file('file', ['class' => $errors->has('file_src') ? 'custom-file-input is-invalid' : 'custom-file-input']) !!}
                            {!! Form::label('file', 'Choose file', ['class' => 'custom-file-label']) !!}
                            @if ($errors->has('file_src'))
                                <span class="help-block invalid-feedback">
                                    <strong>{{ $errors->first('file_src') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                    <div class="form-group">
                        {!! Form::label('thumb', 'Thumbnail :', ['class' => 'control-label']) !!}
                        <div class="custom-file">
                            {!! Form::file('thumb', ['class' => $errors->has('thumb_src') ? 'custom-file-input is-invalid' : 'custom-file-input']) !!}
                            {!! Form::label('thumb', 'Choose thumbnail', ['class' => 'custom-file-label']) !!}
                            @if ($errors->has('thumb_src'))
                                <span class="help-block invalid-feedback">
                                    <strong>{{ $errors->first('thumb_src') }}</strong>
                                </span>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="form-group">
                            {!! Form::label('status', 'Active :', ['class' => 'control-label']) !!}
                            <div class="input-group">
                                <div class="icheck-success d-inline mr-3">
                                    {!! Form::radio('status', '1', old('status', true), ['id' => 'statuson']) !!}
                                    {!! Form::label('statuson', 'Yes') !!}
                                </div>
                                <div class="icheck-danger d-inline">
                                    {!! Form::radio('status', '0', old('status', false), ['id' => 'statusoff']) !!}
                                    {!! Form::label('statusoff', 'No') !!}
                                </div>
                            </div>
                        </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                {!! Form::label('ordering', 'Order :', ['class' => 'control-label']) !!}
                                {!! Form::number('ordering', old('ordering', 0), ['class' => 'form-control',
                                'id' => 'ordering']) !!}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        {!! Form::label('description', 'Description :', ['class' => 'control-label']) !!}
                        {!! Form::text('description', old('description'), ['class' => 'form-control',
                        'id' => 'description', 'placeholder' => 'Product description']) !!}
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 offset-md-3">
                    <div class="embed-responsive embed-responsive-4by3">
                        <video poster="{{ asset(config('setting.product').'/thumbs/no-thumb.jpg') }}" controls controlsList="nodownload">
                            <source src="{{ asset(config('setting.product').'/trailer.mp4') }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::hidden('file_src', old('file_src'), ['id' => 'file_src']) }}
    {{ Form::hidden('thumb_src', old('thumb_src'), ['id' => 'thumb_src']) }}
    {!! Form::close() !!}
        <div class="modal js-loading-bar">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h2 class="modal-title">Please wait ....</h2>
                    </div>
                    <div class="modal-body">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar">
                                <span class="sr-only">Processing ...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script src="{!! asset('js/script.js') !!}"></script>
    <script src="https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
    <script>
        $(function () {
            $('#cat_id').select2({
                placeholder: 'Select a category',
                theme: 'bootstrap4'
            });

            $('.alert').addClass('hide');

            $('.js-loading-bar').modal('hide');

            $('#file').on('change', function(e){
                product(e, '{!!  route('admin.product.file') !!}');
            });

            $('#thumb').on('change', function(e){
                thumbnail(e, '{!!  route('admin.product.thumb') !!}');
            });

            ClassicEditor
                .create( document.querySelector( '#description' ))
                .then( editor => {
                    //console.log( editor );
                } )
                .catch( error => {
                    console.error( error );
                } );
        });
    </script>
@endsection