@extends('layouts.inspinia.app')
@section('title', 'Detalle Asignacion')
@section('titulopagina', 'Detalle Asignacion')

@section('content')
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox ">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="col-lg-12">
                                    <div class="m-b-md">
                                        <h2>Buscar Asignación</h2>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="search-form">
                                        <form action="{{ route('asignaciones.buscarorden') }}" method="POST">
                                            @csrf
                                            <div class="input-group">
                                                <input type="text" placeholder="OS" name="search"
                                                    class="form-control form-control-lg">
                                                <div class="input-group-btn">
                                                    <button class="btn btn-lg btn-primary" type="submit">
                                                        Buscar
                                                    </button>
                                                </div>
                                            </div>

                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                @foreach ($subestado as $item)
                                    @if ($item->cod_estado == 0)
                                        <div class="widget style1 lazur-bg text-center">
                                            <div class="m-b-md">
                                                <h2 class="font-bold no-margins">
                                                    {{ strtoupper($item->descripcion) }}
                                                </h2>
                                            </div>
                                        </div>
                                    @elseif($item->cod_estado == 3)
                                        <div class="widget style1 yellow-bg text-center">
                                            <div class="m-b-md">
                                                <h2 class="font-bold no-margins">
                                                    {{ strtoupper($item->descripcion) }} </i>
                                                </h2>
                                            </div>
                                        </div>
                                    @elseif($item->cod_estado == 1)
                                        <div class="widget style1 red-bg text-center">
                                            <div class="m-b-md">
                                                <h2 class="font-bold no-margins">
                                                    {{ strtoupper($item->descripcion) }}
                                                </h2>
                                            </div>
                                        </div>
                                    @else
                                        <div class="widget style1 navy-bg text-center">
                                            <div class="m-b-md">
                                                <h2 class="font-bold no-margins">
                                                    {{ strtoupper($item->descripcion) }}
                                                </h2>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                            </div>



                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            @foreach ($datos as $item)
                <div class="col-lg-6">
                    <div class="ibox ">
                        <div class="ibox-content">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="m-b-md">

                                        <h2>Detalle Asignación</h2>
                                    </div>
                                    <div class="ibox-tools">
                                        <span class="label label-primary">OS {{ $item->ORDEN }} </span>
                                        <input type="hidden" id="i_orden" value="{{ $item->ORDEN }}">
				    </div>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <dl class="row mb-0">
                                        <div class="col-2 text-sm-left">
                                            <dt>Cliente:</dt>
                                        </div>
                                        <div class="col-10 text-sm-left">
                                            <dd class="mb-1"><span class="label label-primary">Ok</span></dd>
                                        </div>
                                    </dl>
                                    <dl class="row mb-0">
                                        <div class="col-2 text-sm-left">
                                            <dt>Nombre:</dt>
                                        </div>
                                        <div class="col-10 text-sm-left">
                                            <dd class="mb-1"><a href="#" class="text-navy">
                                                    {{ ucwords(strtolower($item->NOMBRE)) }}</a></dd>
                                        </div>
                                    </dl>
                                    <dl class="row mb-0">
                                        <div class="col-2 text-sm-left">
                                            <dt>Direccion:</dt>
                                        </div>
                                        <div class="col-10 text-sm-left">
                                            <dd class="mb-1"> {{ ucwords(strtolower($item->DIRECCION)) }}</dd>
                                        </div>
                                    </dl>
                                    <dl class="row mb-0">
                                        <div class="col-2 text-sm-left">
                                            <dt>Teléfono:</dt>
                                        </div>
                                        <div class="col-10 text-sm-left">
                                            <dd class="mb-1"><a href="#" class="text-navy">
                                                    {{ $item->TELEFONO }}</a> </dd>
                                        </div>
                                    </dl>
                                    <dl class="row mb-0">
                                        <div class="col-sm-2 text-sm-left">
                                            <dt>Agencia:</dt>
                                        </div>
                                        <div class="col-sm-10 text-sm-left">
                                            <dd class="mb-1"> {{ ucwords(strtolower($item->AGENCIA)) }} </dd>
                                        </div>
                                    </dl>

                                </div>

                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <dl class="row mb-0">
                                        <div class="col-sm-4 text-sm-left">
                                            <dt>Recibe:</dt>
                                        </div>
                                        <div class="col-sm-8 text-sm-left">
                                            <dd class="mb-1">
                                                {{ ucwords(strtolower($item->RECIBE)) }}
                                            </dd>
                                        </div>
                                    </dl>
                                    <dl class="row mb-0">
                                        <div class="col-sm-4 text-sm-left">
                                            <dt>Rut:</dt>
                                        </div>
                                        <div class="col-sm-8 text-sm-left">
                                            <dd class="mb-1">
                                                {{ ucwords($item->RUT) }}
                                            </dd>
                                        </div>
                                    </dl>
                                </div>

                            </div>



                        </div>
                    </div>
                </div>
            @endforeach



            <div class="col-lg-6">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Traza</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content table-responsive">
                        <table class="table table-hover no-margins">
                            <thead>
                                <tr>
                                    <th>Estado</th>
                                    <th>SubEstado</th>
                                    <th>Chofer</th>
                                    <th>Gestion</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($traza as $item)
                                    <tr>
                                        <td><small>{{ $item->ESTADO }}</small></td>
                                        <td><small>{{ $item->SUB_ESTADO }}</small></td>
                                        <td><small>{{ ucwords(strtolower($item->CHOFER)) }}</small></td>
                                        <td><i class="fa fa-clock-o"></i>
                                            {{ date('d/m/Y H:i', strtotime($item->GESTION)) }}
                                        </td>

                                    </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>



        <div class="row">
            <div class="col-md-6">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Ubicacion entrega</h5>
                    </div>
                    <div class="ibox-content">
                        <p>
                            Entregado en:
                        </p>
                        <div class="google-map" id="map" style="position: relative; overflow: hidden;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>Ubicacion OS</h5>
                    </div>
                    <div class="ibox-content">
                        <p>
                            Destino:
                        </p>
                        <div class="google-map" id="map3" style="position: relative; overflow: hidden;">
                        <div class="google-map" id="map2" style="position: relative; overflow: hidden;">
                            @foreach ($datos as $item)
                                <img border="0"
                                    src="https://maps.googleapis.com/maps/api/staticmap?center={{ ucwords(strtolower($item->DIRECCION)) }}&zoom=15&size=500x400&key=AIzaSyBmcJrUbCnVTxHt6NkgiGDNfDlOOGK_rTw"
                                    alt="{{ ucwords(strtolower($item->DIRECCION)) }}">
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--<div class="row">
                                    <div class="col-md-12">
                                        <div class="ibox ">
                                            <div class="ibox-title">
                                                <h5>Ubicacion entrega</h5>
                                            </div>
                                            <div class="ibox-content">
                                                <p>
                                                    Entregado en:
                                                </p>
                                                <div class="google-map" id="map1"></div>
                                            </div>
                                        </div>
                                    </div>

                                </div>-->
        @foreach ($evidencia as $item)
          
                <div class="col-md-12">
                    <div class="ibox ">
                        <div class="ibox-title">
                            <h5>Evidencias <b class="text-navy text-center"> Visita: {{ $item->VISITA }}</b> <i
                                    class="fa fa-clock-o"></i> {{ date('d/m/Y H:i', strtotime($item->FECHA)) }}</h5>
                            <div class="ibox-tools">
                                @if ($item->COD_ESTADO == 0)
                                    <label class="label  lazur-bg">{{ $item->ESTADO }} </label>
                                @elseif($item->COD_ESTADO == 3)
                                    <label class="label yellow-bg g">{{ $item->ESTADO }} </label>
                                @elseif($item->COD_ESTADO == 1 || $item->COD_ESTADO == 5 )
                                    <label class="label red-bg">{{ $item->ESTADO }} </label>
                                    @if(is_null($item->OBSERVACION))
                                    <label class="label red-bg">OBSERVACION:EL AGENTE NO MANIFESTO OBSERVACION </label>
                                    @else
                                    <label class="label red-bg">OBSERVACION:{{ $item->OBSERVACION }} </label>
                                    @endif
                                 @else
                                    <label class="label navy-bg">{{ $item->ESTADO }} </label>
                                @endif

                            </div>
                        </div>
                        <div class="ibox-content">

                            <div class="row text-center">

                                @if (isset($item->FOTO1))
                                    <div class="col ">
                                      <label>Imagen Os  </label>
				       <a download="IMAGEN.jpg" href="data:image/jpg;base64,{{ $item->FOTO1 }}" class="btn btn-primary">Download</a>
                                       <a class="example-image-link" href="data:image/jpg;base64, {{ $item->FOTO1 }}"    
                                         data-lightbox="example-set"
                                         data-title="FOTO.">
                                         <div id="div1">
                                         <img class="example-image" src="data:image/jpg;base64, {{ $item->FOTO1 }}"
                                                alt=""
                                                style="
                                    		max-width: 320px;
                                    		max-height: 100vw;
                                    		height: 200px;
                                    		width: 200px;
                                    	  "/>
                                        </a>
                                       </div>

                                    </div>
				    
                                @else
				 <div class="col">
				  <label>FOTO1 HISTORICO</label>
    <a id="downloadLink1" download="IMAGEN.jpg" href="#" class="btn btn-primary">Download</a>
    <script>
        
        var i_orden = document.getElementById('i_orden').value;
        
        var fecha = '{{ date('Ym', strtotime($item->FECHA)) }}';
        
        var url = 'http://192.168.0.34/cron_app/genera_img.php?orden='+ i_orden + '&tipo=1';
        
        document.getElementById('downloadLink1').href = url;
    </script>

				 </div>
				@endif

                                @if (isset($item->FOTO2))
                                    <div class="col">
                                        <label>Foto</label>
                                        <a class="example-image-link" href="data:image/jpg;base64, {{ $item->FOTO2 }}"
                                            data-sizes="(max-width: 400px) 400px, 100vw" data-lightbox="example-set"
                                            data-title="FOTO.">
                                            <div id="div2">
                                            <img class="example-image" src="data:image/jpg;base64, {{ $item->FOTO2 }}"
                                                alt=""
                                                style="
                                        max-width: 100%;
                                        max-height: 100%;
                                        height: 200px;
                                        width: 200px;
                                        " />
                                        </a>
                                    </div>

                                    </div>
				@else
                                <div class="col">
                                  <label>FOTO</label>
    <a id="downloadLink2" download="IMAGEN.jpg" href="#" class="btn btn-primary">Download</a>
    <script>

        var i_orden = document.getElementById('i_orden').value;

        var fecha = '{{ date('Ym', strtotime($item->FECHA)) }}';

        var url = 'http://192.168.0.34/cron_app/genera_img.php?orden='+ i_orden + '&tipo=3';

        document.getElementById('downloadLink2').href = url;
    </script>

                                 </div>

				@endif                                


                                @if (isset($item->CEDIBLE))
                                <div class="col ">
                                    <label>Documento  </label>
                                      <a download="CEDIBLE.jpg" href="data:image/jpg;base64,{{ $item->CEDIBLE }}" class="btn btn-primary">Download</a>
                                      <a class="example-image-link" href="data:image/jpg;base64, {{ $item->CEDIBLE }}"
                                        data-sizes="(max-width: 400px) 400px, 100vw" 
                                        data-lightbox="example-set"
                                        data-title="CEDIBLE."
                                        >
                                        <div id="div3">
                                            <img class="example-image"
                                                src="data:image/jpg;base64, {{ $item->CEDIBLE }}" alt=""
                                                style="
                                    max-width: 100%;
                                    max-height: 100%;
                                    height: 200px;
                                    width: 200px;
                                    " />
                                        </div>

                                    </a>
                                   </div>
                                @else
                                 <div class="col">
                                  <label>CEDIBLE 1 HISTORICO</label>
     <a id="downloadLink3" download="CEBIBLE.jpg" href="#" class="btn btn-primary">Download</a>
    <script>

        var i_orden = document.getElementById('i_orden').value;

        var fecha = '{{ date('Ym', strtotime($item->FECHA)) }}';

        var url = 'http://192.168.0.34/cron_app/genera_img.php?orden=' + i_orden + '&tipo=2';

        document.getElementById('downloadLink3').href = url;
    </script>

                                 </div>
                                @endif


                                @if (isset($item->CEDIBLE2))
                                    <div class="col ">
                                        <label>Documento 2</label>
                                        <a class="example-image-link" href="data:image/jpg;base64, {{ $item->CEDIBLE2 }}"
                                            data-sizes="(max-width: 400px) 400px, 100vw" data-lightbox="example-set"
                                            data-title="CEDIBLE 2.">
                                            <div id="div4">
                                            <img class="example-image" src="data:image/jpg;base64, {{ $item->CEDIBLE2 }}"
                                                alt=""
                                                style="
                                    max-width: 100%;
                                    max-height: 100%;
                                    height: 200px;
                                    width: 200px;
                                    " />
                                            </div>
                                        </a>
                                    </div>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>

            
        @endforeach
        <div id="blueimp-gallery" class="blueimp-gallery" style="display: none;">
            <div class="slides"></div>
            <h3 class="title">Imagen</h3>
            <a class="prev">‹</a>
            <a class="next">›</a>
            <a class="close">×</a>
            <a class="play-pause"></a>
            <ol class="indicator"></ol>
        </div>
    </div>
