@extends('layout/principal')
@section('titulo', 'Home')
@section('content')

@php
    //dd($operacion_detalle);
    //dd($operacion_detalle, $estados, $propietarios, $documentos);
    //dd(get_defined_vars());
@endphp
@php
    if (isset($estados) && count($estados) > 0) {
    //$ultimo_estado_nombre = end($estados)->estado_nombre;
    $ultimo_estado_fecha = end($estados)->estado_fecha;
    } else {
    //$ultimo_estado_nombre = '---';
    $ultimo_estado_fecha = '---';
    }
@endphp
<style>
    /* Define las animaciones por separado */
    /* @keyframes parpadeo {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    } */

    @-webkit-keyframes parpadeo {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    }

    /* @-moz-keyframes parpadeo {
        0% { opacity: 1.0; }
        50% { opacity: 0.0; }
        100% { opacity: 1.0; }
    } */

    .parpadea {
        /* animation-name: parpadeo;
        animation-duration: 3s;
        animation-timing-function: linear;
        animation-iteration-count: infinite; */

        -webkit-animation-name: parpadeo;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;

        /* -moz-animation-name: parpadeo;
        -moz-animation-duration: 3s;
        -moz-animation-timing-function: linear;
        -moz-animation-iteration-count: infinite; */
    }

    .btn-success:focus,.btn-success.focus {
    box-shadow: 0 0 0 .2rem rgb(0, 0, 0)
    }
    label {
        color: #868686;
        font-size: 12px;
    }
    .col-form-label {
        text-align: right;
        font-size: 12px
    }

    .btn_tamaño_fijo {
        width: 150px; /*ancho*/
        /* height: 50px; */ /*alto*/
    }

    .documento {
        display: none; /* oculto*/
    }
    .vehiculo {
        display: none; /* oculto*/
    }

    /* .display-input {
        background-color: #ffffff;
    } */

    .form-control[readonly] {
        background-color: #F7F7F7;
    }
</style>

<h5 class="card-title">ALZAMIENTO DE PRENDA </h5>
<hr>
<!-- ============ MENSAJES ==================================================================== -->
{{-- Mensajes estandar de Laravel --------}}
@if (isset($errors) && $errors->any())
<div class="alert alert-danger" role="alert">
    @foreach ($errors->all() as $error)
    {{ $error }}
    @endforeach
</div>
@endif
{{-- Mensajes de Session personalizados --}}
@if (Session::has('success')) <div class="alert alert-success"> {{ Session::get('success') }} </div> @endif
@if (Session::has('danger')) <div class="alert alert-danger"> {{ Session::get('danger') }} </div> @endif
<!-- ========== FIN MENSAJES ================================================================== -->

<div class="row">
    <div class="col-md-4" style="color: #777777">
        Mandante: {{$operacion_detalle->mandante}} <br>
        Operación Prenda Chile: {{$operacion_detalle->id_operacion_detalle}}
    </div>
    <div class="col-md-8" style="text-align:right">
        <a href="{{ route('alzamientoPrenda.edit', $operacion_detalle->id_operacion_detalle) }}" class="btn btn-info mr-1"><img src="{{ asset('images/editar_1.svg') }}" width="30px" style=""> Editar</a>
    </div>
</div>

<div class="row row-sm mb-3">
    <div class="col-sm-2 mg-t-10 mg-sm-t-10">
        <label for="contrato">CONTRATO</label>
        <input type="text" class="form-control" id="contrato" value="{{$operacion_detalle->contrato}}" readonly>
    </div>
    <div class="col-sm-1 mg-t-10 mg-sm-t-10">
        <label for="patente">PATENTE</label>
            <input type="text" class="form-control" id="patente" value="{{$operacion_detalle->patente}}-{{$operacion_detalle->patente_dv}}" readonly>
    </div>
    <div class="col-sm-1 mg-t-10 mg-sm-t-10">
        <label for="dv">NÓMINA</label>
            <input type="text" class="form-control" id="dv" value="{{$operacion_detalle->nomina_mandante}}" readonly>
    </div>
    <div class="col-sm-1 mg-t-10 mg-sm-t-10">
        <label for="dv">CLASE</label>
            <input type="text" class="form-control" id="dv" value="{{$operacion_detalle->clase_nombre_prenda}}" readonly>
    </div>
    <div class="col-sm-3 mg-t-10 mg-sm-t-10">
        <label for="estado_nombre">ESTADO</label>
            {{-- <input type="text" class="form-control" value="{{strtoupper($ultimo_estado_nombre)}}" id="estado_nombre"
                style="font-weight: bold" readonly> --}}
            <input type="text" class="form-control" value="{{strtoupper($operacion_detalle->nombre_estado)}}" id="estado_nombre"
                style="font-weight: bold" readonly>
    </div>
    <div class="col-sm-2 mg-t-10 mg-sm-t-10">
        <label for="estado_fecha">FECHA ESTADO</label>
            <input type="text" class="form-control" value="{{$ultimo_estado_fecha}}" id="estado_fecha" readonly>
    </div>
    <div class="col-sm-2 mg-t-10 mg-sm-t-10">
        <label for="fecha">FECHA INGRESO</label>
            <input type="text" class="form-control" id="fecha" value="{{$operacion_detalle->fecha_ingreso}}" readonly>
    </div>
