@extends('layout.administrator.index')
@section('title', 'Templates')
@section('style')
   <style>
   .hand {
      cursor: pointer !important;
   }
</style>
@endsection

@section('content')
   <div class="content-wrapper">
      <section class="content-header">
         {{-- <h1>Plantillas</h1> --}}
         <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('administrator.dashboard')}}"><i class="fa fa-dashboard"></i> Inicio</a></li>
            <li class="breadcrumb-item active">Plantillas</li>
         </ol>
      </section>

      <section class="content">
         @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
               {{session('success')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         @if ($errors->any() )
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
               <ul>
                  @foreach ($errors->all() as $item)
                     <li>{{$item}}</li>
                  @endforeach
               </ul>
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif
         @if(session('danger'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
               {{session('danger')}}
               <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
               </button>
            </div>
         @endif

         <div class="row">
            <div class="col">
               <div class="box">
                  <div class="box-header with-border">
                     <div class="row align-items-center">
                        <div class="col-6">
                           <h4 class="box-title">Create plantilla</h4>
                        </div>
                     </div>
                  </div>
                  <div class="box-body">
                     <form action="{{route('templates.store')}}" method="post">
                        @csrf
                        <div class="row">
                           <div class="col">
                              <div class="form-group">
                                 <label for="name">Nombre</label>
                                 <input type="text" class="form-control" name="name" required id="name" placeholder="Nombre">
                              </div>
                           </div>
                           <div class="col">
                              <div class="form-group">
                                 <label for="name">Condición general</label>
                                 <select name="conditions" class="form-control select2">
                                    <option value="{{null}}">TODAS</option>
                                    @foreach(config('constants.semaphore') as $condition => $value)
                                       <option value="{{$condition}}">{{$value['name']}}</option>
                                    @endforeach
                                 </select>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           @if (!empty($customers))
                              <div class="col-md-4">
                                 <div class="form-group">
                                    <label for="idLubricant" class="control-label">Customer</label>
                                    <select required class="form-control select2 selectCustomer" data-input="accountForm" data-component="componentForm" required name="customer_id">
                                       <option value="{{null}}">TODOS</option>
                                       @foreach ($customers as $item)
                                          <option {{request()->customer==$item->id?'selected ':' '}} value="{{$item->id}}">{{$item->company}}</option>
                                       @endforeach
                                    </select>
                                 </div>
                              </div>
                           @endif
                           <div class="col-md-4">
                              <div class="form-group">
                                 <label for="idAccountConsult" class="control-label">Account</label>
                                 <select class="form-control select2 idAccountConsult" data-input="unitIdConsult" id="accountForm" name="account" required>
                                    <option value="">TODOS</option>
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-4">
                              <div class="form-group">
                                 <label for="unitIdConsult" class="control-label">Unit ID</label>
                                 <select class="form-control select2" id="unitIdConsult" name="unit_id[]" multiple></select>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="col-md-3">
                              <div class="form-group">
                                 <label for="idCategory" class="control-label">Category</label>
                                 <select class="form-control select2" id="idCategory" name="category_id">
                                    <option value="{{null}}">TODOS</option>
                                    @foreach ($categories as $category)
                                       <option value="{{$category->id}}">{{$category->name}}</option>
                                    @endforeach
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-3">
                              <div class="form-group">
                                 <label for="componentForm" class="control-label">Component</label>
                                 <select class="form-control select2" id="componentForm" name="component[]" multiple></select>
                              </div>
                           </div>
                           <div class="col-md-3">
                              <div class="form-group">
                                 <label for="idSOS" class="control-label">SOS</label>
                                 <select class="form-control select2" id="idSOS" name="sos[]" multiple>
                                    <option value="true">SOS</option>
                                    <option value="false">ESTANDAR</option>
                                 </select>
                              </div>
                           </div>
                           <div class="col-md-3">
                              <div class="form-group">
                                 <label for="idFormat" class="control-label">Format</label>
                                 <select class="form-control select2" id="idFormat" name="format">
                                    <option value="1">EXCEL</option>
                                    <option value="2">PDF</option>
                                 </select>
                              </div>
                           </div>
                        </div>
                        <div class="row">
                           <div class="col">
                              <button type="submit" name="button" class="btn  btn_admin btn-block" value="pdf">
                                 <i class="fa fa-floppy-o" aria-hidden="true"></i> Guardar
                              </button>
                           </div>
                        </div>
                     </form>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </div>

@endsection

@section('js')
   <script type="text/javascript">
   $(function() {
      $('body').on('change', '.selectCustomer', function() {
         var value = $(this).val();

         let select = $(this).attr('data-input');
         $('#' + $(this).attr('data-input')).empty();
         $('#' + $(this).attr('data-input')).append('<option value="">TODOS</option>'); //Account

         $("#accountForm").empty();
         $("#accountForm").append('<option value="">TODOS</option>');

         $("#unitIdConsult").empty();
         $("#componentForm").empty();

         $.ajax({
            type: 'POST',
            url: '/options/customers/all',
            data: {
               "id": value
            },
            dataType: 'json',
            headers: {
               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
               $(".content_loading").fadeIn("slow");
            },
            success: function(response) {
               $(".content_loading").fadeOut("slow");

               $.each(response.data.accounts, function( index, account ){
                  $("#accountForm").append('<option value="'+account.id+'">'+account.name+'</option>');
               });
            },
            error: function(xhr) {
               $(".content_loading").fadeOut("slow");
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         });
      });

      $('body').on('change','#accountForm',function() {
         var value = $(this).val();

         $("#unitIdConsult").empty();
         $("#componentForm").empty();

         $.ajax({
            type: 'POST',
            url: '/options/unitId',
            data: {
               "id": value
            },
            dataType: 'json',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            beforeSend:function(){
               $(".content_loading").fadeIn("slow");
            },
            success:function(response){
               $(".content_loading").fadeOut("slow");

               $.each(response.equipments, function( index, unitData ){
                  $("#unitIdConsult").append('<option value="'+unitData.id+'">'+unitData.unit_id+'</option>');
               });

               $.each(response.components, function( index, componentData ){
                  $("#componentForm").append('<option value="'+componentData.component_id+'">'+componentData.components.name+'</option>');
               });
            },
            error: function(xhr){
               $(".content_loading").fadeOut("slow");
               swal("Oops!", "Hemos tenido problemas, intenta nuevamente", "warning");
            }
         });
      });
   });
</script>
@endsection