@extends('adminlte::page')

@section('title', 'CAMINOS - Inconcert')

@section('content_header')
@stop

@section('content')
    <div class="card card-primary">
        <div class="card-header">
            <i class="fas fa-users"></i>
            Seguimiento Órdenes Activas
        </div>
        <div class="card-body">
            <x-forms.form name="formOrdenesActivas" action="{{ route('posventa.dashboard.activas.seguimiento') }}" method="GET">
                <div class="row">
                    <x-forms.select-group classes="col-3" name="codBodega" label="Bodega">
                        <option value="003" {{ $codBodega == '003' ? 'selected' : '' }}>CARTAGO</option>
                        <option value="014" {{ $codBodega == '014' ? 'selected' : '' }}>CHEVY CIRCUNVALAR</option>
                        <option value="015" {{ $codBodega == '015' ? 'selected' : '' }}>PINTU EXPRESS</option>
                        <option value="301" {{ $codBodega == '301' ? 'selected' : '' }}>TALLER PEREIRA BELMONTE</option>
                        <option value="201" {{ $codBodega == '201' ? 'selected' : '' }}>TALLER ARMENIA</option>
                        <option value="402" {{ $codBodega == '402' ? 'selected' : '' }}>CAREXPRESS EL PROGRESO</option>
                        <option value="501" {{ $codBodega == '501' ? 'selected' : '' }}>TALLER MOTOS</option>
                    </x-forms.select-group>
                    <x-forms.select-group classes="col-3" name="area" label="Área">
                    </x-forms.select-group>
                    <div class="form-group col align-self-end">
                        <button type="submit" class="btn btn-sm btn-primary">
                            <i class="fas fa-redo"></i>
                        </button>
                    </div>
                </div>
            </x-forms.form>
            <div class="row">
                <div class="col table-responsive">
                    <table class="table table-sm table-bordered table-hover">
                        <thead class="thead-dark">
                            <tr>
                                <th>#Orden</th>
                                <th>Asesor</th>
                                <th>Área</th>
                                <th>Placa</th>
                                <th>Vehículo</th>
                                <th>F. Entrada</th>
                                <th>F. Terminada</th>
                                <th>Días</th>
                                <th>F. Seguimiento</th>
                                <th>T. Cliente</th>
                                <th>Vr. MO</th>
                                <th>Vr. Rep</th>
                                <th>Motivo</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($ordenes_retrasadas as $orden)
                                <tr>
                                    <td>{{ $orden->codBodega }}-{{ $orden->numOrdTrabajo }}</td>
                                    <td>{{ ucwords(strtolower($orden->aseServicio)) }}</td>
                                    <td>{{ $orden->area }}</td>
                                    <td>{{ $orden->placa }}</td>
                                    <td>{{ $orden->estilo }}</td>
                                    <td>{{ $orden->fechaEntrada->format('d/m/Y') }}</td>
                                    <td class="{{ $orden->fechaTerminada ? 'table-danger' : '' }}">{{ $orden->fechaTerminada ? $orden->fechaTerminada->format('d/m/Y') : '' }}</td>
                                    <td>{{ $hoy->diffInDays($orden->fechaEntrada) }}</td>
                                    <td class="{{ $hoy->diffInDays($orden->fechaMotivoRetraso) > 8 ? 'table-danger' : ($orden->fechaMotivoRetraso ? 'table-success' : '') }}">{{ $orden->fechaMotivoRetraso ? $orden->fechaMotivoRetraso->format('d/m/Y h:i:s') : '' }}</td>
                                    <td>{{ $orden->tipo_clientes }}</td>
                                    <td>${{ $orden->vrMO ? number_format($orden->vrMO, '0') : 0 }}</td>
                                    <td>${{ $orden->vrRep ? number_format($orden->vrRep, '0') : 0 }}</td>
                                    <td>{{ $orden->motivo ?? '' }}</td>
                                    <td>
                                        <button type="button" class="btn btn-sm btn-success" onclick="showModalAddSeguimiento({{ $orden->id }}, '{{ $orden->codBodega }}', {{ $orden->numOrdTrabajo }})">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                        @if ($orden->motivo)    
                                            <button type="button" class="btn btn-sm btn-primary" onclick="showModalSeguimiento({{ $orden->id }}, '{{ $orden->codBodega }}', {{ $orden->numOrdTrabajo }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-add-motivo" style="display: none;" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-bold"><i class="fas fa-file-invoice"></i> Dejar Seguimiento #OT: <span id="ordenDeTrabajo"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <x-forms.form name="formAddSeguimiento" action="{{ route('posventa.dashboard.activas.seguimiento.store') }}">
                    <div class="modal-body">
                        <div class="row">
                            <input type="hidden" name="id_tOrdTrabajo">
                            <x-forms.select-group classes="col" name="id_motivo" label="Motivo">
                                @foreach ($motivos as $motivo)
                                    <option value="{{ $motivo->id }}">{{ ucwords(mb_strtolower($motivo->nombre)) }}</option>
                                @endforeach
                            </x-forms.select-group>
                        </div>
                        <div class="row">
                            <x-forms.text-group classes="col" name="nota_responsable" label="Nota" />
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                        <button class="btn btn-primary">Guardar</button>
                    </div>
                </x-forms.form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-seguimiento" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-bold"><i class="fas fa-file-invoice"></i> Seguimiento #OT: <span id="ordenDeTrabajoSeguimiento"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="timeline">
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.cliente.create')
    @include('layouts.vehiculo.create')
    @include('layouts.vehiculo.search')
