@extends('layouts.app')

@section('custom-styles')
  <!-- Select2 -->
  <link rel="stylesheet" href="/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <link rel="stylesheet" href="/css/tva-select2.css">
@endsection

@section('content-header')
    <div class="col-sm-6">
        <h1 class="m-0"><i class="nav-icon fas fa-house-user fa-xs"></i> {{ __('Proveedores') }}</h1>
    </div><!-- /.col -->
    <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item">Proveedores</li>
        <li class="breadcrumb-item active">Detalle</li>
        </ol>
    </div><!-- /.col -->
@endsection

@section('content')

  <!-- Main content -->
  <section class="content">

    <div class="container-fluid">

      <div class="row">

        <div class="col-md-3">
          <!-- Profile Image -->
          <div class="card card-primary card-outline">
            <div class="card-body box-profile">
              <div class="text-center">
                <img class="profile-user-img img-fluid img-circle" src="/img/user.png" alt="User profile picture">
              </div>
              <h3 class="profile-username text-center">{{ $proveedor->nombre }}</h3>
              <p class="text-muted text-center"></p>              
            </div>
            <!-- /.card-body -->            
          </div>
          <!-- /.card -->

          <!-- About Me Box -->
          <div class="card card-primary">

            <div class="card-header">
              <h3 class="card-title">Datos de contacto</h3>
            </div>
            <!-- /.card-header -->

            <div class="card-body">

              <strong><i class="fas fa-user-tie mr-1"></i> Referencia</strong>

              <p class="text-muted">@if (empty($proveedor->contacto)) Ninguno @else {{ $proveedor->contacto }} @endif</p>
              <hr>

              <strong><i class="fas fa-address-book mr-1"></i> Contacto</strong>
              <p class="text-muted">Dirección: {{ $proveedor->direccion }}</p>
              <p class="text-muted">
                Teléfono: @if (empty($proveedor->telefono)) Ninguno @else <a href="tel:{{ $proveedor->telefono }}" target="_blank">{{ $proveedor->telefono }}</a> @endif
              </p>
              <p class="text-muted">
                E-Mail: @if (empty($proveedor->email)) Ninguno @else <a href="mailto:{{ $proveedor->email }}" target="_blank">{{ $proveedor->email }}</a> @endif
              </p>
              <hr>

              {{-- <strong><i class="far fa-file-alt mr-1"></i> Notas</strong>
              <p class="text-muted">@if (empty($proveedor->notas)) Ninguna @else {{ $proveedor->notas }} @endif</p> --}}
            </div>
            <!-- /.card-body -->

            <div class="card-footer">
                <a href="{{ url()->previous() }}" class="btn btn-primary">Volver</a>
            </div>
            <!-- /.card-footer-->

          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->

        <div class="col-md-9">
          <div class="card">
            <div class="card-header p-2">
              @if(!@empty(session('message')))
                  <hr class="hr hr-blurry" />
                  @switch(session('type'))
                      @case('OK')
                        <div class="alert alert-success alert-dismissible">
                          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                          <h5><i class="icon fas fa-check"></i> Listo!</h5>
                          {{ session('message') }}
                        </div>
                          @break
                      @default
                        <div class="alert alert-warning alert-dismissible">
                          <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                          <h5><i class="icon fas fa-exclamation-triangle"></i> Atención!</h5>
                          {{ session('message') }}
                        </div>
                  @endswitch
              @endif
              <ul class="nav nav-pills">
                <li class="nav-item"><a class="nav-link active" href="#movimientos" data-toggle="tab"><i class="nav-icon fas fa-dollar-sign fa-xs"></i> &nbsp;Últimos movimientos</a></li>
                {{-- <li class="nav-item"><a class="nav-link" href="#unidades" data-toggle="tab">Unidades asociadas</a></li> --}}
              </ul>
            </div><!-- /.card-header -->
            <div class="card-body">
              <div class="tab-content">

                <div class="tab-pane active" id="movimientos">

                  <table class="table table-hover text-nowrap">
                    <thead>
                      <tr>
                        <th class="text-center">ID</th>
                        <th>Descripción</th>
                        <th>Rubro</th>
                        <th>Importe</th>
                        <th class="text-center">Fecha venc.</th>
                        <th class="text-center">Estado</th>
                      </tr>
                    </thead>
                    <tbody>
                      @if (empty($proveedor->movimientos) || count($proveedor->movimientos) == 0)
                            <tr>
                              <td colspan="6" class="text-center">No existen movimientos registrados.</td>
                            </tr>
                        @endif
                        @foreach($proveedor->movimientos as $movimiento)
                        <tr>
                            <td class="align-middle">{{ $movimiento->id }}</td>
                            <td class="align-middle">{{ $movimiento->descripcion }}</td>
                            <td class="align-middle">{{ $movimiento->concepto->descripcion }}</td>
                            <td class="align-middle">{{ $movimiento->moneda->simbolo }} {{ number_format($movimiento->importe, 2) }}</td>
                            <td class="text-center align-middle">{{ $movimiento->fecha_vencimiento->format('d/m/Y') }}</td>
                            <td class="text-center align-middle">{{ $movimiento->estado_id->label() }}</td>
                        </tr>                          
                        @endforeach
                    </tbody>
                  </table>
                  
                </div>
                <!-- /.tab-pane -->
                {{-- <div class="tab-pane" id="unidades">
                  
                </div> --}}
                <!-- /.tab-pane -->
              </div>
              <!-- /.tab-content -->
            </div><!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->

      </div>
      <!-- /.row -->      

    </div>
    <!-- /.container-fluid -->

  </section>
  <!-- /.content -->

