@extends('plantilla')
@section('titulo', "Datos de la banda")
@section('scripts')
<link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
<script src="{{ asset('js/datatables.min.js') }}"></script>
<script>
    globalId = '0';
    
</script>
@endsection
@section('breadcrumb')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/home">Inicio</a></li>
    <li class="breadcrumb-item">Legajo</li>
    <li class="breadcrumb-item"><a href="/bandas">Bandas</a></li>
    <li class="breadcrumb-item active">Nueva banda</li>
</ol>
<ol class="toolbar">
    <li class="btn-item"><a title="Guardar" href="#" class="fa fa-floppy-o" aria-hidden="true" onclick="javascript: $('#modalGuardar').modal('toggle');"><span>Guardar</span></a>
    </li>
    <li class="btn-item"><a title="Guardar" href="#" class="fa fa-trash-o" aria-hidden="true" onclick="javascript: $('#mdlEliminar').modal('toggle');"><span>Eliminar</span></a>
    </li>
    <li class="btn-item"><a title="Salir" href="#" class="fa fa-arrow-circle-o-left" aria-hidden="true" onclick="javascript: $('#modalSalir').modal('toggle');"><span>Salir</span></a></li>
</ol>
<script>
function fsalir(){
    location.href ="/bandas";
}
</script>
@endsection
@section('contenido')
<div class="row">
    <div id = "msg"></div>
    </div>
<form id="form1" method="POST">
    <div class="row">
        <input type="hidden" name="_token" value="{{ csrf_token() }}"></input>
        <input type="hidden" id="id" name="id" class="form-control" value="{{$globalId}}" required>
        <div class="form-group col-lg-6">
            <label>Nombre</label>
            <input type="text" class="form-control" id="txtNombre" name="txtNombre" value="{{$banda->nombre }}" required>
        </div>
        <div class="form-group col-lg-6">
            <label>Genero</label>
            <select id="lstGenero" name="lstGenero" class="form-control" required>
                <option disabled selected value="">Seleccionar</option>
                    @for ($i = 0; $i < count($array_generos); $i++)
                        @if (isset($banda) and $array_generos[$i]->idbandagenero == $banda->fk_idgenero)
                            <option selected value="{{ $array_generos[$i]->idbandagenero }}">{{ $array_generos[$i]->nombre }}</option>
                        @else
                        <option  value="{{ $array_generos[$i]->idbandagenero }}">{{ $array_generos[$i]->nombre }}</option>
                        @endif
                    @endfor
            </select>
        </div>
        <div class="form-group col-lg-6">
            <label>Provincia</label>
            <select id="lstProvincia" name="lstProvincia" class="form-control" required>
                <option disabled selected value="">Seleccionar</option>
                @for ($i = 0; $i < count($array_provincias); $i++)
                        @if (isset($banda) and $array_provincias[$i]->idprov == $banda->fk_idprovincia)
                            <option selected value="{{ $array_provincias[$i]->idprov }}">{{ $array_provincias[$i]->descprov }}</option>
                        @else
                        <option  value="{{ $array_provincias[$i]->idprov }}">{{ $array_provincias[$i]->descprov }}</option>
                        @endif
                    @endfor
            </select>
        </div>
        <div class="form-group col-lg-6">
            <label>Localidad</label>
            <select id="lstLocalidad" name="lstLocalidad" class="form-control" required>
                <option disabled selected value="">Seleccionar</option>
                    @for ($i = 0; $i < count($array_localidades); $i++)
                        @if (isset($banda) and $array_localidades[$i]->idlocalidad == $banda->fk_idlocalidad)
                            <option selected value="{{ $array_localidades[$i]->idlocalidad }}">{{ $array_localidades[$i]->nombre }}</option>
                        @else
                            <option  value="{{ $array_localidades[$i]->idlocalidad }}">{{ $array_localidades[$i]->nombre }}</option>
                        @endif
                    @endfor
            </select>
        </div>
        <div class="from-group col-lg-6">
            <label>Email</label>
            <input type="email" id="txtEmail" name="txtEmail" class="form-control" value="{{$banda->email }}">
        </div>
        <div class="from-group col-lg-6">
            <label>Web site</label>
            <input type="text" id="txtWebSite" name="txtWebSite" class="form-control" value="{{$banda->website }}">
        </div>
        <div class="from-group col-lg-6">
            <label>Fecha formacion</label>
            <input type="date" id="txtFechaFormacion" name="txtFechaFormacion" class="form-control" value="{{$banda->fecha_formacion }}" required>
        </div>
        <div class="from-group col-lg-6">
            <label>Integrantes</label>
            <input type="number" id="txtIntegrantes" name="txtIntegrantes" class="form-control" value="{{$banda->integrantes }}" required>
        </div>
        <div class="from-group col-lg-6">
            <label>Firma con sello</label>
            <select id="lstFirmoSello" name="lstFirmoSello" class="form-control" required>
                        <option value="" disabled selected>Seleccionar</option>
                        <option value="1" {{isset($banda) && $banda->firmo_con_sello == 1? 'selected' : ''}}>Si</option>
                        <option value="2" {{isset($banda) && $banda->firmo_con_sello == 2? 'selected' : ''}}>No</option>
                    </select>
        </div>
