@extends('layouts.backend')


@section('style')
<link rel="stylesheet" href="{{asset('dist/css/jquery.bxslider.css')}}">
<link rel="stylesheet" href="{{asset('dist/css/jquery.mb.YTPlayer.min.css')}}">
@endsection

@section('contenido')
<style>
.ppb_cedula{
    position: relative;
    width: 80%;
    left: 10%;
    height: 140px;
    margin-bottom: 10px;
}
.ppb_cedula img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.ppb_nombres{
    text-align: center;
}
ul.ppb_list{
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.ppb_list li{
    margin-bottom: 10px;
    font-size: 17px;
    font-weight: 600;
}
ul.ppb_list li i{
    color: var(--colorVerde);
    width: 28px;
}
</style>
<section class="perfil_page padding_80">
    <div class="container-fluid">
        @section('titulo')
            INFORMACIÓN PERSONAL
        @endsection
        <div class="row">
            <div class="col-md-4">
                <div class="row ppb_cedula" style="margin-bottom: 5px"><img src="{{urlFrontend()}}/images/clientes/{{ $cliente->path_cedula}}" alt=""></div>
                <div class="row ppb_nombres">
                <h2>{{ $cliente != null? $cliente->nombre : '' }}  {{ $cliente != null? $cliente->segundo_nombre : '' }}<br>{{ $cliente != null? $cliente->apellido : '' }}</h2>
                </div>
            </div>
            <div class="col-md-8">
                <div class="row">
                    <ul class="ppb_list">
                        <li><i class="fa fa-envelope"></i><span> {{ $cliente != null? $cliente->correo : '' }}</span></li>
                        <li><i class="fa fa-phone"></i><span> {{ $cliente != null? $cliente->telefono : '' }}</span></li>
                        <li><i class="fa fa-map-marker"></i><span> {{ $cliente != null? $cliente->direccion : '' }}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <h3 style="background: #ddd; padding: 5px;">INFORMACIÓN VEHICULAR</h3>
            <hr>
        </div>
        <div class="row padding_60">
            <div class="col-lg-12">
                <div class="pp_box ">
                    <div class="ppb_content">
                        <div class="ppb_vehiculos">
                            <div class="row">
                                <div class="col-lg-2">
                                    <div class="ppbv_img">
                                        <img src="{{urlFrontend()}}/dist/assets/img/objetos/car.svg" alt="">
                                    </div>
                                </div>
                                <div class="col-lg-10">
                                    <div class="table-responsive p-2">
                                        <table class="table table-bordered table-sm"> 
                                            <thead>
                                                <th>Matrícula</th>
                                                <th>Marca</th>
                                                <th>Placa</th>
                                                <th>Tipo</th>
                                                <th>Modelo</th>
                                                <th>Año</th>
                                                <th>Color</th>
                                            </thead>
                                            <tbody id="vehiculo_body">
                                                @if (count($cliente->vehiculos))
                                                    @foreach ($cliente->vehiculos as $vehiculo)
                                                        <tr>
                                                            <td>
                                                                @if(!is_null($vehiculo->path_matricula))
                                                                    <a href="{{urlFrontend()}}/images/clientes/{{ $vehiculo->path_matricula }}" target="_blank">Ver Matricula</a>
                                                                @endif
                                                            </td>
                                                            <td>{{ $vehiculo->marca }}</td>
                                                            <td>{{ $vehiculo->placa }}</td>
                                                            <td>{{ $vehiculo->tipo }}</td>
                                                            <td>{{ $vehiculo->modelo }}</td>
                                                            <td>{{ $vehiculo->anio }}</td>
                                                            <td>{{ $vehiculo->color }}</td>
                                                        </tr>
                                                    @endforeach
                                                    @else
                                                    <tr>
                                                        <td colspan="8"><span class="badge badge-pill badge-warning">No ha registrado ninguna dirección</span></td>
                                                    </tr>
                                                 @endif 
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
    
@endsection
@section('script')
<script>
    function abrirModalVehiculo(){
        $('#produccion')[0].reset();  
        $('#id_vehiculo').val(null);   
        $('#imagen_matricula').attr('required', true);    
        $('#modal_vehiculo').modal('show'); 
    }
    function editarModalVehiculo(id){
         open_ajax();
        $.ajax({
            url:'{{ url('vehiculo') }}/'+id,
            type:'GET',
            data: {},
            processData: false, 
            contentType: false 
        }).done(function(datos){
            $('#id_vehiculo').val(datos.id);
            $('#marca').val(datos.marca); 
            $('#modelo').val(datos.modelo); 
            $('#placa').val(datos.placa); 
            $('#anio').val(datos.anio); 
            $('#tipo').val(datos.tipo);
            $('#color').val(datos.color);   
            $('#imagen_matricula').removeAttr('required');    
            $('#modal_vehiculo').modal('show');
        }).fail(function(jqXHR, textStatus, errorThrown) {
            validacionCampos(jqXHR, textStatus, errorThrown);
        }).always(function() {
            close_ajax();
        });
    }
    function eliminarVehiculo(id){
         open_ajax();
        $.ajax({
            url:'{{ url('eliminar-vehiculo') }}/'+id,
            type:'GET',
            data: {}
        }).done(function(datos){
            showToast('Correcto','Vehículo eliminado correctamente','success',10000);
            crearTablaVehiculos(datos);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            validacionCampos(jqXHR, textStatus, errorThrown);
        }).always(function() {
            close_ajax();
        });
    }
    function cerrarModalVehiculo(){
        $('#produccion')[0].reset();
        $('#id_vehiculo').val(null);            
        $('#modal_vehiculo').modal('hide'); 
    }
    function guardarVehiculo(){
        id_vehiculo = $('#id_vehiculo').val();
        marca = $('#marca').val(); 
        modelo = $('#modelo').val(); 
        placa = $('#placa').val(); 
        anio = $('#anio').val(); 
        tipo = $('#tipo').val();
        color = $('#color').val();
        imagen_matricula = $('#imagen_matricula')[0].files[0];
        var datos = new FormData();
        datos.append('id_vehiculo', id_vehiculo);
        datos.append('marca', marca);
        datos.append('modelo', modelo);
        datos.append('placa', placa);
        datos.append('anio', anio);
        datos.append('tipo', tipo);
        datos.append('color', color);
        datos.append('imagen_matricula', imagen_matricula);
        open_ajax();
        $.ajax({
            url:'{{ url('vehiculo') }}',
            type:'POST',
            data: datos,
            processData: false, 
            contentType: false 
        }).done(function(datos){                                  
            crearTablaVehiculos(datos);
            cerrarModalVehiculo();
            showToast('Correcto','Vehículo agregado correctamente','success',10000);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            validacionCampos(jqXHR, textStatus, errorThrown);
        }).always(function() {
            close_ajax();
        })
    }
    function crearTablaVehiculos(datos){
        contenedor = $('#vehiculo_body').empty();
        $.each(datos , function(i,item){
            console.log(item);
            tr = $('<tr>');
            tr.append($('<td>').text(item.marca));
            tr.append($('<td>').text(item.placa));
            tr.append($('<td>').text(item.tipo));
            tr.append($('<td>').text(item.modelo));
            tr.append($('<td>').text(item.anio));
            tr.append($('<td>').text(item.color));
            if(item.path_matricula != null){
                tr.append($('<td>').append('<a href="{{ url("images/clientes") }}/'+item.path_matricula+'" target="_blank">Ver matrícula</a>'));
            }else{
                tr.append($('<td>'));
            }
            tr.append($('<td>').append($('<button type="button" class="btn btn-outline-primary" onclick="editarModalVehiculo('+ item.id +')"><span class="fa fa-edit"></span></button>'+ ' '+ '<button type="button" class="btn btn-outline-danger" onclick="eliminarVehiculo('+ item.id +')"><span class="fa fa-trash"></span></button>')));
            contenedor.append(tr);
        });
        
    }
</script>
@endsection