@extends('layouts.main')
@section('content')
    <div class="container-fluid bgmain " id="pageheader">
        <div class="container">
            <div class="row pt-3">
                <div class="col-8  text-light">
                    <x-breadcrumb :product="$product" />
                </div>
                {{-- <div class="col-4 ">
                    <x-category-filter :categories="$categories" />
                </div> --}}
            </div>
        </div>
    </div>
    <div class="container-fluid  text-light my-0 py-3">
        <div class="container bg-white py-5">
            <div class="row">
                <div class="col-sm-3"></div>
                <div class="col-sm-6 p-sm-5 ">
                    <div class="row mb-2">
                        <div class="zoomarea">
                            <img class="d-block mx-auto zoom" width="100%" class=""
                                src="{{ url('products/' . $product->image) }}" alt="" id="mainimage">
                        </div>
                    </div>
                </div>
                <div class="col-sm-3"></div>
            </div>
            @if (App::getLocale() == 'en')
                <div class="row text-dark p-sm-5 pt-4">
                    <div class="col-sm-12 mb-2">
                        <h4 class="fw-bold textmain">
                            {{ $product->name_en }}
                        </h4>
                        <p class="textmain">
                            <a href="{{ url('/product') }}" class=" textmain"> {{ __('messages.products_title') }}</a> /
                            @if ($product->category->parent)
                                {{ $product->category->parent->name_en }}
                                /
                            @endif
                            {{ $product->category->name_en }}
                            {{-- <a href="{{ url('/allproducts/' . $product->category->id) }}" class='textmain'>
                            {{ $product->category->name }}</a> --}}
                        </p>
                        <img src="{{ asset('products/' . $product->brand->image) }}" alt="" width="200">
                        <h5 class="fw-bold pt-3"> {{ __('messages.company') . ' ' . $product->brand->name_en }}</h5>
                    </div>
                    <div class="col-sm-12 my-2">
                        <h5> {{ __('messages.country') . ' ' . $product->brand->origin_en }}</h5>
                    </div>
                    @if ($product->description_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.description') }} </h5>
                            <div> {!! $product->description_en !!}</div>
                        </div>
                    @endif
                    @if ($product->composition_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.composition') }} </h5>
                            <p>{{ $product->composition_en }}</p>
                        </div>
                    @endif
                    @if ($product->types_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.types') }} </h5>
                            <p>{{ $product->types_en }}</p>
                        </div>
                    @endif
                    @if ($product->dosage_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.dosage') }} </h5>
                            <p> {{ $product->dosage_en }} </p>
                        </div>
                    @endif
                    @if ($product->time_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.withdrawal') }} </h5>
                            <p> {{ $product->time_en }} </p>
                        </div>
                    @endif
                    @if ($product->warning_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.warning') }} </h5>
                            <p> {{ $product->warning_en }} </p>
                        </div>
                    @endif
                    @if ($product->side_effects_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.sideeffects') }} </h5>
                            <p> {{ $product->side_effects_en }} </p>
                        </div>
                    @endif
                    @if ($product->prevention_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.prevention') }}</h5>
                            <p> {{ $product->prevention_en }} </p>
                        </div>
                    @endif
                    @if ($product->storage_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.storage') }} </h5>
                            <p> {{ $product->storage_en }} </p>
                        </div>
                    @endif
                    @if ($product->packaging_en)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.packaging') }} </h5>
                            <p> {{ $product->packaging_en }} </p>
                        </div>
                    @endif
                </div>
            @else
                <div class="row text-dark p-sm-5 pt-4">
                    <div class="col-sm-12 mb-2">
                        <h4 class="fw-bold textmain">
                            {{ $product->name_ar }}
                        </h4>
                        <p class="textmain">
                            <a href="{{ url('/product') }}" class=" textmain"> {{ __('messages.products_title') }}</a> /
                            @if ($product->category->parent)
                                {{ $product->category->parent->name }}
                                /
                            @endif
                            {{ $product->category->name }}
                            {{-- <a href="{{ url('/allproducts/' . $product->category->id) }}" class='textmain'>
                            {{ $product->category->name }}</a> --}}
                        </p>
                        <img src="{{ asset('products/' . $product->brand->image) }}" alt="" width="200">
                        <h5 class="fw-bold pt-3"> {{ __('messages.company') . ' ' . $product->brand->name_ar }}</h5>
                    </div>
                    <div class="col-sm-12 my-2">
                        <h5> {{ __('messages.country') . ' ' . $product->brand->origin_ar }}</h5>
                    </div>
                    @if ($product->description_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.description') }} </h5>
                            <div> {!! $product->description_ar !!}</div>
                        </div>
                    @endif
                    @if ($product->composition_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.composition') }} </h5>
                            <p>{{ $product->composition_ar }}</p>
                        </div>
                    @endif
                    @if ($product->types_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.types') }} </h5>
                            <p>{{ $product->types_ar }}</p>
                        </div>
                    @endif
                    @if ($product->dosage_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.dosage') }} </h5>
                            <p> {{ $product->dosage }} </p>
                        </div>
                    @endif
                    @if ($product->time_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.withdrawal') }} </h5>
                            <p> {{ $product->time_ar }} </p>
                        </div>
                    @endif
                    @if ($product->warning_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.warning') }} </h5>
                            <p> {{ $product->warning_ar }} </p>
                        </div>
                    @endif
                    @if ($product->side_effects_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.sideeffects') }} </h5>
                            <p> {{ $product->side_effects_ar }} </p>
                        </div>
                    @endif
                    @if ($product->prevention_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.prevention') }}</h5>
                            <p> {{ $product->prevention_ar }} </p>
                        </div>
                    @endif
                    @if ($product->storage_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.storage') }} </h5>
                            <p> {{ $product->storage_ar }} </p>
                        </div>
                    @endif
                    @if ($product->packaging_ar)
                        <div class="col-sm-12 my-2">
                            <h5> {{ __('messages.packaging') }} </h5>
                            <p> {{ $product->packaging_ar }} </p>
                        </div>
                    @endif
                </div>
            @endif
            <!-- ========== End Section ========== -->
            <div class="col-sm-6 p-sm-5 pt-4">
                @if (Auth::check())
                    <div class="mt-4">
                        <a href="{{ route('product.edit', $product->id) }}" class="btn btn-warning">
                            {{ __('messages.edit') }}
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <div class="container">
    </div>
    <div class="container">
        <div class="row my-5">
            <div class="col-3">
                @isset($previous)
                    <a href="{{ url('product', $previous->id) }}" class="btn btn-secondary"> <img
                            src="{{ asset('/images/previous.svg') }}" width="25" alt="">
                    </a>
                @endisset
            </div>
            <div class="col-6">
                <div class="text-center">
                    <a href="{{ url('product') }}" class="btn mainbutton"> {{ __('messages.allproducts') }}
                    </a>
                </div>
            </div>
            <div class="col-3">
                @isset($next)
                    <a href="{{ url('product', $next->id) }}" class="btn btn-secondary float-end">
                        <img src="{{ asset('/images/next.svg') }}" width="25" alt=""></a>
                @endisset
            </div>
        </div>
    </div>
    {{-- <script>
        // function img(a) {
        //     document.getElementById('mainimage').src = a;
        // }
        function getchild(a) {
            document.getElementById(a).style.display = "block";
        }
    </script>
    <style>
        .categorychild {
            display: none;
        }
    </style> --}}
@endsection