@extends('layouts.app')

@section('content')

    <div class="container">
        <h1>Tabla de Proveedores</h1>
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Razon Social</th>
                    <th>Nit</th>
                    <th>Contacto</th>
                    <th>Dirección</th>
                    <th>Teléfono</th>
                    <th>Email</th>
                    <th>Ciudad</th>
                    <th>Actividad principal</th>
                    <th>Observaciones</th>
                    <th>CIIU 1</th>
                    <th>CIIU 2</th>
                    <th>CIIU 3</th>
                    <th>Opciones</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="ajaxModel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modelHeading"></h4>
                </div>
                <div class="modal-body">

                    <form id="formulario_actualizar" class="row g-3 needs-validation" novalidate>


                        <input type="hidden" id="proveedor_id" name="proveedor_id">

                        <div class="form-floating mb-3">
                            <input class="form-control" id="razon_social" name="razon_social" type="text" placeholder="Ingrese razón social" required />
                            <label for="name">Razón Social</label>
                            <div class="invalid-feedback">Por favor indique la Razón Social</div>
                        </div>

                        <div class="form-floating mb-3">
                            <input class="form-control" name="nit" id="nit" type="number" placeholder="Ingrese nit" required />
                            <label for="name">Nit</label>
                            <div class="invalid-feedback">Por favor indique el Nit</div>
                        </div>

                        <div class="form-floating mb-3">
                            <input class="form-control" name="contacto" id="contacto" type="text" placeholder="Ingrese Contacto" required />
                            <label for="name">Contacto</label>
                            <div class="invalid-feedback">Por favor indique el Contacto</div>
                        </div>

                        <div class="form-floating mb-3">
                            <input class="form-control" name="direccion" id="direccion" type="text" placeholder="Ingrese la dirección" required/>
                            <label for="name">Dirección</label>
                            <div class="invalid-feedback">Por favor indique la Dirección</div>
                        </div>

                        <div class="form-floating mb-3">
                            <input class="form-control" name="telefono" id="telefono" type="text" placeholder="Ingrese el teléfono" required />
                            <label for="name">Teléfono</label>
                            <div class="invalid-feedback">Por favor indique el Teléfono</div>
                        </div>

                        <!-- Email address input-->
                        <div class="form-floating mb-3">
                            <input class="form-control" name="email" id="email" type="text" placeholder="ingrese correo" required/>
                            <label for="email">E-Mail</label>
                            <div class="invalid-feedback">Por favor indique el correo</div>
                        </div>

                        <div class="form-floating mb-3">
                            <input class="form-control" name="ciudad" id="ciudad" type="text" placeholder="Ingrese la ciudad" required/>
                            <label for="name">Ciudad</label>
                            <div class="invalid-feedback">Por favor indique la Ciudad</div>
                        </div>

                        <div class="form-floating mb-3">
                            <input class="form-control" name="actividad_principal" id="actividad_principal" type="text" placeholder="Ingrese actividad principal" required/>
                            <label for="name">Actividad principal</label>
                            <div class="invalid-feedback">Por favor indique la actividad principal</div>
                        </div>

                        <div class="form-floating mb-3">
                            <textarea class="form-control" id="observaciones"  name="observaciones" rows="3"></textarea>
                            <label for="name">Observaciones</label>
                            <div class="invalid-feedback">Por favor indique la actividad principal</div>
                        </div>

                        <div class="row">

                            <div class="col-md-4">
                                <label for="ciiu_1" class="form-label">Ciiu 1</label>
                                <select class="form-select"  id="ciiu_1"  name="ciiu_1" required>
                                  <option selected disabled value="">Ciiu 1...</option>
                                  @foreach($actividad_ciiu as $actividad)
                                  <option value="{{$actividad->codigo}}">{{$actividad->codigo}}</option>
                                  @endforeach
                                </select>
                                <div class="invalid-feedback">
                                  Por favor indique el Ciiu 1
                                </div>
                              </div>

                              <div class="col-md-4">
                                <label for="ciiu_2" class="form-label" >Ciiu 2</label>
                                <select class="form-select" id="ciiu_2" name="ciiu_2">
                                  <option value="">Ciiu 2...</option>
                                  @foreach($actividad_ciiu as $actividad)
                                  <option value="{{$actividad->codigo}}">{{$actividad->codigo}}</option>
                                  @endforeach
                                </select>
                              </div>

                              <div class="col-md-4">
                                <label for="ciiu_3" class="form-label" >Ciiu 3</label>
                                <select class="form-select" id="ciiu_3" name="ciiu_3" >
                                  <option value="">Ciiu 3...</option>
                                  @foreach($actividad_ciiu as $actividad)
                                  <option value="{{$actividad->codigo}}">{{$actividad->codigo}}</option>
                                  @endforeach
                                </select>
                              </div>

                        </div>

                        <button class="btn btn-primary" id="saveBtn" type="submit">Enviar Información</button>

                    </form>

                </div>
            </div>
        </div>
    </div>

@endsection

@section('js')

<script type="text/javascript">





