@extends('Client.layouts.layout')
@section('title', $Product->title() )
@if($Product?->desc())
    @section('desc', strip_tags($Product?->desc()) )
@endif
@section('content')

    @php($Category = $Product->Categories()->first())
    <div class="container">
        <div class="row my-5">
            <div class="col-12">
                <ul class="breadcrumb wizard">
                  <li class="completed">
                      <a href="{{ route('client.home') }}">
                          <h2 style="font-size: 13px;color: #fff !important;padding: 4px !important;margin: 0px !important;">
                              {{ __('trans.home')  }}
                          </h2>
                      </a>
                  </li>
                  <li class="completed">
                      <a href="{{ route('client.categories',['title'=>str_replace(' ', '-', $Category->title())]) }}">
                          <h2 style="font-size: 13px;color: #fff !important;padding: 4px !important;margin: 0px !important;">
                              {{ $Category->title() }}
                          </h2>
                      </a>
                  </li>
                  <li class="not-completed">
                      <a href="javascript:void(0);">
                          <h1 style="font-size: 13px;color: #fff !important;padding: 4px !important;margin: 0px !important;">
                              {{ $Product->title()  }}
                          </h1>
                      </a>
                  </li>
                </ul>
            </div>
            <div class="col-md-6">
                <div class="row">
                    @if ($Product->Images->count())
                        <div class="col-2" style="height: 500px;overflow-y: scroll;">
                            @foreach ($Product->Images->sortBy('arrangement') as $ImageItem)
                                <div style="height: 65px; margin: 10px 0px; overflow: hidden;" data-bs-target="#ProductImage" data-bs-slide-to="{{ $loop->index }}" @if ($loop->first) class="active" aria-current="true" @endif aria-label="Image {{ $loop->iteration }}">
                                    <img src="{{ asset($ImageItem->image ?? setting('logo')) }}" class="d-block w-100" alt="Image">
                                </div>
                            @endforeach
                        </div>
                        <div class="col-10">
                            <div id="ProductImage" class="carousel slide">
                                @if($Product->Images->count() > 1)
                                <div class="carousel-indicators">
                                    @foreach ($Product->Images as $ImageItem)
                                        <button type="button" data-bs-target="#ProductImage" data-bs-slide-to="{{ $loop->index }}" @if ($loop->first) class="active" aria-current="true" @endif aria-label="Image {{ $loop->iteration }}"></button>
                                    @endforeach
                                </div>
                                @endif
                                <div class="carousel-inner">
                                    @foreach ($Product->Images->sortBy('arrangement') as $ImageItem)
                                        <div  class="carousel-item position-relative {{ $loop->first ? 'active' : '' }}">
                                            <div style="height: 500px;" class=" d-flex align-items-center justify-content-center">
                                                <img data-fancybox="gallery" data-caption="Image #{{ $loop->iteration }}" src="{{ asset($ImageItem->image ?? setting('logo')) }}" style="    max-width: 100%;" class="d-block" alt="Image">
                                            </div>
                                            @if ($Product->HasDiscount()) 
                                                <h6 class="vc">{{ number_format($Product->discount,0) }}%</h6>
                                            @endif
                                        </div>
                                    @endforeach
                                </div>
                                @if($Product->Images->count() > 1)
                                    <button class="carousel-control-prev" type="button" data-bs-target="#ProductImage" data-bs-slide="prev">
                                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    </button>
                                    <button class="carousel-control-next" type="button" data-bs-target="#ProductImage" data-bs-slide="next">
                                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @else
                        <img src="{{ asset(setting('logo')) }}" class="d-block w-100" alt="Image">
                    @endif
                </div>
            </div>
            <div class="col-md-6 d-flex align-items-center py-4">
                <div class="w-100">
                    <h4>{{ $Product->title() }}</h4>
                    <div class="my-2" id="tabby"></div>
                    <div id="tamara-widget-container">
                        <tamara-widget type="tamara-summary" amount="350" inline-type="2" inline-variant="outlined" config='{"badgePosition":"right","showExtraContent":""}'></tamara-widget>
                    </div>
                    <h6>{{ $Product->kCal ? $Product->kCal . ' ' . __('trans.kCal') : '' }}</h6>
                    <div>
                        {!! $Product->desc() !!}
                    </div>

                    <div class="modal-body">
                        <form action="{{ route('client.addToCart',$Product) }}" method="post"  id="add-to-cart">
                            @csrf
                            <input type="hidden" value="{{ $Product->id }}" name="product_id" id="product_id">
                            <div class="container row my-4 px-4">
                                
                                @if($Product->Colors->count())
                                    <div class="mt-3 product-color  @if($Product->Colors->count() == 1) d-none @endif">
                                        <h6 class="mb-1 text-primary fw-semibold">@lang('trans.color')</h6>
                                        <div class="color-choose mt-3">
                                            @foreach($Product->Colors as $Color)
                                                <div>
                                                    <input data-image="{{ $Color->title() }}" type="radio" id="{{ $Color->title() }}" @checked($loop->first) name="color_id" value="{{ $Color->id }}">
                                                    <label for="{{ $Color->title() }}"><span style="background-color: {{ $Color->hexa }};"></span></label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            
                                @if($Product->Sizes->count())
                                    <div class="mt-3 @if($Product->Sizes->count() == 1) d-none @endif">
                                        <h6 class="mb-1 text-primary fw-semibold">@lang('trans.size')</h6>
                                        <div class="row mt-2 px-3">
                                            <select required class="form-select form-select-lg mb-3" id="size_id" name="size_id" style="width: 300px;min-width: 150px;">
                                                @foreach($Product->Sizes->sortBy('title_'.lang()) as $Size)
                                                    <option value="{{ $Size->id }}">{{ $Size->title() }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                @endif
                                
                                @php($Cutting = $Product->Categories()->where('category_id',1)->count() > 0)
                                @if($Options->count())
                                    @foreach($Options->when($Cutting == false, function ($query) {
                                            return $query->where('type','!=', 'cutting');
                                        })->groupBy('type') as $Type => $Options)
                                        <div class="mt-3">
                                            <h6 class="mb-1 text-primary fw-semibold">@lang('trans.' . $Type )</h6>
                                            <div class="row mt-2 px-3">
                                                <select required class="form-select form-select-lg mb-3"  name="options[]" style="width: 300px;min-width: 150px;">
                                                    @foreach($Options as $Option)
                                                        <option value="{{ $Option->id }}">{{ $Option->title }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                                
                                <div class="mt-3">
                                    <label for="note" class="form-label">@lang('trans.note')</label>
                                    <textarea class="form-control" id="note" name="note" rows="3"></textarea>
                                </div>
                            </div>



                            
                            <div class="row justify-content-center align-items-center" id="plus-minus">
                                <div class="col-6 count my-2 ltr">
                                    <div class="row count align-items-center my-2 px-4">
                                        <div class="col-3 p-0">
                                            <div class="mx-0 point p-0 w-100 shadow">
                                                <div class="w-100 h-100 d-flex justify-content-center align-items-center p-1 main_bg minus" data-product_id="{{ $Product->id }}">
                                                    <i class="fa-solid fa-minus text-white font-weight-bold"></i>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-6 text-center">
                                            <span class="border-0 h5 pt-2 input_number w-100 text-center w-100" id="quantity">1</span>
                                            <input type="hidden" name="quantity" value="1" name="quantity">
                                        </div>
                                        <div class="col-3 p-0">
                                            <div class="mx-0 point p-0 w-100 shadow">
                                                <div class="w-100 h-100 d-flex justify-content-center align-items-center p-1 main_bg plus" data-product_id="{{ $Product->id }}">
                                                    <i class="fa-solid fa-plus text-white font-weight-bold"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-6">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="row w-100">
                            <div class="col-6">
                                <div class="d-flex justify-content-start my-3">
                                    @if ($Product->HasDiscount()) <small class="text-danger" style="text-decoration: line-through">{{ $Product->Price() }}</small> @endif
                                    <h5 class="mb-0 mx-1" id="total">
                                        {{ $Product->CalcPrice() }}
                                    </h5>
                                    {{ Country()->currancy_code }}
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-end">
                                    <button form="add-to-cart" id="quantity-not-enough-btn" style="padding: 8px 25px !important;background: #000;" type="button" class="btn main_bt rounded-0">@lang('trans.quantityNotenough')</button>
                                    <button form="add-to-cart" id="add-to-cart-btn" type="submit" class="btn main_bt rounded-0">@lang('trans.Submit')</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    
    

    <div class="py-5 point" style="background-color: #f9f9f9">
        <div class="container">
            <div class="my-4" id="reviews">
                @php($rate = $Product->Rates->Avg('rate'))
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-md-flex">
                        <h5 class="">@lang('trans.Reviews')</h5>
                        <div class="d-flex align-items-center">
                            <ul class="list-unstyled d-flex align-items-center">
                                <li class=""><i class="fa-solid fa-star h3 point mb-0 {{ $rate >= 1 ? 'text-warning' : '' }}"></i></li>
                                <li class=""><i class="fa-solid fa-star h3 point mb-0 {{ $rate >= 2 ? 'text-warning' : '' }}"></i></li>
                                <li class=""><i class="fa-solid fa-star h3 point mb-0 {{ $rate >= 3 ? 'text-warning' : '' }}"></i></li>
                                <li class=""><i class="fa-solid fa-star h3 point mb-0 {{ $rate >= 4 ? 'text-warning' : '' }}"></i></li>
                                <li class=""><i class="fa-solid fa-star h3 point mb-0 {{ $rate >= 5 ? 'text-warning' : '' }}"></i></li>
                            </ul>
                            <p class="m-auto">({{ number_format($rate, 1, ',', ' ') }})</p>
                        </div>
                    </div>
                    <div data-bs-toggle="modal" data-bs-target="#RateModal" class="my-2 px-4 text-decoration-none py-2 main_bottom transition_me d-flex align-items-center justify-content-center review">
                        <i class="icon-comment2 me-1"></i>
                        <span class="tiny_font me-2">@lang('trans.Add Review')</span>
                    </div>
                </div>
                
            </div>
            <div>
                @foreach ($Product->Rates as $Rate)
                    <hr class="third_bg">
                    <div class="my-4">
                        <span class="tiny_font d-block mt-2">{{ $Rate->created_at }}</span>
                        <ul class="list-unstyled d-flex align-items-center my-0">
                            <li class=""><i class="fa-solid fa-star h6 point mb-0 {{ $Rate->rate >= 1 ? 'text-warning' : '' }}"></i></li>
                            <li class=""><i class="fa-solid fa-star h6 point mb-0 {{ $Rate->rate >= 2 ? 'text-warning' : '' }}"></i></li>
                            <li class=""><i class="fa-solid fa-star h6 point mb-0 {{ $Rate->rate >= 3 ? 'text-warning' : '' }}"></i></li>
                            <li class=""><i class="fa-solid fa-star h6 point mb-0 {{ $Rate->rate >= 4 ? 'text-warning' : '' }}"></i></li>
                            <li class=""><i class="fa-solid fa-star h6 point mb-0 {{ $Rate->rate >= 5 ? 'text-warning' : '' }}"></i></li>
                        </ul>
                        <h5 class="d-block mb-2">{{ $Rate->Client ? $Rate->Client->name : '' }}</h5>
                        <span class="d-block my-2">{{ $Rate->comment }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="modal fade" id="RateModal" tabindex="-1" aria-labelledby="RateModalLabel" aria-hidden="true">
       <div class="modal-dialog">
          <div class="modal-content">
             <div class="modal-header">
                <h5 class="modal-title fs-5" id="RateModalLabel">@lang('trans.addReview')</h5>
             </div>
             <div class="modal-body">
                <form action="{{ route('client.add-review') }}" id="add-review" method="post" class="row">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $Product->id }}">
                    <div class="col-12 rating">
                        <input type="radio" name="rate" id="rating-5" value="5" required> <label for="rating-5"></label>
                        <input type="radio" name="rate" id="rating-4" value="4" required> <label for="rating-4"></label>
                        <input type="radio" name="rate" id="rating-3" value="3" required> <label for="rating-3"></label>
                        <input type="radio" name="rate" id="rating-2" value="2" required> <label for="rating-2"></label>
                        <input type="radio" name="rate" id="rating-1" value="1" required> <label for="rating-1"></label>
                        <div class="emoji-wrapper">
                            <div class="emoji">
                                <svg class="rating-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path d="M512 256c0 141.44-114.64 256-256 256-80.48 0-152.32-37.12-199.28-95.28 43.92 35.52 99.84 56.72 160.72 56.72 141.36 0 256-114.56 256-256 0-60.88-21.2-116.8-56.72-160.72C474.8 103.68 512 175.52 512 256z" fill="#f4c534" />
                                    <ellipse transform="scale(-1) rotate(31.21 715.433 -595.455)" cx="166.318" cy="199.829" rx="56.146" ry="56.13" fill="#fff" />
                                    <ellipse transform="rotate(-148.804 180.87 175.82)" cx="180.871" cy="175.822" rx="28.048" ry="28.08" fill="#3e4347" />
                                    <ellipse transform="rotate(-113.778 194.434 165.995)" cx="194.433" cy="165.993" rx="8.016" ry="5.296" fill="#5a5f63" />
                                    <ellipse transform="scale(-1) rotate(31.21 715.397 -1237.664)" cx="345.695" cy="199.819" rx="56.146" ry="56.13" fill="#fff" />
                                    <ellipse transform="rotate(-148.804 360.25 175.837)" cx="360.252" cy="175.84" rx="28.048" ry="28.08" fill="#3e4347" />
                                    <ellipse transform="scale(-1) rotate(66.227 254.508 -573.138)" cx="373.794" cy="165.987" rx="8.016" ry="5.296" fill="#5a5f63" />
                                    <path d="M370.56 344.4c0 7.696-6.224 13.92-13.92 13.92H155.36c-7.616 0-13.92-6.224-13.92-13.92s6.304-13.92 13.92-13.92h201.296c7.696.016 13.904 6.224 13.904 13.92z" fill="#3e4347" />
                                </svg>
                                <svg class="rating-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z" fill="#f4c534" />
                                    <path d="M328.4 428a92.8 92.8 0 0 0-145-.1 6.8 6.8 0 0 1-12-5.8 86.6 86.6 0 0 1 84.5-69 86.6 86.6 0 0 1 84.7 69.8c1.3 6.9-7.7 10.6-12.2 5.1z" fill="#3e4347" />
                                    <path d="M269.2 222.3c5.3 62.8 52 113.9 104.8 113.9 52.3 0 90.8-51.1 85.6-113.9-2-25-10.8-47.9-23.7-66.7-4.1-6.1-12.2-8-18.5-4.2a111.8 111.8 0 0 1-60.1 16.2c-22.8 0-42.1-5.6-57.8-14.8-6.8-4-15.4-1.5-18.9 5.4-9 18.2-13.2 40.3-11.4 64.1z" fill="#f4c534" />
                                    <path d="M357 189.5c25.8 0 47-7.1 63.7-18.7 10 14.6 17 32.1 18.7 51.6 4 49.6-26.1 89.7-67.5 89.7-41.6 0-78.4-40.1-82.5-89.7A95 95 0 0 1 298 174c16 9.7 35.6 15.5 59 15.5z" fill="#fff" />
                                    <path d="M396.2 246.1a38.5 38.5 0 0 1-38.7 38.6 38.5 38.5 0 0 1-38.6-38.6 38.6 38.6 0 1 1 77.3 0z" fill="#3e4347" />
                                    <path d="M380.4 241.1c-3.2 3.2-9.9 1.7-14.9-3.2-4.8-4.8-6.2-11.5-3-14.7 3.3-3.4 10-2 14.9 2.9 4.9 5 6.4 11.7 3 15z" fill="#fff" />
                                    <path d="M242.8 222.3c-5.3 62.8-52 113.9-104.8 113.9-52.3 0-90.8-51.1-85.6-113.9 2-25 10.8-47.9 23.7-66.7 4.1-6.1 12.2-8 18.5-4.2 16.2 10.1 36.2 16.2 60.1 16.2 22.8 0 42.1-5.6 57.8-14.8 6.8-4 15.4-1.5 18.9 5.4 9 18.2 13.2 40.3 11.4 64.1z" fill="#f4c534" />
                                    <path d="M155 189.5c-25.8 0-47-7.1-63.7-18.7-10 14.6-17 32.1-18.7 51.6-4 49.6 26.1 89.7 67.5 89.7 41.6 0 78.4-40.1 82.5-89.7A95 95 0 0 0 214 174c-16 9.7-35.6 15.5-59 15.5z" fill="#fff" />
                                    <path d="M115.8 246.1a38.5 38.5 0 0 0 38.7 38.6 38.5 38.5 0 0 0 38.6-38.6 38.6 38.6 0 1 0-77.3 0z" fill="#3e4347" />
                                    <path d="M131.6 241.1c3.2 3.2 9.9 1.7 14.9-3.2 4.8-4.8 6.2-11.5 3-14.7-3.3-3.4-10-2-14.9 2.9-4.9 5-6.4 11.7-3 15z" fill="#fff" />
                                </svg>
                                <svg class="rating-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z" fill="#f4c534" />
                                    <path d="M336.6 403.2c-6.5 8-16 10-25.5 5.2a117.6 117.6 0 0 0-110.2 0c-9.4 4.9-19 3.3-25.6-4.6-6.5-7.7-4.7-21.1 8.4-28 45.1-24 99.5-24 144.6 0 13 7 14.8 19.7 8.3 27.4z" fill="#3e4347" />
                                    <path d="M276.6 244.3a79.3 79.3 0 1 1 158.8 0 79.5 79.5 0 1 1-158.8 0z" fill="#fff" />
                                    <circle cx="340" cy="260.4" r="36.2" fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="rotate(-135 326.4 246.6)" cx="326.4" cy="246.6" rx="6.5" ry="10" />
                                        <path d="M231.9 244.3a79.3 79.3 0 1 0-158.8 0 79.5 79.5 0 1 0 158.8 0z" />
                                    </g>
                                    <circle cx="168.5" cy="260.4" r="36.2" fill="#3e4347" />
                                    <ellipse transform="rotate(-135 182.1 246.7)" cx="182.1" cy="246.7" rx="10" ry="6.5" fill="#fff" />
                                </svg>
                                <svg class="rating-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path d="M407.7 352.8a163.9 163.9 0 0 1-303.5 0c-2.3-5.5 1.5-12 7.5-13.2a780.8 780.8 0 0 1 288.4 0c6 1.2 9.9 7.7 7.6 13.2z" fill="#3e4347" />
                                    <path d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z" fill="#f4c534" />
                                    <g fill="#fff">
                                        <path d="M115.3 339c18.2 29.6 75.1 32.8 143.1 32.8 67.1 0 124.2-3.2 143.2-31.6l-1.5-.6a780.6 780.6 0 0 0-284.8-.6z" />
                                        <ellipse cx="356.4" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="356.4" cy="205.3" rx="44.2" ry="44.2" fill="#3e4347" />
                                    <g fill="#fff">
                                        <ellipse transform="scale(-1) rotate(45 454 -906)" cx="375.3" cy="188.1" rx="12" ry="8.1" />
                                        <ellipse cx="155.6" cy="205.3" rx="81.1" ry="81" />
                                    </g>
                                    <ellipse cx="155.6" cy="205.3" rx="44.2" ry="44.2" fill="#3e4347" />
                                    <ellipse transform="scale(-1) rotate(45 454 -421.3)" cx="174.5" cy="188" rx="12" ry="8.1" fill="#fff" />
                                </svg>
                                <svg class="rating-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <circle cx="256" cy="256" r="256" fill="#ffd93b" />
                                    <path d="M512 256A256 256 0 0 1 56.7 416.7a256 256 0 0 0 360-360c58.1 47 95.3 118.8 95.3 199.3z" fill="#f4c534" />
                                    <path d="M232.3 201.3c0 49.2-74.3 94.2-74.3 94.2s-74.4-45-74.4-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z" fill="#e24b4b" />
                                    <path d="M96.1 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2C80.2 229.8 95.6 175.2 96 173.3z" fill="#d03f3f" />
                                    <path d="M215.2 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z" fill="#fff" />
                                    <path d="M428.4 201.3c0 49.2-74.4 94.2-74.4 94.2s-74.3-45-74.3-94.2a38 38 0 0 1 74.4-11.1 38 38 0 0 1 74.3 11.1z" fill="#e24b4b" />
                                    <path d="M292.2 173.3a37.7 37.7 0 0 0-12.4 28c0 49.2 74.3 94.2 74.3 94.2-77.8-65.7-62.4-120.3-61.9-122.2z" fill="#d03f3f" />
                                    <path d="M411.3 200c-3.6 3-9.8 1-13.8-4.1-4.2-5.2-4.6-11.5-1.2-14.1 3.6-2.8 9.7-.7 13.9 4.4 4 5.2 4.6 11.4 1.1 13.8z" fill="#fff" />
                                    <path d="M381.7 374.1c-30.2 35.9-75.3 64.4-125.7 64.4s-95.4-28.5-125.8-64.2a17.6 17.6 0 0 1 16.5-28.7 627.7 627.7 0 0 0 218.7-.1c16.2-2.7 27 16.1 16.3 28.6z" fill="#3e4347" />
                                    <path d="M256 438.5c25.7 0 50-7.5 71.7-19.5-9-33.7-40.7-43.3-62.6-31.7-29.7 15.8-62.8-4.7-75.6 34.3 20.3 10.4 42.8 17 66.5 17z" fill="#e24b4b" />
                                </svg>
                                <svg class="rating-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <g fill="#ffd93b">
                                        <circle cx="256" cy="256" r="256" />
                                        <path d="M512 256A256 256 0 0 1 56.8 416.7a256 256 0 0 0 360-360c58 47 95.2 118.8 95.2 199.3z" />
                                    </g>
                                    <path d="M512 99.4v165.1c0 11-8.9 19.9-19.7 19.9h-187c-13 0-23.5-10.5-23.5-23.5v-21.3c0-12.9-8.9-24.8-21.6-26.7-16.2-2.5-30 10-30 25.5V261c0 13-10.5 23.5-23.5 23.5h-187A19.7 19.7 0 0 1 0 264.7V99.4c0-10.9 8.8-19.7 19.7-19.7h472.6c10.8 0 19.7 8.7 19.7 19.7z" fill="#e9eff4" />
                                    <path d="M204.6 138v88.2a23 23 0 0 1-23 23H58.2a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z" fill="#45cbea" />
                                    <path d="M476.9 138v88.2a23 23 0 0 1-23 23H330.3a23 23 0 0 1-23-23v-88.3a23 23 0 0 1 23-23h123.4a23 23 0 0 1 23 23z" fill="#e84d88" />
                                    <g fill="#38c0dc">
                                        <path d="M95.2 114.9l-60 60v15.2l75.2-75.2zM123.3 114.9L35.1 203v23.2c0 1.8.3 3.7.7 5.4l116.8-116.7h-29.3z" />
                                    </g>
                                    <g fill="#d23f77">
                                        <path d="M373.3 114.9l-66 66V196l81.3-81.2zM401.5 114.9l-94.1 94v17.3c0 3.5.8 6.8 2.2 9.8l121.1-121.1h-29.2z" />
                                    </g>
                                    <path d="M329.5 395.2c0 44.7-33 81-73.4 81-40.7 0-73.5-36.3-73.5-81s32.8-81 73.5-81c40.5 0 73.4 36.3 73.4 81z" fill="#3e4347" />
                                    <path d="M256 476.2a70 70 0 0 0 53.3-25.5 34.6 34.6 0 0 0-58-25 34.4 34.4 0 0 0-47.8 26 69.9 69.9 0 0 0 52.6 24.5z" fill="#e24b4b" />
                                    <path d="M290.3 434.8c-1 3.4-5.8 5.2-11 3.9s-8.4-5.1-7.4-8.7c.8-3.3 5.7-5 10.7-3.8 5.1 1.4 8.5 5.3 7.7 8.6z" fill="#fff" opacity=".2" />
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 form-group">
                        <label for="name">@lang('trans.Name')</label>
                        <input type="text" class="form-control" name="name" value="{{ old('name') }}" id="name" required >
                        <span class="text-danger">@error('name'){{ $message }}@enderror</span>
                    </div>
                    <div class="col-12 form-group">
                        <div class="row position-relative">
                            <label for="phone">@lang('trans.mobile')</label>
                            <div class="row">
                                @if(lang('ar'))
                                    <div class="col-7">
                                        <input class="form-control" name="phone" value="{{ old('phone') }}" onkeypress="return AllowOnlyNumbers(event);" required type="number">
                                    </div>
                                @endif
                                <div class="col-5">
                                    @include('Client.layouts.phone-select')
                                </div>
                                @if(lang('en'))
                                    <div class="col-7">
                                        <input class="form-control" name="phone" value="{{ old('phone') }}" onkeypress="return AllowOnlyNumbers(event);" required type="number">
                                    </div>
                                @endif
                            </div>
                            <span class="text-danger">@error('phone'){{ $message }}@enderror</span>
                        </div>
                    </div>
                    <div class="col-12 form-group">
                        <label for="email">@lang('trans.email')</label>
                        <input type="email" class="form-control" name="email" value="{{ old('email') }}" id="email" placeholder="xyz@gmail.com">
                        <span class="text-danger">@error('email'){{ $message }}@enderror</span>
                    </div>
                    <div class="col-12 form-group my-1">
                        <label for="email">@lang('trans.comment')</label>
                        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" name="comment" required></textarea>
                    </div>
                </form>
             </div>
             <div class="modal-footer">
               <div class="text-center" style="width: 100%; display: flex; justify-content: space-around;">
                    <button type="submit" form="add-review" class="btn main_bt rounded-0 border-0 rounded px-5">@lang('trans.Submit')</button>
                    <button type="button" class="btn main_bt rounded-0 border-0 rounded px-5" style="background: #000;" data-bs-dismiss="modal">@lang('trans.cancel')</button>
                </div>
             </div>
          </div>
       </div>
    </div>



    
    @if ($RelatedProducts->Count())
        <div class="py-5 point" style="background-color: #f9f9f9">
            <div class="container">
                <div class="text-cente">
                    <h3>@lang('trans.relatedProducts')</h3>
                </div>
                <div class="row my-5 RelatedProducts">
                    @foreach ($RelatedProducts as $RelatedProduct)
                        <div class="col-12 col-md-6 col-lg-4 text-center my-1 mx-3">
                            @include('Client.layouts.product',['Product'=>$RelatedProduct])
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif    

@endsection


@push('css')
  <script>
    window.tamaraWidgetConfig = {
        lang: "{{ lang() }}",
        country: "SA",
        publicKey: "{{ env('TAMARA_PUBLIC') }}"
    }
  </script>
  <script defer type="text/javascript" src="https://cdn.tamara.co/widget-v2/tamara-widget.js"></script>
@endpush


@push('js')
    <script>
        quantity = 9999;
        price = {{ $Product->CalcPrice() }};
        

        function SetItem(item){
    	    quantity = item['quantity'];
            if(item['price'] > 0 ){
                pro_price = parseFloat(item['price']);
                if ({{ $Product->discount && $Product->from < now() && $Product->to > now() ? 1 : 0 }}) {
                    price =  ((pro_price - (pro_price / 100 * {{ $Product->discount ?? 0 }})) * {{ Country()->currancy_value }}).toFixed({{ Country()->decimals }});
                } else {
                    price =  (pro_price * {{ Country()->currancy_value }}).toFixed({{ Country()->decimals }});
                }
            }
        }
        function calc(){
            size_id = $( "#size_id option:selected" ).val();
            color_id = $('input[name="color_id"]:checked').val();
            @json($Product->Quantity).forEach((item, index)=>{
                if(color_id && size_id){
                	if(item['size_id'] == size_id && item['color_id'] == color_id){
                	    SetItem(item);
                	}
                }else if(size_id && !color_id){
                	if(item['size_id'] == size_id){
                	    SetItem(item);
                	}
                }else if(!size_id && color_id){
                	if(item['color_id'] == color_id){
                	    SetItem(item);
                	}
                }
                $('#total').html(price);
            })
            if(quantity > 0){
                $('#quantity').html(1);
                $('input[name="quantity"]').val(1);
                
                $( "#add-to-cart-btn" ).removeClass('d-none');
                $( "#plus-minus" ).removeClass('d-none');
                $( "#quantity-not-enough-btn" ).addClass('d-none');
            }else{
                $('#quantity').html(0);
                $('input[name="quantity"]').val(0);
            
                $( "#add-to-cart-btn" ).addClass('d-none');
                $( "#plus-minus" ).addClass('d-none');
                $( "#quantity-not-enough-btn" ).removeClass('d-none');
            }
        }
        $(document).on('change', 'input[name="color_id"]', function() {
            calc();
        });
        $(document).on('change', '#size_id', function() {
            calc();
        });
        calc();
        $(document).on("click", '.fa-plus', function () {
            q = parseInt($('#quantity').html()) + 1;
            if(quantity > 1 && q <= quantity){
                $('#quantity').html(q);
                $('input[name="quantity"]').val(q);
            }
            load();
        });
        $(document).on("click", '.fa-minus', function () {
            q = (parseInt($('#quantity').html()) - 1 > 1) ? parseInt($('#quantity').html()) - 1 : 1;
            $('#quantity').html(q);
            $('input[name="quantity"]').val(q);
            load();
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
    <script>
        Fancybox.bind('[data-fancybox="gallery"]', {
          // Your custom options for a specific gallery
        });
    </script>
    
    
@endpush


@push('css')
    <link rel="stylesheet" href="{{ asset('new_assets/css/rating.css') }}">
    <style>
        /* Product Color */
        .product-color {
          margin-bottom: 30px;
        }
    
        .color-choose div {
          display: inline-block;
        }
    
        .color-choose input[type="radio"] {
          display: none;
        }
    
        .color-choose input[type="radio"]+label span {
          display: inline-block;
          width: 40px;
          height: 40px;
          margin: -1px 4px 0 0;
          vertical-align: middle;
          cursor: pointer;
          border-radius: 50%;
          border: 2px solid #FFFFFF;
          box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
        }
    
        .color-choose input[type="radio"]:checked+label span {
          border: 2px solid #000000;
          box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.75);
          background-repeat: no-repeat;
          background-position: center;
        }
    
        .selected {
          background-color: #F7F7F7 !important;
          border: 1px solid black !important;
        }
    
        input:focus {
          outline: none !important;
          box-shadow: none !important;
        }
    
        .vc {
            background: #ff0045;
            border-radius: 30px 0 0 30px;
            color: #fff;
            width: 108px;
            text-align: center;
            padding: 6.5px 18px;
            position: absolute;
            border-{{ lang('ar') ? 'left' : 'right' }}: 1px dashed #fff;
            top: 10px;
            {{ lang('en') ? 'left' : 'right' }}: 10px;
        }
      
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
@endpush
@push('css')
    <link rel="stylesheet" href="{{ asset('new_assets/css/slick.css') }}"/>
@endpush
@push('js')
    <script src="{{ asset('new_assets/js/slick.min.js') }}"></script>
@endpush

@push('js')
    <script defer>
        $('.RelatedProducts').not('.slick-initialized').slick({
            dots: false,
            infinite: true,
            arrows: true,
            speed: 300,
            slidesToShow: 4,
            slidesToScroll: 2,
            rtl: document.documentElement.lang == 'ar' ? true : false,
            autoplay:false,
            cssEase: 'linear',
            responsive: [{
                breakpoint: 1024,
                settings: {
                    slidesToShow: 3,
                    slidesToScroll: 2,
                    infinite: true,
                    dots: true
                }
            },{
                breakpoint: 720,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: true,
                    dots: true
                }
            },{
                breakpoint: 600,
                settings: {
                    arrows: false,
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            },{
                breakpoint: 480,
                settings: {
                    arrows: false,
                    slidesToShow: 2,
                    slidesToScroll: 2
                }
            }]
        });
    </script>
@endpush



@if(Payments()->where('status',1)->where('id',6)->count())
@push('js')
    <script src="https://checkout.tabby.ai/tabby-promo.js"></script>
    <script>
        function load(){      
            totaaal = (price * $('input[name="quantity"]').val());
            new TabbyPromo({
                selector: '#tabby',
                currency: '{{ currancy_code() }}',
                price: totaaal.toString(),
                installmentsCount: 4,
                lang: '{{ lang() }}',
                source: 'product',
                publicKey: '{{ env('TABBY_PUBLIC') }}',
                merchantCode: '{{ env('TABBY_CODE') }}'
            });
            $('#total').html( totaaal.toFixed({{ Country()->decimals }}) );
            
            
            const widgetContainer = document.getElementById("tamara-widget-container");
            widgetContainer.innerHTML = '';
            
            const widget = document.createElement('tamara-widget');
            widget.setAttribute('type', 'tamara-summary');
            widget.setAttribute('amount', totaaal);
            widget.setAttribute('inline-type', '2');
            widget.setAttribute('inline-variant', 'outlined');
            widget.setAttribute('config', '{"badgePosition":"right","showExtraContent":""}');
            
            widgetContainer.appendChild(widget);
        }
        
        load();
    </script>
@endpush
@endif