@extends('layouts.app')


@section('content')
    <div class="images" v-viewer>
        <img src="{{ asset('img/comodatos-proceso.png') }}">
    </div>

    <div class="bgc-white p-20 bd">
        <h3>Comodatos Recibidos</h3>

        <div class="row mb-3">
            <div class="col-9">
                @if(auth()->user()->tieneRoles('SUPERADMIN', 'ADMIN_COMODATOS'))
                    <div class="mb-3">
                        <a href="{{ route('comodatos.recibidos.create') }}" class="btn btn-primary">Agregar
                            Registro</a>
                    </div>
                @endif

                <form>
                    @component('components.form-group', ['nombre' => 'buscar', 'titulo' => 'Buscar'])
                        <input type="text" class="form-control" id="buscar" name="buscar">
                    @endcomponent
                </form>
            </div>

            <div class="col-3">
                <h4>Resumen de Registros</h4>

                <table class="table table-bordered table-sm">
                    <thead>
                    <tr>
                        <th>Estado</th>
                        <th>Cantidad</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($resumen as $datum)
                        <tr>
                            <td>{{ $datum['name'] }}</td>
                            <td>{{ $datum['cantidad'] }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>

                <button class="btn btn-primary btn-block" @click="mostrar" type="button">Ver mapa proceso</button>
            </div>
        </div>

        {{ $recibidos->links() }}
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>N° carpeta jurídico</th>
                    <th>Organización</th>
                    <th>Ubicación</th>
                    <th>Contacto</th>
                    <th>Fecha ingreso</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
                </thead>
                <tbody>
                @foreach($recibidos as $recibido)
                    <tr>
                        <td>{{ $recibido->n_carpeta_jur }}</td>
                        <td>{{ $recibido->nombre_organizacion }}</td>
                        <td>{{ $recibido->ubicacion }}</td>
                        <td>{{ $recibido->contacto }}</td>
                        <td>{{ fechaFormato($recibido->fecha_ingreso, 'd/m/Y') }}</td>
                        <td style="background-color: {{ $recibido->estado->color }}">{{ $recibido->estado->nombre }}</td>
                        <td>
                            <a href="{{ route('comodatos.recibidos.show', ['id' => $recibido->id]) }}"
                               class="btn btn-primary">
                                Ver
                            </a>

                            @if(auth()->user()->tieneRoles('SUPERADMIN', 'ADMIN_COMODATOS'))
                                <a href="{{ route('comodatos.recibidos.edit', ['id' => $recibido->id]) }}"
                                   class="btn btn-primary">
                                    Editar
                                </a>
                            @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        {{ $recibidos->links() }}
    </div>
@endsection

@push('pre-scripts')
    <script>
        window.pageMix.push({
            methods: {
                mostrar() {
                    const viewer = this.$el.querySelector('.images').$viewer
                    viewer.show()
                }
            }
        })
    </script>
@endpush