@section('content')

    <main class="main">

        <nav aria-label="breadcrumb" class="breadcrumb-nav">
            <div class="container">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('web.index')}}">{{config('global.raisonsociale')}}</a></li>
                    <li class="breadcrumb-item"><a href="{{route('web.shop')}}">Shop</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Panier</li>
                </ol>
            </div><!-- End .container -->
        </nav><!-- End .breadcrumb-nav -->

        <div class="page-content">
            <div class="cart">

                <div class="container">
                    @if(is_array(session('cart')) && count(session('cart'))>0)
                    <form action="" id="cart_store">
                        <div class="row">
                            <div class="col-lg-9 pr-5 pl-5">
                                <h6>Coordonnées pour la livraison</h6>
                                <hr>
                                <div class="row">

                                    <div class="col-md-4">
                                        <div class="form-group"><input type="text" class="form-control" placeholder="Nom & Prénom" name="client_details[client_name]" required></div>
                                    </div><!-- End .col-md-4 -->
                                    <div class="col-md-4">
                                        <div class="form-group"><input type="text" class="form-control numeric" placeholder="Numéro" name="client_details[client_phone]" required maxlength="8"></div>
                                    </div><!-- End .col-md-4 -->
                                    <div class="col-md-4">
                                        <div class="form-group"><input type="text" class="form-control" placeholder="Adresse"  name="client_details[client_address]" required></div>
                                    </div><!-- End .col-md-4 -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <select name="client_details[gouvernorat]" id="gouvernorat" class="form-control select2" required>
                                                @foreach($gouvenorats as $key=>$gouvernorat)
                                                    <option value="{{$key}}">{{$key}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div><!-- End .col-md-4 -->
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <select name="client_details[delegation]" id="delegation" class="form-control select2" required>
                                                @foreach($regions as $region)
                                                    <option value="{{$region->Delegation}}"   class="tohide" data-gouvernorat="{{$region->Gouvernorat}}" >{{$region->Delegation}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div><!-- End .col-md-4 -->
                                </div>
                                <h6>Articles choisis</h6>
                                <hr>
                                <table class="table table-cart table-mobile"  id="cartItems">
                                    <thead>
                                    <tr>
                                        <th>Produit</th>
                                        <th>Prix</th>
                                        <th>Quantité</th>
                                        <th>Total</th>
                                        <th></th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    @foreach(session('cart') as $product)
                                    <tr id="tr{{$product->id}}">
                                        <td class="product-col">
                                            <div class="product">
                                                <figure class="product-media">
                                                    <a href="#">
                                                        <img  loading="lazy" src="{{asset($product->default_image_url)}}" alt="Product image">
                                                    </a>
                                                </figure>

                                                <h3 class="product-title">
                                                    <a href="#">{{$product->name}}</a>
                                                </h3><!-- End .product-title -->
                                            </div><!-- End .product -->
                                        </td>
                                        <td class="price-col"><span class="price" id="price_id_{{$product->id}}">{{$product->detail}}</span> TND</td>
                                        <td class="quantity-col">
                                            <div class="cart-product-quantity">
                                                <input type="number" class="" value="1" min="1"  step="1" data-decimals="0" required name="quantity{{$product->id}}" data-product_id="{{$product->id}}">
                                            </div><!-- End .cart-product-quantity -->
                                        </td>
                                        <td class="total-col"><span class="total" id="total_id_{{$product->id}}">{{$product->detail}}</span> TND</td>
                                        <td class="remove-col"><button class="btn-remove deleteFromCart" data-product_id="{{$product->id}}"><i class="icon-close"></i></button></td>
                                    </tr>
                                    @endforeach
                                    </tbody>
                                </table><!-- End .table table-wishlist -->

    {{--                            <div class="cart-bottom">--}}
    {{--                                <div class="cart-discount">--}}
    {{--                                    <form action="#">--}}
    {{--                                        <div class="input-group">--}}
    {{--                                            <input type="text" class="form-control" required placeholder="coupon code">--}}
    {{--                                            <div class="input-group-append">--}}
    {{--                                                <button class="btn btn-outline-primary-2" type="submit"><i class="icon-long-arrow-right"></i></button>--}}
    {{--                                            </div><!-- .End .input-group-append -->--}}
    {{--                                        </div><!-- End .input-group -->--}}
    {{--                                    </form>--}}
    {{--                                </div><!-- End .cart-discount -->--}}

    {{--                                <a href="#" class="btn btn-outline-dark-2"><span>UPDATE CART</span><i class="icon-refresh"></i></a>--}}
    {{--                            </div><!-- End .cart-bottom -->--}}
                            </div><!-- End .col-lg-9 -->
                            <aside class="col-lg-3">
                                <div class="summary summary-cart">
                                    <h3 class="summary-title">Résumé</h3><!-- End .summary-title -->

                                    <table class="table table-summary">
                                        <tbody>
                                        <tr class="summary-subtotal">
                                            <td>Sous Total:</td>
                                            <td> <span id="totalGlobal"></span> TND</td>
                                        </tr><!-- End .summary-subtotal -->
                                        <tr class="summary-shipping">
                                            <td>Livraison:</td>
                                            <td>7 TND </td>
                                        </tr>

                                        <tr class="summary-total">
                                            <td>Total:</td>
                                            <td><span id="totalGlobal_Delivered"></span> TND</td>
                                        </tr><!-- End .summary-total -->

                                        </tbody>
                                    </table><!-- End .table table-summary -->

                                    <button type="submit"  class="btn btn-outline-primary-2 btn-order btn-block">Confirmer La Commande</button>
                                </div><!-- End .summary -->

                                <a href="{{route('web.shop')}}" class="btn btn-outline-dark-2 btn-block mb-3"><span>CONTINUER LE SHOPPING</span><i class="icon-refresh"></i></a>
                            </aside><!-- End .col-lg-3 -->
                        </div><!-- End .row -->
                    </form>
                        @else
                        <h1 class="text-center">Panier Vide</h1>
                        <h1 class="text-center">
                            <a href="" >
                                <i class="icon-shopping-cart" style="font-size: 120px"></i> <br>
                                <span class="cart-txt">Aucun Produit Choisi</span>
                            </a>
                        </h1>
                    @endif
                </div><!-- End .container -->
            </div><!-- End .cart -->
        </div><!-- End .page-content -->
    </main><!-- End .main -->




@stop
@include('website2.layouts.header')
@include('website2.layouts.topbar')
@include('website2.layouts.footer')

@yield('header')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
<!-- Plugins css -->


<link href="{{asset('assets/website/assets/css/plugins/nouislider/nouislider.css')}}" rel="stylesheet" type="text/css"/>
<link href="{{asset('assets/libs/select2/select2.min.css')}}" rel="stylesheet" type="text/css"/>
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
@yield('topbar')
@yield('sidebar')
@yield('content')
@yield('footer')
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}
{{--<script src="{{URL::asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-knob/jquery.knob.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/jquery-sparkline/jquery.sparkline.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.time.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.tooltip.min.js')}}"></script>--}}
{{--<script src="{{URL::asset('assets/libs/flot-charts/jquery.flot.selection.js')}}"></script>--}}
<script src="{{asset('assets/website/assets/js/nouislider.min.js')}}"></script>
<script src="{{asset('assets/libs/select2/select2.min.js')}}"></script>
<script src="{{asset('assets/libs/bootstrap-maxlength/bootstrap-maxlength.min.js')}}"></script>
<script>
    $('.numeric').keyup(function(e){
        var max=$(this).attr('maxlenght');
        if (/\D/g.test(this.value))
        {
            // Filter non-digits from input value.
            this.value = this.value.replace(/\D/g, '');
        }
        if (e.which < 0x20) {
            // e.which < 0x20, then it's not a printable character
            // e.which === 0 - Not a character
            return; // Do nothing
        }
        if ($(this).val().toString().length == max) {
            e.preventDefault();
        } else if ($(this).val().toString().length > max) {
            // Maximum exceeded
            this.value = this.value.substring(0, max);
        }

    });
    $(".numeric").maxlength({

        warningClass: "badge badge-danger",
        limitReachedClass: "badge badge-success"
    });
    $('.select2').select2();
    $('#gouvernorat').change(function(){
        var gouvernorat=$('#gouvernorat').val();
        $("#delegation").val("");
        $("#delegation").select2({
            templateResult: function(option, container) {
                if ($(option.element).attr("data-gouvernorat") != gouvernorat){
                    $(container).css("display","none");
                }
                return option.text;
            }
        });
        $('.select2').css('width','100%');
    });
    $("#cart_store").submit(function (e) {
        e.preventDefault();
        var Form=$("#cart_store")[0];
        var formData= new FormData(Form);
        $.ajax({
            type: 'POST',
            url:"{{route('web.cart.store')}}",
            headers: {
                'X-CSRF-TOKEN': '{{csrf_token()}}'
            },
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success:function(data)
            {
                $('.is-invalid').removeClass('is-invalid');
                Form.reset();
                $('#preloader').show();
                swal({
                    title: "Commande Enregistré !",
                    text: "Le livreur vous contacterai les plus brefs délais",
                    type: "success",
                    confirmButtonClass: "btn btn-confirm mt-2"
                });

                setTimeout(function(){location.reload();}, 2000);
            }, error: function (reject) {
                $('.is-invalid').removeClass('is-invalid');
                swal({
                    title: "Erreur!",
                    text: "Merci de suivre les indications",
                    type: "error",
                    confirmButtonClass: "btn btn-confirm mt-2"
                });
                var response=$.parseJSON(reject.responseText);
                $.each(response.errors,function(key,val){
                    $("#" + key ).addClass('is-invalid');
                    $("#" + key + "_errors").html('<li class="parsley-required">'+val+'</li>');

                });
            }
        });

    });
    function calculate_gtotal() {


            let totalGlobal = 0;
            let totalPerLine = 0;
            $('#cartItems').find(':input[type="number"]').each(function () {
                console.log(this);
                let product_id = $(this).attr('data-product_id');
                let price = parseFloat($('#price_id_' + product_id).text()??0);
                totalPerLine = parseFloat($(this).val()) * parseFloat(price);
                totalGlobal += totalPerLine;
                console.log(totalGlobal);
                $('#total_id_' + product_id).text( totalPerLine.toFixed(3));
            });
            $('#totalGlobal').html(totalGlobal.toFixed(3));
            $('#totalGlobal_Delivered').html((totalGlobal+7).toFixed(3));



    }
    $(document).on('change',':input[type="number"]',function () {
        calculate_gtotal();
    });
    calculate_gtotal();
</script>

{{--_____________________________________--}}
{{--_____________________________________--}}
{{--_____________________________________--}}

@include('website2.layouts.end')