@extends('layouts.app')

@section('styles')
    <!-- Enlaces a las bibliotecas necesarias -->
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="//cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

    <style>
        button {
            border: none;
            outline: none;
            background-color: transparent;
            cursor: pointer;
            color: #0d6efd;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;

        }
    </style>
@endsection

@section('content')
    <div class="container" style="margin-bottom: 100px;">
        <a href="{{ route('panel.index') }}">
            <button class="btn-back">
                <svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"></path>
                </svg>
                Volver atrás
            </button>
        </a>

        <div class="titles-section">
            <h1>Todos los grupos</h1>
            <p>Aquí se muestran todas los grupos</p>
        </div>

        <table id="groups" class="display">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Link</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($groups as $group)
                    <tr>
                        <td>{{ $group->name }}</td>
                        <td>{{ route('grupos.show', $group->slug) }}</td>
                        <td>
                            <button><a href="{{ route('grupos.edit', $group->id) }}">Editar</a></button>
                            
                            <button onclick="return confirmDelete('Eliminar grupo!', '¿Estás segura de que quieres eliminar?');">Eliminar</button>
                            
                            <form action="{{ route('grupos.destroy', $group->id) }}" id="delete-form" method="post">
                                @csrf
                                @method('delete')
                            </form>
                            
                            <form action="{{ route('grupos.toggleStatus', $group->id) }}" method="post">
                                @csrf
                                @method('put')
                                <button>{{ $group->status ? 'No mostrar en el inicio' : 'Mostrar en el inicio' }}</button>
                            </form>

                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
@endsection


@section('scripts')
    <script>
        let table = new DataTable('#groups');

        function confirmDelete(title, message) {
            Swal.fire({
                title: 'Eliminar propiedad',
                text: '¿Estás seguro de que quieres eliminar?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#FD2F30',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar',
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form').submit();
                }
            });
        }
    </script>
@endsection