@extends("layout.app")
@section("styles")
    <link href="{{url("https://cdn.ihouse.ps/css/select2.min.css")}}" rel="stylesheet"
          type="text/css" media="all"/>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@1.2.3/dist/select2-bootstrap4.min.css">

    <style>
        .flickity-viewport{
            height: 400px!important;
            top: 10px;
        }
        .btn-group .btn:first-child:nth-last-child(2), .btn-group .btn:last-child:nth-child(2) {
            width: auto;
        }

        .select2-container--bootstrap4 .select2-results__option--group:not(:first-child):before {
            border-bottom: 0 solid #333333 !important;
            border-top: 0 solid #333333 !important;
            text-align: right;
        }

        .select2-container--bootstrap4 .select2-results__option {
            border-bottom: 0 solid #333333 !important;
            text-align: right;
        }
    </style>
@endsection
@section("content")

    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-md-5" style="height: 100%; position: relative">
                    <div class="slider border--round boxed--border" data-paging="true" data-arrows="true" id="sticky">
                        <ul class="slides">
                            @forelse($item->used_item_images as $usedItemImage)
                                <li>
                                    <a href="{{ url("https://cdn.ihouse.ps/" . $usedItemImage->image) }}"
                                       data-lightbox="gallery">
                                        <img alt="{{$item->name}}"
                                             src="{{ url("https://cdn.ihouse.ps/" . $usedItemImage->image) }}"/>
                                    </a>
                                </li>
                            @empty
                                <li>
                                    <a href="{{$item->image}}" data-lightbox="gallery">
                                        <img alt="{{$item->name}}" src="{{ $item->image }}"/>
                                    </a>
                                </li>
                            @endforelse
                        </ul>
                        @if($item->badges()->where("position","bottom")->where("is_active",1)->first())
                            <div class="bottom_tag_used"
                                 @if($item->badges()->where("position","bottom")->latest()->first()->background_color) style="background:{{$item->badges()->where("position","bottom")->latest()->first()->background_color}}" @endif><span
                                    @if($item->badges()->where("position","bottom")->latest()->first()->font_color) style="color:{{$item->badges()->where("position","bottom")->latest()->first()->font_color}}" @endif>{{$item->badges()->where("position","bottom")->first()->title}}</span>
                            </div>
                        @endif
                    </div>
                    <!--end slider-->
                </div>
                <div class="col-sm-7 col-md-7 text-left">
                    <h2 class="text-left" dir="ltr">{{$item->name}}</h2>
                    <div class="text-center">
                        <div class="badges"><i class="fa fa-check-circle"></i> تم فحص الجهاز في مشغل iHouse</div>

                        @if($item->is_from_ihouse)
                            <div class="badges badges-b "><i class="fa fa-check-circle"></i> اصل الجهاز مشترى من iHouse
                            </div>@endif
                    </div>

                    <p class="text-left" dir="ltr">{{$item->code}}</p>
                    @if($item->device_status)
                        
                        <div class="row">
                            <div class="col-md-4 col-6 col-xs-6 col-sm-6">
                                <div class="feature boxed boxed--border border--round text-center">
                                    <i class="fa fa-heartbeat fa-2x block"
                                       style="color:#919191"></i>
                                    <br>
                                    <span>حالة الجهاز</span>
                                    <span class="h5" style="color:{{$status_color}}"> {{$device_status}}</span>
                                </div>
                            </div>

                            <div class="col-md-4 col-6 col-xs-6 col-sm-6">
                                <div class="feature boxed boxed--border border--round text-center">
                                    <i class="fa fa-vector-square fa-2x block"
                                       style="color:#919191"></i>
                                    <br>
                                    <span>الشكل الخارجي</span>
                                    <span class="h5" style="color:{{$case_color}}"> {{$case_status}}</span>
                                </div>
                            </div>

                            <div class="col-md-4 col-6 col-xs-6 col-sm-6">
                                <div class="feature boxed boxed--border border--round text-center">
                                    <i class="fa fa-{{$battery_icon}} fa-2x block"
                                       style="color:#919191"></i>
                                    <br>
                                    <span>حالة البطارية</span>
                                    <span class="h5" style="color:{{$battery_color}}"> {{$battery_status}}</span>
                                </div>
                            </div>

                            <div class="col-md-4 col-6 col-xs-6 col-sm-6">
                                <div class="feature boxed boxed--border border--round text-center">
                                    <i class="fa fa-plug fa-2x block"
                                       style="color:#919191"></i>
                                    <br>
                                    <span>الشاحن</span>
                                    <span class="h5" style="color:{{$charger_color}}"> {{$charger_status}}</span>
                                </div>
                            </div>

                            <div class="col-md-4 col-6 col-xs-6 col-sm-6">
                                <div class="feature boxed boxed--border border--round text-center">
                                    <i class="fa fa-keyboard fa-2x block"
                                       style="color:#919191"></i>
                                    <br>
                                    <span> لوحة المفاتيح</span>
                                    <span class="h5" style="color:{{$keyboard_color}}"> {{$keyboard_status}}</span>
                                </div>
                            </div>

                            <div class="col-md-4 col-6 col-xs-6 col-sm-6">
                                <div class="feature boxed boxed--border border--round text-center">
                                    <i class="fa fa-mouse-pointer fa-2x block"
                                       style="color:#919191"></i>
                                    <br>
                                    <span>فأرة/تراك باد</span>
                                    <span class="h5" style="color:{{$mouse_color}}"> {{$mouse_status}}</span>
                                </div>
                            </div>
                        </div>


                    @endif
                    <div class="text-left" dir="ltr">
                        <h3 class="mb-0">Specifications</h3>
                        <div>
                            {!!$item->specifications!!}
                        </div>
                    </div>

                    @if($item->conditions)
                        <div class="text-left mt-3" dir="ltr">
                            <h3 class="mb-0">Conditions</h3>
                            <div>
                                {!!nl2br($item->conditions)!!}
                            </div>
                        </div>
                    @endif

                    @if($item->includes)
                        <div class="text-left mt-3" dir="ltr">
                            <h3 class="mb-0">Includes</h3>
                            <div>
                                {!!nl2br($item->includes)!!}
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->


    </section>

    <div class="product-footer" dir="rt">
        <div class="row justify-content-center">
            <div class="col-md-3 text-center">

                <input type="hidden" id="quantityTextStatic" value="{{ $item->quantityText }}"/>
                <input type="hidden" value="{{($item->is_sale || $item->discountState) ? 1 : 0 }}" id="is_sale_input"/>
                <input type="hidden" value="{{ $item->price }}" id="price_before_discount_input"/>
                <input type="hidden" name="total-price-value" id="total-price-value" value="{{ $item->totalPrice }}">
                <input type="hidden" value="{{ $item->price }}" id="originalPrice"/>
                <input type="hidden" value="{{ $item->totalPrice }}" id="originalDiscount"/>
                <input type="hidden" value="{{ encrypt($item->totalPrice) }}" id="totalPriceAfterDiscount"/>

                <label style="margin:0px" class="h5" id="quantityText"><i
                        class="fas fa-box-open fa-1x fcg"></i> {{ $item->quantityText }}</label>
                <div class="send-notification">

                    @if($item->stock>0)
                        @include('partial.direct_buy_btn_footer')
                    @else
                        @include('partial.alert_when_available')

                    @endif

                </div>
                <h5>
                    <label style="margin:0;display: none"
                           class="text-success text-center h5 sent-notification-alert"></label>
                </h5>
            </div>
            <div class="col-md-3 text-center">
                <div class="row">
                    <div class="col-12">
                        <a href="#" data-toggle="modal" data-target="#delivery-conditions-modal">
                            <i class="fa fa-truck"></i>
                            آلية التوصيل</a>
                    </div>
                </div>

                <div class="row mt-1 mt-md-2">
                    <div class="col-12">
                        <a href="#" data-toggle="modal" data-target="#installments-modal">
                            <i class="fa fa-calendar-alt"></i>
                            إحتساب التقسيط</a>
                    </div>
                </div>

            </div>

            <div class="col-md-3 text-left">

                <div class="row">
                    @if($item->is_sale && $item->discountState)
                        <div class="col-md-6 col-6 text-md-left text-lg-left text-left pr-2 pl-2">
                            <h6 dir="rtl" class="p-0 m-0">السعر قبل الخصم</h6>
                        </div>
                        <div class="col-md-6 col-6 text-md-right text-lg-right text-right pr-2 pl-2">
                            <h6><span id="price"><s>{{$item->price}} شيكل</s></span></h6>
                        </div>
                    @endif
                </div>

                <div class="row">
                    <div class="col-md-6 col-6 text-md-left text-lg-left text-left pr-2 pl-2">
                        <h4 class="f15 p-0 m-0" style="line-height: 19px"> <strong><span>{{$item->discountState?"السعر بعد الخصم":"السعر"}} </span></strong><br> <small
                                style="line-height: 19px">@if($item->is_sale) {{$item->discount_description}}@endif</small>
                        </h4>
                    </div>
                    <div class="col-md-6 col-6 text-md-right text-lg-right text-right pr-2 pl-2">
                        <h4><span id="total_loading" style="display:none" class="float-right"
                                  style="padding: 3px;"></span><strong><span
                                    id="total-price">{{ $item->totalPrice }}</span> شيكل </strong></h4>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection
