@extends('front.includes.master')
@if (\App::getLocale() == 'ar')
    <style>
        .page-header,
        .entry-main-content,
        .detail-info {
            direction: rtl;
            text-align: right;
        }

        .colsTable{
           /* margin-right: inherit*/
        }
        .spanHead{margin-right: 23px}
    </style>

    @else
    <style>
        .colsTable{
            /*margin-left: inherit*/
        }
    </style>
@endif
<style>
    .slick-slider .slick-track,
    .slick-slider .slick-list {
        height: fit-content;
    }

    td>p,
    td>h1,
    td>h2,
    td>h3,
    td>h4,
    td>h5,
    td>h6,
    td>blockquote,
    td>span,
    td>strong,
    td>em,
    td>small,
    td>mark,
    td>sub,
    td>sup,
    td>ul,
    td>ol,
    td>li,
    td>div,
    td>table,
    td>img,
    td>p>*,
    td>h1>*,
    td>h2>*,
    td>h3>*,
    td>h4>*,
    td>h5>*,
    td>h6>*,
    td>blockquote>*,
    td>span>*,
    td>div>*,
    td>ul>*,
    td>ul>li>*,
    td>ol>*,
    td>li>*, td span {
        background: #a6ce39 !important;
        --bs-table-accent-bg: #a6ce39 !important;

    }

    .faq h2 {
        margin-bottom: 30px;
    }

    .faq .faq-item {
        width: 100%;
        min-height: 60px;
        background: #FFFFFF;
        box-shadow: 0 4px 24px rgba(19, 46, 85, 0.1);
        border-radius: 8px;
        padding: 16px 25px;
        transition: all .1s ease-in-out;
        margin-bottom: 12px;
    }

    .faq-item .question {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        line-height: 28px;
    }

    .faq-item .question img.minus {
        display: none;
    }

    .faq .faq-item:hover {
        background: rgba(255, 255, 255, .5);
        cursor: pointer;
    }

    .faq-item .answer {
        display: none;
        padding-right: 20px;
    }

    .faq-item.opened .answer {
        display: block;
    }

    .faq-item.opened .question {
        margin-bottom: 12px;
    }

    .faq .btn.btn-more {
        width: 100%;
        height: 48px;
    }
