@extends('master', ['activePage' => 'movimientos'])
@section('styles')
@endsection
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
              <div class="col-sm-12">
                <h1>Detalles del Movimiento Movimiento</h1>
              </div>
            </div>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
    <!-- Default box -->
    <div class="row">
        <div class="col-md-12">
            <div class="card card-secondary">
                <div class="card-header">
                    <h3 class="card-title">Movimiento - {{$movement->id}}</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-6 col-sm-12" >
                            <h4>Infomación general</h4>
                            <div class="form-group">
                                <label>Contenedor:</label>
                                <span>{{$movement->container_name.' ('.$movement->container_number.')'}}</span>
                            </div>
                            <div class="form-group">
                                <label>Chofer:</label>
                                <span>{{$movement->driver_number.' ('.$movement->driver_name.' '.$movement->driver_lastname.')'}}</span>
                            </div>
                            <div class="form-group">
                                <label>Tipo de movimiento: </label>
                                <span>{{$movement->movement_type}}</span>
                            </div>
                            <div class="form-group">
                                <label>Tipo de locación: </label>
                                <span>En {{$movement->type}}</span>
                            </div>

                            <hr>
                            <h4>Locación</h4>
                            <div class="form-group">
                                <label>Dirección: </label>
                                <span>{{$movement->address}}</span>
                            </div>
                            <div id="googleMap" style="width:100%;height:400px;"></div><br>
                        </div>

                        <div class="col-lg-6 col-sm-12">
                            <h4>Estado del movmiento</h4>
                            <div class="form-group row">
                                @foreach($movement->parts as $key => $part)
                                    <div class="col-lg-6 col-md-6 col-sm-12">
                                        <label>{{$part->part}}: </label>
                                        <span>{{$part->description}}</span>
                                    </div>
                                @endforeach

                                <div class="col-lg-6 col-md-6 col-sm-12">
                                    <label>Comentarios: </label>
                                    <span>{{!is_null($movement->condition_description) ? $movement->condition_description : '--'}}</span>
                                </div>
                            </div>
                            <hr>

                            @if(count($movement->images) > 0)
                                <h4>Galería de evidencias <small>({{ count($movement->images) }} evidencia {{ count($movement->images) > 1 ? 's' : '' }})</small></h4>
                                <div class="row">
                                    @foreach($movement->images as $image)
                                        <div class="col-3">
                                            <div class="gallery-img text-center">
                                                <img src="{{asset('storage/'.$image->image)}}" style="width: 100%; display: block; margin-bottom: 5px;" class="preview-image-{{$image->id}}">
                                            </div>
                                        </div>
                                    @endforeach
                                </div> <br>
                            @endif
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-lg-12">
                            <h4>Reparaciones</h4>
                            @if(count($movement->repairs) > 0)
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th>Refacción</th>
                                            <th>Pzs. Usadas</th>
                                            <th>Pzs. Requeridas</th>
                                            <th>Pzs. Faltantes</th>
                                            <th>Costo Unitario</th>
                                            <th>Costo Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($movement->repairs as $repair)
                                            <tr>
                                                <td>{{$repair->piece}}</td>
                                                <td>{{$repair->availables}}</td>
                                                <td>{{$repair->requested}}</td>
                                                <td>{{$repair->requested - $repair->availables}}</td>
                                                <td>${{number_format($repair->cost, 2)}}</td>
                                                <td>$ {{number_format($repair->cost*$repair->availables, 2)}}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            @else
                                <div class="row">
                                    <div class="col">
                                        <h5>Sin reparaciones</h5>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="form-group text-right">
                        {{-- <a href="{{ url('/contenedores/movimientos') }}" class="btn btn-warning btn-white">Regresar</a> --}}
                        <a href="{{ url()->previous() }}" class="btn btn-warning text-white">Regresar</a>
                    </div>
                </div>

            </div>


        </div>
    </div>
    <!-- /.card -->
    </section>
@endsection
@section('scripts')
    <script src="{{ asset('js/zoomerang.js') }}"></script>
    <script>
        // $(document).ready(function(){
        //     initMap();
        // });
        
        // Google maps
        function initMap() {
            var map;
            var bounds = new google.maps.LatLngBounds();
                                        
            // Display a map on the web page
            map = new google.maps.Map(document.getElementById("googleMap"));
                
            // Add multiple markers to map
            var infoWindow = new google.maps.InfoWindow(), marker, i;

            // Place each marker on the map  
            let lat = parseFloat({{$movement->lat}});
            let lng = parseFloat({{$movement->lng}});
            // console.log(lat, lng);
            let type = '{{$movement->type}}';
            let address = '{{$movement->address}}';
            let client = '{{$movement->client}}';
            let position = new google.maps.LatLng(lat,lng);

            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: 'JAJA'
            });
            

            let infoWindowContent = '<div class="info_content">'+
                '<h4>' +client+ ' <small>(' +type+ ')</small></h4>'+
                '<p><b> Dirección: </b>' +address+ '.</p>'+
            '</div>';

            // Add info window to marker    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    // Seteamos el id de la locacion
                    i = data.id;
                    infoWindow.setContent(infoWindowContent);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            // Center the map to fit all markers on the screen
            map.fitBounds(bounds);

            var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                this.setZoom(13);
            });
        }

        Zoomerang.config({
            maxHeight: 800,
            maxWidth: 800,
            bgColor: '#000',
            bgOpacity: .85,
            onOpen: openCallback,
            onClose: closeCallback,
            onBeforeOpen: beforeOpenCallback,
            onBeforeClose: beforeCloseCallback
        }).listen('[class*="preview-image"]');

        function openCallback (el) {
            console.log('zoomed in on: ')
            console.log(el)
        }

        function closeCallback (el) {
            console.log('zoomed out on: ')
            console.log(el)
        }

        function beforeOpenCallback (el) {
            console.log('on before zoomed in on:')
            console.log(el)
        }

        function beforeCloseCallback (el) {
            console.log('on before zoomed out on:')
            console.log(el)
        }
    </script>
    {{-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNflFpIAWHjXJtfV1uM9XQAvk_cDQSg3o" async defer></script> --}}
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_dUsGKRq13B62JZ0TiBuk0DAjsnnwuFY&callback=initMap"></script>
@endsection