@extends('layouts.app')

@section('title')
    Distribución Presupuestaria
@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-xl">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-title">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="form-add">
            @csrf
            {{-- Formulario --}}
            <div class="row">
                <div class="col-md-12 border-right">
                    @csrf
                    <div class="row">
                      <div class="form-group col-md-1">
                        <button type="button" class="btn btn-danger btn-sm shadow h-100 w-100" id="add-categoria"><i class="fas fa-plus"></i></button>
                      </div>
                      <div class="form-group col-md-4">
                        <label for="categoria_id">Código</label>
                        <input type="text" class="form-control" name="categoria_id" required id="categoria_id">
                      </div>
                      <div class="form-group col-md-7">
                        <label for="descripcion">Nombre Categoría</label>
                        <input type="text" class="form-control" required id="descripcion" onkeypress="return validator.soloLetras(event)">
                      </div>
                    </div>
                    <hr>
                    <div class="row">
                      <div class="col-md-12 text-right">
                        <button type="button" id="btn-add-partida" class="btn btn-danger btn-sm" disabled><i class="fas fa-plus"></i> Añadir partida</button>
                      </div>
                    </div>
                    <hr>
                    <table class="table bordered table-striped" id="table-cuentas">
                      <thead class="thead-dark">
                        <tr class="text-center">
                          <th>Cuenta</th>
                          <th>Descripción</th>
                          <th>Monto</th>
                          <th>Fuente</th>
                          <th>Clase</th>
                          <th></th>
                        </tr>
                      </thead>
                      <tbody id="products-body">
                        
                      </tbody>
                      {{-- <tfoot>
                        <tr>
                          <th colspan="3"></th>
                          <th class="h3 text-center"><b>Total Venta</b>:</th>
                          <th class="h3" id=""></th>
                        </tr>
                      </tfoot> --}}
                    </table>
                    
                  
                </div>
              </div>
            {{-- Fin Formulario --}}
            <hr>
            <div class="row form-group">
                <div class="col-md-12 text-right">

                    <button type="submit" class="btn btn-sucess btn-sm" id="btn-submit">
                        <i class="fa fa-check"></i> Finalizar
                    </button>
                </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
        </div>
      </div>
    </div>
  </div>
{{-- Fin modal --}}

{{-- Modal Categoria Programatica --}}
<!-- Modal -->
<div class="modal fade" id="modal-category" 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="exampleModalLabel"><i class="fas fa-plus"></i> Añadir Categoría</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="table-categoria">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th width="500">Descripción</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
{{-- Fin modal --}}
{{-- Modal Egresos --}}
<!-- Modal -->
<div class="modal fade" id="modal-expenses" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><i class="fas fa-plus"></i> Añadir Egreso</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success" id="added-cuenta" style="display: none;">
                    <p><i class="fas fa-check"></i> Partida asignada con éxito.</p>
                </div>
                <div class="table-responsive">
                    <table class="table" id="table-egreso">
                        <thead>
                            <tr>
                                <th>Cuenta</th>
                                <th>Descripción</th>
                                <th class="text-center">Monto</th>
                                <th class="text-center">Fuente</th>
                                <th class="text-center">Clase</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
{{-- Fin modal --}}
@endsection