</style>
<style>
    .d-flex {
        display: flex;
    }

    .table {
        width: 100%;
        /* Ensures tables take full width of the column */
    }



    .table th,
    .table td {
        vertical-align: middle;
        /* Center align content vertically */
    }
 .table td{    border: 4px solid #f5f5f5; background: #fff !important}
</style>
@section('main-content')
    <!-- Slider Area -->
    <div class="page-header breadcrumb-wrap" style="background: #fff">
        <div class="container">
            <div class="breadcrumb">
                <a href="{{ route('front') }}" rel="nofollow">{{ __('admin.web.Home') }}</a>
                <span></span> {{ __('admin.web.Products single') }}
            </div>
        </div>
    </div>
    @if (\App::getLocale() == 'en')
        @php
       
            $productname = $product->title_en;
            $category = $product->categories[0]->title_en;
            $summary = $product->summary_en;
            $desc = $product->content_en;
            $desc1 = $product->desc_en;
            $specif_desc = $product->specif_desc_en;
            $label = $product->label_en;
        @endphp
    @else
        @php
      
            $productname = $product->title;
            $category = $product->categories[0]->title;
            $summary = $product->summary;
            $desc = $product->description;
            $desc1 = $product->desc;
            $specif_desc = $product->specif_desc;
            $label = $product->label;

        @endphp
    @endif

    <section class="mt-50 mb-50">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="product-detail accordion-detail">
                        <div class="row mb-50">
                            <div class="col-md-6 col-sm-12 col-xs-12">
                                <div class="detail-gallery">
                                    <span class="zoom-icon"><i class="fi-rs-search"></i></span>
                                    <!-- MAIN SLIDES -->
                                    <div class="product-image-slider">
                                        @if (!is_null($product->photo))
                                            <figure class="border-radius-10">
                                                <img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo) }}"
                                                    alt="product image">
                                            </figure>
                                        @endif
                                        @if (!is_null($product->photo2))
                                            <figure class="border-radius-10">
                                                <img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo2) }}"
                                                    alt="product image">
                                            </figure>
                                        @endif
                                        @if (!is_null($product->photo3))
                                            <figure class="border-radius-10">
                                                <img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo3) }}"
                                                    alt="product image">
                                            </figure>
                                        @endif
                                        @if (!is_null($product->photo4))
                                            <figure class="border-radius-10">
                                                <img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo4) }}"
                                                    alt="product image">
                                            </figure>
                                        @endif
                                        @if (!is_null($product->photo5))
                                            <figure class="border-radius-10">
                                                <img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo5) }}"
                                                    alt="product image">
                                            </figure>
                                        @endif

                                    </div>
                                    <!-- THUMBNAILS -->
                                    <div class="slider-nav-thumbnails pl-15 pr-15">
                                        @if (!is_null($product->photo))
                                            <div><img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo) }}"
                                                    alt="product image"></div>
                                        @endif
                                        @if (!is_null($product->photo2))
                                            <div><img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo2) }}"
                                                    alt="product image"></div>
                                        @endif
                                        @if (!is_null($product->photo3))
                                            <div><img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo3) }}"
                                                    alt="product image"></div>
                                        @endif
                                        @if (!is_null($product->photo4))
                                            <div><img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo4) }}"
                                                    alt="product image"></div>
                                        @endif
                                        @if (!is_null($product->photo5))
                                            <div><img loading="lazy" style="background:#ececec"
                                                    src="{{ URL(env('STORAGE_IMAGES') . @$product->photo5) }}"
                                                    alt="product image"></div>
                                        @endif
                                    </div>
                                </div>
                                <!-- End Gallery -->
                            </div>
                            <div class="col-md-6 col-sm-12 col-xs-12" style="background: #f5f5f5">
                                <div class="detail-info" >

                                    <div class="pro-details-brand mb-2 mt-2" style="color: #004988; display: flex; align-items: center;">
                                        <h1 class="title-detail" style="color: #004988; font-weight: bold; margin-right: 15px;font-size:40px">
                                            {{ $desc1 }}
                                        </h1>
                                        @if(!is_null($label))
                                        <span class="spanHead" style="border: 2px solid #a6ce39;border-radius: 50px;padding: 0px 19px;color: #ffffff;background: #a6ce39;font-weight: 600;">
                                            {{$label}}
                                        </span>
                                        @endif
                                    </div>

                                    
                                    <h2 class="title-detail mb-2 h2" style="color: #004988;font-weight: bold;font-size: 24px;">{{ $productname }}</h2>
                                 
                                    <div class="pro-details-brand mb-3" style="color: #004988;">
                                        <span style="font-size: 17px;"> {{ $specif_desc }}</span>
                                    </div>
                                    <table class="table" style="table-layout: fixed; width: 100%;">
                                        <thead>
                                            <tr style="height: 48px;">
                                                <th scope="col" style="color: #004988;border: none;border-top:1.5px solid #fff;font-size: 18px;"> {{ __('admin.web.Lenght') }}</th>
                                           
                                                <th scope="col" style="color: #004988;border: none;border-top:1.5px solid #fff;font-size: 18px;"> {{ $product->lenght1 }}
                                                    @if(!is_null($product->lenght2))
                                                    / {{ $product->lenght2 }}
                                                    @endif
                                                    @if(!is_null($product->lenght3))
                                                    / {{ $product->lenght3 }}
                                                    @endif
                                                    @if(!is_null($product->lenght4))
                                                    / {{ $product->lenght4 }}
                                                    @endif</th>
                                            </tr>
                                            <tr style="height: 48px;">
                                                <th scope="col" style="color: #004988;border: none;border-top:1.5px solid #fff;font-size: 18px;"> {{ __('admin.web.Color') }}</th>
                                           @php
                                               $colorsArray=[$product->color1,$product->color2,$product->color3,$product->color4,$product->color5];
                                               $uniqueColorsArray = array_unique($colorsArray)
                                         @endphp
                                                <th scope="col" style="border: none; border-top: 1.5px solid #fff; font-size: 18px;">
                                                   
                                                   @foreach ($uniqueColorsArray as $color )
                                                    <div style="display: inline-block; width: 30px; height: 30px; border-radius: 50%; background-color: {{ $color }}; margin-right: 5px;"></div>
                                                    @endforeach
                                                </th>
                                            </tr>
                                            <tr style="height: 48px;">
                                           
                                                <th scope="col" style="color: #004988;    border: none;border-top:1.5px solid #fff;"></th>
                                                <th scope="col" style="color: #004988;    border: none;border-top:1.5px solid #fff;"></th>
                                            </tr>
                                           
                                        </thead>
                                      
                                    </table>
                                    @php
                                        $properties = \DB::table('product_properties')
                                            ->where('product_id', $product->id)
                                            ->get();
                                        $cert = json_decode($product->certification) ?? [];

                                    @endphp
                                   
                                    <div class=" d-flex " style="margin-top: -9px">
                                        <div class="col-6">
                                                <table class="table">
                                                    <thead>
                                                        <tr>
                                                            <th scope="col" style="background: #004988; color: #fff; border-right: 4px solid #f5f5f5; ">
                                                                {{ __('admin.web.Product Name') }}
                                                            </th>
                                                            <th scope="col" style="background: #004988; color: #fff; border-right: 4px solid #f5f5f5;">
                                                                {{ __('admin.web.Electric Parameters') }}
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @if ($properties->count() > 0)
                                                            @foreach ($properties as $index => $property)
                                                                <tr>
                                                                    <td class="dynamic-height2" style="font-weight: bold">
                                                                        @if (\App::getLocale() == 'en')
                                                                            {{ $property->prop_name_en }}:
                                                                        @else
                                                                            {{ $property->prop_name }}:
                                                                        @endif
                                                                    </td>
                                                                    <td class="dynamic-height">
                                                                        @if (\App::getLocale() == 'en')
                                                                            {{ $property->prop_value_en }}
                                                                        @else
                                                                            {{ $property->prop_value }}
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        @else
                                                            <tr>
                                                                    <td class="dynamic-height2" style="font-weight: bold">
                                                                  
                                                                    </td>
                                                                    <td class="dynamic-height">
                                                                     
                                                                    </td>
                                                                </tr>
                                                        @endif
                                                    </tbody>
                                                </table>
                                        </div>
                                      
                                        <div class="col-6 colsTable" >
