@extends('front.includes.master')
@if (\App::getLocale() == 'ar')
    <style>
        .page-header,
        .entry-main-content,
        .detail-info {
            direction: rtl;
            text-align: right;
        }
    </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>* {
        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 */
    }
</style>
@section('main-content')
    <!-- Slider Area -->
    <div class="page-header breadcrumb-wrap">
        <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;
        @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;

        @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">
                                <div class="detail-info">
                                    <h1 class="title-detail">{{ $desc1 }}</h1>
                                    <h2 class="title-detail">{{ $productname }}</h2>
                                    <div class="product-detail-rating">
                                        <div class="pro-details-brand">
                                            <span> {{ __('admin.web.Category') }} <a
                                                    href="#">{{ $category }}</a></span>
                                        </div>
                                    </div>
                                    <div class="pro-details-brand">
                                        <span> {{ $specif_desc }}</span>
                                    </div>

                                    @php
                                        $properties = \DB::table('product_properties')
                                            ->where('product_id', $product->id)
                                            ->get();
                                        $cert = json_decode($product->certification) ?? [];

                                    @endphp
                                   
                                    <div class="row d-flex">
                                        <div class="col-4">
                                            <table class="table">
                                                <thead>
                                                    <tr>
                                                        <th scope="col" style="    background: #004988; color: #fff;">
                                                            {{ __('admin.web.Product Name') }}</th>

                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if ($properties->count() > 0)
                                                        @foreach ($properties as $index => $property)
                                                            <tr>
                                                                <td style="font-weight: bold">

                                                                    @if (\App::getLocale() == 'en')
                                                                        {{ $property->prop_name_en }}:
                                                                    @else
                                                                        {{ $property->prop_name }}:
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-4">
                                            <table class="table">
                                                <thead>
                                                    <tr>

                                                        <th scope="col" style="    background: #004988; color: #fff;">
                                                            {{ __('admin.web.Electric Parameters') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @if ($properties->count() > 0)
                                                        @foreach ($properties as $index => $property)
                                                            <tr>
                                                                <td>
                                                                    @if (\App::getLocale() == 'en')
                                                                        {{ $property->prop_value_en }}
                                                                    @else
                                                                        {{ $property->prop_value }}
                                                                    @endif
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    @endif

                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="col-4">

                                            <table class="table table-striped">
                                                <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; ">
                                                            {!! $summary !!}
                                                        </td>
                                                    </tr>
                                                    <tr>

                                                        <td style="text-align: center;">

                                                            @if (count($cert) > 0)
                                                                @foreach ($cert as $certification)
                                                                    @if ($certification === 'CE')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a1.png') }}"
                                                                            alt="CE" style="width: 23%;height: 23%;">
                                                                    @elseif ($certification === 'FC')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a2.png') }}"
                                                                            alt="CE" style="width: 23%;height: 23%;">
                                                                    @elseif ($certification === 'RoHS')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a3.png') }}"
                                                                            alt="CE" style="width: 23%;height: 23%;">
                                                                    @elseif ($certification === 'REACH')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a4.png') }}"
                                                                            alt="CE"
                                                                            style="width: 23%;height: 23%;">
                                                                    @elseif ($certification === 'UKCA')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a5.png') }}"
                                                                            alt="CE"
                                                                            style="width: 23%;height: 23%;">
                                                                    @elseif ($certification === 'CB')
                                                                        <img loading="lazy"
                                                                            src="{{ asset('front/a6.png') }}"
                                                                            alt="CE"
                                                                            style="width: 23%;height: 23%;">
                                                                    @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>
        document.addEventListener("DOMContentLoaded", function() {
            const tables = document.querySelectorAll('.table');

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