@extends('admin.layout.master')

@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<style>
    .color_yellow {
        color: yellow;
    }

    .form_head {
        background: #7367f0;
        border-radius: 5px;
        padding: 10px;
        margin-top: 8px;
        margin-bottom: 30px;
    }
</style>
@endsection

@section('content')
<section id="multiple-column-form">
    <div class="row ">

        <div class="col-6">
            <div class="card ">

                <div class="card-header">
                    <h5 class=""><i class="fa fa-user"></i> {{ __('admin.product_details') }} </h5>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        @if ($product->images->count() > 0)
                        <div class="row mb-1">
                            <div id="carousel-example-generic" class="carousel slide w-100" data-ride="carousel ">
                                <ol class="carousel-indicators w-100">
                                    @foreach ($product->images as $key => $image)
                                    <li data-target="#carousel-example-generic" data-slide-to="{{ $key }}"
                                        class="{{ $key == 0 ? 'active' : '' }}"></li>
                                    @endforeach
                                </ol>
                                <div class="carousel-inner w-100" role="listbox">
                                    @foreach ($product->images as $key => $image)
                                    <div class="carousel-item w-100 {{ $key == 0 ? 'active' : '' }}">
                                        <a href="{{$image->name}}" data-fancybox="fancybox">
                                            <img src="{{$image->name}}" alt="{{$product->name}}" class="img-fluid "
                                                style="height: 500px;width:100% ; object-fit: inherit"></a>
                                    </div>
                                    @endforeach
                                </div>
                                <a class="carousel-control-prev" href="#carousel-example-generic" role="button"
                                    data-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                </a>
                                <a class="carousel-control-next" href="#carousel-example-generic" role="button"
                                    data-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                </a>
                            </div>
                        </div>
                        @endif

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.name') }}</div>
                            <div class="col-8">{{ $product->name }}</div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.category') }}</div>
                            <div class="col-8">{{ $product->category->parent->name }}</div>
                        </div>


                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.sub_category') }}</div>
                            <div class="col-8">{{ $product->category->name }}</div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.brand') }}</div>
                            <div class="col-8">{{ $product->brand->name }}</div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.description') }}</div>
                            <div class="col-8">{{ $product->description }}</div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.price') }}</div>
                            <div class="col-8">{{ $product->variantOne()->price }}</div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.qty') }}</div>
                            <div class="col-8">{{ $product->variantOne()->qty }}</div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.sku') }}</div>
                            <div class="col-8">{{ $product->variantOne()->sku }}</div>
                        </div>
                        @if ($product->variantOne()->discount_type)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.discount_type') }}</div>
                            <div class="col-8">
                                {{ $product->variantOne()->discount_type == 'ratio' ? __('admin.ratio') :
                                __('admin.number') }}
                            </div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.discount_amount') }}</div>
                            <div class="col-8">{{ (float) $product->variantOne()->discount_amount }}
                                {{ $product->variantOne()->discount_type == 'ratio' ? '%' : __('site.currency') }}
                            </div>
                        </div>

                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.discount_date_to') }}</div>
                            <div class="col-8">
                                {{ $product->variantOne()->discount_date_to->format('d-m-y h:i A') }}</div>
                        </div>
                        @endif

                        {{-- <div class="row mb-1">--}}
                            {{-- <div class="col-4">{{ __('admin.type') }}</div>--}}
                            {{-- <div class="col-8">--}}
                                {{-- {{ $product->type == 'simple' ? __('admin.simple') : __('admin.multi') }}</div>--}}
                            {{-- </div>--}}

                    </div>
                </div>

            </div>
        </div>

        <div class="col-6">
            <div class="card ">

                <div class="card-header">
                    <h5 class=""><i class="fa fa-user"></i> {{ __('admin.product_additional_details') }} </h5>
                </div>
                <div class="card-content">
                    <div class="card-body">

                        @if(isset($product->additionalFeature))

                        @if($product->additionalFeature?->color)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.color') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->color }}</div>
                        </div>
                        @endif

                        @if($product->additionalFeature?->material)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.material') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->material }}</div>
                        </div>
                        @endif

                        @if($product->additionalFeature?->frame_color)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.frame_color') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->frame_color }}</div>
                        </div>
                        @endif
                        @if($product->additionalFeature?->warranty_period)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.warranty_period') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->warranty_period }}</div>
                        </div>
                        @endif

                        @if($product->additionalFeature?->pattern)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.pattern') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->pattern }}</div>
                        </div>
                        @endif

                        @if($product->additionalFeature?->trade_mark)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.trade_mark') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->trade_mark }}</div>
                        </div>
                        @endif

                        @if($product->additionalFeature?->purity)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.purity') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->purity }}</div>
                        </div>
                        @endif

                        @if($product->additionalFeature?->certificate_type)
                        <div class="row mb-1">
                            <div class="col-4">{{ __('admin.certificate_type') }}</div>
                            <div class="col-8">{{ $product->additionalFeature?->certificate_type }}</div>
                        </div>
                        @endif

                        @else
                        <div class="d-flex justify-content-center">
                            <span class="text-danger font-weight-bold">{{__('admin.no_details_available')}}</span>
                        </div>
                        @endif

                    </div>
                </div>

            </div>
        </div>

        @if ($product->reviews-> count() > 0)
        <div class="col-6">
            <div class="card ">
                <div class="card-header">
                    <h5 class=""><i class="fa fa-user"></i> {{ __('admin.reviews') }} </h5>
                </div>
                <hr>
                <div class="card-content">
                    <div class="card-body">
                        <ul class="activity-timeline timeline-left list-unstyled table_content_append">
                            @foreach ($product->reviews as $review)
                            <li class="parent-dov">
                                <div class="timeline-icon ">
                                    <img width="30px" height="30px" src="{{$review->user->image}}" alt="">
                                </div>
                                <div class="timeline-info">
                                    <p class="font-weight-bold text-success">{{$review->user->name}}</p>
                                    <span>{{$review->comment}}</span>
                                </div>
                                <small class="d-flex justify-content-between mt-1">
                                    <span class="text-primary">{{$review->created_at->diffForHumans()}}</span>
                                    <span>
                                        <i class="color_yellow fa fa-star"></i> {{$review->rate}}
                                        {{-- <i class="text-danger fa fa-flag"></i> --}}
                                    </span>
                                </small>
                            </li>
                            @endforeach
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>

    <div class="col-12 d-flex justify-content-center mt-3">
        <a href="{{ route('admin.products.index') }}" type="reset"
            class="btn btn-outline-warning mr-1 mb-1">{{__('admin.back')}}</a>
    </div>
</section>
@endsection

@section('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
    $('.show input').attr('disabled', true)
    $('.show textarea').attr('disabled', true)
    $('.show select').attr('disabled', true)
</script>
@endsection