@extends("layout.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/css/select2.min.css" rel="stylesheet" type="text/css" media="all" />
@endsection
@section("content")
    <section>
        <div class="container">
            <div class="row">
                <div class="col-sm-5 col-md-5">
                    <div class="slider border--round boxed--border" data-paging="true" data-arrows="true">
                        <ul class="slides">
                            <li>
                                <a href="{{url("https://cdn.ihouse.ps/$item->default_image")}}" data-lightbox="gallery">
                                    <img alt="{{$item->name}}" src="{{url("https://cdn.ihouse.ps/$item->default_image}")}}" />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!--end slider-->
                </div>
                <div class="col-sm-7 col-md-7">
                    <h2>{{$item->name}}</h2>
                    <div>
                        <p>
                            {!!nl2br($item->specifications)!!}
                        </p>
                    </div>
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->


    </section>
    <div class="product-footer " dir="rtl" style="position: fixed!important;">
        <div class="row">
            <div class="col-md-5">
                <table>
                    <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" />
                    @if($item->is_sale)
                        <tr>
                            <td>
                                <h5> سعر الجهاز قبل الخصم</h5></td>
                            <td>
                                <h5 id="price">
                                    <s>{{$item->price}} شيكل</s>
                                </h5>
                            </td>
                        </tr>
                    @endif
                    <tr id="delivery-div" style="display: none">
                        <td><h5>التوصيل</h5></td>
                        <td><h5 id="delivery-price">30</h5></td>
                    </tr>
                    <tr>
                        <td>
                            <h5><strong> السعر النهائي </strong> <small>@if($item->is_sale) {{$item->discount_description}} @endif</small></h5>
                        </td>
                        <td style="width: 80%;"><span id="total_loading" class="pull-right" style="padding: 3px;"></span><h5><strong><span id="total-price"> {{ $item->totalPrice }}</span> شيكل </strong></h5></td>
                    </tr>
                    <tr id="warning-text" style="display: none !important;">
                        <td>
                            <h5><strong> ملاحظه هامه </strong></h5>
                        </td>
                        <td>لا يمكن التقسيط لاي قطعه سعرها اقل من {{\App\Models\Settings::where("key",'payments_min')->first()->value}} شيكل</td>
                    </tr>
                    <input type="hidden" name="total-price-value" id="total-price-value" value="{{ $item->price }}">
                    <input type="hidden" value="{{ encrypt($item->price) }}" id="totalPriceAfterDiscount"/>

                </table>

            </div>
            <div class="col-md-2">
                <i class="fas fa-credit-card fa-1x fcg"></i><br>

                <div class="input-checkbox">
                    <input id="with-payments" type="checkbox" value="1" {{ ($item->price < \App\Models\Settings::where("key",'payments_min')->first()->value || $item->totalPrice < \App\Models\Settings::where("key",'payments_min')->first()->value) ? 'disabled' : '' }} name="with-payments" />
                    <label for="with-payments"></label>
                </div>

                <span><h5 style="margin:0 0" class="checkbox-desc {{ ($item->price < \App\Models\Settings::where("key",'payments_min')->first()->value || $item->totalPrice < \App\Models\Settings::where("key",'payments_min')->first()->value) ? 'checkbox-disabled-desc' : '' }}">تقسيط </h5></span>
                <div id="payments-div"  style="display:none">
                    <input id="payments-months" type="number" name="months" placeholder="عدد الاشهر" value="12" min="1" max="36" />
                    <h6 dir="rtl">
                        <div class="modal-instance">
                            <a class="modal-trigger" href="#">
                                <span class="btn__text"><i class="fas fa-info"></i></span>
                            </a>
                            <div class="modal-container">
                                <div class="modal-content">
                                    <div class="boxed boxed--lg">
                                        <h2>Here is a basic text modal</h2>
                                        <hr class="short">
                                        <p class="lead">
                                            Stack's visual style is simple yet distinct, making it an ideal starting point for your project whether it be a basic marketing site, or multi-page company presence.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div><!--end of modal instance-->


                        &nbsp;
                        <span id="payment-price">{{number_format($item->price/12)}}</span>شيكل&nbsp;
                    </h6>
                </div>
            </div>
            <div class="col-md-3">
                <i class="fas fa-truck fa-1x fcg"></i><br>
                <div class="input-checkbox">
                    <input id="with-delivery" type="checkbox" name="with-delivery" />

                    <label for="with-delivery"></label>

                </div>
                <span><h5 class="delivery-checkbox-desc">توصيل الى مناطق القدس والضفة </h5></span>

                <h6 dir="rtl" id="delivery-note-div" style="display:none">  <div class="modal-instance">
                        <a class="modal-trigger" href="#">
                            <span class="btn__text"><i class="fas fa-info"></i></span>
                        </a>
                        <div class="modal-container">
                            <div class="modal-content">
                                <div class="boxed boxed--lg">
                                    <h2>Here is a basic text modal</h2>
                                    <hr class="short">
                                    <p class="lead">
                                        Stack's visual style is simple yet distinct, making it an ideal starting point for your project whether it be a basic marketing site, or multi-page company presence.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    &nbsp;(مجاني لاكثر من 2000 شيكل)&nbsp;</h6>
            </div>
            <div class="col-md-2">

                <i class="fas fa-box-open fa-1x fcg" ></i><br>
                <input type="hidden" id="quantityTextStatic" value="{{ $item->quantityText }}" />
                <h5 id="quantityText">{{ $item->is_sold ? "مباع" ? "متوفر حاليا - التوصيل خلال ٢-٣ ايام" }}</h5>
            </div>
            <input type="hidden" value="{{ $item->price }}" id="originalPrice" />
            <input type="hidden" value="{{ $item->totalPrice }}" id="originalDiscount" />
        </div>
    </div>
@endsection
@section("scripts")
    <script src="https://cdn.ihouse.ps/js/select2.min.js"></script>

    <script>

        $(document).ready(function() {
            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) ? "مجانا" : "30";
                        $('#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() {
                    }
                });

            }

        });

    </script>
@endsection