@extends('layouts.front-end.app')

@section('title',$product['name'])

@push('css_or_js')
<meta name="description" content="{{$product->slug}}">
<meta name="keywords" content="@foreach(explode(' ',$product['name']) as $keyword) {{$keyword.' , '}} @endforeach">
@if($product->added_by=='seller')
<meta name="author" content="{{ $product->seller->shop?$product->seller->shop->name:$product->seller->f_name}}">
@elseif($product->added_by=='admin')
<meta name="author" content="{{$web_config['name']->value}}">
@endif
<!-- Viewport-->

@if($product['meta_image']!=null)
<meta property="og:image" content="{{asset(" storage/app/public/product/meta")}}/{{$product->meta_image}}"/>
<meta property="twitter:card" content="{{asset(" storage/app/public/product/meta")}}/{{$product->meta_image}}"/>
@else
<meta property="og:image" content="{{asset(" storage/app/public/product/thumbnail")}}/{{$product->thumbnail}}"/>
<meta property="twitter:card" content="{{asset(" storage/app/public/product/thumbnail/")}}/{{$product->thumbnail}}"/>
@endif

@if($product['meta_title']!=null)
<meta property="og:title" content="{{$product->meta_title}}" />
<meta property="twitter:title" content="{{$product->meta_title}}" />
@else
<meta property="og:title" content="{{$product->name}}" />
<meta property="twitter:title" content="{{$product->name}}" />
@endif
<meta property="og:url" content="{{route('product',[$product->slug])}}">

@if($product['meta_description']!=null)
<meta property="twitter:description" content="{!! $product['meta_description'] !!}">
<meta property="og:description" content="{!! $product['meta_description'] !!}">
@else
<meta property="og:description"
    content="@foreach(explode(' ',$product['name']) as $keyword) {{$keyword.' , '}} @endforeach">
<meta property="twitter:description"
    content="@foreach(explode(' ',$product['name']) as $keyword) {{$keyword.' , '}} @endforeach">
@endif
<meta property="twitter:url" content="{{route('product',[$product->slug])}}">

<link rel="stylesheet" href="{{asset('public/assets/front-end/css/product-details.css')}}" />
<style>
    .btn-number:hover {
        color: {
                {
                $web_config['secondary_color']
            }
        }

        ;

    }

    .for-total-price {
        margin- {
                {
                Session: :get('direction')==="rtl" ? 'right': 'left'
            }
        }

        : -30%;
    }

    .feature_header span {
        padding- {
                {
                Session: :get('direction')==="rtl" ? 'right': 'left'
            }
        }

        : 15px;
    }

    .flash-deals-background-image {
        background: {
                {
                $web_config['primary_color']
            }
        }

        10;
    }

    @media (max-width: 768px) {
        .for-total-price {
            padding- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left'
                }
            }

            : 30%;
        }

        .product-quantity {
            padding- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left'
                }
            }

            : 4%;
        }

        .for-margin-bnt-mobile {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'left': 'right'
                }
            }

            : 7px;
        }

    }

    @media (max-width: 375px) {
        .for-margin-bnt-mobile {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'left': 'right'
                }
            }

            : 3px;
        }

        .for-discount {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left'
                }
            }

            : 10% !important;
        }

        .for-dicount-div {
            margin-top: -5%;

            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'left': 'right'
                }
            }

            : -7%;
        }

        .product-quantity {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left'
                }
            }

            : 4%;
        }

    }

    @media (max-width: 500px) {
        .for-dicount-div {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'left': 'right'
                }
            }

            : -5%;
        }

        .for-total-price {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left'
                }
            }

            : -20%;
        }

        .view-btn-div {
            float: {
                    {
                    Session: :get('direction')==="rtl" ? 'left': 'right'
                }
            }

            ;
        }

        .for-discount {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left'
                }
            }

            : 7%;
        }

        .for-mobile-capacity {
            margin- {
                    {
                    Session: :get('direction')==="rtl" ? 'right': 'left';
                }
            }
        }
    }
</style>
<style>
    thead {
        background: {
                {
                $web_config['primary_color'];
            }
        }
    }
    .body-new{
        margin: auto;
    }
    .totalinfo{
        margin: auto;
        margin-top: 2rem;
    }
    hr{
        background: #F7F7F7;
        width: 100%;
        margin-bottom: 2rem;
    }
    .title-span{
        color: #727272;
        font-size: larger;
    }
    .card-input{
        background: #fbfbfb;
        border-radius: 9px;
        /* background: #FFFFFF; */
    }
</style>
@endpush

@section('content')

<div class="row" style="width: 100%">
    <div class="col-12">
        <div class="card">
            <div class="card-body">

                <form id="addForm" class="addForm" method="POST" enctype="multipart/form-data"
                    action="{{route('byNowStore',$product->id)}}">

                    <div class="row   body-new">
                        {{-- Personal Info start--}}
                        @include('buyNow.parts.personal_info')
                        {{-- Personal Info end--}}
                        <div class="col-2"></div>

                        {{-- Total Price start--}}
                        @include('buyNow.parts.total_price_info')
                        {{-- Total Price end--}}

              

                    </div>

                </form>

            </div>
        </div>
    </div>
</div>

@endsection





@push('script')

<script type="text/javascript">
    cartQuantityInitialize();
        getVariantPrice();
        $('#add-to-cart-form input').on('change', function () {
            getVariantPrice();
        });

        function showInstaImage(link) {
            $("#attachment-view").attr("src", link);
            $('#show-modal-view').modal('toggle')
        }

        function focus_preview_image_by_color(key) {
            $('a[href="#image' + key + '"]')[0].click();
        }
