<div>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Rutas') }}
        </h2>
    </x-slot>

    <div class="py-12">

        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="mb-3 flex justify-between">
                <button wire:click="create()" class="btn btn-sm btn-primary">Registrar ruta</button>
                <div class="form-group max-w-md">
                    <div class="form-field flex flex-row items-center">
                        <label for="buscador" class="form-label font-bold">Buscar:</label>
                    <input id="buscador" wire:model="buscador" type="" placeholder="Buscar por codigo" class="input max-w-full" />
                    </div>
                </div>
            </div>
            @if (session()->has('message'))
                <div class="alert alert-success my-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                    <span>{{ session('message') }}</span>
                </div>
            @endif
            <div class="bg-white text-neutral overflow-hidden shadow-xl sm:rounded-lg">
                <div class="overflow-x-auto">
                    <table class="table table-hover table-zebra">
                      <thead>
                        <tr class="text-neutral">
                          <th>Nombre Ruta</th>
                          <th>Prefijo</th>
                          <th>Fecha</th>
                          @role('admin')<th>Acciones</th>@endrole
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($rutas as $ruta)
                            <th>{{ $ruta->ruta }}</th>
                            <th>{{ $ruta->prefijo }}</th>
                            <th>{{ $ruta->created_at }}</th>
                            @role('admin') 
                            <th>
                                <button wire:click="edit({{ $ruta->id }})" class="btn btn-sm btn-primary">Editar</button>
                                <button wire:click="delete({{ $ruta->id }})" class="btn btn-sm btn-error">Eliminar</button>
                            </th>
                            @endrole
                            </tr>
                            @empty
                            {{$rutas->links()}}
                            <div class="alert alert-info my-4 max-w-3xl mx-auto">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                <span>No hay rutas registradas en el sistema.</span>
                            </div>
                            @endforelse
                        </tbody>
                </table>
                {{$rutas->links()}}
                </div>

            </div>
        </div>
    </div>

    <input class="modal-state" wire:model.defer="modal" id="modal-1" type="checkbox" />
    <div class="modal">
        <label class="modal-overlay" for="modal-1"></label>
        <div class="modal-content flex flex-col gap-5 max-w-md w-1/2">
            <label for="modal-1" class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</label>
            
            <h3 class="font-bold text-lg">Registrar Ruta</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="ruta" class="form-label font-bold">Nombre Ruta:</label>
                    <input id="ruta" wire:model="ruta.ruta" type="text" placeholder="Ingresa nombre de la ruta" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ruta.ruta')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

            <div class="form-group">
                <div class="form-field">
                    <label for="ruta" class="form-label font-bold">Prefijo:</label>
                    <input id="ruta" wire:model="ruta.prefijo" type="text" placeholder="Ingresa prefijo de la ruta" class="input max-w-full input-enter" />
                </div>
            </div>
            @error('ruta.prefijo')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  


            <div class="flex gap-3">
                <button wire:click="save()" class="btn btn-success btn-block input-enter">Guardar</button>
            </div>
        </div>
    </div>
</div>