@section("scripts")
    @include('partial.send_notification_partial')

    <script src="https://cdn.ihouse.ps/js/jquery-magnet.js"></script>
    <script>
        $(function () {
            $("#sticky").stick_in_parent({
                offset_top: 60
            });
        })
    </script>
    <script>
        $(document).ready(function () {
            $('.town').select2({
                theme: 'bootstrap4'
            });
        });
    </script>
    <script type="text/javascript">

        jQuery(document).ready(function () {

            jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
        });

        function update_delivery() {
            var months = $("#months").val();
            var total = $("#total-price-value").val();
            $.ajax({
                url: "{{route("calculate-payments")}}",
                type: "POST",
                data: {
                    months: months,
                    total: total,
                    with_payments: true
                },
                traditional: true,
                beforeSend: function () {
                    $('#total_loading').html('<i class="fa fa-circle-refresh fa-spin"></i>');
                },
                success: function (result) {
                    $("#total-money").text(result.total_payment_price);
                    $("#monthly-payment").text(result.payment);
                    $("#total-price-final-money").show();
                    $("#total-price-final").hide();
                },
                error: function () {
                }
            });
        }

        $(".input-number").click(function () {
            update_delivery();
        });
        $('input:radio[name=payments]').on('change', function () {
            update_delivery();

        });

        $("#months").change(function () {
            update_delivery();
        });

        $(document).ready(function () {
            update_delivery();
            var oldPriceBeforeDiscount = {{ $item->price }};
            var oldPrice = {{ $item->totalPrice }};
            var upgrades = [];
            // updatePriceWithOptions(false, false);
            $('#with-delivery').change(function () {
                $('#delivery-div').fadeToggle();
                $('#delivery-note-div').fadeToggle();
                if ((parseInt($('#originalPrice').val()) <= {{\App\Models\Settings::where("key",'payments_min')->first()->value}}) || parseInt($('#lastPrice').val() <= {{\App\Models\Settings::where("key",'payments_min')->first()->value}})) {
                    $('#with-payments').attr('disabled', true);
                } else {
                    $('.checkbox-desc').toggleClass("checkbox-disabled-desc");
                    $('#with-payments').prop("checked", false);
                    $('#with-payments').prop("disabled", $("#with-delivery").is(':checked'));
                }
                updatePriceWithOptions($('#with-payments').is(':checked'), $('#with-delivery').is(':checked'));
            });

            $('#with-payments').change(function () {
                if ((parseInt($('#originalPrice').val()) <= {{\App\Models\Settings::where("key",'payments_min')->first()->value}})) {
                    $('#warning-text').fadeToggle('fast');
                    return false;
                }
                $("#payments-months").trigger("input");
                $('#with-delivery').prop("checked", false);
                $('.delivery-checkbox-desc').toggleClass("checkbox-disabled-desc");
                $('#with-delivery').prop("disabled", $("#with-payments").is(':checked'));
                $('#delivery-note-div').fadeOut();
                $('#delivery-div').fadeOut();
                $('#payments-div').fadeToggle();
            });
            $("#payments-months").on("input", function () {
                if ($('#with-payments').is(':checked')) {
                    $('#discountBeforePaymentsChecked').val(oldPrice);
                    $('#priceBeforePaymentsChecked').val(oldPriceBeforeDiscount);
                }
                if (!$("#payments-months").val() || $("#payments-months").val() > 36) {
                    $("#payments-months").val(12);
                }
                updatePriceWithOptions($('#with-payments').is(':checked'), $('#with-delivery').is(':checked'));

            });

            function updatePriceWithOptions(is_payment, is_delivery) {
                var upgradesTotal = 0;
                $.each(upgrades, function () {
                    upgradesTotal += this;
                });
                $.ajax({
                    url: "{{route("update_price")}}",
                    type: "POST",
                    data: {
                        discountState: {{ json_encode($item->discountState) }},
                        originalPrice: parseInt($('#originalPrice').val()),
                        lastPrice: parseInt($('#originalDiscount').val()),
                        is_sale: $('#is_sale_input').val(),
                        originalPriceBeforePayments: parseInt($('#discountBeforePaymentsChecked').val()),
                        lastPriceBeforePayments: parseInt($('#priceBeforePaymentsChecked').val()),
                        percentageText: {{json_encode($item->discountPercentage)}},
                        upgradesTotal: upgradesTotal,
                        is_delivery: is_delivery,
                        is_payment: is_payment,
                        months: $("#payments-months").val(),
                        with_payments: $('#with-payments').is(':checked'),
                        quantityTextStatic: $('#quantityTextStatic').val(),
                    },
                    traditional: true,
                    beforeSend: function () {
                        $('#total_loading').html('<i class="fa fa-circle-refresh fa-spin"></i>');
                    },
                    success: function (result) {
                        if (result.is_sale) {
                            if (result.with_payments) {
                                $("#price s").html((result.total_payment_price).toLocaleString() + 'شيكل ');
                            } else {
                                $('#price s').html(result.originalPrice.toLocaleString() + 'شيكل ');
                            }
                            $('#price_before_discount_input').val(result.originalPrice);
                        }
                        var deliveryText = (result.deliveryPrice == 0) ? "مجانا" : "{{\App\Models\Settings::where("key",'delivery_price')->first()->value}}"
                        $('#delivery-price').html(deliveryText);
                        $("#payment-price").html(result.payment);
                        $('#total_loading').html('');
                        $('#quantityText').html(result.quantityText);
                        if (result.with_payments) {
                            $("#total-price").html(result.payment_discount);
                            $("#total-price-value").val(result.total_payment_discount);
                        } else {
                            $("#total-price").html(result.lastPrice.toLocaleString());
                            $("#total-price-value").val(result.lastPrice);
                        }
                    },
                    error: function () {
                    }
                });

            }

        });

        function getSendNotificationData() {
            let is_alert_when = $(`[name='is_alert_when']`).val()

            return {
                is_alert_when: is_alert_when,
                town: $('#town').val(),
                address: $('#address').val(),
                name: $('#name').val(),
                mobile: $('#mobile-number').val(),
                item_name: "{{$item->name}}",
                used_item: {{$item->id}},
                encrypt_price: $('#totalPriceAfterDiscount').val()

            };
        }
    </script>
