@extends('layouts.public.base')

@section('page.title', 'Calculateur')

@php
    $calculatorItems = \App\Models\CalculatorItem::orderBy('title', 'asc')
        ->paginate(12)
        ->withQueryString();
    $search = request()['search'] ?? null;

    if (null != $search) {
        $calculatorItems = \App\Models\CalculatorItem::where('title', 'like', "%$search%")
            ->orderBy('title', 'asc')
            ->paginate(12)
            ->withQueryString();
    }

    if (null != ($categoryFilter = request()['category'])) {
        $calculatorItems = \App\Models\CalculatorItem::where('category', $categoryFilter)
            ->orderBy('title', 'asc')
            ->paginate(12)
            ->withQueryString();
    }
@endphp

@section('page.content')
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 md:pt-20 md:pb-20">
        <div class="lg:col-span-4 flex items-center uppercase font-serif overflow-x-auto">
            @include('components.public.calculator.category-link', [
                'label' => 'Tous',
            ])
            <span class="px-2">|</span>
            @include('components.public.calculator.category-link', [
                'category' => 'Cuisine',
            ])
            <span class="px-2">|</span>
            @include('components.public.calculator.category-link', [
                'category' => 'Salon - Salle à manger',
            ])
            <span class="px-2">|</span>
            @include('components.public.calculator.category-link', [
                'category' => 'Chambre',
            ])
            <span class="px-2">|</span>
            @include('components.public.calculator.category-link', [
                'category' => 'Autres',
            ])
        </div>

        <div id="calculator-grid" class="lg:col-span-3 grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8 mb-auto">
            <form class="col-span-2 md:col-span-4 w-full h-auto flex">
                <div class="relative w-full mr-2">
                    <input type="text" placeholder="Rechercher..." name="search"
                        class="px-3 py-1 rounded-lg bg-gray-50 shadow-sm w-full outline-none transition-all border border-transparent
                    focus:shadow-inner focus:border-lockit-blue"
                        value="{{ request()['search'] ?? null }}">
                    <a href="{{ route('calculateur') }}" @class([
                        'h-full flex items-center absolute top-0 right-2' => isset(
                            request()['search']),
                        'hidden' => !isset(request()['search']),
                    ])><i
                            class="bi bi-x-circle-fill flex"></i></a>
                </div>

                <button type="submit"
                    class="bg-lockit-blue/10 text-lockit-blue border border-lockit-blue rounded-lg px-3 text-center">Rechercher</button>
            </form>

            @forelse ($calculatorItems as $item)
                @include('components.public.calculator.item')
            @empty
                <p class="col-span-2 md:col-span-4 text-gray-400 text-center">Aucun résultat</p>
            @endforelse

            <div class="flex justify-center w-full col-span-2 md:col-span-4 mt-4">
                {{ $calculatorItems->links() }}
            </div>
        </div>

        <div class="h-full relative">
            <div class="sticky top-36 left-0 flex-col w-full h-auto p-6 rounded-3xl bg-lockit-blue/10">
                <h1 class="uppercase text-center text-lg">Votre liste</h1>
                <p class="text-center text-xs text-gray-500 uppercase tracking-widest">
                    {{ $calculator_session->items->count() ?? 0 }} Selectionnés</p>

                <div class="my-4 border border-lockit-blue/40 rounded-full"></div>

                @if ($calculator_session->items->count() <= 0)
                    <p class="calculator-list-placeholder text-gray-300 text-center">
                        Votre selection est vide.
                    </p>
                @else
                    <ul class="list-inside list-disc font-serif calculator-list">
                        @foreach ($calculator_session->items as $item)
                            <li class="truncate pl-1">{{ $item->item->title }}</li>
                        @endforeach
                    </ul>
                @endif

                <div class="my-4 border border-lockit-blue/40 rounded-full"></div>

                <div class="flex flex-col text-center items-center">
                    <p class="font-serif uppercase flex-wrap flex"><u class="mr-1">Volume</u> : <span
                            class="mx-1 calculator-total">{{ $calculator_session->total_tonnage }}</span> M³</p>

                    @include('components.public.buttons.get-a-quote-btn')
                </div>
            </div>
        </div>
    </div>
@endsection

@push('page.scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var scrollpos = localStorage.getItem('scrollpos');
            if (scrollpos) window.scrollTo(0, scrollpos);
        });

        window.onbeforeunload = function(e) {
            localStorage.setItem('scrollpos', window.scrollY);
        };
    </script>
@endpush