@stop

@section('css')
    <link href="{!! asset('/vendor/icheck-bootstrap/icheck-bootstrap.min.css') !!}" rel="stylesheet">
    <link href="{!! asset('/css/caminos.css') !!}" rel="stylesheet">
    {{-- <link href="{!! asset('/js/fullcalendar/main.css') !!}" rel="stylesheet"> --}}
@stop

@section('js')
    {{-- Librerias Inconcert --}}
    {{-- <script type="text/javascript" src="{!! asset('js/contact.js') !!}"></script> --}}
    {{-- <script type="text/javascript" src="{!! asset('/js/lib/jquery/jquery-1.3.2.min.js') !!}"></script> --}}
    <script type="text/javascript" src="{!! asset('/js/lib/jquery/jquery.jsonp-2.2.0.min.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/lib/webtoolkit/webtoolkit.md5.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/lib/webtoolkit/webtoolkit.base64.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/lib/cookies/cookies.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/lib/sessvars/sessvars.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/lib/scripts/inconcert.session_storage.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/inConcertSDK.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/agent_api.js') !!}"></script>
    <script type="text/javascript" src="{!! asset('/js/inConcertCaminos.js') !!}"></script>
    {{-- Fin Librerias Inconcert --}}
    {{-- <script type="text/javascript" src="{!! asset('/js/posventa/agenda.js') !!}"></script> --}}
    <script>
        const codBodega = document.formOrdenesActivas.codBodega
        const areaBodega = document.formOrdenesActivas.area

        document.addEventListener('DOMContentLoaded', ()=>{
            if(codBodega.value){
                loadAreas(codBodega.value)
            }
        })

        codBodega.addEventListener('change', (e)=>{
            loadAreas(e.target.value)
        })

        $('.table').DataTable({
            columnDefs: [
                {
                    "targets": [6],
                    "render": $.fn.dataTable.moment('DD/MM/YYYY')
                },
                {
                    "targets": [5],
                    "render": $.fn.dataTable.moment('DD/MM/YYYY')
                }
            ],
            order: [[ 5, "asc" ]],
            language: {
                'url' : '//cdn.datatables.net/plug-ins/1.10.22/i18n/Spanish.json'
            },
            dom: 'lBfrtip',
            responsive: true,
            buttons: [
                {
                    extend: 'excel',
                    text: '<i class="fas fa-fw fa-file-excel" aria-hidden="true"></i> Excel',
                    // className: 'bg-success'
                }
            ]
        })

        function loadAreas(bodega){
            fetch(`${urlOrigenOrlando}/api/posventa/bodegas/areas/${bodega}`, {
                    method: 'GET',
                    headers: {
                        Authorization: `Bearer ${tokenSession}`
                    }
                })
                .then(response=>response.json())
                .then(areas=>{
                    areaBodega.innerHTML = ''
                    areaBodega.innerHTML = `<option value=""></option>`
                    areas.forEach(area=>{
                        areaBodega.innerHTML += `<option value="${area.area}">${area.area}</option>`
                    })
                })
        }

        function showModalAddSeguimiento(id_tOrdTrabajo, codBodega, numOrdTrabajo){
            document.formAddSeguimiento.id_tOrdTrabajo.value = id_tOrdTrabajo
            document.querySelector('#ordenDeTrabajo').innerHTML = `${codBodega}-${numOrdTrabajo}`
            $('#modal-add-motivo').modal('show')
        }

        function showModalSeguimiento(id_tOrdTrabajo, codBodega, numOrdTrabajo){
            document.querySelector('#ordenDeTrabajo').innerHTML = `${codBodega}-${numOrdTrabajo}`
            $('#modal-seguimiento').modal('show')

            fetch(`${urlOrigenOrlando}/api/posventa/ordenes/seguimiento/${id_tOrdTrabajo}`, {
                    method: 'GET',
                    headers: {
                        Authorization: `Bearer ${tokenSession}`
                    }
                })
                .then(response=>response.json())
                .then(orden=>{
                    const timeline_seguimiento = document.querySelector("#modal-seguimiento .timeline")
                    timeline_seguimiento.innerHTML = ''

                    seguimiento = orden.data.seguimiento

                    seguimiento.forEach(nota=>{
                        timeline_seguimiento.innerHTML += `<div>
                            <i class="fas fa-user bg-green"></i>
                            <div class="timeline-item">
                                <span class="time"><i class="fas fa-clock"></i>${nota.tiempo_transcurrido}</span>
                                <h3 class="timeline-header"><a href="#">${nota.responsable.name}</a> <span class="text-bold">${nota.motivo.nombre}</span></h3>
                                <div class="timeline-body">${nota.nota_responsable}</div>
                            </div>
                        </div>`
                    })
                })
        }

        $('#modal-add-motivo').on('hidden.bs.modal', function (event) {
            document.formAddSeguimiento.reset()
        })
    </script>
@stop