@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'}}: 7%;
            }
        }
    </style>
    <style>
        thead {
            background: {{$web_config['primary_color']}}  !important;
        }
    </style>
@endpush

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="row mb-2">
                        <div class="col-sm-4">
                            <h4 class="card-title">{{$product->name}}</h4>
                            <p class="card-title-desc">

                            </p>
                        </div>

                    </div>

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

                    <div class="row g-4">

                        <div @if($form) class="d-flex flex-column mb-7 fv-row col-sm-4" @else class="d-flex flex-column mb-7 fv-row col-sm-6"  @endif >

                            <h3>{{\App\CPU\translate('Personal Info')}}</h3>


                            <div class="card mt-2 my-div">
                                <!-- Font Awesome user icon -->

                                <div class="card-body">
                                    <div class="row  g-4">


                                        <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                            <!--begin::Label-->
                                            <label for="name"
                                                   class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span class="required mr-1">{{\App\CPU\translate('Name')}}</span>
                                            </label>

                                            <input type="text" class="form-control" id="name" name="name"
                                                   value="{{$user->name??''}}">

                                        </div>

                                        <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                            <!--begin::Label-->
                                            <label for="phone"
                                                   class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span class="required mr-1">{{\App\CPU\translate('Phone')}}</span>
                                            </label>

                                            <input type="text" class="form-control" id="phone" name="phone"
                                                   value="{{$user->phone ??''}}">

                                        </div>

                                        <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                            <!--begin::Label-->
                                            <label for="email"
                                                   class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span class="required mr-1">{{\App\CPU\translate('Email')}}</span>
                                            </label>

                                            <input type="email" class="form-control" id="email" name="email"
                                                   value="{{$user->email??''}}">

                                        </div>


                                        <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                            <!--begin::Label-->
                                            <label for="password"
                                                   class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                <span class="required mr-1">{{\App\CPU\translate('Password')}}</span>
                                            </label>

                                            <input type="password" class="form-control" id="password" name="password">

                                        </div>


                                    </div>

                                </div>


                            </div>


                            <button type="submit" class="btn btn-primary m-4" id="addButton">{{\App\CPU\translate('Submit')}}</button>

                        </div>
                    @if($form)
                        <div class="d-flex flex-column mb-7 fv-row col-sm-4">

                            <h3>{{\App\CPU\translate('Form Info')}}</h3>


                            <div class="card mt-2 my-div">
                                <!-- Font Awesome user icon -->

                                <div class="card-body">
                                    <div class="row  g-4">

                                        @if(!$form)
                                            <h1>{{\App\CPU\translate('There are no requirements')}}</h1>
                                        @else
                                            @foreach($form->details as $details)



                                                <div class="card mt-2 my-div">
                                                    <!-- Font Awesome user icon -->

                                                    <div class="card-body">
                                                        <div class="row  g-4">
                                                            <div class="d-flex flex-column mb-1 fv-row col-sm-12 text-center">

                                                                <a data-fancybox="" href="{{asset('storage/app/public/forms')."/".$details['information_image']}}">
                                                                    <img class="" height="60px" width="120px" src="{{asset('storage/app/public/forms')."/".$details['information_image']}}">
                                                                </a>

                                                            </div>



                                                             @if($details->type=='image')

                                                                <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                                                    <label for="{{$details->id}}_image" class="form-control-label">
                                                                        @if(app()->getLocale()=='ar')
                                                                            {{$details->title_ar}}
                                                                        @else
                                                                            {{$details->title_en}}
                                                                        @endif

                                                                    </label>
                                                                    <input @if($details->is_mandatory==1) required  @endif type="file" class="dropify" name="{{$details->id}}_image" data-default-file="" accept="image/*"/>
                                                                    <span
                                                                        class="form-text text-muted text-center"><{{\App\CPU\translate('Only the following formats are allowed: jpeg, jpg, png, gif, svg, webp, avif.')}}/span>
                                                                </div>
                                                            @elseif($details->type=='text')

                                                                <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                                                    <!--begin::Label-->
                                                                    <label for="{{$details->id}}_title"
                                                                           class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                                    <span
                                                                        class="required mr-1">

                                                                        @if(app()->getLocale()=='ar')
                                                                            {{$details->title_ar}}
                                                                        @else
                                                                            {{$details->title_en}}
                                                                        @endif
                                                                    </span>
                                                                    </label>

                                                                    <textarea @if($details->is_mandatory==1) required  @endif  name="{{$details->id}}_title" id="{{$details->id}}_title" class="form-control" rows="5"
                                                                              placeholder=""></textarea>


                                                                </div>

                                                            @else

                                                                <div class="d-flex flex-column mb-1 fv-row col-sm-12">
                                                                    <!--begin::Label-->
                                                                    <label for="{{$details->id}}_title"
                                                                           class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                                    <span
                                                                        class="required mr-1">

                                                                        @if(app()->getLocale()=='ar')
                                                                            {{$details->title_ar}}
                                                                        @else
                                                                            {{$details->title_en}}
                                                                        @endif
                                                                    </span>
                                                                    </label>

                                                                    <input @if($details->is_mandatory==1) required  @endif @if($details->type=='input')  maxlength="{{$details->limit_character}}"  @endif type="text" class="form-control"
                                                                           id="{{$details->id}}_title"
                                                                           name="{{$details->id}}_title">

                                                                </div>
                                                             @endif

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

                                            @endforeach

                                        @endif


                                    </div>

                                </div>


                            </div>


                        </div>
                    @endif

                        <div @if($form) class="d-flex flex-column mb-7 fv-row col-sm-4" @else class="d-flex flex-column mb-7 fv-row col-sm-6"  @endif >

                            <h3>{{\App\CPU\translate('Total Price')}}</h3>


                            <div class="card mt-2 my-div">
                                <!-- Font Awesome user icon -->

                                <div class="card-body">

                                    <div class="row">

                                        <div class="col-12">

                                            <label for="qty"
                                                   class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                                                    <span class="required mr-1">{{\App\CPU\translate('Qty')}}</span>
                                            </label>

                                            <input  required min="1"  data-product="{{$product->id}}"   type="number" class="form-control qtyChange"
                                                   id="qty"
                                                   name="qty" value="1">

                                        </div>
                                        <div class="col-12">
                                            <select data-product="{{$product->id}}" class="form-control changeShippingMethod" name="shipping_method_id" id="shipping_method_id"  >
                                                <option selected disabled>{{\App\CPU\translate('choose_shipping_method')}}</option>
                                                @foreach($shippings as $shipping)
                                                    <option
                                                        value="{{$shipping['id']}}" >
                                                        {{$shipping['title'].' ( '.$shipping['duration'].' ) '.\App\CPU\Helpers::currency_converter($shipping['cost'])}}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        @if($type=='variation')
                                            <div class="col-12">
                                                <select required data-product="{{$product->id}}" class="form-control changeVariationMethod" name="variation_id" id="variation_id"  >
                                                    @foreach($variation as $piv)
                                                        <option
                                                            value="{{$piv->type}}" >
                                                            {{$piv->type}}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        @endif
                                    </div>

                                    <div id="order_summary_data">
                                        @include('buyNow.parts.order_summary')
                                    </div>


                                </div>


                            </div>

                        </div>


                    </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