@endsection
@section("content-footer")
    <div class="modal fade" id="installments-modal" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">إحتساب التقسيط</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-right">
                    <div class="boxed boxed--lg">
                        <div class="col-md-12">
                            <h4> ما هو عدد الاشهر</h4>
                        </div>
                        <div class="col-md-12 text-center">
                            <div class="input-number">
                                <input id="months" type="number" name="months" placeholder="عدد الاشهر" value="12"
                                       min="1" max="36" class="form-control input-sm"/>
                                <div class="input-number__controls">
                                    <span class="input-number__increase"><i class="stack-up-open"></i></span>
                                    <span class="input-number__decrease"><i class="stack-down-open"></i></span>
                                </div>
                            </div>

                            <h5 dir="rtl"> القسط الشهري: <span id="monthly-payment"></span>₪</h5>
                            <h4 class="unmarg--bottom" dir="rtl"> المجموع قبل التقسيط: <span
                                    id="before-total-money">{{$item->totalPrice}}</span>₪</h4>
                            <h3 class="unmarg--bottom" dir="rtl"> المجموع بعد التقسيط: <span id="total-money"></span>₪
                            </h3>

                        </div>
                        <h2>طرق التقسيط</h2>
                        <hr class="short">
                        <p class="lead text-right">
                            {!! \App\Models\Settings::where("key",'payments_methods')->first()->value !!}
                        </p>

                    </div>

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


    @include('partial.direct_buy_modal')

    <div class="modal fade" id="delivery-conditions-modal" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">آلية التوصيل</h3>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body text-right">
                    {!! \App\Models\Settings::where("key",'delivery_conditions')->first()->value !!}

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

    <section class="container-fluid pb100">
        <div class="container">
            <div class="row">
                <div class="col-sm-12  text-right">
                    <p class="footer-helper">
                        {!! \App\Models\Settings::where("key",'used_payments_conditions')->first()->value !!}
                    </p>
                </div>

            </div>
        </div>
    </section>
@endsection