@extends('layouts.app')

@section('title')
    Compras
@endsection

@section('modals')
<!-- Modal Create System -->
<div class="modal fade" id="new-system" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&minus;</span>
          </button>
        </div>
          <form id="form-add">
          <div class="modal-body">
            @csrf
            {{-- Formulario --}}
    
            <div class="form-group">
                <label>Fecha:</label>
                <div class="input-group date" id="cont_fecha" data-target-input="nearest">
                    <input type="date" class="form-control datetimepicker-input" id="fecha" name="fecha"  data-target="#cont_fecha">
                    <div class="input-group-append" data-target="#cont_fecha" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Total Requisición:</label>
                <div class="input-group">
                    <input type="text" class="form-control monto" id="monto" name="total_compra" maxlength="22" placeholder="9.999,99">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><b>Bs</b></span>
                    </div>    
                </div>
                <!-- /.input group -->
            </div>
            {{-- Fin Formulario --}}
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-success" id="btn-submit">
                    <i class="fas fa-check"></i> Guardar
                </button>
            </div>
          </form>
        
      </div>
    </div>
  </div>
  
@endsection

@section('content')
    <div class="container p-5">
        <div class="card card-outline card-danger">
            <div class="card-title p-4 border-bottom">
                <div class="row">
                    <div class="col-md-6">

                        <h4><i class="fa fa-th"></i> Compras Realizadas</h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="#" class="btn btn-primary btn-sm shadow" id="btn-add" data-toggle="modal" data-target="#new-system"><i class="fa fa-plus"></i> Nueva Compra</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="tabla-compra">
                        <thead>
                            <td class="text-center">ID</td>
                            <td class="text-center">Fecha</td>
                            <td class="text-center">N° Control</td>
                            <td class="text-center">Total</td>
                            <td class="text-center">Status</td>
                            <td class="text-center">Acciones</td>
                        </thead>
                        <tbody id="tbody-compra"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

<script>
   $(document).ready(function(){
        var id = "";
        start()
        // Formato index(ruta, parametro, botones)
        // Los botones deben ir en formato json dentro de un array, ejemplo:
        async function start (){
           let table =  await index('/compras'),
               template = "";
           table.forEach(e => {
            template+= `
                <tr>
                    <td class="text-center">${e.id}</td>
                    <td class="text-center">${e.fecha}</td>
                    <td class="text-center">${e.nro_control}</td>
                    <td class="text-center">${e.total_orden}</td>
                    <td class="text-center">${(e.estatus) ? "Activo" : "Inactivo"}</td>
                    <td class="text-right">
                        <a href="#" data-toggle="modal" data-target="#new-system" class="btn btn-warning rounded-circle btn-sm edit shadow" data-id="${e.id}"><i class="fas fa-edit"></i></a>
                        <a href="#" class="btn btn-danger rounded-circle btn-sm del shadow" data-id="${e.id}"><i class="fas fa-trash"></i></a>
                    </td>
                </tr>
            `;
           });

           $('#tabla-compra').DataTable().destroy();

           $('#tbody-compra').html(template);

           $('#tabla-compra').DataTable({language: translate});
        }

        // Reiniciar formulario de registro
        $('#btn-add').click(function(){
            $('#form-edit').trigger('reset');
            $('#form-add').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#btn-submit').attr('class', 'btn btn-success').html('<i class="fa fa-circle-check"></i> Guardar');
            $('#modal-title').html('<i class="fa fa-plus"></i> Registrar Compra');
        });
        // Enviar formulario de requisicion
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.delete('_method');
                store('/compras/store', form);
            start();
        })
        // Eliminar registro
        $(document).on('click', '.del', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            destroy('/compras/destroy/', id);
            setTimeout(() => {
                start();
                id = "";
            }, 1500);
        })

        // Obtener datos de un registro
        $(document).on('click', '.edit', async function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            $('#form-add').attr('id', 'form-edit');
            $('#btn-submit').attr('class', 'btn btn-primary').html('<i class="fa fa-check"></i> Modificar registro');
            $('#modal-title').html('<i class="fa fa-edit"></i> Modificar Compra');
            $('#new-system').modal('show');
            let row = await show('/compras/show/', id);
            $("#fecha").val(row.fecha)
            var monto_n = currencyFormatter(row.total_orden)
                $(".monto").val(monto_n)
        })
        // Enviar formulario de actualización
        $(document).on('submit', '#form-edit', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.append('_method', 'PUT');
            update('/compras/update/', form, id);
            start();
        })
    });
</script>
@endsection