@extends('front.layout.app')
@section('title', 'Comparison')
@section('content')

    @if(!empty($page->pageComponents))
        @forelse($page->pageComponents as $key => $section)
            @if($key == 0)
                <div class="innerBanner">
                    @if(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'image')
                        <img src="{{asset($section->pageComponentMedia[0]->file_name) ?? asset('front/images/aboutBanner.jpg')}}" class="w-100">
                    @elseif(!empty($section->pageComponentMedia[0]) && $section->pageComponentMedia[0]->file_type == 'video')
                        <video>
                            <source src="{{asset($section->pageComponentMedia[0]->file_name)}}" type="video/*">
                            Your browser does not support the video tag.
                        </video>
                    @endif

                    <h2>{{$section->title ?? ''}}</h2>
                </div>
            @endif
        @empty
        @endforelse
    @endif

    <section class="comparsion">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-2 col-sm-6"></div>
                <div class="col-lg-4 col-sm-6">
                    @if(isset($product1) && $product1 != null)
                        <div class="proThumb">
                            <div class="compare-fld">
                                <div class="form-group">
                                    <label for="exampleInput">COMPARE WITH</label>
                                    <div class="input-cont">
                                        <input type="text" class="form-control" id="compare1"
                                               aria-describedby="emailHelp" placeholder="Search Here" value="{{$product1->product_name}}">
                                        <button type="submit" class="ThemeBtn btnStyle compareBtn">Submit</button>
                                    </div>
                                    <small id="emailHelp" class="form-text text-muted">Please enter product name or part of it</small>
                                </div>
                            </div>
                            <div class="img">
                                <img src="{{@productImage($product1->product_image)}}" alt="" class="w-100" id="productImage1">
                            </div>
                            <a href="{{url('shop/'.$product1->slug??'')}}" id="productUrl1">{{$product1->product_name}}</a>
                            <strong id="prodPriceWeight1">${{$product1->current_price}}/<small>{{$product1->weight??'0.00'}}G</small>
{{--                                @if($product1->price > $product1->current_price)--}}
{{--                                    <span>${{$product1->price}}</span>--}}
{{--                                @endif--}}
                            </strong>
                        </div>
                    @else
                        <div class="proThumb">
                            <div class="compare-fld">
                                <div class="form-group">
                                    <label for="exampleInput">COMPARE WITH</label>
                                    <div class="input-cont">
                                        <input type="text" class="form-control" id="compare1"
                                               aria-describedby="emailHelp" placeholder="Search Here">
                                        <button type="submit" class="ThemeBtn btnStyle compareBtn">Submit</button>
                                    </div>
                                    <small id="emailHelp" class="form-text text-muted">Please enter product name or part of it</small>
                                </div>
                            </div>
                            <div class="img">
                                <img src="{{asset('front')}}/images/pro3.jpg" alt="" class="w-100" id="productImage1" style="display: none;">
                            </div>
                            <a href="#" style="display: none;" id="productUrl1">Hybrid Donny Burger</a>
                            <strong id="prodPriceWeight1" style="display: none;">$35.00/<small>3.5G</small></strong>
                        </div>
                    @endif

                </div>
                <div class="col-lg-4 col-sm-6">
                    <div class="proThumb">
                        <div class="compare-fld">
                            <div class="form-group">
                                <label for="exampleInput">COMPARE WITH</label>
                                <div class="input-cont">
                                    <input type="text" class="form-control" id="compare2"
                                           aria-describedby="emailHelp" placeholder="Search Here">
                                    <button type="submit" class="ThemeBtn btnStyle compareBtn">Submit</button>
                                </div>
                                <small id="emailHelp" class="form-text text-muted">Please enter product name or part of it</small>
                            </div>
                        </div>
                        <div class="img">
                            <img src="{{asset('front')}}/images/pro3.jpg" alt="" class="w-100" id="productImage2" style="display: none;">
                        </div>
                        <a href="#" style="display: none;" id="productUrl2">Hybrid Donny Burger</a>
                        <strong id="prodPriceWeight2" style="display: none;">$35.00/<small>5G</small></strong>
                    </div>
                </div>


                <div class="col-md-10" style="display: none;" id="compareTbl">
                    <table class="table orderTable wishlistTable compare">
                        <thead>
                        <tr>
                            <th>Product</th>
                            <td><p id="productTitle1">Lorem ispum lorem</p></td>
                            <td><p id="productTitle2">Lorem ispum lorem</p></td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th>Price</th>
                            <td><p id="productPrice1">$ 10.00</p></td>
                            <td><p id="productPrice2">$ 10.00</p></td>
                        </tr>
                        <tr>
                            <th>THC Potency</th>
                            <td><p id="productThc1">Lorem ispum lorem</p></td>
                            <td><p id="productThc2">Lorem ispum lorem</p></td>
                        </tr>
                        <tr>
                            <th>CBD Potency</th>
                            <td><p id="productCbd1">Lorem ispum lorem</p></td>
                            <td><p id="productCbd2">Lorem ispum lorem</p></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

