@php
    $horas = [
        [
            'inicio' => '11:00',
            'fin' => '12:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '12:00',
            'fin' => '13:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '13:00',
            'fin' => '14:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '14:00',
            'fin' => '15:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '15:00',
            'fin' => '16:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '16:00',
            'fin' => '17:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '17:00',
            'fin' => '18:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '18:00',
            'fin' => '19:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '19:00',
            'fin' => '20:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '20:00',
            'fin' => '21:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '21:00',
            'fin' => '22:00',
            'horaPico' => 'no',
        ],
        [
            'inicio' => '22:00',
            'fin' => '23:00',
            'horaPico' => 'no',
        ],
    ];
@endphp
<div>
    <div class="grid grid-cols-2">
        <div class="flex justify-start items-center ml-2 font-bold">
            {{ $mes }}
        </div>
        <div class="flex justify-end items-center">
            <x-select wire:model.live="semana">
                <option value="2">Semana Anterior</option>
                <option value="1">Semana Actual</option>
                <option value="3">Semana Posterior</option>
                <option value="4">Buscar Semana</option>
            </x-select>
        </div>
    </div>
    <div class="justify-end mt-2 {{ $semana == 4 ? 'flex' : 'hidden' }}">
        <x-input type="date" wire:model.live="buscarsemana" />
    </div>

    {{-- cuadro turnos --}}
    <div class="p-2 border-2 border-gray-200 mt-2">
        <div class="grid sm:grid-cols-7 grid-cols-1">

            @foreach ($diasSemana as $diaSemana)
                <div class="text-center font-bold m-1">
                    <div class="cursor-pointer mb-2"
                        @can('admin')
                        wire:click="abrirModalTurno('{{ $diaSemana['fecha'] }}')"
                    @endcan>
                        {{ $diaSemana['nombre'] }} {{ $diaSemana['dia'] }} <br>
                    </div>
                    {{-- buscamos los turnos de esos días y hacemos un foreach --}}
                    @php
                        //creamos la variable fecha duplicar, para saber la semana a duplicar
                        $fechaDuplicarInicio = $diasSemana[0]['fecha'];
                        $fechaDuplicarFin = $diaSemana['fecha'];
                        $turnos = \App\Models\turnos::whereBetween('diaTurno', [
                            $diaSemana['fecha'],
                            $diaSemana['fecha'],
                        ])
                            ->orderBy('tipoTurno', 'asc')
                            ->get();
                    @endphp
                    @foreach ($turnos as $turno)
                        <div
                            class="rounded-lg font-normal mt-1 {{ $turno->tipoTurno == 'cocina' ? 'bg-blue-300' : 'bg-green-300' }} relative">
                            @can('admin')
                                <div class="absolute right-2 top-0 cursor-pointer text-gray-500 hover:text-gray-200"
                                    wire:click="deleteTurno({{ $turno->id }})">
                                    x
                                </div>
                            @endcan
                            <div
                                @can('admin')
                                 wire:click="editTurno({{ $turno->id }})" class="cursor-pointer"
                            @endcan>
                                {{ $turno->trabajadore->nombre }}
                            </div>
                            <div>
                                @php
                                    //formateamos la hora para eliminar los segundos
                                    $inicioTurno = strtotime($turno->inicioTurno);
                                    $inicioTurno = date('H:i', $inicioTurno);

                                    $finTurno = strtotime($turno->finTurno);
                                    $finTurno = date('H:i', $finTurno);
                                @endphp
                                {{ $inicioTurno }} a {{ $finTurno }}
                            </div>

                        </div>
                    @endforeach
                </div>
            @endforeach
        </div>
    </div>
    {{-- fin p-2 cuadro turnos --}}
    @can('admin')
        <div class="flex justify-end mt-2">
            <x-select class="mr-2" wire:model.live="semanaRecibe">
                <option value="1">Duplicar sobre semana actual</option>
                <option value="2">Duplicar sobre semana posterior</option>
            </x-select>
            <x-danger-button wire:click="duplicateWeek('{{ $fechaDuplicarInicio }}','{{ $fechaDuplicarFin }}')">
                +
            </x-danger-button>
        </div>
    @endcan

    {{-- cuadro horas semana trabajador --}}
    <div class="p-2 border-2 border-gray-200 mt-4">
        @foreach ($trabajadores as $trabajador)
            @php
                $datosTrabajador = \App\Models\turnos::whereBetween('diaTurno', [
                    $fechaDuplicarInicio,
                    $fechaDuplicarFin,
                ])
                    ->where('trabajadore_id', $trabajador->id)
                    ->get();
                //recorremos los datos de los turnos para sacar el total de horas de la semana
                $totalHorasTrabajador = 0;
                foreach ($datosTrabajador as $dato) {
                    $inicioTurno = new DateTime($dato->inicioTurno);
                    $finTurno = new DateTime($dato->finTurno);
                    $horasTrabajador = $finTurno->diff($inicioTurno);
                    $horasTrabajador = $horasTrabajador->format('%h');
                    $horasTrabajador = intval($horasTrabajador);
                    $totalHorasTrabajador = $totalHorasTrabajador + $horasTrabajador;
                }
                $porcentaje = ($totalHorasTrabajador * 100) / 60;
            @endphp
            <div class="mb-3">
                <div class="flex justify-between mb-1">
                    <span class="text-base font-medium text-blue-700 dark:text-white">{{ $trabajador->nombre }}</span>
                    <span class="text-sm font-medium text-blue-700 dark:text-white">{{ $totalHorasTrabajador }}</span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: {{ $porcentaje }}%"></div>
                </div>
            </div>
        @endforeach
    </div>
    {{-- fin cuadro horas semana trabajador  --}}

    {{-- modal para añadir turnos --}}
    <x-dialog-modal wire:model="modalTurno">
        <x-slot name="title">
            Añadir turno el {{ $diaTurno }}
        </x-slot>
        <x-slot name="content">
            <x-validation-errors class="mb-2"></x-validation-errors>
            <x-label>
                Trabajador
            </x-label>
            <x-select class="w-full mt-1" wire:model.live="trabajadore_id">
                <option value="">Selecciona el trabajador para el turno</option>
                @foreach ($trabajadores as $trabajador)
                    <option value="{{ $trabajador->id }}">
                        {{ $trabajador->nombre }}
                    </option>
                @endforeach

            </x-select>
            <div class="grid grid-cols-2 mt-4 gap-2">
                <div>
                    <x-label>
                        Hora entrada
                    </x-label>
                    <x-input class="w-full mt-1" wire:model="inicioTurno" />
                </div>
                <div>
                    <x-label>
                        Hora salida
                    </x-label>
                    <x-input class="w-full mt-1" wire:model="finTurno" />
                </div>
            </div>
            <x-label class="mt-2">
                Tipo de día
            </x-label>
            <x-select class="w-full mt-1" wire:model.live="festivo">
                <option value="">Indica si es día festivo o normal</option>
                <option value="normal">normal</option>
                <option value="festivo">festivo</option>
            </x-select>
            <x-label class="mt-2">
                Tipo de turno
            </x-label>
            <x-select class="w-full mt-1" wire:model.live="tipoTurno">
                <option value="">Indica si es Cocina o Servicio</option>
                <option value="cocina">cocina</option>
                <option value="servicio">servicio</option>
            </x-select>
        </x-slot>
        <x-slot name="footer">
            <div class="justify-end">
                <x-danger-button class="mr-2" wire:click="cerrarModal()">
                    Cancelar
                </x-danger-button>
                <x-button wire:click="addTurno()">
                    Añadir Turno
                </x-button>
            </div>
        </x-slot>
    </x-dialog-modal>
    {{-- Fin modal para añadir turnos --}}

    {{-- modal para editar turnos --}}
    <x-dialog-modal wire:model="modalEditTurno">
        <x-slot name="title">
            Editar turno el {{ $diaTurno }}
        </x-slot>
        <x-slot name="content">
            <x-validation-errors class="mb-2"></x-validation-errors>
            <x-label>
                Trabajador
            </x-label>
            <x-select class="w-full mt-1" wire:model.live="trabajadore_id">
                @foreach ($trabajadores as $trabajador)
                    <option value="{{ $trabajador->id }}">
                        {{ $trabajador->nombre }}
                    </option>
                @endforeach

            </x-select>
            <div class="grid grid-cols-2 mt-4 gap-2">
                <div>
                    <x-label>
                        Hora entrada
                    </x-label>
                    <x-input class="w-full mt-1" wire:model="inicioTurno" />
                </div>
                <div>
                    <x-label>
                        Hora salida
                    </x-label>
                    <x-input class="w-full mt-1" wire:model="finTurno" />
                </div>
            </div>
            <x-label class="mt-2">
                Tipo de día
            </x-label>
            <x-select class="w-full mt-1" wire:model.live="festivo">
                <option value="normal">normal</option>
                <option value="festivo">festivo</option>
            </x-select>
            <x-label class="mt-2">
                Tipo de turno
            </x-label>
            <x-select class="w-full mt-1" wire:model.live="tipoTurno">
                <option value="cocina">cocina</option>
                <option value="servicio">servicio</option>
            </x-select>
        </x-slot>
        <x-slot name="footer">
            <div class="justify-end">
                <x-danger-button class="mr-2" wire:click="cerrarModalEditar()">
                    Cancelar
                </x-danger-button>
                <x-button wire:click="updateTurno()">
                    Actualizar Turno
                </x-button>
            </div>
        </x-slot>
    </x-dialog-modal>
    {{-- Fin modal para editar turnos --}}


    {{-- bolque inferior con tabla de horarios según número de trabajadores --}}
    <div class="p-2 border-2 border-gray-200 mt-8">
        <div class="sm:grid sm:grid-cols-8 grid-cols-1 hidden">
            <div>
                <div class="text-center font-bold m-1">
                    Horas
                </div>
                @foreach ($horas as $hora)
                    <div class="flex justify-center font-bold m-1 h-[40px] items-center">
                        <div>
                            {{ $hora['inicio'] }} - {{ $hora['fin'] }}
                        </div>

                    </div>
                @endforeach
            </div>

            @foreach ($diasSemana as $diaSemana)
                <div class="text-center font-bold m-1">
                    <div class="cursor-pointer mb-2">
                        {{ $diaSemana['nombre'] }} {{ $diaSemana['dia'] }} <br>
                    </div>
                    <div>
                        @foreach ($horas as $hora)
                            <div class="flex font-bold m-1 h-[40px] items-center justify-center">
                                @php
                                    //Buscamos los turnos de ese día con cocinero y mesero 11:00 y las 12:00
                                    $turnosCocina = \App\Models\turnos::whereBetween('diaTurno', [
                                        $diaSemana['fecha'],
                                        $diaSemana['fecha'],
                                    ])
                                        ->where([
                                            ['inicioTurno', '<=', $hora['inicio']],
                                            ['finTurno', '>=', $hora['fin']],
                                            ['tipoTurno', 'cocina'],
                                        ])
                                        ->count();

                                    $turnosServicio = \App\Models\turnos::whereBetween('diaTurno', [
                                        $diaSemana['fecha'],
                                        $diaSemana['fecha'],
                                    ])
                                        ->where([
                                            ['inicioTurno', '<=', $hora['inicio']],
                                            ['finTurno', '>=', $hora['fin']],
                                            ['tipoTurno', 'servicio'],
                                        ])
                                        ->count();

                                @endphp
                                <span
                                    class="pr-2 pl-2 pb-1 pt-1 bg-blue-300 rounded-lg mr-1">{{ $turnosCocina }}</span><span
                                    class="pr-2 pl-2 pb-1 pt-1 bg-green-300 rounded-lg ml-1">{{ $turnosServicio }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

    </div>


    {{-- tabla calculo horas y precios --}}
    @can('admin')
        <div class="flex mt-7 justify-end">
            <x-select wire:model.live="trabajadore"
                wire:change="cambiaTrabajador('{{ $fechaDuplicarInicio }}','{{ $fechaDuplicarFin }}')">
                <option value="">Seleccionar trabajador</option>
                @foreach ($trabajadores as $trabajadore)
                    <option value="{{ $trabajadore->id }}">{{ $trabajadore->nombre }}</option>
                @endforeach

            </x-select>
        </div>
        <div class="relative overflow-x-auto mt-2">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Trabajador
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Tipo de Hora
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Precio
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Recargo
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Total
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            Horas Total
                        </th>
                        <td class="px-6 py-4">

                        </td>
                        <td class="px-6 py-4">

                        </td>
                        <td class="px-6 py-4">

                        </td>
                        <td class="px-6 py-4">
                            {{ $totalHoras }}
                        </td>
                    </tr>
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            Hora Extra
                        </th>
                        <td class="px-6 py-4">
                            {{ $totalHoras - $horasSemana }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $precioHoraExtra }}
                        </td>
                        <td class="px-6 py-4">

                        </td>
                        <td class="px-6 py-4">
                            {{ number_format(($totalHoras - $horasSemana) * $precioHoraExtra, '0', ',', '.') }}
                        </td>
                    </tr>
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            Hora Nocturna
                        </th>
                        <td class="px-6 py-4">
                            {{ $totalHorasNocturas }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $precioHoraNocturna }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $precioHoraNocturna - $precioHoraNormal }}
                        </td>
                        <td class="px-6 py-4">
                            {{ number_format($totalHorasNocturas * ($precioHoraNocturna - $precioHoraNormal), '0', ',', '.') }}
                        </td>
                    </tr>
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                            Hora Dominical
                        </th>
                        <td class="px-6 py-4">
                            {{ $totalHorasFestivo }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $precioHoraFestivo }}
                        </td>
                        <td class="px-6 py-4">
                            {{ $precioHoraFestivo - $precioHoraNormal }}
                        </td>
                        <td class="px-6 py-4">
                            {{ number_format($totalHorasFestivo * ($precioHoraFestivo - $precioHoraNormal), '0', ',', '.') }}
                        </td>
                    </tr>
                    <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 border-gray-200">
                        <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">

                        </th>
                        <td class="px-6 py-4">

                        </td>
                        <td class="px-6 py-4">

                        </td>
                        <td class="px-6 py-4 font-extrabold">
                            TOTAL $
                        </td>
                        <td class="px-6 py-4 font-extrabold">
                            {{ number_format(($totalHoras - $horasSemana) * $precioHoraExtra + $totalHorasNocturas * ($precioHoraNocturna - $precioHoraNormal) + $totalHorasFestivo * ($precioHoraFestivo - $precioHoraNormal), '0', ',', '.') }}
                        </td>
                    </tr>

            </table>
        </div>
    @endcan
</div>