<div>
    <x-slot name="header">
        <div class="flex justify-between">
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Dashboard') }}
            </h2>
            <p class="font-bold">Fecha: <span class="font-light">{{ now()}}</span></p>
        </div>
    </x-slot>
    @role('admin')
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 grid grid-cols-3">
        
            <div class="overflow-hidden flex mb-4">
                <div class="card bg-backgroundPrimary flex flex-row items-center justify-around">
                    <div class="card-body">
                        <h2 class="font-bold uppercase tracking-wide text-content3">Ventas del dia</h2>
                        <p class="font-black text-4xl text-center">$ {{ $movimiento }}</p>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14 text-success">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
                          </svg>                  
                    </div>
                </div>
            </div>

            <div class="overflow-hidden flex mb-4">
                <div class="card bg-backgroundPrimary flex flex-row items-center justify-around">
                    <div class="card-body">
                        <h2 class="font-bold uppercase tracking-wide text-content3">Abonos del dia</h2>
                        <p class="font-black text-4xl text-center">$ {{ $abono }}</p>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14 text-warning">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                        </svg>
                                           
                    </div>
                </div>
            </div>

            <div class="overflow-hidden flex mb-4">
                <div class="card bg-backgroundPrimary flex flex-row items-center justify-around">
                    <div class="card-body">
                        <h2 class="font-bold uppercase tracking-wide text-content3">Cancelaciones del dia</h2>
                        <p class="font-black text-4xl text-center">$ {{ $cancelacion }}</p>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14 text-error">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                        </svg>
                    </div>
                </div>
            </div>

            <div class="overflow-hidden flex">
                <div class="card bg-backgroundPrimary flex flex-row items-center justify-around">
                    <div class="card-body">
                        <h2 class="font-bold uppercase tracking-wide text-content3">Numero de Ventas</h2>
                        <p class="font-black text-4xl text-center"> {{ $num_movimiento }}</p>
                    </div>
                    <div>
                          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14 text-success">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
                          </svg>                 
                    </div>
                </div>
            </div>

            <div class="overflow-hidden flex">
                <div class="card bg-backgroundPrimary flex flex-row items-center justify-around">
                    <div class="card-body">
                        <h2 class="font-bold uppercase tracking-wide text-content3">Numero de Abonos</h2>
                        <p class="font-black text-4xl text-center"> {{ $num_abono }}</p>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-14 h-14 text-warning">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                        </svg>
                                           
                    </div>
                </div>
            </div>

            <div class="overflow-hidden flex">
                <div class="card bg-backgroundPrimary flex flex-row items-center justify-around">
                    <div class="card-body">
                        <h2 class="font-bold uppercase tracking-wide text-content3">Numero de Cancelaciones</h2>
                        <p class="font-black text-4xl text-center"> {{ $num_cancelacion }}</p>
                    </div>
                    <div>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="-14 h-14 text-error">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181" />
                        </svg>
                          
                    </div>
                </div>
            </div>

        </div>
    </div>
    @endrole

    <input class="modal-state" wire:model="cajaModal" value="" id="modal-1" type="checkbox" />
    <div class="modal">
        <label class="modal-overlay"></label>
        <div class="modal-content flex flex-col gap-5 max-w-md w-1/2">
            
            <h3 class="font-bold text-lg">Registrar Caja Inicial</h3>

            <div class="form-group">
                <div class="form-field">
                    <label for="caja_inicial" class="form-label font-bold">Caja inicial:</label>
                <input id="caja_inicial" wire:model="cajaInicial" type="number" step="any" placeholder="Registrar dinero inicial del turno" class="input max-w-full" />
                </div>
            </div>
            @error('cajaInicial')<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">Guardar</button>
            </div>
        </div>
    </div>

</div>
