@extends ('backend.layouts.app')

@section ('title', 'Create Tool')

@section('after-styles')

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css" />

@endsection

@section('page-header')
    <h1>
        Modules Management
        <small>Create Tool</small>
    </h1>
@endsection

@section('content')
    {{ Form::open(['route' => 'admin.modules.tool.store', 'enctype' => "multipart/form-data", 'class' => 'form-horizontal', 'role' => 'form', 'method' => 'post', 'id' => 'create-tool']) }}

        <div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title">Create Tool</h3>

                <div class="box-tools pull-right">
                    @include('backend.modules.includes.partials.tool-header-buttons')
                </div><!--box-tools pull-right-->
            </div><!-- /.box-header -->

            <div class="box-body">
                <div class="form-group">
                    {{ Form::label('Image', 'Choose image', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        {{ Form::file('image', null, ['class' => 'form-control', 'required' => 'required', 'placeholder' => 'Choose image']) }}
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group">
                    {{ Form::label('title', 'Title', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        {{ Form::text('title', null, ['class' => 'form-control', 'required' => 'required', 'placeholder' => 'Enter title']) }}
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group">
                    {{ Form::label('description', 'Description', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        {{ Form::textarea('description', null, ['class' => 'form-control', 'id' => 'description', 'required' => 'required', 'placeholder' => 'Enter description']) }}
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group">
                    {{ Form::label('pdf_file', 'Choose PDF File', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        {{ Form::file('pdf_file', null, ['class' => 'form-control', 'required' => 'required', 'placeholder' => 'Choose image']) }}
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group">
                    {{ Form::label('publish_date', 'Publish Date', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        {{ Form::text('publish_date', null, ['class' => 'form-control', 'id' => 'datepicker', 'required' => 'required', 'placeholder' => 'Choose publish date']) }}
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group">
                    {{ Form::label('category', 'Select Category', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        <select class="select form-control" name="category" id="category">
                            <option selected disabled>Select Category</option>
                            <option value="1">Research</option>
                            <option value="2">Insights</option>
                            <option value="3">Education</option>
                        </select>
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group" id="subcat" style="display: none;">
                    {{ Form::label('subcategory', 'Select Subcategory', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        <select class="select form-control" name="subcategory" id="subcategory">
                            <option selected disabled>Select Subcategory</option>
                            <option value="1">Onshore </option>
                            <option value="2">Offshore</option>
                        </select>
                    </div><!--col-lg-10-->
                </div><!--form control-->

                <div class="form-group">
                    {{ Form::label('Active', 'Active', ['class' => 'col-lg-2 control-label']) }}

                    <div class="col-lg-10">
                        <input type="checkbox" value="1" name="active" id="active" class="custom_checkbox"/>
                    </div><!--col-lg-10-->
                </div><!--form control-->
            </div><!-- /.box-body -->
        </div><!--box-->

        <div class="box box-success">
            <div class="box-body">
                <div class="pull-left">
                    {{ link_to_route('admin.modules.tool.index', trans('buttons.general.cancel'), [], ['class' => 'btn btn-danger btn-xs']) }}
                </div><!--pull-left-->

                <div class="pull-right">
                    {{ Form::submit(trans('buttons.general.crud.create'), ['class' => 'btn btn-success btn-xs']) }}
                </div><!--pull-right-->

                <div class="clearfix"></div>
            </div><!-- /.box-body -->
        </div><!--box-->

    {{ Form::close() }}
@endsection

@section('after-scripts')

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script src="//cdn.ckeditor.com/4.7.2/standard/ckeditor.js"></script>

    <script>
        $(document).ready(function() {

            $('#category').on('change', function() {
               if($(this).val() == 1) {
                   $('#subcat').show();
               } else {
                   $('#subcat').hide();
               }
            });

            $('#create-tool').on('submit', function() {

                if($('#category').val() == 1 && ! $('#subcategory').val()) {
                    alert('Select Sub Category');
                    return false;
                }
            });

            $('#datepicker').datepicker({
                format: "dd/mm/yyyy",
                todayHighlight: true
            });

            CKEDITOR.replace( 'description' );
        });
    </script>

@endsection