$(document).ready(function () {

});



    $(function () {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
      });


      'use strict'

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.querySelectorAll('.needs-validation')

      // Loop over them and prevent submission
      Array.prototype.slice.call(forms)
      .forEach(function (form) {
          form.addEventListener('submit', function (event) {
          if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
          }

          form.classList.add('was-validated')
          }, false)
      })




      // Setup - add a text input to each footer cell
      $('.data-table thead tr')
          .clone(true)
          .addClass('filters')
          .appendTo('.data-table thead');

      var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        scrollX: true,
        ajax: "{{ route('tabla_proveedores') }}",
        columns: [

            {data: 'id', name: 'id'},
            {data: 'razon_social', name: 'razon_social'},
            {data: 'nit', name: 'nit'},
            {data: 'contacto', name: 'contacto'},
            {data: 'direccion', name: 'direccion'},
            {data: 'telefono', name: 'telefono'},
            {data: 'email', name: 'email'},
            {data: 'ciudad', name: 'ciudad'},
            {data: 'actividad_principal', name: 'actividad_principal'},
            {data: 'observaciones', name: 'observaciones'},
            {data: 'ciiu_1', name: 'ciiu_1'},
            {data: 'ciiu_2', name: 'ciiu_2'},
            {data: 'ciiu_3', name: 'ciiu_3'},
            {data: 'action', name: 'action'},

          ],

          initComplete: function () {
              var api = this.api();

              // For each column
              api
                  .columns()
                  .eq(0)
                  .each(function (colIdx) {
                      // Set the header cell to contain the input element
                      var cell = $('.filters th').eq(
                          $(api.column(colIdx).header()).index()
                      );
                      var title = $(cell).text();
                      $(cell).html('<input style="width:100%" type="text" placeholder="' + title + '" />');

                      // On every keypress in this input
                      $(
                          'input',
                          $('.filters th').eq($(api.column(colIdx).header()).index())
                      )
                          .off('keyup change')
                          .on('change', function (e) {
                              // Get the search value
                              $(this).attr('title', $(this).val());
                              var regexr = '({search})'; //$(this).parents('th').find('select').val();

                              var cursorPosition = this.selectionStart;
                              // Search the column for that value
                              api
                                  .column(colIdx)
                                  .search(
                                      this.value != ''
                                          ? regexr.replace('{search}', '(((' + this.value + ')))')
                                          : '',
                                      this.value != '',
                                      this.value == ''
                                  )
                                  .draw();
                          })
                          .on('keyup', function (e) {
                              e.stopPropagation();

                              $(this).trigger('change');
                              $(this)
                                  .focus()[0]
                                  .setSelectionRange(cursorPosition, cursorPosition);
                          });
                  });
          },
      });




    $('body').on('click', '.editarProveedor', function () {
        var proveedor_id = $(this).data('id');
        $.get("{{ route('proveedor.index') }}" +'/' + proveedor_id +'/edit', function (data) {

            $('#modelHeading').html("Edit Product");
            $('#saveBtn').val("edit-user");
            $('#ajaxModel').modal('show');
            $('#razon_social').val(data["razon_social"]);
            $('#nit').val(data["nit"]);
            $('#contacto').val(data["contacto"]);
            $('#direccion').val(data["direccion"]);
            $('#telefono').val(data["telefono"]);
            $('#ciudad').val(data["ciudad"]);
            $('#actividad_principal').val(data["actividad_principal"]);
            $('#observaciones').val(data["observaciones"]);
            $('#email').val(data["email"]);
            $('#ciiu_1').val(data["ciiu_1"]);
            $('#ciiu_2').val(data["ciiu_2"]);
            $('#ciiu_3').val(data["ciiu_3"]);
            $('#proveedor_id').val(data["id"]);

        })
    });


    $('body').on('click', '.eliminarProveedor', function () {

        var product_id = $(this).data("id");

        $.confirm({
          title: 'Eliminar proveedor!',
          content: 'Esta seguro de eliminar este proveedor',
          buttons: {
              confirmar: function () {
                  $.alert('Confirmar!');

                  $.ajax({
                      type: "DELETE",
                      url: "{{ route('proveedor.index') }}"+'/'+product_id,
                      success: function (data) {

                          alert(data);
                          table.draw();
                      },
                      error: function (data) {
                          console.log('Error:', data);
                      }
                  });

              },
              cancelar: function () {
                  $.alert('Se cancelo la eliminacion del proveedor');
              },

          }
      });







    });



    $('#formulario_actualizar').submit(function (e) {
            e.preventDefault();

            var ruta = "{{ route('actualizar_proveedor') }}";
            console.log(ruta);

            $.ajax({
                data: $('#formulario_actualizar').serialize(),
                url: ruta,
                type: "POST",
                dataType: 'json',
                success: function (data) {

                    alert(data);
                    table.draw();
                    $('#ajaxModel').modal('hide');
                    $('#formulario_actualizar').trigger("reset");

                },
                error: function (data) {
                  console.log('Error:', data);
                }
            });
    });


    });
  </script>
@endsection