@php
if (\App::getLocale() == 'en'){
    $fetures = \DB::table('product_features')
                                ->where('product_id', $product->id)->select('prop_name_en')
                                ->pluck('prop_name_en')
                                ;
}else{
    $fetures = \DB::table('product_features')
                                ->where('product_id', $product->id)->select('prop_name')
                                ->pluck('prop_name')
                               ;
}
 
@endphp
                                            <table 
                                            class="table table-striped Features">
                                                <thead>
                                                    <tr style="    background: #004988; color: #fff;">

                                                        <th scope="col">{{ __('admin.web.Product Features') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td
                                                            style="background: #a6ce39; box-shadow:inset 0 0 0 9999px #a6ce39 !important;    font-weight: bold; ">
                                                            <ul style="    font-size: 12px;list-style: inside;min-height: 150px">
                                                            @foreach ($fetures as $feature )
                                                           
                                                            <li>{{$feature}}</li>
                                                          
                                                           @endforeach
                                                        </ul>
                                                        </td>
                                                    </tr>
                                                    <tr>

                                                        <td style="text-align: center;background:#f5f5f5 !important"  >

                                                            @if (count($cert) > 0)
                                                            <h4 class="mb-2" style="color:#004b88;background:#f5f5f5 !important" > {{ __('admin.web.Certification') }}</h4>
                                                                @foreach ($cert as $certification)
                                                                    @if ($certification === 'CE')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a11.png') }}"
                                                                            alt="CE" style="width: 20%;height: 20%;    border-radius: 30px">
                                                                    @elseif ($certification === 'FC')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a12.png') }}"
                                                                            alt="CE" style="width: 20%;height: 20%;    border-radius: 30px">
                                                                    @elseif ($certification === 'RoHS')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a3.png') }}"
                                                                            alt="CE" style="width: 20%;height: 20%;    border-radius: 30px">
                                                                    @elseif ($certification === 'REACH')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a4.png') }}"
                                                                            alt="CE"
                                                                            style="width: 20%;height: 20%;    border-radius: 30px">
                                                                    @elseif ($certification === 'UKCA')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a5.png') }}"
                                                                            alt="CE"
                                                                            style="width: 20%;height: 20%;    border-radius: 30px">
                                                                    @elseif ($certification === 'CB')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a6.png') }}"
                                                                            alt="CE"
                                                                            style="width: 20%;height: 20%;    border-radius: 30px">
                                                                    @endif
                                                                @endforeach
                                                            @endif
                                                        </td>
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                    <div class="bt-1 border-color-1 mt-30 mb-30"></div>

                                </div>
                                <!-- Detail Info -->
                            </div>
                        </div>

                        @php
                            $questions = \DB::table('product_questions')
                                ->where('product_id', $product->id)
                                ->get();

                        @endphp

                        @if ($questions->count() > 0)
                            <div class="row faq">
                                <div class="col-lg-10 m-auto entry-main-content">
                                    <h2 class="section-title style-1 mb-30">{{ __('admin.web.common questions') }}</h2>
                                    <div class="row">
                                        <div class="col-md-10">
                                            @foreach ($questions as $questione)
                                                @php

                                                    if (\App::getLocale() == 'en') {
                                                        $question = $questione->prop_name_en;
                                                        $answer = $questione->prop_value_en;
                                                    } else {
                                                        $question = $questione->prop_name;
                                                        $answer = $questione->prop_value;
                                                    }

                                                @endphp
                                                <div class="faq-item">
                                                    <div class="question">
                                                        <img class="plus ml-1" src="{{ URL('front/plus.png') }}"
                                                            alt="" style="width: 2%;">
                                                        <img class="minus ml-1" src="{{ URL('front/minus.png') }}"
                                                            alt="" style="width: 2%;">
                                                        <span>{{ $question }}</span>
                                                    </div>
                                                    <div class="answer">
                                                        {{ $answer }}
                                                    </div>
                                                </div>
                                            @endforeach


                                            <!--div class="hidden-faq" style="display: none">
                                                    <div class="faq-item">
                                                        <div class="question">
                                                            <img class="plus ml-1" src="{{ URL('front/plus.png') }}" alt=""  style="width: 2%;">
                                                            <img class="minus ml-1" src="{{ URL('front/minus.png') }}" alt=""  style="width: 2%;">
                                                        </div>
                                                        <div class="answer">
                                                        </div>
                                                    </div>
                                                  
                                                </!--div-->
                                            <!--div class="d-flex justify-content-center">
                                                    <button class="btn btn-blue btn-show-more-faq">إظهار المزيد</button>
                                                </!--div-->
                                        </div>

                                    </div>

                                </div>
                            </div>
                        @endif
                        <div class="row mt-60">
                            <div class="col-12">
                                <h3 class="section-title style-1 mb-30">{{ __('admin.web.Related Products') }}</h3>
                            </div>
                            <div class="col-12">
                                <div class="row related-products">
                                    @foreach ($relatedProducts as $product)
                                        <div class="col-lg-3 col-md-4 col-12 col-sm-6">
                                            <div class="product-cart-wrap small hover-up">
                                                <div class="product-img-action-wrap">
                                                    <div class="product-img product-img-zoom">
                                                        <a href="{{ route('front.single-product', $product->id) }}"
                                                            tabindex="0">
                                                            <img loading="lazy" class="default-img"
                                                                style="background: #ececec;"
                                                                src="{{ URL(env('STORAGE_IMAGES') . @$product->photo) }}"
                                                                alt="">
                                                            <img loading="lazy" class="hover-img"
                                                                style="background: #ececec;"
                                                                src="{{ URL(env('STORAGE_IMAGES') . @$product->photo2) }}"
                                                                alt="">
                                                        </a>
                                                    </div>


                                                </div>
                                                <div class="product-content-wrap">
                                                    <h2><a href="{{ route('front.single-product', $product->id) }}"
                                                            tabindex="0">
                                                            @if (\App::getLocale() == 'en')
                                                                {{ $product->title_en }}
                                                            @else
                                                                {{ $product->title }}
                                                            @endif
                                                        </a></h2>

                                                    <div class="product-price">
                                                        <span>{{ $product->price }} </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

$(document).ready(function() {
            // Function to calculate and set heights
            $('.dynamic-height').each(function() {
               /* const words = $(this).text().trim().split(/\s+/).length; // Count words
                const lineHeight = parseInt($(this).css('line-height'), 10) || 20; // Default line height
                const padding = parseInt($(this).css('padding-top'), 20) + parseInt($(this).css('padding-bottom'), 20);
                const height = (words > 0 ? Math.ceil(words / 5) * lineHeight : lineHeight) + padding ; // Adjust as needed
console.log(height);
const height2=height+30;*/
//const height=40;
//const height2=60;
              //  $(this).css('height', height + 'px'); // Set calculated height
                 // Apply the same height to the corresponding dynamic-height2 element
                // $('.dynamic-height2').css('height', height2 + 'px');
            });
        });


        document.addEventListener("DOMContentLoaded", function() {
            const tables = document.querySelectorAll('.Features');

            // Get rows from both tables
            const rows1 = tables[0].querySelectorAll('tr');
            const rows2 = tables[1].querySelectorAll('tr');

            // Iterate through rows
            for (let i = 0; i < Math.max(rows1.length, rows2.length); i++) {
                const height1 = rows1[i] ? rows1[i].offsetHeight : 0;
                const height2 = rows2[i] ? rows2[i].offsetHeight : 0;
                const maxHeight = Math.max(height1, height2);

                if (rows1[i]) rows1[i].style.height = maxHeight + 'px';
                if (rows2[i]) rows2[i].style.height = maxHeight + 'px';
            }
        });
    </script>
@endsection