@extends('dashboard.layout.base')

@section('content')

      <div class="slim-mainpanel">
        <div class="container">
          <div class="slim-pageheader">
            <ol class="breadcrumb slim-breadcrumb">
              <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
              <li class="breadcrumb-item"><a href="#">Exercice</a></li>
              <li class="breadcrumb-item active" aria-current="page">Créer nouveau Exercice</li>
            </ol>
            <h6 class="slim-pagetitle">Créer nouveau exercice</h6>
          </div><!-- slim-pageheader -->

          <div class="section-wrapper">
            <form action="{{ route('admin.exercice.store') }}" method="post" enctype="multipart/form-data">
              <div class="row">
                <div class="col-md-8">
                  <label class="section-title">{{-- Top Label Layout --}}</label>
                  <p class="mg-b-20 mg-sm-b-40">{{-- A form with a label on top of each form control. --}}</p>
                </div>

              </div>

              @include('dashboard.component.dashboard_error')
              @include('dashboard.component.notifications')

              <div class="form-layout">
                  @csrf
                  <div class="row mg-b-25">

                    <div class="col-lg-6">
                      <div class="form-group">
                        <label class="form-control-label">Nom d'exerice: <span class="tx-danger">*</span></label>
                        <input class="form-control" type="text" name="designation" required>
                      </div>
                    </div>
                  </div><!-- row -->
                <div class="form-layout-footer d-flex justify-content-end">
                  <button class="btn btn-outline-secondary bd-0 mx-1"><i class="fa fa-reply mg-r-5"></i> Routeur</button>
                  <button type="submit" class="btn btn-outline-primary bd-0"><i class="fa fa-plus mg-r-5"></i> Enregistrer</button>
                </div><!-- form-layout-footer -->

              </div><!-- form-layout -->
            </form>

          </div><!-- section-wrapper -->

        </div><!-- container -->

        @include('dashboard.component.copyright')

      </div><!-- slim-mainpanel -->
    </div><!-- slim-body -->
@endsection

@push('styles')

    <link href="{{ asset('dashboard/lib/bootstrap-tagsinput/css/bootstrap-tagsinput.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/medium-editor.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/medium-editor/css/default.css') }}" rel="stylesheet">
    <link href="{{ asset('dashboard/lib/select2/css/select2.min.css') }}" rel="stylesheet">

    <style type="text/css">

      .editabl-wrapper textarea {
        display: none;
      }

      .bootstrap-tagsinput {
          border-radius: 0;
      }

    </style>

@endpush

@push('scripts')

    <script src="{{ asset('dashboard/lib/bootstrap-tagsinput/js/bootstrap-tagsinput.js') }}"></script>
    <script src="{{ asset('dashboard/lib/medium-editor/js/medium-editor.js') }}"></script>
    <script src="{{ asset('dashboard/lib/select2/js/select2.full.min.js') }}"></script>

    <script type="text/javascript">

      $(function(){
        'use strict';

        // Inline editor
        var editor = new MediumEditor('.editable', {
                placeholder: {
                    text: 'Entrez la description'
                },
                contentEditable:true,
        });
      });

    </script>

    <script type="text/javascript">

        // Select2 by showing the search
        $('.select2-show-search').select2({
          minimumResultsForSearch: ''
        });

    </script>
    <!--Dependent dropdown script-->
    <script type="text/javascript">

      $('#business').on('change',function(e){
        console.log(e);

        var business_id = e.target.value;
        //Ajax
        $.get('ajax-sec?business_id=' + business_id, function(data){
          $('#section').empty();
          $.each(data,function(index, sec0bj){
            $('#section').append('<option value="'+sec0bj.id+'">'+sec0bj.name+'</option>');
          });
        });
      });

      $('#section').on('change',function(e){
      console.log(e);

      var section_id = e.target.value;
        $('#category').empty();
        $.get('ajax-cat?section_id=' + section_id, function(data){
            $.each(data,function(index, cat0bj){
            $('#category').append('<option value="'+cat0bj.id+'">'+cat0bj.name+'</option>');
          });
        });
      });

    </script>


@endpush