@endsection
@section('scripts')
    <script>
        $(document).ready(function (){
            $(".compareBtn").on('click', function (){
                let shopUrl = '{{url("shop")}}';
                let imgUrl = '{{asset("uploads/products")}}';
                let compare1 = $("#compare1").val();
                let compare2 = $("#compare2").val();
                if (compare1 == "" || compare1 == null){
                    toastr.error('Product Title is required', 'Error!')
                    return false;
                }
                if (compare2 == "" || compare2 == null){
                    toastr.error('Product Title is required', 'Error!')
                    return false;
                }
                let csrf_token = $('meta[name="csrf-token"]').attr('content');

                $.ajax({
                    url:"{{ url('comparison') }}",
                    type:"POST",
                    data: {
                        product1: compare1,
                        product2: compare2,
                        '_token': csrf_token
                    },
                    success:function (data) {
                        if(data.status === true){
                            $("#compareTbl").css('display', 'block')
                            $("#productUrl1").text(data.product1.product_name).attr('href', shopUrl+'/'+data.product1.slug).css('display', 'block');
                            $("#productUrl2").text(data.product2.product_name).attr('href', shopUrl+'/'+data.product2.slug).css('display', 'block');

                            $("#productTitle1").empty().text(data.product1.product_name);
                            $("#productTitle2").empty().text(data.product2.product_name);
                            $("#productPrice1").empty().text('$'+data.product1.current_price);
                            $("#productPrice2").empty().text('$'+data.product2.current_price);
                            $("#productThc1").empty().text(data.product1.thc_potency+'%');
                            $("#productThc2").empty().text(data.product2.thc_potency+'%');
                            $("#productCbd1").empty().text(data.product1.cbd_potency+'%');
                            $("#productCbd2").empty().text(data.product2.cbd_potency+'%');

                            $("#productImage1").attr('src', fileExists(imgUrl+'/'+data.product1.product_image)).css('display', 'block');
                            $("#productImage2").attr('src', fileExists(imgUrl+'/'+data.product2.product_image)).css('display', 'block');

                            $("#prodPriceWeight1").html('$'+data.product1.current_price+'/<span>'+data.product1.weight+'G</span>').css('display', 'block');
                            $("#prodPriceWeight2").html('$'+data.product2.current_price+'/<span>'+data.product2.weight+'G</span>').css('display', 'block');
                        }else{
                            toastr.error(data.msg, 'Error!')
                        }
                    }
                });
            })
        });

        function fileExists(url)
        {
            var http = new XMLHttpRequest();
            http.open('HEAD', url, false);
            http.send();
            if (http.status === 200) {
                return url;
            } else {
                return '{{asset("admin/images/placeholder.png")}}';
            }
        }
    </script>
@endsection