@extends('frontend.layouts.products-app')

@section('title')
Product Comparison
@endsection

@section('seo')

@endsection

@section('content')

<div class="container mt-5">
    <h3 class="fw-bold">Product Comparison</h3>
    <img src="{{ asset('img/bar-line.png') }}" class="img-fluid mb-2" alt="">
    <p><span class="fw-bold">Colored</span> product information below indicates the unique differences among the products being compared.</p>

</div>


<div class="container mt-2 mb-2">
    <a href="{{ url('/shop') }}" class="text-decoration-none">
        <i class="fa-solid fa-arrow-turn-up fa-rotate-270 text-danger"></i>&emsp;<span class="prev text-danger text-decoration-underline text-font">Back to Shop</span>
    </a>
</div>


<div class="card-body w-100 overflow-auto mb-5">

    <div class="container">
        <div class="row gx-0 gy-3 row-cols-1 row-cols-sm-3 row-cols-md-6 row-cols-lg-6 overflow-auto row-width"> <!-- style="width: 100svh;" -->
         
            <div class="col-12 col-sm-12 col-md-3 col-lg-3 d-md-block d-none">
                @if(session('compare'))
                @php 
                $details = current(session('compare')); // Get the first item in the session 
                $typeProd = $details['product']['typeProd'];
                @endphp
                @if($typeProd === 'Safe' || $typeProd === 'Accessories')
                       <style>
                            button.bg-light {
                                height: 89rem;
                            }
                       </style>
                <div class="bg-ight border">
                    <div class="d-flex justify-content-center align-items-center bg-light" style="height: 410px;"><!-- style="height: 501px;" -->
                        <h4 class="fw-bold">TYPE  </h4>
                    </div>
                    <hr class="mt-0">
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 77px;" -->
                        <h6 class="fw-bold">PRICE</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">FIRE RATING</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">SECURITY LEVEL</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">WATER RATING</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">SPECIFIC LOCK TYPE</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">CAPACITY</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">WEIGHT</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 82px;" -->
                        <h6 class="fw-bold">DIMENSIONS (HxWxD)</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 40px;" -->
                        <h6 class="fw-bold">ACCESSORIES INCLUDED</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 82px;" -->
                        <h6 class="fw-bold">WARRANTY & GUARANTEE</h6>
                    </div>
                    {{-- <hr> --}}
                </div>
                @else
                <div class="bg-ight border">
                    <div class="d-flex justify-content-center align-items-center bg-light" style="height: 410px;"><!-- style="height: 501px;" -->
                        <h4 class="fw-bold">TYPE</h4>
                    </div>
                    <hr class="mt-0">
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 77px;" -->
                        <h6 class="fw-bold">PRICE</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">SIZE</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">CONNECTION TYPE</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">TYPE OF BATTERIES</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div"><!-- style="height: 82px;" -->
                        <h6 class="fw-bold">DIMENSIONS (LxWxH)</h6>
                    </div>
                    <hr>
                    <div class="d-flex align-items-center px-5 dynamic-content-div" ><!-- style="height: 56px;" -->
                        <h6 class="fw-bold">WEIGHT</h6>
                    </div>
                    
                </div>
                @endif
                @endif
            </div>

          


            @if(session('compare'))
            @foreach(session('compare') as $prodId => $details)
            @if($details['product']['typeProd'] === 'Safe'  || $details['product']['typeProd'] === 'Accessories')
            <div class="col-4 col-sm-3 col-md-3 col-lg-3"><!-- col-3 col-sm-3 col-md-3 col-lg-3 -->

                <div class="bg-ight border items">

                    <div class="text-end pe-3 pt-3 bg-light">
                        <a href="{{ url('compare/' . $prodId) }}/edit" class="text-danger">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>

                    <div class="p-2 text-center bg-light model-type"><!-- style="height: 461px;" -->
                        <!--<span>Type</span> -->
                        <br>
                        <div class="position-relative">
                            <img class="img-fluid" src="{{ asset('uploads/product/' . $details['product']['thumbnail_image']) }}" alt="">
                            <div class="position-absolute translate-middle start-50 top-100">
                                <p class="text-red fw-bold">{{$details['product']['model']}}</p>
                            </div>
                        </div>
                    </div>

                    <hr class="mt-0">
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>PRICE</span> <br>-->
                         <p class="text-red mb-0 px-1">{{ !empty($details['product']['price']) ? number_format($details['product']['price'], 2) : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>FIRE RATING</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['spec']['fireRating']) ? $details['spec']['fireRating'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>SECURITY LEVEL</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['spec']['security']) ? $details['spec']['security'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>WATER RATING</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['spec']['waterRating']) ? $details['spec']['waterRating'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>SPECIFIC LOCK TYPE</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['spec']['specTypelock']) ? $details['spec']['specTypelock'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>CAPACITY, cu.ft.</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['spec']['capacityCft']) ? $details['spec']['capacityCft'] . ' cu.ft' : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>WEIGHT, kg</span> <br>-->
                        <p class="text-red mb-0 px-1">{{ !empty($details['spec']['weightKg']) ? $details['spec']['weightKg'] . ' kg/s' : 'N/A' }}</p>
                    </div>
                    <hr>
                    <!-- <div class=" text-center fixed-height-div">
                        <span>DIMENSIONS (LxWxH), inches</span> <br>
                        <p class="m-0">Internal Dimention {{$details['spec']['internalHi']}} x {{$details['spec']['internalWi']}} x {{$details['spec']['internalDi']}}</p>
                        <p class="m-0">Exteranl Dimention {{$details['spec']['externalHi']}} x {{$details['spec']['externalWi']}} x {{$details['spec']['externalDi']}}</p>
                    </div> -->
                    <div class=" text-center dynamic-content-div d-flex align-items-center justify-content-center">
                        <div class="scrollable-content">
                            <!--<span>DIMENSIONS (LxWxH), inches</span> <br>-->
                            <p class="mb-0 px-1">Internal Dimension {{ !empty($details['spec']['externalHi']) ? $details['spec']['externalHi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['externalWi']) ? $details['spec']['externalWi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['externalDi']) ? $details['spec']['externalDi']. ' in' : 'N/A' }}</p>
                            <p class="mb-0 px-1">External Dimension {{ !empty($details['spec']['internalHi']) ? $details['spec']['internalHi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['internalWi']) ? $details['spec']['internalWi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['internalDi']) ? $details['spec']['internalDi'] . ' in' : 'N/A' }}</p>
                        </div>
                    </div>


                    <hr>
                    <div class=" text-center dynamic-content-div d-flex align-items-center justify-content-center" style="height: 45px;">
                        <!--<span>ACCESSIRUES INCLUDED</span> <br>-->
                        <p class="mb-0">{{ !empty($details['product']['accessorie']) ? $details['product']['accessorie'] : 'N/A' }}</p>
                        <!--<p class="text-red">{{ !empty($details['spec']['capacityCft']) ? $details['spec']['capacityCft'] : 'N/A' }}</p>-->
                    </div>
                    <hr>
                    <!-- <div class=" text-center fixed-height-div">
                        <span>WARRANTY & GUARANTEE</span> <br>
                        <p >{{$details['product']['waranty']}}</p>
                    </div> -->
                    <div class="text-center dynamic-content-div d-flex align-items-center justify-content-center">
                        <div class="scrollable-content">
                            <!--<span>WARRANTY & GUARANTEE</span> <br>-->
                            <p class="mb-0">{{ !empty($details['product']['waranty']) ? $details['product']['waranty'] : 'N/A' }}</p>
                        </div>
                    </div>


                </div>
            </div>
            @else
            <div class="col-4 col-sm-3 col-md-3 col-lg-3"><!-- col-3 col-sm-3 col-md-3 col-lg-3 -->

                <div class="bg-ight border items">

                    <div class="text-end pe-3 pt-3 bg-light">
                        <a href="{{ url('compare/' . $prodId) }}/edit" class="text-danger">
                            <i class="fas fa-times"></i>
                        </a>
                    </div>

                    <div class="p-2 text-center bg-light model-type"><!-- style="height: 461px;" -->
                        <!--<span>Type</span> -->
                        <br>
                        <div class="position-relative">
                            <img class="img-fluid" src="{{ asset('uploads/product/' . $details['product']['thumbnail_image']) }}" alt="">
                            <div class="position-absolute translate-middle start-50 top-100">
                                <p class="text-red fw-bold">{{$details['product']['model']}}</p>
                            </div>
                        </div>
                    </div>

                    <hr class="mt-0">
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>PRICE</span> <br>-->
                         <p class="text-red mb-0 px-1">{{ !empty($details['product']['price']) ? number_format($details['product']['price'],2) : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>SIZE</span> <br>-->
                        <p class="mb-0">{{ !empty($details['product']['size']) ? $details['product']['size'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center dynamic-content-div fixed-height-div d-flex align-items-center justify-content-center" >
                        <!--<span>CONNECTION TYPE</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['product']['connType']) ? $details['product']['connType'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center fixed-height-div d-flex align-items-center justify-content-center">
                        <!--<span>TYPE OF BATTERIES</span> <br>-->
                        <p class="mb-0 px-1">{{ !empty($details['product']['typeBatt']) ? $details['product']['typeBatt'] : 'N/A' }}</p>
                    </div>
                    <hr>
                    <div class=" text-center dynamic-content-div d-flex align-items-center justify-content-center">
                        <div class="scrollable-content">
                            <!--<span>DIMENSIONS (LxWxH), inches</span> <br>-->
                            <p class="mb-0 px-1">Internal Dimension {{ !empty($details['spec']['internalHi']) ? $details['spec']['internalHi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['internalWi']) ? $details['spec']['internalWi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['internalDi']) ? $details['spec']['internalDi'] . ' in' : 'N/A' }}</p>
                            <p class="mb-0 px-1">External Dimension {{ !empty($details['spec']['externalHi']) ? $details['spec']['externalHi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['externalWi']) ? $details['spec']['externalWi'] . ' in' : 'N/A' }} x {{ !empty($details['spec']['externalDi']) ? $details['spec']['externalDi']. ' in' : 'N/A' }}</p>
                        </div>
                    </div>
                    <hr>
                    <div class="text-center dynamic-content-div d-flex align-items-center justify-content-center">
                        <!--<span>WEIGHT, kg</span> <br>-->
                        <p class="text-red mb-0 px-1">{{ !empty($details['spec']['weightKg']) ? $details['spec']['weightKg'] . ' kg/s' : 'N/A' }}</p>
                    </div>
    


                </div>
            </div>
            @endif

            @endforeach
            @endif

            @if(count(session('compare')) < 3) 
            <div class="col-3 col-sm-12 col-md-3 col-lg-3"><!--  col-6 -->
                <button onclick="location.href='{{ url('shop') }}'" class="bg-light p-5" style="border:none;"><!--  height: 91rem; -->
                    <i class="fa-solid fa-plus" style="color: #ff0000;"></i><br>Add a product to compare
                </button>


                {{-- <div class="bg-ight border bg-light">

                <div class="d-flex justify-content-center align-items-center" style="height: 501px;">
                    <h4 class="fw-bold">TYPE</h4>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 77px;">
                    <h6 class="fw-bold">MODEL</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 77px;">
                    <h6 class="fw-bold">PRICE</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 56px;">
                    <h6 class="fw-bold">FIRE RATING</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 56px;">
                    <h6 class="fw-bold">SECURITY LEVEL</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 56px;">
                    <h6 class="fw-bold">WATER RATING</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 56px;">
                    <h6 class="fw-bold">SPECIFIC LOCK TYPE</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 56px;">
                    <h6 class="fw-bold">CAPACITY</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 56px;">
                    <h6 class="fw-bold">WEIGHT</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 82px;">
                    <h6 class="fw-bold">DIMENSIONS (LxWxH)</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 40px;">
                    <h6 class="fw-bold">ACCESSORIES INCLUDED</h6>
                </div>
                <hr>
                <div class="d-flex align-items-center px-5" style="height: 82px;">
                    <h6 class="fw-bold">WARRANTY & GUARANTEE</h6>
                </div>
                <hr>
            </div> --}}
        </div>
        <style>
        button.bg-light {
            height: 63rem;
        }
         </style>
        @endif

        {{-- @if(count(session('compare')) < 3)
        <button onclick="location.href='{{ url('shop') }}'" class="bg-light" style="border:none">
        <i class="fa-solid fa-plus" style="color: #ff0000;"></i><br>Add a product to compare
        </button>
        @endif --}}
        
       

    </div>

</div>

@if(count(session('compare')) == 0)
<script>
    window.location.href = "{{ url('/guidedComparison') }}";
</script>
@endif

<div>

</div>

<style>
    .equal-height {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .dynamic-content-div .scrollable-content {
        max-height: 100%;
        /* Adjust this height as needed */
        overflow-y: auto;
       
    }
    
    .dynamic-content-div{
        height:70px !important;
    }
    .fixed-height-div{
        height:70px !important;
    }

    .model-type {
        height: 370px;
    }

    

    @media (max-width: 768px) {
        .row.row-width {
            width: 75vh;
        }

        .model-type {
            height: auto;
        }

        button.bg-light {
            height: 69rem;
            width: 10rem;
        }
    }
</style>

<script>
    $(document).ready(function() {
        // Get the height of the fixed-height div
        var fixedHeight = $('.fixed-height-div').height();

        // Set the height of the dynamic-content-div to match the fixed height
        $('.dynamic-content-div').height(fixedHeight);
    });
</script>

<script>
    $(document).ready(function() {
        // Get the height of the fixed-height div
        var fixedHeight2 = $('.fixed-button-height').height();

        // Set the height of the dynamic-content-div to match the fixed height
        $('.dynamic-height-div').height(fixedHeight2);
    });
</script>

@endsection