@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 las ciudades</h1>
            <p>Aquí se muestran todas las ciudades</p>
        </div>

        <table id="cities" class="display">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($cities as $city)
                    <tr>
                        <td>{{ $city->name }}</td>
                        <td>
                            <button><a href="{{ route('ciudades.edit', $city->id) }}">Editar</a></button>
                            <button><a href="{{ route('ciudades.show', $city->slug) }}">Ver</a></button>
                            <form action="{{ route('ciudades.toggleStatus', $city->id) }}" method="post">
                                @csrf
                                @method('put')
                                <button>{{ $city->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('#cities');
    </script>
@endsection