@section('content')
    <div class="container-fluid 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="far fa-building"></i> Distribución Presupuestaria año: <span class="font-weight-bold">{{\Carbon\Carbon::parse($distribucion->fecha)->format('Y')}}</span></h4>
                    </div>
                    <div class="col-md-6 text-right">
                        <a href="{{route('distribucion.list')}}" class="btn btn-dark btn-sm shadow"><i class="fas fa-long-arrow-alt-left"></i> Volver</a>
                        <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 distribución</a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="table-index">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th>Categoría Programática</th>
                                <th>Monto Total</th>
                                <th class="text-right">Acciones</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function(){
        var id = "",
            cuentas = [];
        start()
        
        // Formato index(ruta, parametro, botones)
        // Mostrar registros
        async function start (){
           let table =  await index('/distribucionesrenglones', {{$distribucion->id}}),
               template = "";

           table.forEach(e => {
            template+= `
                <tr>
                    <td>${e.pp_cf_categoria_programatica.codigo}</td>
                    <td>${e.pp_cf_categoria_programatica.descripcion}</td>
                    <td>${e.monto}</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.pp_cf_categoria_programatica.codigo}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Editar sistema</p>"><i class="fas fa-edit"></i></a>
                        <a href="#" class="btn btn-danger rounded-circle btn-sm del shadow" data-id="${e.id}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Eliminar sistema</p>"><i class="fas fa-trash"></i></a>
                    </td>
                </tr>
            `;
           });

           $('#table-index').DataTable().destroy();

           $('#table-index tbody').html(template);

           $('#table-index').DataTable({language: translate});

           $(function(){
                $('.btn').tooltip()
            })
        } 


        // Reiniciar formulario de registro
        $('#btn-add').click(function(){
            cuentas = [];
            indexCuentas();
            $('#btn-add-partida').attr('disabled','disabled');
            $('#form-edit').trigger('reset');
            $('#form-add').trigger('reset');
            $('#form-edit').attr('id', 'form-add');
            $('#btn-submit').attr('class', 'btn btn-success btn-lg').html('<i class="fas fa-check"></i> Finalizar');
            $('#modal-title').html('<i class="fa fa-plus"></i> Registrar distribución');
        });


        // Enviar formulario de registro
        $(document).on('submit', '#form-add', function(e){
            e.preventDefault();
            let form = new FormData(this);
                form.delete('_method');
                form.append('cuentas', JSON.stringify(cuentas));
            store('/distribucionesrenglones/store', form);
            start();
            cuentas = [];
            indexCuentas();
        })
        
        // Eliminar registro
        $(document).on('click', '.del', function(e){
            e.preventDefault();
            id = $(this).attr('data-id');
            destroy('/distribucionesrenglones/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');
            let row = await show('/distribucionesrenglones/show/', id);
            cuentas = [];
            
            $('input[name=categoria_id]').val(row.renglon[0].categoria_id);
            $('#descripcion').val(row.renglon[0].pp_cf_categoria_programatica.descripcion);

            row.renglones.forEach(e => {
                cuentas.push({
                    codigo: e.pp_cf_egreso.codigo,
                    descripcion: e.pp_cf_egreso.descripcion,
                    monto: e.monto,
                    fuente_id: e.fuente_id,
                    fuente: e.pp_cf_fuente.descripcion,
                    clase_id: e.clase_id,
                    clase: e.pp_cf_clase.descripcion
                });
            })

            indexCuentas();
            $('#btn-add-partida').removeAttr('disabled');
            $('#form-add').attr('id', 'form-edit');
            $('#btn-submit').attr('class', 'btn btn-primary btn-lg').html('<i class="fa fa-check"></i> Modificar distribución');
            $('#modal-title').html('<i class="fa fa-edit"></i> Modificar distribución');

            $('input[name=fecha]').val(row.fecha)
            

            
            $('#new-system').modal('show');
        })

        // 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('/distribucion/update/', form, id);
            start();
            $('#new-system').modal('hide');
        })        

        $(document).on('click', 'input[name=controlador]', function(){
            let controlador = $(this);
            if(controlador.prop('checked')){
                $('#div-controller-name').show();
            }
        })

        $(document).on('click', '#existente', function(){
            let controlador = $(this);
            if(controlador.prop('checked')){
                $('#div-controller-exist').show();
                $('#nombre_controlador').attr('disabled','disabled')
                $('#controlador_existente').removeAttr('disabled')
            }else{
                $('#div-controller-exist').hide();
                $('#controlador_existente').attr('disabled','disabled')
                $('#nombre_controlador').removeAttr('disabled')
            }
        })

        // Obtener datos de las categorias
        $(document).on('click', '#add-categoria', async function(e){
            e.preventDefault();
            let table = await index('/categoriaprogramatica'),
                template = "";
            
            table.forEach(e => {
            template+= `
                <tr>
                    <td>${e.codigo}</td>
                    <td width="400">${e.descripcion}</td>
                    <td class="text-center" width="50">
                        <a href="#" class="btn btn-warning rounded-circle btn-sm shadow asignar-categoria" data-codigo="${e.codigo}" data-descripcion="${e.descripcion}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Seleccionar categoría</p>"><i class="fas fa-long-arrow-alt-right"></i></a>
                    </td>
                </tr>
            `;
           });

           $('#table-categoria').DataTable().destroy();

           $('#table-categoria tbody').html(template);

           $('#table-categoria').DataTable({language: translate});
            
            $('#modal-category').modal('show');
        })

        $(document).on('click', '.asignar-categoria', function(){
            $('#categoria_id').val($(this).attr('data-codigo'));
            $('#descripcion').val($(this).attr('data-descripcion'));
            $('#btn-add-partida').removeAttr('disabled');

            $('#modal-category').modal('hide');
        });

        // Obtener datos de las egresos
        $(document).on('click', '#btn-add-partida', async function(e){
            e.preventDefault();
            let table = await index('/egresos'),
                clases = await index('/presupuesto/clases'),
                fuentes = await index('/presupuesto/fuentes'),
                selectClases = "",
                selectFuentes = "",
                template = "";
            
            // Construcción de select de Clases
            template += `<select class="form-control clase">`;
            clases.forEach(e => {
                template+= `<option value="${e.id}">${e.descripcion}</option>`;
            });
            template += `</select>`;
            selectClases = template;


            template = "";

            // Construcción de select de Fuentes
            template += `<select class="form-control fuente">`;
            fuentes.forEach(e => {
                template+= `<option value="${e.id}">${e.descripcion}</option>`;
            });
            template += `</select>`;
            selectFuentes = template;
            template = "";

            table.forEach(e => {
            template+= `
                <tr>
                    <td class="codigo">${e.codigo}</td>
                    <td width="400" class="descripcion">${e.descripcion}</td>
                    <td class="r-monto"><input class="form-control monto"></td>
                    <td class="r-fuente">${selectFuentes}</td>
                    <td class="r-clase">${selectClases}</td>
                    <td class="text-center" width="50">
                        <a href="#" class="btn btn-warning rounded-circle btn-sm shadow asignar-cuenta" data-codigo="${e.codigo}" data-descripcion="${e.descripcion}" data-toggle="tooltip" data-placement="top" data-html="true" title="<p>Seleccionar categoría</p>"><i class="fas fa-long-arrow-alt-right"></i></a>
                    </td>
                </tr>
            `;
           });

           $('#table-egreso').DataTable().destroy();
           
           $('#table-egreso tbody').html(template);
           
           $('#table-egreso').DataTable({language: translate});
           
           $('#modal-expenses').modal('show');
           
           $(function(){
               $('.monto').mask('000.000.000.000.000,00', {
                    reverse: true
                });
           })
        })

        $(document).on('click', '.asignar-cuenta', function(){
            let i = 0,
                cuenta = {
                    codigo: $(this).parent().parent().children('td.codigo').text(),
                    descripcion: $(this).parent().parent().children('td.descripcion').text(),
                    monto: $(this).parent().parent().children('td.r-monto').children('input.monto').val(),
                    fuente_id: $(this).parent().parent().children('td.r-fuente').children('.fuente').val(),
                    fuente: $(this).parent().parent().children('td.r-fuente').children('.fuente').children('option:selected').text(),
                    clase_id: $(this).parent().parent().children('td.r-clase').children('.clase').val(),
                    clase: $(this).parent().parent().children('td.r-clase').children('.clase').children('option:selected').text(),
                },
                verSuma = 0;
                cuentas.push(cuenta)

                $('#added-cuenta').slideDown('slow');
                
                setTimeout(() => {
                    $('#added-cuenta').slideUp('fast');
                }, 2000);

            indexCuentas();
        });

        $(document).on('click', '.del-cuenta',function(){
            delCuenta($(this).attr('data-id'));
        })

        function delCuenta(id) {
            cuentas.splice(id, 1);
            indexCuentas();
        }

        function indexCuentas(){
            let template ="",
                i = 0;
            cuentas.forEach(e => {
                template += `
                    <tr class="text-center">
                        <td>${e.codigo}</td>
                        <td>${e.descripcion}</td>
                        <td>${e.monto}</td>
                        <td>${e.fuente}</td>
                        <td>${e.clase}</td>
                        <td>
                            <button type="button" class="btn btn-danger del-cuenta btn-sm" data-id="${i}"><i class="fas fa-trash"></i></button>
                        </td>
                    </tr>
                `;
                i++;
            })

            $('#table-cuentas').DataTable().destroy();

            $('#table-cuentas tbody').html(template);

            $('#table-cuentas').DataTable({language: translate});
        }


    });
  </script>
@endsection