@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('cometidos.solicitudes.index') }}">Módulo Cometidos</a></li>
    <li class="breadcrumb-item "><a href="{{ route('cometidos.director.index') }}">Revisión de Cometidos - Director</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="{{ route('cometidos.director.show', $cometido->id) }}">@{{titulo_pagina}}</a></li>
  </ol>
</nav>
@stop


@section('content')
    <div class="bgc-white p-20 bd">
        @{{titulo_pagina}}
        <h4>Fecha Solicitud: {{ fechaFormato($cometido->created_at) }}</h4>

        <div class="card mb-3">
            <div class="card-body">
                <h4>Datos Funcionario</h4>

                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300"><b>Nombre</b></td>
                        <td colspan="5">{{ $cometido->nombre }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>RUN</b></td>
                        <td>{{ $cometido->run }}</td>
                        <td class="bgc-grey-300"><b>Escalafón</b></td>
                        <td>{{ $cometido->escalafon }}</td>
                        <td class="bgc-grey-300"><b>Grado</b></td>
                        <td>{{ $cometido->grado }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Dirección / Unidad</b></td>
                        <td>{{ $cometido->direccion }}</td>
                        <td class="bgc-grey-300"><b>Modalidad Contrato</b></td>
                        <td>{{ $cometido->modalidad_contrato }}</td>
                        <td class="bgc-grey-300"><b>Cargo</b></td>
                        <td>{{ $cometido->cargo }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <h4>Datos del Cometido</h4>

                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300"><b>Motivo</b></td>
                        <td colspan="8">{{ $cometido->motivo }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Ciudad o Comuna</b></td>
                        <td colspan="8">{{ $cometido->lugar }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Duración Actividad</b></td>
                        <td class="bgc-grey-300">Fecha Inicio</td>
                        <td colspan="2">{{ fechaFormato($cometido->fecha_inicio, 'd-m-Y H:i:s') }}</td>
                        <td class="bgc-grey-300">Fecha Término</td>
                        <td colspan="3">{{ fechaFormato($cometido->fecha_termino, 'd-m-Y H:i:s') }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300" rowspan="2"><b>Medio de Transporte</b></td>
                        <td rowspan="2" colspan="2">{{ $cometido->medio_transporte }}</td>
                        <td class="bgc-grey-300">Código de Reserva</td>
                        <td colspan="2">{{ $cometido->codigo_reserva }}</td>
                        <td class="bgc-grey-300">N° Pre-obligación</td>
                        <td colspan="2">{{ $cometido->n_pre_obligacion }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">Monto</td>
                        <td colspan="2">{{ $cometido->monto }}</td>
                        <td class="bgc-grey-300">Otro</td>
                        <td colspan="2">{{ $cometido->medio_transporte_otro }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Itinerario</b></td>
                        <td class="bgc-grey-300">Fecha Salida</td>
                        <td colspan="2">{{ fechaFormato($cometido->fecha_salida, 'd-m-Y H:i:s') }}</td>
                        <td class="bgc-grey-300">Fecha Regreso</td>
                        <td colspan="3">{{ fechaFormato($cometido->fecha_regreso, 'd-m-Y H:i:s') }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Valor Viatico</b></td>
                        <td>{{ $cometido->valor_viatico }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <h4>Requerimientos Reembolsos</h4>

                <table class="table table-bordered">
                    <tbody>
                    @if($cometido->medio_transporte === 'Vehiculo Particular')
                        <tr>
                            <td rowspan="2" class="bgc-grey-300"><b>Datos Vehiculo</b></td>
                            <td class="bgc-grey-300">Marca</td>
                            <td>{{ $cometido->marca }}</td>
                            <td class="bgc-grey-300">Placa Patente</td>
                            <td>{{ $cometido->placa_patente }}</td>
                        </tr>
                        <tr>
                            <td class="bgc-grey-300">Rendimiento</td>
                            <td>{{ $cometido->rendimiento }}</td>
                            <td class="bgc-grey-300">Kilómetros a Recorrer</td>
                            <td>{{ $cometido->km_recorre }}</td>
                        </tr>
                    @endif
                    <tr>
                        <td class="bgc-grey-300"><b>Gastos Traslado</b></td>
                        <td colspan="8">
                            <ul>
                                @foreach($gastos as $gasto)
                                    <li>{{ $gasto }}</li>
                                @endforeach
                            </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <h4>Documentación Adjunta</h4>

                <div class="card">
                    <div class="card-body">
                        <h5>Pre obligación Viático y/o Pasajes</h5>

                        @foreach($adjuntos_1 as $adjunto)
                            <div>
                                <div class="row">
                                    <div class="col-12 col-md-6">{{ $adjunto->basename }}</div>
                                    <div class="col-12 col-md-6">
                                        <a href="{{ $adjunto->getUrl() }}" class="btn btn-primary" target="_blank">Descargar</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5>D/A autoriza circulación vehículo Municipal</h5>

                        @foreach($adjuntos_2 as $adjunto)
                            <div>
                                <div class="row">
                                    <div class="col-12 col-md-6">{{ $adjunto->basename }}</div>
                                    <div class="col-12 col-md-6">
                                        <a href="{{ $adjunto->getUrl() }}" class="btn btn-primary" target="_blank">Descargar</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5>Reserva de Pasajes</h5>

                        @foreach($adjuntos_3 as $adjunto)
                            <div>
                                <div class="row">
                                    <div class="col-12 col-md-6">{{ $adjunto->basename }}</div>
                                    <div class="col-12 col-md-6">
                                        <a href="{{ $adjunto->getUrl() }}" class="btn btn-primary" target="_blank">Descargar</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5>Contrato a honorarios</h5>

                        @foreach($adjuntos_4 as $adjunto)
                            <div>
                                <div class="row">
                                    <div class="col-12 col-md-6">{{ $adjunto->basename }}</div>
                                    <div class="col-12 col-md-6">
                                        <a href="{{ $adjunto->getUrl() }}" class="btn btn-primary" target="_blank">Descargar</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="card">
                    <div class="card-body">
                        <h5>Correo invitación o programa actividad</h5>

                        @foreach($adjuntos_5 as $adjunto)
                            <div>
                                <div class="row">
                                    <div class="col-12 col-md-6">{{ $adjunto->basename }}</div>
                                    <div class="col-12 col-md-6">
                                        <a href="{{ $adjunto->getUrl() }}" class="btn btn-primary" target="_blank">Descargar</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <h4>Unidad Solicitante</h4>

                <table class="table-bordered table">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300"><b>Dirección</b></td>
                        <td>{{ $cometido->director->direccion->nombre }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Director</b></td>
                        <td>{{ $cometido->director->nombres }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Estado Aprobación</b></td>
                        <td>{{ $cometido->estado_director}}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Comentarios</b></td>
                        <td><p>{{ $cometido->observaciones_director }}</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-3 hidden">
            <div class="card-body">
                <h4>AUTORIZACIÓN ADMINISTRACIÓN MUNICIPAL</h4>

                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300">Quien aprueba</td>
                        <td>{{ $cometido->administrador ?  $cometido->administrador->nombres : ''}}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300">Estado Aprobación</td>
                        <td>{{ $cometido->estado_admin }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Comentarios</b></td>
                        <td><p>{{ $cometido->observaciones_admin }}</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-body">
                <h4>AUTORIZACIÓN USUARIO PERSONAL</h4>

                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <td class="bgc-grey-300">Estado Aprobación</td>
                        <td>{{ $cometido->estado_personal }}</td>
                    </tr>
                    <tr>
                        <td class="bgc-grey-300"><b>Comentarios</b></td>
                        <td><p>{{ $cometido->observaciones_personal }}</p></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

        @if($cometido->estado_director === 'PENDIENTE')
            <div v-if="status">
                <div :class="['alert', `alert-${status.type}`]">
                    @{{ status.message }}
                </div>
            </div>

            <b-form @submit="onAprobacion">
                <div class="card">
                    <div class="card-body">
                        <h4>Aprobación Director</h4>

                        <b-form-group label-cols-md="4" label="Acción">
                            <select v-model="accion" class="form-control" required>
                                <option value="aceptar">Aceptar</option>
                                <option value="rechazar">Rechazar</option>
                            </select>

                            <input-error :errors="errors" nombre="accion"></input-error>
                        </b-form-group>


                        <b-form-group label-cols-md="4" label="Observaciones">
                            <textarea v-model="observaciones" class="form-control" cols="30" rows="10"></textarea>
                            <span>Ej: Capacitación</span>
                            <input-error :errors="errors" nombre="observaciones"></input-error>
                        </b-form-group>

                        <b-form-group v-if="accion === 'aceptar1'" label-cols-md="4" label="Enviar a Administrador Municipal">
                            <v-select v-model="administrador" :options="administradores" placeholder="Seleccionar" required></v-select>
                            <input-error :errors="errors" nombre="administrador_id"></input-error>
                        </b-form-group>

                        <div class="d-flex justify-content-end">
                            <b-button type="submit" variant="primary">Enviar @{{ aprobacionButton }}</b-button>
                        </div>
                    </div>
                </div>
            </b-form>
        @endif
    </div>
@endsection

@push('pre-scripts')
    <script>
        @if($cometido->estado_director === 'PENDIENTE')
        window.pageMix.push({
            data: () => ({
                accion: 'aceptar',
                administradores: @json($firmantes),
                administrador: null,
                administrador_id: null,
                observaciones: '',
                titulo_pagina:'Solicitud Cometido N° {{ $cometido->id }}',
                loading: false,

                errors: {},
                status: null
            }),

            methods: {
                onAprobacion(evt) {
                    evt.preventDefault()

                    if (!this.loading) {
                        this.loading = true

                        const data = {
                            accion: this.accion,
                            observaciones: this.observaciones
                        }

                        if (this.accion === 'aceptar') {
                           // data.administrador_id = this.administrador && this.administrador.id
                        }

                        this.$http.put('{{ route('cometidos.director.aprobacion', ['id' => $cometido->id]) }}', data)
                            .then(res => {
                                this.loading = false
                                window.location.reload()
                            })
                            .catch(err => {
                                if (err.response.status === 500) {
                                    this.status = err.response.data.message
                                }

                                if (err.response.status === 422) {
                                    this.errors = err.response.data.errors
                                }

                                this.loading = false
                            })
                    }
                }
            },

            computed: {
                aprobacionButton() {
                    return this.accion === 'aceptar' ? 'a Administrador' : '';
                }
            }
        })
        @endif
    </script>
@endpush