@extends('layouts.admin')

@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
       @if ( session('message') )
          <div class="alert alert-success bg-gradient-success">
            {{ session('message') }}
          </div>
        @endif
    </div>
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Import</h4>
        </div>
        <div class="card-body">
          <ul class="nav nav-tabs" role="tablist" style="border-bottom: 0;">
            <li class="nav-item">
              <a class="nav-link active btn btn-primary mr-2" id="plan-tab" data-toggle="tab" href="#plan" role="tab" aria-controls="plan" aria-selected="true">
                Import plan
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link btn btn-primary" id="customer-tab" data-toggle="tab" href="#customer" role="tab" aria-controls="customer" aria-selected="false">
                Import customer
              </a>
            </li>
          </ul>
          <div class="tab-content pt-4" id="nav-tabContent">
            <div class="tab-pane fade" id="customer" role="tabpanel" aria-labelledby="customer-tab">
              <h4 class="card-title">Import customer</h4>
              <form action="{{route('import.customer.save')}}" method="post" name="customerExcelImport" id="customerExcelImport" enctype="multipart/form-data" onsubmit="return loading()">
                @csrf
                  <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="type" checked id="typecus1" value="CUP">
                            <label class="form-check-label" for="typecus1">CUP</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="type" id="typecus2" value="SUP">
                            <label class="form-check-label" for="typecus2">SUP</label>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                          <label>Choose CSV File</label> <br>
                          <input type="file" class="form-control" name="file" id="filecustomer" accept=".csv">
                          <a href="javascript:;" class="btn btn-light" onclick="$('#filecustomer').trigger('click')">Choose File</a>
                          <span class="ml-3" id="filecustomer_text">No file chosen</span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                          <button type="submit" id="submit" name="import" class="btn-submit btn btn-primary">Import</button>
                        </div>
                    </div>
                  </div>
              </form>

            </div>
            <div class="tab-pane fade show active" id="plan" role="tabpanel" aria-labelledby="plan-tab">
              <h4 class="card-title">Import plan</h4>
              <form action="{{route('import.plan.save')}}" method="post" name="planExcelImport" id="planExcelImport" enctype="multipart/form-data" onsubmit="return loading()">
                @csrf
                  <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                          <div class="form-group">
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="type" checked id="typeplan1" value="PL">
                              <label class="form-check-label" for="typeplan1">PL</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="type" id="typeplan2" value="PS">
                              <label class="form-check-label" for="typeplan2">PS</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="type" id="typeplan3" value="PLM">
                              <label class="form-check-label" for="typeplan3">PLM</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" name="type" id="typeplan4" value="PSM">
                              <label class="form-check-label" for="typeplan4">PSM</label>
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                          <label>Choose CSV File</label> <br>
                          <input type="file" class="form-control" name="file" id="fileplan" accept=".csv">
                          <a href="javascript:;" class="btn btn-light" onclick="$('#fileplan').trigger('click')">Choose File</a>
                          <span class="ml-3" id="fileplan_text">No file chosen</span>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                          <button type="submit" id="submit" name="import" class="btn-submit btn btn-primary">Import</button>
                        </div>
                    </div>
                  </div>
              </form>
            </div>
          </div>
          
        </div>
    </div>
  </div>
</div>

<div class="modal fade bd-example-modal-sm" id="loading" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog modal-sm">
    <div class="modal-content text-center p-5">
      <i class="fas fa-spinner fa-pulse fa-3x mb-2"></i>
      <p>Importing...</p>
    </div>
  </div>
</div>
@endsection 

@section('style')
  <style type="text/css">
    #fileplan,#filecustomer{
      display: none;
    }
    .modal {
      text-align: center;
      padding: 0!important;
    }

    .modal:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -4px;
    }

    .modal-dialog {
      display: inline-block;
      text-align: left;
      vertical-align: middle;
    }
    .nav-link.btn-primary:not(.active){
      background-color: #858796;
    }
    
  </style>
@endsection

@section('script')
  <script type="text/javascript">
      $('#fileplan').change(function() {
        var file = $('#fileplan')[0].files[0].name;
        $('#fileplan_text').text(file);
      });
      $('#filecustomer').change(function() {
        var file = $('#filecustomer')[0].files[0].name;
        $('#filecustomer_text').text(file);
      });

      function loading(){
        $('#loading').modal('show');
        return true;
      }
  </script>
@endsection