@extends('layouts.master')

@section('title', trans('title.colors'))

@section('content')
    <section class="colors_page">
        <div class="header">
            <div class="left">
                <ul>
                    @foreach ($types as $item)
                        <li>
                            <span>{{ $item->title }}</span>
                            <div class="dropdown">
                                <div class="box">
                                    @foreach ($item->rooms as $roomModel)
                                        <div class="image">
                                            <a href="{{ $roomModel->url($product->id) }}">
                                                <img src="{{ asset($roomModel->thumb) }}" alt="{{ $roomModel->title }}">
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </li>
                    @endforeach
                </ul>
                {{-- <ul>
                    <li>
                        <span>
                            <svg id="Group_7110" data-name="Group 7110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path id="Path_4823" data-name="Path 4823" d="M0,0H24V24H0Z" fill="none"/>
                                <path id="Path_4824" data-name="Path 4824" d="M17.783,16.391,22,20.607,20.607,22l-4.216-4.217a8.863,8.863,0,1,1,1.392-1.392Zm-1.975-.731a6.889,6.889,0,1,0-.148.148l.148-.148ZM9.876,9.876V6.923h1.969V9.876H14.8v1.969H11.845V14.8H9.876V11.845H6.923V9.876Z"/>
                            </svg>
                        </span>
                    </li>
                    <li class="rotate">
                        <span>
                            <svg id="Group_7111" data-name="Group 7111" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path id="Path_4827" data-name="Path 4827" d="M0,0H24V24H0Z" fill="none"/>
                                <path id="Path_4828" data-name="Path 4828" d="M10.4,9h9.415a.972.972,0,0,1,.941,1V20a.972.972,0,0,1-.941,1H10.4a.972.972,0,0,1-.941-1V10A.972.972,0,0,1,10.4,9Zm.941,2v8h7.532V11Zm-5.649-.414L7.414,8.757l1.332,1.415L4.752,14.414.757,10.172,2.089,8.757,3.81,10.586V8A4.86,4.86,0,0,1,8.518,3h3.766V5H8.518A2.916,2.916,0,0,0,5.693,8Z" transform="translate(-0.757)"/>
                            </svg>
                        </span>
                        <div class="angles">
                            <span>45&deg;</span>
                            <span>90&deg;</span>
                            <span>0&deg;</span>
                            <span>180&deg;</span>
                        </div>
                    </li>
                    <li onclick="window.print();">
                        <span>
                            <svg id="Group_7112" data-name="Group 7112" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <path id="Path_4829" data-name="Path 4829" d="M0,0H24V24H0Z" fill="none"/>
                                <path id="Path_4830" data-name="Path 4830" d="M6,19H3a1,1,0,0,1-1-1V8A1,1,0,0,1,3,7H6V3A1,1,0,0,1,7,2H17a1,1,0,0,1,1,1V7h3a1,1,0,0,1,1,1V18a1,1,0,0,1-1,1H18v2a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1Zm0-2V16a1,1,0,0,1,1-1H17a1,1,0,0,1,1,1v1h2V9H4v8ZM8,4V7h8V4ZM8,17v3h8V17ZM5,10H8v2H5Z"/>
                            </svg>
                        </span>
                    </li>
                </ul> --}}
            </div>
            <div class="close" data-url="{{ $product->url }}">
                <svg id="Group_6902" data-name="Group 6902" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path id="Path_4636" data-name="Path 4636" d="M0,0H24V24H0Z" fill="none"/>
                    <path id="Path_4637" data-name="Path 4637" d="M11.636,10.3,16.3,5.636l1.333,1.333-4.667,4.667L17.636,16.3,16.3,17.636l-4.667-4.667L6.969,17.636,5.636,16.3,10.3,11.636,5.636,6.969,6.969,5.636Z" transform="translate(0.364 0.364)" />
                </svg>
            </div>
        </div>
        <div class="bg" id="color-bg">
            <img src="{{ $colorsBoolean && $colors->first() ? asset($colors->first()->image) : asset('assets/client/images/laminate-default.jpeg') }}" alt="Laminate Default">
        </div>
        @if ($colorsBoolean)
            <div class="edit_walls">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17.995">
                    <path id="Path_4822" data-name="Path 4822" d="M19.838,3a1,1,0,0,1,.99,1V5.756l-1.981,2V5H4.981v8.1l3.962-4,4.287,4.328-1.314,1.327-.006,4.238L16.115,19l1.317-1.33L18.748,19h.1V16.239l1.981-2V20a1,1,0,0,1-.99,1H3.99A1,1,0,0,1,3,20V4a1,1,0,0,1,.99-1ZM21.6,7.807,23,9.22,15.3,17l-1.4,0,0-1.412ZM15.381,7A1.5,1.5,0,1,1,13.9,8.5,1.493,1.493,0,0,1,15.381,7Z" transform="translate(-3 -3)"/>
                </svg>
                <div class="wall_colors">
                    @foreach ($hexes as $item)
                        <span style="background-color: {{ $item->hex }};" title="{{ $item->title }}"></span>
                    @endforeach
                </div>
            </div>
        @endif
        @if ($colorsBoolean)
            <div class="edit_floors">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 17.995">
                    <path id="Path_4822" data-name="Path 4822" d="M19.838,3a1,1,0,0,1,.99,1V5.756l-1.981,2V5H4.981v8.1l3.962-4,4.287,4.328-1.314,1.327-.006,4.238L16.115,19l1.317-1.33L18.748,19h.1V16.239l1.981-2V20a1,1,0,0,1-.99,1H3.99A1,1,0,0,1,3,20V4a1,1,0,0,1,.99-1ZM21.6,7.807,23,9.22,15.3,17l-1.4,0,0-1.412ZM15.381,7A1.5,1.5,0,1,1,13.9,8.5,1.493,1.493,0,0,1,15.381,7Z" transform="translate(-3 -3)"/>
                </svg>
                <div class="floors">
                    @foreach ($colors as $item)
                        <div class="floor" data-id="{{ $item->id }}">
                            <div class="image">
                                <img src="{{ asset($item->laminate->thumb ?? null) }}" alt="{{ $item->title }}">
                            </div>
                            <h3>{{ $item->laminate->title ?? null }}</h3>
                            <span>{{ $item->laminate->type ?? null }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </section>
@endsection

@section('scripts')
    @isset ($room)
        <script>
            let colors = {!! json_encode($colors->toArray()) !!};
            $('.floor').click(function () {
                let color_id = $(this).data('id');
                colors.forEach(color => {
                    if (color.id == color_id) {
                        $('#color-bg img').attr('src', location.protocol + '//' + location.host + '/' + color.image);
                    }
                });
            });
        </script>
    @endisset
    <script>
        $('.close').click(function () {
            location.href = $(this).data('url');
        });
    </script>
@endsection