@extends('layouts.app')
@section('titulo', 'Viendo Categorias: ' . $model->Nombre)
@php
    $manual = true;
@endphp

@section('content')
    <div class="row">
        <div class="col">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Datos de la categoria</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    @can('editar-servicio')
                        <div class="row">
                            <div class="col">
                                <a href="{{ route('gestion.categorias.edit', $model->id) }}" class="btn btn-primary"><i
                                        class="fas fa-pen"></i>
                                    Editar</a>
                            </div>
                        </div>
                        <hr>
                    @endcan
                    <div class="row">
                        <div class="col">
                            <table class="table table-bordered table-striped table-hover">
                                <tbody>
                                    <tr>
                                        <th scope="row">Nombre</th>
                                        <td>
                                            {{ $model->Nombre }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Estado</th>
                                        <td>
                                            <span
                                                class="badge {{ $model->EstadoDesc['Color'] }}">{{ $model->EstadoDesc['Nombre'] }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Creado Por</th>
                                        <td>
                                            {{ $model->creadopor->nombre }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Modificado Por</th>
                                        <td>
                                            {{ $model->modificadoPor->nombre }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Fecha de creación</th>
                                        <td>
                                            {{ $model->FechaCreacion }}
                                        </td>
                                    </tr>
                                    <tr>
                                        <th scope="row">Fecha de modificación</th>
                                        <td>
                                            {{ $model->FechaModificacion }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Lista de imagenes</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Imagen</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach ($imagenes as $imagen)
                                    <tr>
                                        <td>{{ $imagen->id }}</td>
                                        <td>
                                            <img src="{{ $imagen->getUrl() }}" alt="{{ $imagen->Archivo }}"
                                                class="img-fluid" style="max-width: 100px;"
                                                onclick="abrirImagenTab('{{ $imagen->getUrl() }}')">
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        function abrirImagenTab(url) {
            // Abrir nuevo tab
            var win = window.open(url, '_blank');
            // Cambiar el foco al nuevo tab (punto opcional)
            win.focus();
        }
    </script>
@endsection