@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>

                    @if ($calculator_session->items->count() > 0)
                        <a href="{{ route('contact') }}" class="px-3 py-1 text-center w-full md:w-auto lg:w-full rounded-full bg-lockit-orange text-white font-serif mt-4 mx-auto" target="_blank" rel="noopener noreferrer" >Obtenir un devis</a>
                    @endif

                    <a href="https://lockit-dev.gotomyspace.online/onlineContract" class="px-3 py-1 text-center w-full md:w-auto lg:w-full rounded-lg text-lockit-orange bg-white border-2 border-lockit-orange font-serif mt-4 mx-auto hover:bg-lockit-orange hover:text-white transition" target="_blank" rel="noopener noreferrer" >Louer mon box en ligne</a>
                </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