@extends('layouts.app')

@section('content')

    <!-- end sidebar menu -->
    <!-- start page content -->

   {{--  @dump($data) --}}

    <div class="page-content-wrapper">
        <div class="page-content" style="min-height:1200px">
            <div class="page-bar">
                <div class="page-title-breadcrumb">
                    <!--<div class="pull-left">
                        <div class="page-title text-danger">Sin Sucursal</div>
                    </div>-->
                    <ol class="breadcrumb page-breadcrumb pull-right">
                        <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ url('/dashboard') }}">Inicio</a>&nbsp;<i class="fa fa-angle-right"></i>
                        </li>
                        <li class="active">Relaciones Publicas</li>
                    </ol>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-12 col-lg-12">
                    <div class="card  card-box">
                        <div class="card-head">
                            <header>Relaciones Publicas</header>
                        </div>

                    </div>

                    <div class="card-body">
                        <form action="{{ url('asociaciones/relaciones-publicas/'.$id) }}" method="POST">
                            @csrf
                            <div class="form-group">
                                                                

                                {!! Form::mselectMult(
                                    'department',
                                    $department,
                                    null,
                                    'Departamento',
                                    $errors,
                                    12,
                                    true,
                                    true,
                                ) !!}
                            </div>

                            <div id="subcategoriesCasosCobros" class="form-group" style="display: none;">
                                {!! Form::mselectMult(
                                    'casosCobros',
                                    $casosCobros,
                                    null,
                                    'Casos Cobros',
                                    $errors,
                                    12,
                                    true,
                                    true,
                                ) !!}
                            </div>

                            <div id="subcategoriesCasosServicios" class="form-group" style="display: none;">
                                {!! Form::mselectMult(
                                    'casosServicios',
                                    $casosServicios,
                                    null,
                                    'Casos Servicios',
                                    $errors,
                                    12,
                                    true,
                                    true,
                                ) !!}
                            </div>

                            <div id="subcategoriesCasosVentas" class="form-group" style="display: none;">
                                {!! Form::mselectMult(
                                    'casosVentas',
                                    $casosVentas,
                                    null,
                                    'Casos Ventas',
                                    $errors,
                                    12,
                                    true,
                                    true,
                                ) !!}
                            </div>

                          

                            <div class="row mt-1">
                                <div class="col-6">
                                    <label for=""><b>Quien Atendio</b></label>
                                    <input type="text" name="atendio_por" class="form-control" id="">
                                </div>
                                <div class="col-6">
                                    <label for=""><b>Estado de la llamada</b></label>
                                    <select name="estado" class="form-control" required>
                                        <option value="">Seleccionar</option>

                                        @foreach ($estado_llamada as $item)
                                        <option value="{{ $item->tipo_estado_llamada_id }}">{{
                                            $item->tipo_estado_llamada_descripcion }}</option>
                                        @endforeach
                                    </select>
                                </div>

                              
                            </div>


                            <div class="row mt-1">

                                <div class="col-6">
                                    <label for=""><b>Tipo Novedad</b></label>
                                    <select name="novedad_tipo" id="" class="form-control">
                                        <option value="">Seleccionar</option>
                                        @foreach ($novedades as $item)
                                        <option value="{{ $item->tipo_comunicacion_id }}">{{
                                            $item->tipo_comunicacion_descripcios }}</option>

                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-6">
                                    <label for=""><b>¿Resuelto?</b></label>
                                    <select name="resuelto" class="form-control" >
                                        
                                        <option value="Si">Si</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>

                            </div>

                            <div class="row mt-1">

                               

                                <div class="col-6">
                                    <label for=""><b>Seguimiento?</b></label>
                                    <select name="seguimiento" class="form-control">
                                        <option value="Si">Si</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>

                            </div>

                            {{-- observacion --}}
                            <div class="form-group
                            {{ $errors->has('observacion') ? 'has-error' : '' }}">
                                <label for="observacion">Observacion</label>
                                <textarea name="observacion" id="observacion" class="form-control" rows="3"></textarea>
                                @if ($errors->has('observacion'))
                                    <span class="help-block
                                    text-danger">{{ $errors->first('observacion') }}</span>
                                @endif
                            </div>

                            <button type="submit" class="btn btn-primary">Enviar</button>
                            {{-- volver --}}
                            <a href="{{ url('asociacion/ver/'.$id.'/index') }}" class="btn btn-danger">Volver</a>
                        </form>
                    </div>
                            
                        

                       

                </div>

            </div>

        </div>

    </div>

    
@endsection

@section('script')

    <script>

        let department = document.getElementById('department').value;
        // $("#department").on('change', ()=>{
        //    /* save valores all department in every change */
        //    var selectedOptions = this.selectedOptions;
        //    var departments = [];

        //       for (var i = 0; i < selectedOptions.length; i++) {
        //         departments.push(selectedOptions[i].value);
        //       }

        //       console.log(departments);
            
        // })

        $("#department").on('change', function() {
                var selectedOptions = this.selectedOptions;
                var departments = [];
                for (var i = 0; i < selectedOptions.length; i++) {
                departments.push(selectedOptions[i].value);
                }
                console.log(departments); // Aquí tienes tu array de departamentos seleccionados
                department = departments;
                showSubcategories();
        });

        function showSubcategories() {
           
             
           

            ['subcategoriesCasosCobros', 'subcategoriesCasosServicios', 'subcategoriesCasosVentas'].forEach(id => {
            document.getElementById(id).style.display = 'none';
        });

        // Validar el valor del departamento y mostrar la subcategoría correspondiente
        if (department.includes('Cobros')) {

            document.getElementById('subcategoriesCasosCobros').style.display = 'block';
            
        }  
        if (department.includes('Servicios')) {

            document.getElementById('subcategoriesCasosServicios').style.display = 'block';

        } 
         if (department.includes('Ventas')) {
            document.getElementById('subcategoriesCasosVentas').style.display = 'block';
        }

        // Mostrar todas las subcategorías si ninguna condición anterior se cumple
        /* if (!['Cobros', 'Servicios', 'Ventas'].includes(department)) {
            document.getElementById('subcategoriesCasosCobros').style.display = 'none';
            document.getElementById('subcategoriesCasosServicios').style.display = 'none';
            document.getElementById('subcategoriesCasosVentas').style.display = 'none';
        } */
    


        }
    </script>
@endsection