@extends('layouts.dashboard_layout')

@section('title', 'Contactos')

@section('content')
<div class="container-fluid container-column d-flex justify-content-between align-items-center">
    <div class="d-flex justify-content-end ms-auto">
        <div class="@if (Auth::user()->roles->first()->nombre=='Usuario') d-none @endif">
            <button id="cargarContactos" class="button-crear me-3"><img src="{{ asset('img/perfil.png') }}" alt="Icon-document">Cargar Contacto</button>
        </div>   
        <div class="@if (Auth::user()->roles->first()->nombre=='Usuario') d-none @endif">
            <button id="guard-contact" class="button-crear"><img src="{{ asset('img/perfil.png') }}" alt="Icon-document">Crear Contacto</button>
        </div>
    </div>       
</div>
<div class="container-fluid p-3 table-acta">
<div class="table-responsive">
    <label class="text-align">Contactos</label>
    <table id="actaTable" class="table">
        <thead>
            <tr id="text-table">
                <th>#</th>
                <th>Nombre</th>
                <th>Identificacion</th>
                <th>Email</th>
                <th class="@if (Auth::user()->roles->first()->nombre == 'Usuario') d-none @endif"></th>
            </tr>
        </thead>
        <tbody id="myTable">
            @foreach ($contactos as $contacto)
            <tr id="">
                <td>{{ $contacto?->id ?? 0 }}</td>
                <td>{{ $contacto?->nombre ?? ' }} {{ $contacto?->apellido ?? '}} </td>
                <td> {{ $contacto?->identificacion ?? ''}} </td>
                <td> {{ $contacto?->email ?? '' }} </td>
                <td class="icon-edit @if (Auth::user()->roles->first()->nombre == 'Usuario') d-none @endif">
                    <div class="icon-box">
                        <a href="#" class="edit-contact" data-id="{{ $contacto?->id ?? 0 }}">
                            <i class="fa-regular fa-pen-to-square"></i>
                        </a>
                    </div>
                    <div class="icon-box">
                        <a href="#" data-bs-toggle="modal" data-bs-target="#eliminarModal"
                            data-route="{{ route('contactos.state', $contacto?->id ?? 0) }}" 
                            data-record-id="{{ $contacto?->id ?? 0 }}">
                            <i class="fa-solid fa-trash"></i>
                        </a>
                    </div>
                </td>
            </tr>
            @include('dashboard.contactos.modals.eliminar')
            @endforeach
        </tbody>
    </table>
    @include('dashboard.contactos.modals.modal')
</div>
</div>
@endsection

@section('scripts')
@include('partials.scripts')
<script src="{{ asset('js/contactos/modals.js') }}"></script>
@endsection