@extends('layouts.app')

@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ route('home') }}">Inicio</a></li>
    <li class="breadcrumb-item"><a href="{{ route('anexos-actualizados.contactos.index')}}">Contactos Municipales</a></li>
    <!-- <li class="breadcrumb-item active" aria-current="page">Ver Noticia</li> -->
  </ol>
</nav>
@stop

@push('head')
    <link href="{{ asset('css/vendor/select2.min.css') }}" rel="stylesheet"/>
@endpush

@section('content')
    <b-modal v-model="showAusenciaModal" hide-footer title="Ausencia">
        <div v-html="content"></div>
    </b-modal>

    <div class="bgc-white p-20 bd">
        <h2>Contactos Municipales
         @if(auth()->user()->tieneRoles('ADMIN_CONTACTOS_MUNICIPALES', 'SUPERADMIN'))
            
                <a href="{{ route('anexos-actualizados.contactos.create') }}" class="btn btn-primary pull-right"><i class="fa fa-plus"></i>
                    Contacto</a>
        @endif
        
        </h2>

       

        <form>
            <div class="card mb-3">
                <div class="card-header">
                Filtros
                </div>
                <div class="card-body row">
                    <div class="form-group col-md-12">
                        <input type="text" id="buscar" name="buscar" value="{{\Request::get('buscar') ?? '' }}" class="form-control" placeholder="Texto libre">
                    </div>

                    <b-form-group class="col-md-5" label="Ubicación">
                        <select name="ubicacion" id="ubicacion" class="js-example-basic-single form-control">
                            <option value="">Seleccione</option>
                            @foreach($ubicaciones as $ubicacion)
                                @if(\Request::get('ubicacion')==$ubicacion)
                                <option selected value="{{ $ubicacion }}">{{ $ubicacion }}</option>
                                @else
                                <option value="{{ $ubicacion }}">{{ $ubicacion }}</option>
                                @endif
                            @endforeach
                        </select>
                    </b-form-group>

                    <b-form-group class="col-md-5" label="Unidad">
                        <select name="unidad" id="unidad" class="js-example-basic-single form-control">
                            <option value="">Seleccione</option>
                            @foreach($unidades as $unidad)
                                @if(\Request::get('unidad')==$unidad)
                                <option selected value="{{ $unidad }}">{{ $unidad }}</option>
                                @else
                                <option value="{{ $unidad }}">{{ $unidad }}</option>
                                @endif

                            @endforeach
                        </select>
                    </b-form-group>
                    <b-form-group class="col-md-2" style="color:white;" label="accion">
                        <button class="btn btn-primary btn-block">Buscar</button>
                    </b-form-group>
                </div>

             
            </div>
        </form>

        <b-card>
            {{ $contactos->links() }}
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>Nombre Completo</th>
                        <th>Cargo</th>
                        <th>Unidad</th>
                        <th>Ubicación</th>
                        <th>Teléfono</th>
                        <th>Anexo</th>
                        <th>Correo</th>
                        @if(auth()->user()->tieneRoles('ADMIN_CONTACTOS_MUNICIPALES', 'SUPERADMIN'))
                            <th>Acciones</th>
                        @endif
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($contactos as $contacto)
                        <tr>
                            <td>{{ $contacto->nombre_completo }}</td>
                            <td>{{ $contacto->cargo }}</td>
                            <td>{{ $contacto->unidad }}</td>
                            <td>{{ $contacto->ubicacion }}</td>
                            <td>{{ $contacto->telefono }}</td>
                            <td>{{ $contacto->anexo }}</td>
                            <td>{{ $contacto->correo }}</td>
                            @if(auth()->user()->tieneRoles('ADMIN_CONTACTOS_MUNICIPALES', 'SUPERADMIN'))
                                <td>
                                    <b-dropdown id="dropdown-1" text="Acciones" class="m-md-2" boundary="window">
                                        <b-dropdown-item
                                            href="{{ route('anexos-actualizados.contactos.edit', ['id' => $contacto->id]) }}">
                                            Editar
                                        </b-dropdown-item>
                                        <b-dropdown-item-button @click="onDelete({{ $contacto->id }})">Borrar
                                        </b-dropdown-item-button>
                                    </b-dropdown>
                                </td>
                            @endif
                            <td>
                                @if($contacto->funcionario()->exists())
                                    @if($contacto->estaAusente())
                                        <div
                                            @click="mostrarAusencia({{ $contacto->id }})"
                                            class="badge bgc-orange-500 d-flex justify-content-center align-items-center"
                                            style="width: 32px; height: 32px">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </div>
                                    @else
                                        <div
                                            class="badge  badge-success d-flex justify-content-center align-items-center"
                                            style="width: 32px; height: 32px">
                                            <i class="fa fa-dot-circle-o"></i>
                                        </div>
                                    @endif
                                @endif
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            {{ $contactos->links() }}
        </b-card>
    </div>
@endsection

@push('pre-scripts')

    <script>
        window.pageMix.push({
            data: () => ({
                showAusenciaModal: false,
                content: ''
            }),

            methods: {
                @if(auth()->user()->tieneRoles('ADMIN_CONTACTOS_MUNICIPALES', 'SUPERADMIN'))
                onDelete(id) {
                    if (confirm('¿Desea borrar este elemento?')) {
                        this.$http.delete(route('anexos-actualizados.contactos.delete', {id}))
                            .then(res => {
                                window.location.reload()
                            })
                    }
                },
                @endif

                mostrarAusencia(id) {
                    this.$http.get(route('anexos-actualizados.contactos.ausencia', {id}))
                        .then(res => {
                            this.content = res.data.content
                            this.showAusenciaModal = true
                        })
                }
            },

            watch: {
                showAusenciaModal(value) {
                    if (!value) {
                        this.content = ''
                    }
                }
            }
        })
    </script>

@endpush

@push('post-scripts')
    <script src="{{ asset('js/vendor/select2.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('.js-example-basic-single').select2();
        });
    </script>
@endpush