@extends('layouts.app')

@section('styles')
{{-- Style Here --}}
<link rel="stylesheet" href="{{asset('plugins/src/apex/apexcharts.css')}}">
@vite(['resources/scss/light/assets/dashboard/dash_1.scss'])
@vite(['resources/scss/dark/assets/dashboard/dash_1.scss'])

@endsection

@section('content')
<div class="row layout-top-spacing">
    <div class="col-lg-8 col-md-3 col-sm-3 mb-4">
        <h4>Gestión de catálogos</h4>
        <span>Administra las Categorías y Subcategorías de incidencias operativas</span>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-3 col-sm-3 mb-4 ms-auto">
        <button class="btn btn-secondary mb-2 me-4">+ Añadir Clasificación</button>
    </div>
    <div class="col-xl-2 col-lg-3 col-md-3 col-sm-3 mb-4 ms-auto">
        <button class="btn btn-primary mb-2 me-4">+ Añadir Categoría</button>
    </div>
</div>

<div class="row">

    @foreach ($codigos as $c)
    <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 mb-4">
        <div class="card style-2 mb-md-0 mb-4">
            <div class="media mt-0 mb-3">
                <div class="">
                    <div class="avatar avatar-md avatar-indicators avatar-online me-3">
                        <img alt="avatar" src="{{asset('storage/images/emergencia.png')}}" class="avatar-img">
                    </div>
                </div>
                <div class="media-body">
                    <h4 class="media-heading mb-0">Categoría</h4>
                    <p class="media-text">{{ $c->app_clasificacions_id }}</p>
                </div>
            </div>

            <div class="card-body px-0 pb-0">
                <!--<h5 class="card-title mb-3">Infraestructura</h5>-->
                <div class="card-footer pt-0 border-0 text-center">
                    <a class="btn btn-secondary w-100" style="background-color: {{$c->color}};"> <img alt="avatar" src="{{asset('storage/images/heard.png')}}" class=" avatar-img"><span class="btn-text-inner ms-3"><b>Código {{ $c->name }}</b></span></a>
                </div>
                <h6><b>{{ $c->description }}</b></h6>

                <div class="media mt-4 mb-0 pt-1">
                    <button class="btn btn-primary mb-2 me-4 btn-sm">Editar</button>
                    <button class="btn btn-primary mb-2 me-4 btn-sm">Eliminar</button>
                </div>
            </div>
        </div>
    </div>
    @endforeach

</div>
@endsection

@section('scripts')
{{-- Scripts Here --}}
@endsection