@extends('layouts.app')

@section('template_title')
    Create Evento
@endsection

@section('content')
    <section class="content container">
        <div class="row">
            <div class="col-md-12">
                
                @if ($errors->any())
                    <div class="alert alert-danger alert-dismissible fade show" role="alert" style="width: auto">
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>	
                        @foreach ($errors->all() as $error)
                            <div>{{$error}}</div>
                        @endforeach
                    </div>
                @endif

                <div class="card card-default">
                    <div class="card-header">
                        <span class="card-title">Registrar Evento</span>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ route('evento.store') }}"  role="form" enctype="multipart/form-data">
                            @csrf

                            @include('evento.form')

                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            $(function(){
                $('#evento_actividad_id').on('change', onSelectTipo);
            });
            
             $(function(){
                $('#lug_lugar').on('change', onSelectLugar);
            });
        
            function onSelectTipo() {
                var id = $(this).val();
                $.ajax({
                    headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                    type:'GET',
                    url: "{{ url('sub-actividades') }}" + '/' + id,
                    dataType: "json",
                    success:function(data) {
                        var htmlS = '<option value="">--Subtipo Evento--</option>';
                        for (let i = 0; i < data.length; i++) {
                            htmlS += '<option value="'+data[i].id+'">'+data[i].nombre+'</option>';
                        }
                        $('#evento_sub_actividad_id').html(htmlS);
                    },
                    error: function (data) {
                        alert('Error:', data.warning);
                    }
                });
            }
            
            function onSelectLugar() {
                if($(this).val() == 1) {
                    $("#lug_descripcion_i").css("display", "none");
                    $("#lug_descripcion_s").css("display", "block");
                    
                    $.ajax({
                        headers: { 'X-CSRF-TOKEN': "{{ csrf_token() }}" },
                        type:'GET',
                        url: "{{ url('sitios-lugares') }}",
                        dataType: "json",
                        success:function(data) {
                            var htmlS = '<option value="">--Sitios--</option>';
                            for (let i = 0; i < data.length; i++) {
                                htmlS += '<option value="'+data[i].valor+'">'+data[i].valor+'</option>';
                            }
                            
                            $('#lug_descripcion_s').empty();
                            $('#lug_descripcion_s').html(htmlS);
                        },
                        error: function (data) {
                            alert('Error:', data.warning);
                        }
                    });
                }
                else {
                    $('#lug_descripcion').empty();
                    $("#lug_descripcion_s").css("display", "none");
                    $("#lug_descripcion_i").css("display", "block");
                }
            }
        });
    </script>
@endsection