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

@php
    //dd($operacion_detalle);
    //dd($archivos);
@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: #f5f7ff;
    }
</style>

<h6 class="card-title">ALZAMIENTO DE PRENDA </h6>
    <!-- ============ mensaje ============ -->
            @if (Session::get('success'))
                <div class="alert alert-success col-lg-12 show" role="alert">{{ Session::get('success'); }}</div>
            @endif
            @if (Session::get('danger'))
                <div class="alert alert-danger col-lg-12 show" role="alert">{{ Session::get('danger'); }}</div>
            @endif
    <!-- ========== fin mensaje ========== -->

<div class="row mt-3 mb-3">
    <div class="row col-8">
        <div class="col-md-3">
            <label for="operacion">OPERACIÓN</label>
            <input type="text" class="form-control" id="operacion" value="{{$operacion_detalle->id_operacion_detalle}}"
                readonly>
        </div>
        <div class="col-md-3">
            <label for="fecha">FECHA INGRESO</label>
            <input type="text" class="form-control" id="fecha" value="{{$operacion_detalle->fecha_ingreso}}" readonly>
        </div>
        <div class="col-md-6">
            <label for="estado">ESTADO</label>
            <input type="text" class="form-control" value="{{$operacion_detalle->nombre_estado}}" id="estado"
                readonly>
        </div>
        <div class="col-md-2">
            <label for="patente">PATENTE</label>
            <input type="text" class="form-control" id="patente" value="{{$operacion_detalle->patente}}" readonly>
        </div>
        <div class="col-md-1">
            <label for="dv">DV</label>
            <input type="text" class="form-control" id="dv" value="{{$operacion_detalle->patente_dv}}" readonly>
        </div>
        <div class="col-md-3">
            <label for="rpsd">RPSD</label>
            <input type="text" class="form-control" id="rpsd" value="{{$operacion_detalle->repertorio_rpsd}}"
                readonly>
        </div>
        <div class="col-md-2">
            <label for="rpsd_agno">RPSD AÑO</label>
            <input type="text" class="form-control" id="rpsd_agno" value="{{$operacion_detalle->repertorio_agno}}"
                readonly>
        </div>
        <div class="col-md-4">
            <label for="oficina">#</label>
            <input type="text" class="form-control" id="oficina" value="{{''}}"
                readonly>
        </div>
    </div>
    <div class="col-4">
        <label for="textarea1">COMENTARIOS</label>
        <textarea class="form-control" id="textarea1" cols="" rows="5"  readonly>{{$operacion_detalle->comentario}}</textarea>
    </div>
</div>
<hr>

<div class="row">
    <div class="col-md-6">
        <label for="mandante">MANDANTE</label>
        <input type="text" class="form-control" id="mandante" value="{{$operacion_detalle->mandante}}" readonly>
    </div>
    <div class="col-md-3">
        <label for="contrato">CONTRATO</label>
        <input type="text" class="form-control" id="contrato" value="{{$operacion_detalle->numero_operacion_mandante}}"
            readonly>
    </div>
    <div class="col-md-3">
        <label for="nomina">NÓMINA</label>
        <input type="text" class="form-control" id="nomina" value="{{$operacion_detalle->nomina_mandante}}" readonly>
    </div>
    
</div>
<div class="row mt-3">
    <div class="col-md-6">
        <label for="cliente">CLIENTE</label>
        <input type="text" class="form-control" id="cliente" value="{{$operacion_detalle->razon_social_cliente}}"
            readonly>
    </div>
    <div class="col-md-3">
        <label for="rut_cliente">RUT</label>
        <input type="text" class="form-control" id="rut_cliente" value="{{$operacion_detalle->rut_cliente}}" readonly>
    </div>
    <div class="col-md-3">
        <label for="email">EMAIL</label>
        <input type="text" class="form-control" id="email" value="{{$operacion_detalle->email_cliente}}" readonly>
    </div>
</div>
<br>
<hr>


<div class="row ml-1">
    <button type="button" class="btn btn-outline-primary btn-fw btn_tamaño_fijo mr-2" onclick="mostrarOcultarVehiculo()">Vehículo</button>
    <button type="button" class="btn btn-outline-primary btn-fw btn_tamaño_fijo ml-2" onclick="mostrarOcultarDocs()">Documentos</button>
</div>

<br>
{{-- ---------------------- Vehiculo ---------------------- --}}

<div class="row vehiculo" id="vehiculo">
    <div class="row m-1">
        <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 m-1">
        <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 m-1">
        <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>
{{-- ---------------------- Documentos ---------------------- --}}
<div class="mb-3"></div>
<div id="documento" class="documento">
    <div class="table-responsive">
        <table class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th class="col-2"><label>FECHA ADJUNTO</label></th>
                    <th class="col-3"><label>DOCUMENTO</label></th>
                    <th class=""><label>OBSERVACIÓN</label></th>
                </tr>
            <tbody>
                @foreach ($archivos as $file)
                <tr>
                    {{-- <td>{{ $file->getCTime() }}</td> --}}
                    <td>{{Helpers::fechaLatino(\Carbon\Carbon::createFromTimestamp($file->getCTime())->toDateTimeString()) }}</td>
                    {{-- <td><a href="{{$file->getRealPath()}}" onclick="window.open(this.href,'windowname','resizable,height=800,width=1080'); return false;">{{$file->getFilename()}}</a></td> --}}
                    <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()}}</a></td>
                    <td></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<div class="row">
    <div class="col-lg-6"> {{-- -------------- Propietarios ------------ --}}
        <div class="col" style="text-align: center">
            <label>
                <h6>PROPIETARIO(S)</h6>
            </label>
        </div>
        <div class="table-responsive">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th class="col-4"><label>NOMBRE</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 class="col-lg-1"> {{-- columna separación --}}
    </div>

    <div class="col-lg-5"> {{-- -------------- Estados ------------ --}}
        <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>
                    </tr>
                <tbody>
                    @foreach ($estados as $estado)
                    <tr>
                        <td>{{$estado->estado_nombre}}</td>
                        <td>{{$estado->estado_fecha}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

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

@endsection