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

    <section class="container max-w-7xl mx-auto grid grid-cols-6 my-10 gap-5">
        <article class="col-span-2">
            <h2 class="font-bold">Mi impresora</h2>
            <p>Selecciona una impresora para utilizar en tu perfil.</p>
        </article>
        <article class="bg-white col-span-4 p-3 rounded-lg">
            @if (session()->has('messageImpresora'))
            <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('messageImpresora') }}</span>
            </div>
            @endif
            <div class="flex justify-center items-center gap-2">
                <label class="font-bold" for="seleccionar-impresora">Seleciona impresora:</label>
                <select wire:model="impresoraUser" id="seleccionar-impresora" class="select">
                    <option value="null">Selecciona una opción</option>
                    @foreach ($impresoras as $impresora)
                        <option value="{{$impresora->id }}">{{$impresora->estacion}}:{{$impresora->nombre_impresora}}</option>                    
                    @endforeach
                </select>
                <button wire:click="saveImpresora()" class="btn btn-primary">Guardar Impresora</button>
            </div>
        </article>

        <article class="col-span-2">
            <h2 class="font-bold">Agrega una impresora</h2>
            <p>Puedes agregar una impresora de tu estación local, solo recuerda que para agregar una impresora debes tener la impresora compartida desde la computadora.</p>
        </article>
        <article class="bg-white col-span-4 p-3 rounded-lg">
            <div class="mb-3 flex justify-between">
                <button wire:click="create()" class="btn btn-sm btn-primary">Agregar Impresora</button>
            </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
            @if (session()->has('error'))
                <div class="alert alert-error my-2">
                    <svg class="h-8 w-8" width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M24 4C12.96 4 4 12.96 4 24C4 35.04 12.96 44 24 44C35.04 44 44 35.04 44 24C44 12.96 35.04 4 24 4ZM24 26C22.9 26 22 25.1 22 24V16C22 14.9 22.9 14 24 14C25.1 14 26 14.9 26 16V24C26 25.1 25.1 26 24 26ZM26 34H22V30H26V34Z" fill="#E92C2C" />
                    </svg>
                    <span>{{ session('error') }}</span>
                </div>
            @endif
            <div class="bg-white text-neutral overflow-hidden sm:rounded-lg p-3">
                <div class="overflow-x-auto">
                    <table class="table table-hover table-zebra">
                      <thead>
                        <tr class="text-neutral">
                          <th>Estacion / IP</th>
                          <th>Nombre Impresora / Puerto</th>
                          <th>Acciones</th>
                        </tr>
                      </thead>
                      <tbody>
                        @forelse ($impresoras as $impresora)
                            <th>{{ $impresora->estacion }}</th>
                            <th>{{ $impresora->nombre_impresora }}</th>
                            @role('admin') 
                            <th class="flex gap-2">
                                <svg wire:click="imprimir({{$impresora->id}})" xmlns="http://www.w3.org/2000/svg" class="text-sky-600 cursor-pointer w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0021 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 00-1.913-.247M6.34 18H5.25A2.25 2.25 0 013 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 011.913-.247m10.5 0a48.536 48.536 0 00-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659M18 10.5h.008v.008H18V10.5zm-3 0h.008v.008H15V10.5z" />
                                </svg>                                                             
                                <svg wire:click="delete({{ $impresora->id }})" xmlns="http://www.w3.org/2000/svg" class="text-error cursor-pointer w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
                                </svg> 
                            </th> 
                            @endrole
                            </tr>
                            @empty
                            <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 impresoras registradas en el sistema.</span>
                            </div>
                            @endforelse
                        </tbody>
                </table>
                {{$impresoras->links()}}
                </div>
            </div>
        </article>
    </section>
    

    <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">Agregar Impresora</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="codigo" class="form-label font-bold">Nombre Estación / IP de Impresora:</label>
                    <input id="codigo" wire:model="impresora.estacion" type="text" placeholder="Nombre de la computadora (con la impresora)" class="input max-w-full" />
                </div>
            </div>
            @error('impresora.estacion')<span class="block text-sm mx-2 text-error">{{ $message }}</span>@enderror  

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

            <div>
                <label class="flex cursor-pointer gap-2">
                    <input type="checkbox" class="checkbox" wire:model="impresora.is_compartida" />
                    <span>¿Es impresora compartida?</span>
                </label>
            </div>
            <div class="flex gap-3">
                <button wire:click="save()" class="btn btn-success btn-block">Guardar</button>
            </div>
        </div>
    </div>
</div>