</script>
<script>
    $(document).ready(function () {
            load_review();
        });
        let load_review_count = 1;

        function load_review() {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            $.ajax({
                type: "post",
                url: '{{route('review-list-product')}}',
                data: {
                    product_id: {{$product->id}},
                    offset: load_review_count
                },
                success: function (data) {
                    $('#product-review-list').append(data.productReview)
                    if (data.not_empty == 0 && load_review_count > 2) {
                        toastr.info('{{\App\CPU\translate('no more review remain to load')}}', {
                            CloseButton: true,
                            ProgressBar: true
                        });
                        console.log('iff');
                    }
                }
            });
            load_review_count++
        }
</script>

{{-- Messaging with shop seller --}}
<script>
    $('#contact-seller').on('click', function (e) {
            // $('#seller_details').css('height', '200px');
            $('#seller_details').animate({'height': '276px'});
            $('#msg-option').css('display', 'block');
        });
        $('#sendBtn').on('click', function (e) {
            e.preventDefault();
            let msgValue = $('#msg-option').find('textarea').val();
            let data = {
                message: msgValue,
                shop_id: $('#msg-option').find('textarea').attr('shop-id'),
                seller_id: $('.msg-option').find('.seller_id').attr('seller-id'),
            }
            if (msgValue != '') {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });

                $.ajax({
                    type: "post",
                    url: '{{route('messages_store')}}',
                    data: data,
                    success: function (respons) {
                        /* console.log('send successfully'); */
                        toastr.success("{{translate('send_successfully')}}", {
                            CloseButton: true,
                            ProgressBar: true
                        });
                    }
                });
                $('#chatInputBox').val('');
                $('#msg-option').css('display', 'none');
                $('#contact-seller').find('.contact').attr('disabled', '');
                $('#seller_details').animate({'height': '125px'});
                $('#go_to_chatbox').css('display', 'block');
            } else {
                console.log('say something');
            }
        });
        $('#cancelBtn').on('click', function (e) {
            e.preventDefault();
            $('#seller_details').animate({'height': '114px'});
            $('#msg-option').css('display', 'none');
        });
</script>

<script type="text/javascript"
    src="https://platform-api.sharethis.com/js/sharethis.js#property=5f55f75bde227f0012147049&product=sticky-share-buttons"
    async="async"></script>

<script>
    $('.dropify').dropify();

</script>

<script>
    $(document).on('change','.changeShippingMethod',function (){
           var method_id=$(this).val();
           var product_id=$(this).attr('data-product');
           var variation_id=$('#variation_id').val();
           var qty=$('#qty').val();

           var linking="{{route('changeShippingMethod',':id')}}?product_id="+product_id+"&&variation_id="+variation_id+"&&qty="+qty;
           linking=linking.replace(':id',method_id);

            setTimeout(function () {
                $('#order_summary_data').load(linking)
            }, 500)


        })
</script>
<script>
    $(document).on('change','.changeVariationMethod',function (){
            var method_id=$(this).val();
            var product_id=$(this).attr('data-product');
            var shipping_method_id=$('#shipping_method_id').val();
            var qtyNum=$('#qty').val();



            var routing="{{route('changeVariationMethod',':id')}}?product_id="+product_id+"&&shipping_method_id="+shipping_method_id+"&&qty="+qtyNum;
            routing=routing.replace(':id',method_id);

            setTimeout(function () {
                $('#order_summary_data').load(routing)
            }, 500)


        })
</script>

<script>
    $(document).on('change keyup','#qty',function (){
            var qtyVal=$(this).val();
            var product_id=$(this).attr('data-product');
            var shipping_method_id=$('#shipping_method_id').val();
            var variation_id=$('#variation_id').val();



            var linked="{{route('changeQty',':id')}}?product_id="+product_id+"&&shipping_method_id="+shipping_method_id+"&&variation_id="+variation_id;
            linked=linked.replace(':id',qtyVal);

            setTimeout(function () {
                $('#order_summary_data').load(linked)
            }, 500)


        })
</script>


<script>
    $(document).on('submit', 'Form#addForm', function (e) {
            e.preventDefault();
            var formData = new FormData(this);
            var url = $('#addForm').attr('action');
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                beforeSend: function () {
                    $('#addButton').html('<span style="margin-right: 4px;">انتظر ..</span><i class="bx bx-loader bx-spin"></i>').attr('disabled', true);
                },
                success: function (data) {
                    if (data.status == 200) {
                        // show custom message or use the default
                        toastr.success((data.message) ?? 'تم اضافة البيانات بنجاح');

                        var routing="{{route('order_complete')}}";
                        setTimeout(function (){
                            window.location.href=routing;
                        },2000)

                    } else
                        toastr.error('عذرا هناك خطأ فني 😞');
                    $('#addButton').html(`اضافة`).attr('disabled', false);
                    $('#editOrCreate').modal('hide')
                },
                error: function (data) {
                    if (data.status === 500) {
                        toastr.error('عذرا هناك خطأ فني 😞');
                    } else if (data.status === 422) {
                        var errors = $.parseJSON(data.responseText);
                        $.each(errors, function (key, value) {
                            if ($.isPlainObject(value)) {
                                $.each(value, function (key, value) {
                                    toastr.error(value);
                                });
                            }
                        });
                    } else
                        toastr.error('عذرا هناك خطأ فني 😞');
                    $('#addButton').html(`اضافة`).attr('disabled', false);
                },//end error method

                cache: false,
                contentType: false,
                processData: false
            });
        });

</script>



@endpush