@extends('layouts.app')
@section('head')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "http://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" defer ></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">


<!-- Core CSS file 
<link href="{{ asset('css/photoswipe.css') }}" rel="stylesheet">
<link href="{{ asset('css/default-skin/default-skin.css') }}" rel="stylesheet">
    <script src="{{ asset('js/dist/photoswipe.min.js') }}"></script>


    <script src="{{ asset('js/dist/photoswipe-ui-default.min.js') }}"></script>
-->


@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">{{$title}}</div>
                <div class="panel panel-default" style="float: right; width: 60%">
                    <div class="panel-body">
                        @yield('form')
                    </div>
                </div>
                <div class="panel panel-default" style="float: left; width: 40%">
                    <div class="panel-heading">Datos Cliente</div>
                    <div class="panel-body">
                        <table id="tcliente" class="display">
                            <thead>
                                <th></th>
                                <th></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Nombre:</th>
                                    <td>{{$venta->cliente->name}}</td>
                                </tr>
                                <tr>
                                    <th>Télefono:</th>
                                    <td>{{$venta->cliente->tel}}</td>
                                </tr>
                                <tr>
                                    <th>Email:</th>
                                    <td>{{$venta->cliente->email}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="panel-heading">Datos Máquina</div>
                    <div class="panel-body">
                        <table id="tmaquina" class="display">
                            <thead>
                                <th></th>
                                <th></th>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Nombre:</th>
                                    <td>{{$venta->maquina->name}}</td>
                                </tr>
                                <tr>
                                    <th>Marca:</th>
                                    <td>{{$venta->maquina->marca}}</td>
                                </tr>
                                <tr>
                                    <th>Modelo:</th>
                                    <td>{{$venta->maquina->model}}</td>
                                </tr>
                                <tr>
                                    <th>Numero de serie:</th>
                                    <td>{{$venta->maquina->serialNumber}}</td>
                                </tr>
                                <tr>
                                    <th>Motor:</th>
                                    <td>{{$venta->maquina->motor}}</td>
                                </tr>
                                <tr>
                                    <th>Poliza:</th>
                                    <td>{{$venta->maquina->polizaNumber}}</td>
                                </tr>
                                <tr>
                                    <th>Ubicación de poliza:</th>
                                    <td>{{$venta->maquina->polizaLocation}}</td>
                                </tr>
                                <tr>
                                    <th>Manuales:</th>
                                    <td><a href="http://{{$venta->maquina->manuales}}" target="_blank">Ver manuales</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    @if(!is_null($mantenimiento))

        <div class="row">
             
                <div class="panel panel-default">
                    <div class="panel-heading">
                        Archivos
                        <form enctype="multipart/form-data" action="{{url('admin/servicios/file')}}/{{$mantenimiento->id}}" method="post">
                            {{ csrf_field() }}
                            <input type="file" name="img">
                            <input type="submit">
                        </form>
                    </div>
                    <div class="panel-body">
                        <div class="imgrow">
                            @foreach($mantenimiento->files() as $file)
                                @if(strpos($file, '.pdf'))
                                    <div class="column">
                                        <iframe src="{{$file}}" style=" width:100%; height:420px"></iframe>
                                        <a href="{{$file}}" target="_blank">Ver</a>
                                        <form action="{{url('admin/servicios/activos/file/delete')}}" method="post">
                                            {{ csrf_field() }}

                                            <input type="hidden" name="url" value="{{$file}}">  
                                            <button type="">Borrar</button>

                                        </form>
                                    </div>
                                @else
                                    <div class="column">
                                        <img src="{{$file}}" alt="" style="width:100%" onclick="showImg(this);">
                                    </div>
                                @endif
                                
                                
                            @endforeach                     
                        </div>

                        <div class="imgcontainer">
                          <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
                          <img id="expandedImg" style="width:100%">
                          <div id="imgtext">
                          </div>
                          <form action="{{url('admin/servicios/activos/file/delete')}}" method="post">
                                {{ csrf_field() }}

                            <input id="inputUrl" type="hidden" name="url" >  
                            <button type="">Borrar</button>

                          </form>
                        </div>
                    </div>
                </div>
            </div>
    @endif

    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">Mantenimientos Anteriores</div>
            <div class="panel-body">
                <table id="mantosTable" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th hidden></th>
                            <th>Trabajo Realizado</th>
                            <th>Fecha</th>
                            <th>Departamento de servicio</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($venta->mantenimientos() as $mantenimientoAnt)

                            @if($mantenimientoAnt->id != $mantenimiento['id'])
                                <tr>
                                    <td hidden>{{$mantenimientoAnt->id}}</td>
                                    <td >{{$mantenimientoAnt->workDetail}}</td>
                                    <td>{{$mantenimientoAnt->startDate}}</td>
                                    <td>{{$mantenimientoAnt->folio}}</td>
                                </tr>
                            @endif
                            
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
    <script>
        $(document).ready(function() {
           var tableMantos = $('#mantosTable').DataTable(
                {
                });
           $('#mantosTable tbody').on( 'click', 'tr', function () 
            {
                $(this).toggleClass('selected');
                var selectedM = tableMantos.rows('.selected').data()
                var lurl = window.location.href.split('servicios');
                console.log(lurl[0] + 'servicios/review/' + selectedM[0][0]);
                window.location.href = lurl[0] + 'servicios/review/' + selectedM[0][0];
            });
           var tableC = $('#tcliente').DataTable(
                {
                    paging: false,
                    searching: false,
                    ordering: false,
                    bInfo: false
                });
           var tableM = $('#tmaquina').DataTable(
            {
                paging: false,
                searching: false,
                ordering: false,
                bInfo: false
            });
        });


        function showImg(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            $('#inputUrl').val(imgs.src);
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }       
    </script>
@endsection