</div>
        <div class="row">
        <div class="col-12 mt-4">  
        <div class="card mb-3">
                <div class="card-header">
                    <i class="fa fa-table"></i> Socios
                    <div class="pull-right">
                        <button type="button" class="btn btn-secondary fa fa-minus-circle" onclick="abrirDialogoEliminarSocio()"></button>
                        <button type="button" class="btn btn-secondary fa fa-plus-circle" data-toggle="modal" data-target="#modalSocios"></button>
                    </div>
                </div>
                <div class="panel-body">
                    <table id="grilla" class="display" style="width:98%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>nombre</th>
                            </tr>
                        </thead>
                    </table> 
                 </div>
            </div>          
        </div>
    </div>
</form>
<div class="modal fade" id="modalSocios" tabindex="-1" role="dialog" aria-labelledby="modalSociosLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalSociosLaben">Socios</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="row">
                <div class="col-12 form-group">
                    <select class="form-control" name="lstSocio" id="lstSocio">
                        <option disabled selected value="">Seleccionar</option>
                        @for($i=0; $i < count($array_socios); $i++)
                            <option value="{{ $array_socios[$i]->id }}">{{ $array_socios[$i]->nombre }} {{ $array_socios[$i]->apellido }}</option>
                        @endfor
                    </select>
                </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" onclick="fAgregarSocio()">Agregar</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="modalmsg" tabindex="-1" role="dialog" aria-labelledby="modalmsg">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBuscarLabel">Eliminar</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-lg-6">
                    &#191;Desea confirmar la operacion?
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="eliminarSocio();">Aceptar</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="mdlEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Eliminar registro?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">¿Deseas eliminar el registro actual?</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">No</button>
            <button type="button" class="btn btn-primary" onclick="eliminar();">Sí</button>
          </div>
        </div>
    </div>
</div>
<script>
    var dataTable = $('#grilla').DataTable({
	    "processing": true,
        "serverSide": false,
	    "bFilter": false,
	    "bInfo": true,
	    "bSearchable": false,
        "paging": false,
        "pageLength": 25,
        "order": [[ 0, "asc" ]],
	    "ajax": "{{ asset('/banda/cargarGrillaSocios?idbanda='.$globalId)}}"
	});
$("#form1").validate();

function guardar() {
    if ($("#form1").valid()) {
        modificado = false;
        form1.submit(); 
    } else {
        $("#modalGuardar").modal('toggle');
        msgShow("Corrija los errores e intente nuevamente.", "danger");
        return false;
    }
}
function eliminar() {
        $.ajax({
            type: "GET",
            url: "{{ asset('/banda/eliminar') }}",
            data: { id:globalId },
            async: true,
            dataType: "json",
            success: function (data) {
                if (data.err = "0") {
                    msgShow("Registro eliminado exitosamente.", "success");
                    $("#btnEnviar").hide();
                    $("#btnEliminar").hide();
                    $('#mdlEliminar').modal('toggle');
                } else {
                    msgShow("Error al eliminar", "success");
                }
            }
        });
}
    function fAgregarSocio(){
    var grilla = $('#grilla').DataTable();
    grilla.row.add([
        "<input type='checkbox' name='txtId[]' value=''>",
        $("#lstSocio option:selected").text() + "<input type='hidden' name='txtNombreSocio[]' value='"+ $("#lstSocio option:selected").val() +"'>",
        ""
    ]).draw();
    $('#modalSocios').modal('toggle');
    limpiarFormulario();
}

function limpiarFormulario(){
    $("#txtsocio").val(0);
}
    function abrirDialogoEliminarSocio() {
        $('#modalmsg').modal('toggle');
    }
    function eliminarSocio() {
        var grilla = $('#grilla').DataTable();
        $('#grilla input[type=checkbox]').each(function () {
            if (this.checked) {
                $(this.parentElement.parentNode).addClass('borrar');
            }
        });
        grilla.rows('.borrar').remove().draw(false);
        $('#modalmsg').modal('toggle');
    }
</script>
@endsection