@endsection



@section('javascript')

    <script>
       



        function initMap() {

            var macc = {
                @foreach ($datos as $item)
                    lat: {{ $item->Y }},
                    lng: {{ $item->X }}
                @endforeach
            };
            var map = new google.maps.Map(
                document.getElementById('map'), {
                    zoom: 15,
                    center: macc
                });
            var marker = new google.maps.Marker({
                position: macc,
                map: map
            });


            var macc3 = {
                @foreach ($geo as $item)
                    lat: {{ $item->X_API}},
                    lng: {{ $item->Y_API }}
                @endforeach
            };

            var macc33 = {
                @foreach ($geo as $item)
                    lat: {{ $item->Y_APPS}},
                    lng: {{ $item->X_APPS }}
                @endforeach
            };


            var map3 = new google.maps.Map(
                document.getElementById('map3'), {
                    zoom: 15,
                    center: macc3
                });


            var marker3 = new google.maps.Marker({
                position: macc3,
                map: map3,
                title: "UBICACION"
            });

            const svgMarker = {
    path: "M10.453 14.016l6.563-6.609-1.406-1.406-5.156 5.203-2.063-2.109-1.406 1.406zM12 2.016q2.906 0 4.945 2.039t2.039 4.945q0 1.453-0.727 3.328t-1.758 3.516-2.039 3.070-1.711 2.273l-0.75 0.797q-0.281-0.328-0.75-0.867t-1.688-2.156-2.133-3.141-1.664-3.445-0.75-3.375q0-2.906 2.039-4.945t4.945-2.039z",
    fillColor: "blue",
    fillOpacity: 0.6,
    strokeWeight: 0,
    rotation: 0,
    scale: 2,
    anchor: new google.maps.Point(15, 30),
  };

            var marker33 = new google.maps.Marker({
                position: macc33,
                icon: svgMarker,
                map: map3,
                title: "GESTION"
            });




        }
        //AIzaSyARJ0DH4F7ak5uDKLUtGrLCdM24EGgoUb4
        // sin  AIzaSyAONsqodcvDkZqZvPpDcauTeAK668tsR0w
    </script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmcJrUbCnVTxHt6NkgiGDNfDlOOGK_rTw&callback=initMap"></script>

    <script src="{{ asset('inspinia/js/plugins/pace/pace.min.js') }}"></script>



    <!-- lightbox -->

    <link rel="stylesheet" href="{{ asset('inspinia/css/plugins/lightbox2/css/lightbox.min.css') }}">
    <script src="{{ asset('inspinia/js/plugins/lightbox2/js/lightbox-plus-jquery.js') }}"></script>
@endsection