</div>
<br>

<div class="row row-sm mb-1">
    <div class="col-sm-6"> {{-- -------------- Cliente del mandante ------------ --}}
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th class="col-4"><label>CLIENTE</label></th>
                        <th class="col-1"><label>RUT</label></th>
                    </tr>
                <tbody>
                    <tr>
                        <td>{{$operacion_detalle->razon_social_cliente}}</td>
                        <td>{{$operacion_detalle->rut_cliente}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="col-sm-6"> {{-- -------------- Propietarios vehículo ------------ --}}
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th class="col-4"><label>PROPIETARIO</label></th>
                        <th class="col-1"><label>RUT</label></th>
                    </tr>
                <tbody>
                    @foreach ($propietarios as $propietario)
                    <tr>
                        <td>{{$propietario->propietario_razon_social}}</td>
                        <td>{{$propietario->propietario_rut}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="row row-sm mb-3">  {{-- ------------------ Comentarios ---------------- --}}
    <div class="col-sm-6 mb-1">
        <label for="textarea1">COMENTARIOS MANDANTE</label>
        <textarea class="form-control" id="textarea1" cols="" rows="4" style="resize: none"
            readonly>{{$operacion_detalle->comentario}}</textarea>
    </div>
    <div class="col-sm-6">
        <label for="textarea1">COMENTARIOS PRENDA CHILE</label>
        <textarea class="form-control" id="textarea1" cols="" rows="4" style="resize: none"
            readonly>{{$operacion_detalle->comentario_prenda_chile}}</textarea>
    </div>
</div>

<div class="row row-sm">{{-- ------------------ Email cliente ---------------- --}}
    <div class="col-md-12">
        <label for="email">EMAIL CLIENTE</label>
        <input type="text" class="form-control" id="email" value="{{$operacion_detalle->email_cliente}}" readonly>
    </div>
</div>
<br>
{{-- <hr> --}}
<div class="row row-sm mb-1">
    {{-- <div class="row col-12"> --}}
        <div class="col-sm-6 mb-1"> {{-- -------------- Documentos del proceso ------------ --}}
            {{-- <h6>Documentos del Proceso</h6> --}}
            <label for="">DOCUMENTOS DEL PROCESO</label>
            <div class="col" style="text-align: center">
                {{-- <label>
                    <h6>DOCUMENTOS DEL PROCESO</h6>
                </label> --}}
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="col-3"><label>DOCUMENTO</label></th>
                            <th class="col-3"><label>FECHA</label></th>
                            <th class=""><label>USUARIO</label></th>
                            <th class=""><label>OBSERVACIÓN</label></th>
                        </tr>
                    <tbody>
                        @foreach ($documentos as $doc)
                        <tr>
                            {{-- <td>{{ $file->getCTime() }}</td> --}}
                            <td>{{--<a href="{{$file->getRealPath()}}"
                                    onclick="window.open(this.href,'windowname','resizable,height=800,width=1080'); return false;">{{$file->getFilename()}}</a></td> --}}
                                {{-- <a
                                href="{{public_path('documentos/operaciones/'.$operacion_detalle->id_operacion_detalle.'/'.$file->getFilename())}}"
                                onclick="window.open(this.href, 'windowname', 'resizable,height=800,width=1080'); return false;">{{$file->getFilename()}}
                                --}}

                                {{-- Si tiene ruta, es un documento guardado en directorio del sistema --}}
                                {{-- @if ($doc->ruta)
                                    <a href="{{asset($doc->ruta)}}"
                                    onclick="window.open(this.href, 'windowname', 'resizable,height=960,width=760'); return false;"
                                    class=""
                                    style="text-align: left">{{$doc->nombre_documento}}</a>
                                @endif --}}

                                {{-- Si no tiene ruta, es un documento guardado en la base de datos --}}
                                    {{-- @if ($doc->id_operacion_detalle_tipo_documento == 4)
                                    <a href="{{ route('escritura.traerDocumentoSinFirma', [$operacion_detalle->id_operacion_detalle]) }}"
                                        onclick="window.open(this.href,'windowname','resizable,height=960,width=760'); return false;"
                                        id="btnVerDocSinFirma">Borrador Confeccionado</a>
                                    @endif

                                    @if ($doc->id_operacion_detalle_tipo_documento == 5)
                                    <a href="{{ route('escritura.traerDocumentoFirmado', [$operacion_detalle->id_operacion_detalle]) }}"
                                        onclick="window.open(this.href,'windowname','resizable,height=960,width=760'); return false;"
                                        id="btnVerDocFirmado">Borrador Firmado</a>
                                    @endif

                                    @if ($doc->id_operacion_detalle_tipo_documento == 29)
                                    <a href="{{ route('certificacionNotarialEscritura.traerCertificacionNotarial', [$operacion_detalle->id_operacion_detalle]) }}"
                                        onclick="window.open(this.href,'windowname','resizable,height=960,width=760'); return false;"
                                        id="btnVerCertificacion">Certificación Notarial</a>
                                    @endif

                                    @if ($doc->id_operacion_detalle_tipo_documento == 31)
                                    <a href="{{ route('protocolizadoAlzaPrenda.traerProtocolizado', [$operacion_detalle->id_operacion_detalle]) }}"
                                        onclick="window.open(this.href,'windowname','resizable,height=960,width=760'); return false;"
                                        id="btnVerProtocolizado">Protocolizado</a>
                                    @endif --}}

                                    {{-- <a href="{{route('procesos.traerDocumento', [$operacion_detalle->id_operacion_detalle, $operacion_detalle->contrato, $doc->codigo_documento])}}" onclick="window.open(this.href,'windowname','resizable,height=960,width=760'); return false;">{{ $doc->nombre_documento}}</a> --}}

                                    <a href="{{route('procesos.traerDocumento', [$operacion_detalle->id_operacion_detalle, $doc->codigo_documento, $doc->nombre_archivo])}}" onclick="window.open(this.href,'windowname','resizable,height=960,width=760'); return false;">{{ $doc->nombre_documento}}</a>
                            </td>
                            <td>{{--
                                {{Helpers::fechaLatino(\Carbon\Carbon::createFromTimestamp($file->getCTime())->toDateTimeString())
                                }} --}}
                                {{Helpers::fechaLatino($doc->fecha_carga)}}
                            </td>

                            <td>{{$doc->nombre_usuario}}
                            </td>
                            <td>{{$doc->observaciones}}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <div class="col-sm-6 mb-1"> {{-- -------------- Estados historial ------------ --}}
            {{-- <h6>Historial de Estados</h6> --}}
            <label for="">HISTORIAL DE ESTADOS</label>
            <div class="col" style="text-align: center">
                {{-- <label>
                    <h6>HISTORIAL DE ESTADOS</h6>
                </label> --}}
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th class="col-3"><label>ESTADO</label></th>
                            <th class="col-2"><label>FECHA</label></th>
                            <th class="col-2"><label>USUARIO</label></th>
                        </tr>
                    <tbody>
                        @foreach ($estados as $estado)
                        <tr>
                            <td>{{$estado->estado_nombre}}</td>
                            <td>{{$estado->estado_fecha}}</td>
                            <td>{{$estado->nombre_usuario}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    {{-- </div> --}}
</div>

{{-- <div class="row mt-1">
    <div class="row col-12">
        <div class="col-lg-12">
            <button type="button" class="btn btn-secondary btn-block"
                onclick="mostrarOcultarVehiculo()">Datos del Vehículo</button>
        </div>
    </div>
</div> --}}
{{-- <hr> --}}
<br>
<h6>Datos del Vehículo</h6>
{{-- ---------------------- Vehiculo ---------------------- --}}
<div class="row row-sm mb-3">

{{-- <div class="row mt-1 mb-3"> --}}
    {{-- <div class="row col-12"> --}}
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="tipo">TIPO</label>
            <input type="text" class="form-control" id="tipo" value="{{$operacion_detalle->tipo_vehiculo}}"
                readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="marca">MARCA</label>
            <input type="text" class="form-control" id="marca" value="{{$operacion_detalle->marca}}" readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="modelo">MODELO</label>
            <input type="text" class="form-control" id="modelo" value="{{$operacion_detalle->modelo}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="agno">AÑO</label>
            <input type="text" class="form-control" id="agno" value="{{$operacion_detalle->ano}}" readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="color">COLOR</label>
            <input type="text" class="form-control" id="color" value="{{$operacion_detalle->color}}" readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="motor">MOTOR</label>
            <input type="text" class="form-control" id="motor" value="{{$operacion_detalle->motor}}" readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="vin">VIN</label>
            <input type="text" class="form-control" id="vin" value="{{$operacion_detalle->vin}}" readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="chasis">CHASIS</label>
            <input type="text" class="form-control" id="chasis" value="{{$operacion_detalle->chasis}}" readonly>
        </div>
        <div class="col-sm-3 mg-t-10 mg-sm-t-10">
            <label for="nro_serie">NRO.SERIE</label>
            <input type="text" class="form-control" id="nro_serie" value="{{$operacion_detalle->nro_serie}}"
                readonly>
        </div>
    {{-- </div> --}}
</div>

{{-- -------------- mostrar/ocultar vehículo ------------ --}}
{{-- <div class="row">
    <div class="row col-12">
        <div class="col-2 mt-5">
            <button type="button" class="btn-info btn-block" onclick="mostrarOcultarVehiculo()">Datos Del Vehículo &nbsp  <img src="{{asset('images/binoculars1.png')}}"></button>
        </div>
        <div class="col-10 vehiculo" id="vehiculo">
            <div class="row col-12 mt-3">
                <div class="col-md-3">
                    <label for="tipo">TIPO VEHÍCULO</label>
                    <input type="text" class="form-control" id="tipo" value="{{$operacion_detalle->tipo_vehiculo}}"
                        readonly>
                </div>
                <div class="col-md-3">
                    <label for="marca">MARCA</label>
                    <input type="text" class="form-control" id="marca" value="{{$operacion_detalle->marca}}" readonly>
                </div>
                <div class="col-md-3">
                    <label for="modelo">MODELO</label>
                    <input type="text" class="form-control" id="modelo" value="{{$operacion_detalle->modelo}}" readonly>
                </div>
                <div class="col-md-3">
                    <label for="agno">AÑO</label>
                    <input type="text" class="form-control" id="agno" value="{{$operacion_detalle->ano}}" readonly>
                </div>
            </div>
            <div class="row col-12 mt-3">
                <div class="col-md-3">
                    <label for="color">COLOR</label>
                    <input type="text" class="form-control" id="color" value="{{$operacion_detalle->color}}" readonly>
                </div>
                <div class="col-md-3">
                    <label for="motor">MOTOR</label>
                    <input type="text" class="form-control" id="motor" value="{{$operacion_detalle->motor}}" readonly>
                </div>
                <div class="col-md-3">
                    <label for="vin">VIN</label>
                    <input type="text" class="form-control" id="vin" value="{{$operacion_detalle->vin}}" readonly>
                </div>
                <div class="col-md-3">
                    <label for="chasis">CHASIS</label>
                    <input type="text" class="form-control" id="chasis" value="{{$operacion_detalle->chasis}}" readonly>
                </div>
            </div>
            <div class="row col-12 mt-3">
                <div class="col-md-3">
                    <label for="nro_serie">NRO.SERIE</label>
                    <input type="text" class="form-control" id="nro_serie" value="{{$operacion_detalle->nro_serie}}"
                        readonly>
                </div>
            </div>
            <br>
        </div>
    </div>
</div> --}}


{{-- <div class="row vehiculo" id="vehiculo">
    <div class="row col-12">
        <div class="col-md-3">
            <label for="tipo">TIPO VEHÍCULO</label>
            <input type="text" class="form-control" id="tipo" value="{{$operacion_detalle->tipo_vehiculo}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="marca">MARCA</label>
            <input type="text" class="form-control" id="marca" value="{{$operacion_detalle->marca}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="modelo">MODELO</label>
            <input type="text" class="form-control" id="modelo" value="{{$operacion_detalle->modelo}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="agno">AÑO</label>
            <input type="text" class="form-control" id="agno" value="{{$operacion_detalle->ano}}" readonly>
        </div>
    </div>
    <div class="row col-12">
        <div class="col-md-3">
            <label for="color">COLOR</label>
            <input type="text" class="form-control" id="color" value="{{$operacion_detalle->color}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="motor">MOTOR</label>
            <input type="text" class="form-control" id="motor" value="{{$operacion_detalle->motor}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="vin">VIN</label>
            <input type="text" class="form-control" id="vin" value="{{$operacion_detalle->vin}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="chasis">CHASIS</label>
            <input type="text" class="form-control" id="chasis" value="{{$operacion_detalle->chasis}}" readonly>
        </div>
    </div>
    <div class="row col-12">
        <div class="col-md-3">
            <label for="nro_serie">NRO.SERIE</label>
            <input type="text" class="form-control" id="nro_serie" value="{{$operacion_detalle->nro_serie}}" readonly>
        </div>
    </div>
    <br>
</div> --}}


{{-- <script>
    function mostrarOcultarVehiculo() {
        let vehiculoDiv = document.getElementById("vehiculo");
        if (vehiculoDiv.style.display === "none" || vehiculoDiv.style.display === "") {
            vehiculoDiv.style.display = "block";
        } else {
            vehiculoDiv.style.display = "none";
        }
    }
</script> --}}

@endsection