@php
    use App\Models\Static\Piece;
    use App\Models\Structure;
    $edgeLength = 150
@endphp
<div class="flex flex-col">
    @if ($autosaveMessage)
        <div class="fixed top-0 right-0 bg-yellow-500" x-data="{ show: true }" x-show="show" x-init="setTimeout(() => $wire.emit('closeMessage'), 1500)">
            <div class="px-4 py-1 text-xs justify-center flex flex-row">
                {{ __("Données enregistrées ...") }}
            </div>
        </div>
    @endif
    @if($activeSlot !== null)
        <div class="container m-auto flex flex-row justify-center">
            <div class="text-6xl cursor-pointer p-2" wire:click="flipPieces" wire:key="tps">
                <span class="fas fa-sync-alt"></span>
            </div>
            <div class="text-6xl cursor-pointer p-2" wire:click="rotatePieces" wire:key="rps">
                <span class="fas fa-undo-alt" data-fa-transform="flip-h"></span>
            </div>
            <div class="text-6xl cursor-pointer p-2" wire:click="exitChoosePiece" wire:key="ecp">
                <span class="fas fa-times"></span>
            </div>
        </div>
        <div class="container m-auto flex flex-row flex-wrap" style="margin-left: {{ round($edgeLength / 2, 2) }}px;">
            @foreach($piecesAvailable as $piece => $null)
                <div class="relative" style="width: {{ $edgeLength }}px; height: {{ triangle_height($edgeLength) }}px">
                    <div class="absolute flex flex-start flex-col z-0" style="width: {{ $edgeLength }}px">
                        <x-triangle :identifier="$piece" :bearing="$bearing" :side="$activeSide" :rotation="$rotation"/>
                    </div>
                    <div class="relative z-10 h-full w-full">
                        <p wire:click="choosePiece('{{ $piece }}')" wire:key="cp-{{ $piece }}"
                           style="width: {{ $edgeLength }}px; height: {{ triangle_height($edgeLength) }}px"
                           class="cursor-pointer absolute z-20 inset-0 m-auto"></p>
                    </div>
                </div>
            @endforeach
        </div>
</div>
@else
    <div class="container mx-auto flex flex-row my-4 space-x-2 items-center">
        @if(!empty($piecesChosen))
            <x-fab wire:click="resetStructure" wire:key="reset" class="cursor-pointer bg-red-500 text-white">
                <span class="fas fa-trash-alt text-2xl"></span>
            </x-fab>
            <x-fab wire:click="saveStructure" wire:key="save" class="cursor-pointer bg-green-500 text-white">
                <span class="fas fa-save text-2xl"></span>
            </x-fab>
            <div class="flex flex-col space-y-1">
                <label class="text-sm">{{ __("Référence interne") }}</label>
                <x-input wire:model="internalReference" wire:key="ir"/>
            </div>
            <div class="flex flex-col space-y-1">
                <label class="text-sm">{{ __("Nom public") }}</label>
                <x-input wire:model="publicName" wire:key="pn"/>
            </div>
            <div class="flex flex-col space-y-1">
                <label class="text-sm">{{ __("État") }}</label>
                <select wire:model="structureStatus">
                    <option value="DRAFT" wire:key="DRAFT">{{ __("DRAFT") }}</option>
                    <option value="FINAL" wire:key="FINAL">{{ __("FINAL") }}</option>
                </select>
            </div>
        @endif
    </div>
    @foreach(range(0, Structure::ROWS) as $row)
        <div class="flex flex-row" style="margin-left: {{ round($edgeLength / 2, 2) }}px;">
            @foreach(range(0, Structure::COLS) as $column)
                @php
                    $active = Arr::get($piecesChosen, $row.'.'.$column, false);

                    if ($loop->parent->even) {
                        $bearing = $loop->even ? Piece::POINT_UP : Piece::POINT_DOWN;
                    } else {
                        $bearing = $loop->even ? Piece::POINT_DOWN : Piece::POINT_UP;
                    }
                @endphp

                <div class="relative" style="width: {{  round($edgeLength / 2, 2) }}px; height: {{ triangle_height($edgeLength) }}px">
                    <div class="absolute flex flex-start flex-col z-0" style="width: {{ $edgeLength }}px; right: -{{ round($edgeLength / 4, 2) }}px">
                        @if($active)
                            <x-triangle identifier="{{ $active['identifier'] }}" :bearing="$bearing" side="{{ $active['activeSide'] }}" rotation="{{ $active['rotation'] }}"/>
                        @else
                            <x-triangle :bearing="$bearing"/>
                        @endif
                    </div>
                    <div class="relative z-10 h-full w-full group">
                        @php
                            $value = round($edgeLength / 3, 2);
                                if ($loop->parent->even) {
                                    $margin = $loop->even ? 'margin-top: '.$value.'px;' : 'margin-bottom: '.$value.'px;';
                                } else {
                                    $margin = $loop->even ? 'margin-bottom: '.$value.'px;' : 'margin-top: '.$value.'px;';
                                }
                        @endphp
                        @if($active)
                            @if($editSlot == $active['identifier'])
                                <div class="flex flex-col justify-center space-y-2 absolute inset-0 z-50 bg-white bg-opacity-70 mx-auto h-full"
                                     style="width: {{ $value }}px;">
                                    <p wire:click="rotatePiece({{ implode(',', [$row, $column]) }})" wire:key="rp-{{ implode('-', [$row, $column]) }}"
                                       class="cursor-pointer flex flex-row justify-center items-center">
                                        <span class="fas fa-undo-alt text-2xl m-auto" data-fa-transform="flip-h"></span>
                                    </p>
                                    <p wire:click="flipPiece({{ implode(',', [$row, $column]) }})" wire:key="fp-{{ implode('-', [$row, $column]) }}"
                                       class="cursor-pointer flex flex-row justify-center items-center">
                                        <span class="fas fa-sync-alt text-2xl m-auto"></span>
                                    </p>
                                    <p wire:click="removePiece({{ implode(',', [$row, $column]) }})" wire:key="rp-{{ implode('-', [$row, $column]) }}"
                                       class="cursor-pointer flex flex-row justify-center items-center">
                                        <span class="fas fa-trash-alt text-2xl m-auto"></span>
                                    </p>
                                </div>
                            @else
                                <p wire:click="editPiece({{ implode(',', [$row, $column]) }})" wire:key="ep-{{ implode('-', [$row, $column]) }}"
                                   style="{{ $margin }} width: {{ round($edgeLength / 2, 2) }}px; height: {{ round($edgeLength / 2, 2) }}px"
                                   class="cursor-pointer absolute z-20 inset-0 m-auto rounded-full group-hover:bg-white group-hover:bg-opacity-50"></p>
                            @endif
                        @else
                            <p wire:click="addPiece({{ implode(',', [$row, $column, $bearing]) }})" wire:key="ap-{{ implode('-', [$row, $column]) }}"
                               style="{{ $margin }} width: {{ round($edgeLength / 2, 2) }}px; height: {{ round($edgeLength / 2, 2) }}px"
                               class="cursor-pointer flex flex-row justify-center items-center absolute z-20 inset-0 m-auto rounded-full group-hover:bg-blue-gray-300">
                                <span class="fas fa-plus text-4xl opacity-0 group-hover:opacity-100"></span>
                            </p>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>
        @endforeach
    @endif
</div>
<script>
    window.addEventListener("DOMContentLoaded", () =>
    {
        window.setInterval(() => {
            Livewire.emit('autosave')
        }, 30000)
    });
</script>