@endsection

@section('custom-scripts')
    <!-- Select2 -->
    <script src="/plugins/select2/js/select2.full.min.js"></script>
    <!-- jquery-validation -->
    <script src="/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="/plugins/jquery-validation/additional-methods.min.js"></script>
    <!-- InputMask -->
    <script src="/plugins/moment/moment.min.js"></script>
    <script src="/plugins/inputmask/jquery.inputmask.min.js"></script>
  <script>

  $('#modal-link').on('show.bs.modal', function (event) {
    
    var button = $(event.relatedTarget);
    $('#link-form').attr('action', button.data('form-action'));
    populateUnidadDropDown();
  
  });

  $('#modal-unlink').on('show.bs.modal', function (event) {
    
    var button = $(event.relatedTarget);
    $('#unlink-form').attr('action', button.data('form-action'));
  });

  $('#modal-nucleo').on('show.bs.modal', function (event) {    
    var button = $(event.relatedTarget);
    $('#vinculo-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });

  $('#modal-nucleo-editar').on('show.bs.modal', function (event) {    

    var button = $(event.relatedTarget);
    
    $('#editar-vinculo-form').attr('action', button.data('form-action'));
    
    $('#socio_id_nucleo_ed').val(button.data('socio-id')); 
    $('#nombres_ed').val(button.data('nombres')); 
    $('#apellidos_ed').val(button.data('apellidos')); 
    $('#documento_identidad_ed').val(button.data('documento-identidad')); 
    $('#parentesco_id_ed').val(button.data('parentesco-id')).trigger('change');
    $('#nota_ed').val(button.data('nota')); 
    
    $('.overlay').css("display", "none");

  });

  $('#modal-nucleo-delete').on('show.bs.modal', function (event) {    
    var button = $(event.relatedTarget);
    $('#delete-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });  

  $('#modal-servicio').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget);    
    $('#servicio-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  });

  $('#modal-servicio-editar').on('show.bs.modal', function (event) {    

    var button = $(event.relatedTarget);    

    $('#editar-servicio-form').attr('action', button.data('form-action'));

    $('#socio_id_ed').val(button.data('socio-id')); 
    $('#concepto-list-dropdown-ed').val(button.data('concepto-id')).trigger('change');
    $('#identificador_ed').val(button.data('identificador')); 
    $('#estado_id_ed').prop('checked', button.data('estado-id') == "1" ? true : false);

    $('.overlay').css("display", "none");

  });

  $('#modal-servicio-delete').on('show.bs.modal', function (event) {    
    var button = $(event.relatedTarget);
    $('#delete-servicio-form').attr('action', button.data('form-action'));
    $('.overlay').css("display", "none");
  }); 

  function populateUnidadDropDown(dropdown){

    dropdown.append($("<option />").val(0).text(''));

    // var parameters = {apellidos:$apellidos};

    $('.overlay').css("display", "flex");

    $.ajax({
        url:'/unidades/obtener-no-vinculadas',
        type: 'GET',
        headers:{"content-type" : "application/json"},
        // data: JSON.stringify(parameters),
        success: function(response) {
        
          $.each(response, function(index, item) {
            dropdown.append($("<option />").val(item.id).text(item.bloque.descripcion + ' - ' + item.numero.toString().padStart(3, '0')));
          });

          $('.overlay').css("display", "none");
        },
        error: function(error) {
          $('.overlay').css("display", "none");
          console.error('Error fetching data:', error);
        }
    });            

  }

  function populateConceptoDropDown(dropdown, tipo){

    dropdown.append($("<option />").val(0).text(''));

    var filtroTipo = typeof tipo !== "undefined" ? '/' + tipo : ''
    // var parameters = {apellidos:$apellidos};

    $('.overlay').css("display", "flex");

    $.ajax({
        url:'/conceptos/obtener-por-tipo' + filtroTipo,
        type: 'GET',
        headers:{"content-type" : "application/json"},
        // data: JSON.stringify(parameters),
        success: function(response) {
        
          $.each(response, function(index, item) {
            dropdown.append($("<option />").val(item.id).text(item.descripcion));
          });

          $('.overlay').css("display", "none");
        },
        error: function(error) {
          $('.overlay').css("display", "none");
          console.error('Error fetching data:', error);
        }
    });            

  }

  $(function () {

    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })

    moment.locale('es');

    //Datemask dd/mm/yyyy
    // $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
    //Datemask2 mm/dd/yyyy
    // $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
    //Money Euro
    $('[data-mask]').inputmask()

    //Date picker
    $('#fecha').datetimepicker({
        format: 'DD/MM/YYYY',
        autoclose:true,
        language: 'es',
    });

    $('#editForm').validate({
        rules: {
        descripcion: {
            required: true,
            maxlength: 20,
        },
        simbolo: {
            required: true,
            maxlength: 5
        },
        },
        messages: {
            descripcion: {
                required: "Por favor ingresa el identificador de la moneda",
                maxlength: "El largo máximo es de 20."
            },
            simbolo: {
                required: "Por favor ingresa el símbolo de la moneda",
                maxlength: "El largo máximo es 5."
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.col-sm-10').append(error);
        },
        highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
  
    populateConceptoDropDown($("#concepto-list-dropdown"), 2);
    populateConceptoDropDown($("#concepto-list-dropdown-ed"), 2);
    console.log("TODO: parametrizar tipo de Concepto");
  });

  </script>
@endsection