@extends('layout.master')
@section('parentPageTitle', 'Profesionales')
@section('title', 'Especialidades del profesional')

@section('page-style')
    <link rel="stylesheet" href="{{asset('assets/plugins/dropzone/dropzone.css')}}">
    <link rel="stylesheet" href="{{asset('assets/jquery-ui.css')}}">
    <link rel="stylesheet" href="{{asset('assets/plugins/bootstrap-select/css/bootstrap-select.css')}}">
    <link rel="stylesheet" href="{{asset('assets/bootstrap.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/plugins/jquery-datatable/dataTables.bootstrap4.min.css')}}">
    <style type="text/css">
        .caret{    
            display: none;
        }
    </style>
@stop
@section('content')


    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="card">

                <div class="body">
                    <form action="#" id="formIngresarEspecialidadesPro" method="post">

                        
                        {{ csrf_field() }}
                        <div class="row clearfix">
                            <div class="col-sm-7">                                
                                <div class="form-group">
                                    <h5 style="text-transform: uppercase;">{{$dataProfesional[0]->nombre}} {{$dataProfesional[0]->apaterno}} {{$dataProfesional[0]->amaterno}}</h5>
                                    <label>{{$dataProfesional[0]->rut}}</label>
                                </div>
                            </div>
                            <div class="col-sm-5">                                
                                <div class="form-group" align="right">
                                    <button class="btn btn-primary btn-round ingresarEspecialidad" type="button">Añadir especialidad al profesional</button>
                                </div>
                            </div>
                        </div>
                        <div class="row clearfix">
                            <div class="col-sm-12">
                                <table class="table m-b-0 table-hover" id="tablaEspecialidadesAsignadas" name="tablaEspecialidadesAsignadas">
                                    <thead>
                                        <tr class="ui-widget-header ">
                                            <th>Especialidad</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($especialidadesAsignadas as $espec)
                                        <tr>
                                            <td>{{ $espec->nombre_especialidad }}</td>
                                            <td>
                                                <button id="btn{{$espec->id}}" class="btn btn-primary btn-round btn-sm" type="button" onclick="cambiarEstado('{{$espec->id}}', '{{ $espec->estado }}',this.id)">Inactivo</button>
                                            </td>
                                        </tr>
                                        @endforeach                                                                          
                                    </tbody>
                                    <tfoot></tfoot>
                                </table>
                            </div>
                        </div>





                        <div class="row clearfix" align="right">          
                            <div class="col-sm-12">
                                <a  class="btn btn-default btn-round btn-simple" href="{{route('profesionales.listado')}}">Volver</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="dialog-form" title="Ingresar especialidad al profesional"> 
        <form>
            <fieldset>

                <div class="row">
                    <div class="col-sm-12">
                        <select id="selectEspecialidad" name="selectEspecialidad">
                            <option value="">Seleccionar</option>
                            @foreach ($especialidades as $data)
                            <option value="{{ $data->id }}">{{ $data->nombre }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>                        

                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">

            </fieldset>
        </form>
    </div>




@stop
@section('page-script')
    <script src="{{asset('assets/plugins/dropzone/dropzone.js')}}"></script>
    <script src="{{asset('assets/plugins/momentjs/moment.js')}}"></script>    
    <script src="{{asset('assets/jquery-ui.js')}}"></script>
    <script src="{{asset('assets/bundles/datatablescripts.bundle.js')}}"></script>
    <script>

    function cambiarEstado(id, estado, btn_id){
        var token = $('meta[name="csrf-token"]').attr('content');
        var url='ajax_cambiar_estado_especialidad';
        var enviarData={"id" : id, "estado" : estado};

        $.ajax({
            type:'POST',
            url: url,
            data: enviarData,
            headers: {
                'X-CSRF-TOKEN': token
            },
            success:function(data){
                if(data==1){
                    $("#"+btn_id).text("Activo");
                    $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '1', '"+btn_id+"')");
                }else{
                    $("#"+btn_id).text("Inactivo");
                    $("#"+btn_id).attr("onclick", "cambiarEstado('"+id+"', '0', '"+btn_id+"')");
                }
            }
        });
    }
    
    $(function () {

        

        $(".ingresarEspecialidad").click(function(){
            dialog.dialog( "open" );
            $('select[name=selectEspecialidad]').selectpicker('val', '');
        });

        /*$(".eliminarEspecialidad").click(function(){
            var token = $('meta[name="csrf-token"]').attr('content');
            var url='ajax_eliminar_prof_espec';
            var data={"id" : this.id};

            $.ajax({
                type:'POST',
                url: url,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                success:function(data){
                    window.location.href = "especialidades";
                }
            });
        });*/

        var tempArray = null;

        dialog = $( "#dialog-form" ).dialog({
            autoOpen: false,
            height: 320,
            width: 400,
            modal: true,
            buttons: [
                {
                    text: "Guardar",
                    "class": 'btn-round',
                    click: function() {
                        guardar_especialidad();
                    }
                },
                {
                    text: "Cancelar",
                    "class": 'btn-round',
                    click: function() {
                        dialog.dialog( "close" );
                    }
                }
            ],
        
            close: function() {
                form[ 0 ].reset();
            }
        });

        form = dialog.find( "form" ).on( "submit", function( event ) {
            event.preventDefault();
            guardar_especialidad();
        });

        function guardar_especialidad(){


            var token = $('meta[name="csrf-token"]').attr('content');
            var url='ajax_guardar_especialidad';

            var selectEspecialidad;
            var e = document.getElementById("selectEspecialidad");
            if(e!='NULL'){
                selectEspecialidad = e.options[e.selectedIndex].value;
            }

            var data={"especialidad" : selectEspecialidad};
            //console.log(data);

            $.ajax({
                type:'POST',
                url: url,
                data: data,
                headers: {
                    'X-CSRF-TOKEN': token
                },
                success:function(resultado){
                    //console.log(resultado);
                    if (resultado>0) {
                        window.location.href = "especialidades";
                    }
                }
            });

            dialog.dialog( "close" );
                           
        }

        $('#tablaEspecialidadesAsignadas').DataTable({
            "language": {
                "lengthMenu": "Listar _MENU_ ",
                "zeroRecords": "Aún no tiene registros",
                "info": "Página _PAGE_ de _PAGES_",
                "infoEmpty": "",
                "Search": "Buscar",
                "infoFiltered": "(filtered from _MAX_ total records)",
                "search": "Buscar"
            },
            "order": [[ 0, "asc" ]]
        });



    });
    </script>
@stop