@extends('layouts.app')

@section('title')
    Presupuesto
@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">
      <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>Fecha Inicio:</label>
                <div class="input-group date" id="cont_fecha_inicio" data-target-input="nearest">
                    <input type="date" class="form-control datetimepicker-input" id="fecha_inicio" name="fecha_inicio"  data-target="#cont_fecha_inicio">
                    <div class="input-group-append" data-target="#cont_fecha_inicio" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Fecha Fin:</label>
                <div class="input-group date" id="cont_fecha_fin" data-target-input="nearest">
                    <input type="date" class="form-control datetimepicker-input" id="fecha_fin" name="fecha_fin"  data-target="#cont_fecha_fin">
                    <div class="input-group-append" data-target="#cont_fecha_fin" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>Monto:</label>
                <div class="input-group">
                    <input type="text" class="form-control monto" id="monto" name="monto" 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> Agregar
                </button>
            </div>
          </form>
        
      </div>
    </div>
  </div>
  <!-- Modal Create System -->
<div class="modal fade" id="modal-credito" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title-credito"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&minus;</span>
          </button>
        </div>
          <div class="modal-body">
          <form id="form-add-credit">
          @csrf
            {{-- Formulario --}}

            <input type="text" id="pre" name="pre" hidden>
                <div class="row">
                    <div class="col-md-6 form-group">
                        <label>Fecha:</label>
                        <div class="input-group date" id="fecha_credito" data-target-input="nearest">
                            <input type="date" class="form-control datetimepicker-input" id="fech_cred" name="fecha"  data-target="#fecha_credito">
                            <div class="input-group-append" data-target="#fecha_credito" data-toggle="datetimepicker">
                                <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 form-group">
                        <label>Monto:</label>
                        <div class="input-group">
                            <input type="text" class="form-control monto" id="monto_credito" name="monto" maxlength="22" placeholder="9.999,99">
                            <div class="input-group-prepend">
                            <span class="input-group-text"><b>Bs</b></span>
                            </div>
                        </div>
                    </div>
                </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-default" id="btn-cancel">
                    <i class="fas fa-times"></i> Cancelar
                </a>
                <button type="submit" class="btn btn-success" id="btn-submit-credito">
                    <i class="fas fa-check"></i> Agregar
                </button>
            </div>
        </form>
            {{-- Fin Formulario --}}
        <!-- lista creditos-->
        <!--<h4 class="text-center">Lista de Créditos</h4>-->
        <div class="table-responsive">
            <table class="table table-bordered table-striped">
                <thead>
                    <td class="text-center">ID</td>
                    <td class="text-center">Fecha</td>
                    <td class="text-center">Monto</td>
                    <td class="text-center">Acciones</td>
                </thead>
                <tbody id="tbody-creditos">

                </tbody>
            </table>
        </div>
    <!--Fin lista creditos-->
         </div><!--Body-->
            
      </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> Presupuestos Registrados</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> Nuevo Presupuesto</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="tabla-presupuesto">
                        <thead>
                            <td class="text-center">ID</td>
                            <td class="text-center">Fecha</td>
                            <td class="text-center">Fecha Inicio</td>
                            <td class="text-center">Fecha Fin</td>
                            <td class="text-center">Monto</td>
                            <td class="text-center">Acciones</td>
                        </thead>
                        <tbody id="tbody-presupuesto"></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('/presupuestos'),
               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.fecha_inicio}</td>
                    <td class="text-center">${e.fecha_fin}</td>
                    <td class="text-center">${e.monto}</td>
                    <td class="text-right">
                        <a href="#" data-toggle="modal" data-target="#modal-credito" class="btn btn-success rounded-circle btn-sm shadow add-credito" data-id="${e.id}" data-fecha="${e.fecha}"><i class="fas fa-piggy-bank"></i></a>
                        <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-presupuesto').DataTable().destroy();

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

           $('#tabla-presupuesto').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> Finalizar');
            $('#modal-title').html('<i class="fa fa-plus"></i> Registrar Presupuesto');
        });
        $(document).on('click', '.add-credito', function(e){
            $("#btn-submit-credito").attr('class', 'btn btn-success').html('<i class="fas fa-check"></i> Agregar');
            $('#form-add-credit').trigger('reset');
            $('#form-edit-credit').trigger('reset');
            id = $(this).attr('data-id');//id del presupuesto
            fecha = $(this).attr('data-fecha');
            $("#pre").val(id)
            $("#modal-title-credito").text("Créditos del Presupuesto: "+fecha);
            listarCreditos(id)
            
        })
        $(document).on('click', '.edit-credito', async function(e){
            $('#form-add-credit').attr('id', 'form-edit-credito');
            id_credito = $(this).attr('data-id-credito');
            fecha_credito = $(this).attr('data-fecha-credito');
            monto_credito = $(this).attr('data-monto-credito');
            $("#fech_cred").val(fecha_credito.split("-").reverse().join("-"));
            $("#monto_credito").val(monto_credito);
            $("#btn-submit-credito").attr('class', 'btn btn-warning').html('<i class="fas fa-check"></i> Modificar');
            $("#btn-submit-credito").attr('data-credito', id_credito);
            
        })
        $(document).on('click', '#btn-cancel', function(e){
            $('#form-edit-credito').attr('id', 'form-add-credit');
            $("#fech_cred").val("");
            $("#monto_credito").val("");
            //cambiamos el form para agregar en vez de editar
            $("#btn-submit-credito").attr('class', 'btn btn-success').html('<i class="fas fa-check"></i> Agregar');
            
        })
        // actualizar registro creditos
        $(document).on('submit', '#form-edit-credito', function(e){
            e.preventDefault();
            id_credito = $("#btn-submit-credito").attr('data-credito');
            let form = new FormData(this);
                form.append('_method', 'PUT');
            update('/creditos/update/', form, id_credito);
            listarCreditos($("#pre").val())
        })
        // crear registro creditos
        $(document).on('submit', '#form-add-credit', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.delete('_method');
                store('/creditos/store', form);
                listarCreditos($("#pre").val())
        })
        // Eliminar registro Credito
        $(document).on('click', '.del-credito', function(e){
            e.preventDefault();
            id = $("#pre").val();
            id_credito = $(this).attr('data-id-credito');
            destroy('/creditos/destroy/', id_credito);
            setTimeout(() => {
                listarCreditos(id);
            }, 1500);   
        })
        // Enviar formulario de presupuesto
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.delete('_method');
                store('/presupuestos/store', form);
            start();
        })
        
        // Eliminar registro
        $(document).on('click', '.del', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            destroy('/presupuestos/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 Presupuesto');
            $('#new-system').modal('show');
            let row = await show('/presupuestos/show/', id);
            $("#fecha").val(row.fecha)
            $("#fecha_inicio").val(row.fecha_inicio)
            $("#fecha_fin").val(row.fecha_fin)
            var monto_n = currencyFormatter(row.monto)
                $(".monto").val(monto_n)
            
    })

        // Enviar formulario de actualización de registro
        $(document).on('submit', '#form-edit', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.append('_method', 'PUT');
            update('/presupuestos/update/', form, id);
            start();
        })

        async function listarCreditos(id){
            $("#fech_cred").val("");
            $("#monto_credito").val("");
            let row = await show('/creditos/show/', id);
            let template_c = "";
            row.forEach(e => {
            template_c+= `
                <tr>
                    <td class="text-center">${e.id}</td>
                    <td class="text-center">${e.fecha}</td>
                    <td class="text-center">${e.monto}</td>
                    <td class="text-right">
                        <a href="#" class="btn btn-warning rounded-circle btn-sm shadow edit-credito" data-id-credito="${e.id}" data-fecha-credito="${e.fecha}" data-monto-credito="${e.monto}"><i class="fas fa-edit"></i></a>
                        <a href="#" class="btn btn-danger rounded-circle btn-sm del-credito shadow" data-id-credito="${e.id}"><i class="fas fa-trash"></i></a>
                    </td>
                </tr>
            `;
           });
           $('#tbody-creditos').html(template_c);
            
        }
    });
  </script>
@endsection