@extends('admin.layouts.app')
@section('title', 'Add New Student')
@section('page.title')
<!-- Title -->
<h1 class="h2 hide-large-desk">Add New Students</h1>
<!-- End Title -->
@endsection   
@section('breadcrumb') 
<!--breadcrum start-->
<ol class="breadcrumb pmd-breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item"><a href="{{ route('admin.students.index') }}">Students</a></li>
    <li class="breadcrumb-item active">Add New</li>
</ol><!--breadcrum end-->
@endsection        
@section('content')

<!--Tab -->
<div class="pmd-tabs">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" href="#form" aria-controls="form"
                role="tab" data-toggle="tab">Form</a></li>
        <li class="nav-item">
          <a class="nav-link" href="#excel" aria-controls="excel" role="tab"
                data-toggle="tab">Excel</a></li>
    </ul>
</div>
<div class="card pmd-card">
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="form">
       <div class="card-body">
          {!! Form::open( ['route' => ['admin.students.store'], 'class'=>'needs-validation', 'novalidate'=>'true' ]) !!}
            
            @include('admin.students._form')  

            <div class="pmd-card-actions">
              {!! Form::submit('Add New', ['class' => 'btn pmd-ripple-effect btn-primary']) !!}
            </div>

          {!! Form::close() !!}  
       </div>
    </div>

    <div role="tabpanel" class="tab-pane" id="excel">
      <div class="card-body">
        <div class="d-flex justify-content-center">          
          <div class="col-md-6">  
            
            {!! Form::open( ['route' => ['admin.students.import'], 'files'=>true, 'class'=>'form' ]) !!}
              <div class="custom-file pmd-custom-file form-group">
                <input type="file" class="custom-file-input" name="file" id="file">
                <label class="custom-file-label" for="file">Choose file</label>
              </div> 
              <div class="mb-2"> 
                {!! Form::submit('Import', ['class' => 'btn pmd-ripple-effect btn-primary']) !!}
              </div>
            {!! Form::close() !!} 

            <div class="progress-rounded progress">
              <div class="progress-bar progress-bar-success">
                <span class="percent"></span>
              </div>
            </div>
            <div id="status" class="text-success my-2"></div>          
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
@push('scripts')
<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<script type="text/javascript">

  // Custom file uplaod
  bsCustomFileInput.init();

  function validate(formData, jqForm, options) {
      var form = jqForm[0];
      if (!form.file.value) {
          alert('File not found');
          return false;
      }
  }
   
  (function() {

    var bar = $('.progress-bar');
    var percent = $('.percent');
    var status = $('#status');

    $('.form').ajaxForm({
        beforeSubmit: validate,
        beforeSend: function() {
            status.empty();
            var percentVal = '0%';
            var posterValue = $('input[name=file]').fieldValue();
            bar.width(percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            var percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        success: function() {
            var percentVal = 'Wait, Saving';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        complete: function(xhr) {           
            status.html(xhr.responseJSON.success);
            $('#file').val('');            
            $(".custom-file-label").text("Choose file");
            bar.width('0%')
            percent.html('');
            //alert(xhr.responseText);
        }
    });
   
  })();
</script>
@endpush