@extends('web.layouts.layout')
@section('content')

    <main>
        <!-- Start section -->
        @include('web.layouts.header')

        <section class="checkout_pg section">
            <div class="container">
                <form id="form" action="{{$action}}" method="post" onsubmit="formAction(this)">
                    @CSRF
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="box mb-5">
                                <h2 class="sec_title bb fw-bold mb-4">{{__('web.account')}}   </h2>
                                <div class="details_box">
                                    <div class="mb-3">
                                        <p class="label mb-1"><i class="fas fa-building"></i>{{__('web.company')}}</p>
                                        <p class="data">{{$user->name}}  </p>
                                    </div>
                                    <div class="mb-3">
                                        <p class="label mb-1"><i class="fas fa-money-bill-wave"></i> {{__('web.credit_limit')}} </p>
                                        <p class="data" id="wallet"> </p>
                                    </div>
                                    <div id="wallet_enough" style="display: none">
                                        <div class="mb-3">
                                            <p class="label mb-1"><i class="fas fa-money-check"></i>{{__('web.pay_credit')}}</p>
                                            <p class="data" id="wallet_pay"></p>
                                        </div>
                                        <div class="mb-3">
                                            <p class="label mb-1"> <i class="fas fa-money-bill"></i> {{__('web.remain_credit')}} </p>
                                            <p class="data" id="wallet_remain"></p>
                                        </div>
                                    </div>
                                    <div id="wallet_not_enough" style="display: none">
                                        <div class="alert alert-danger py-4 text-center my-5" role="alert">
                                            {{__('web.wallet_not_enough')}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box mb-5">
                                <h2 class="sec_title bb fw-bold mb-4"> {{__('web.notes')}}    </h2>
                                <h6 class="mb-3">{{__('orders.note')}}        </h6>
                                <p style="color:red">{{__('web.max_250')}}</p>
                                <textarea name="note" class="form-control" placeholder="" rows="5"></textarea>
                            </div>
                            <div class="box mb-5">
                                <h2 class="sec_title bb fw-bold mb-4">{{__('web.cobon_disc')}}   </h2>
                                <div class="copoun_box">
                                    <input type="text" name="cobon" onchange="calculate()" class="form-control" placeholder="{{__('web.enter_cobon')}}" />
                                    <button type="button" class="apply_butn butn primary_butn">{{__('web.apply')}}</button>
                                </div>
                                <p id="cobon_msg"></p>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="box mb-5">
                                <h2 class="sec_title bb fw-bold mb-4">   {{__('web.addresses_fatoorah')}} </h2>
                                <h5 class="fs-6 mb-4">
                                    <i class="fas fa-map-marker-alt color-primary me-2"></i> {{__('web.addresses')}}
                                </h5>
                                <div class="mb-4">
                                    @foreach($locations as $key=>$row)
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" onclick="calculate()"  name="address_id" @if($key == 0) checked @endif  value="{{$row->id}}" id="locRadio{{$row->id}}" >
                                        <label class="form-check-label" for="locRadio{{$row->id}}">
                                            {{$row->city->currentDescription->name}} - {{$row->area->currentDescription->name}} - {{$row->address}}
                                        </label>
                                    </div>
                                    @endforeach
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="radio" value="" name="address_id" id="locRadio0" >
                                        <label class="form-check-label" for="locRadio0">
                                            {{__('web.add_new_location')}}
                                        </label>
                                    </div>
                                </div>
                                <div class="row mb-4" id="newLocForm">
                                    <div class="col-lg-12">
                                        <div class="mb-4">
                                            <label class="inputLabel">{{__('web.address_details')}} <span style="color:red">{{__('web.max_100')}}</span></label>
                                            <input type="text" name="address" class="form-control" placeholder="">
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4">
                                            <label class="inputLabel"> {{__('web.city_id')}} <span class="text-danger">*</span>  </label>
                                            <select name="city_id" onchange="fetchCities(this)" target-id="area_id" class="form-control form-select">
                                                <option value="">{{__('web.select')}}</option>
                                                @foreach($cities as $row)
                                                    <option value="{{$row->id}}">{{$row->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4">
                                            <label class="inputLabel"> {{__('web.area_id')}} <span class="text-danger">*</span>  </label>
                                            <select name="area_id" id="area_id" onchange="calculate()" class="form-control form-select">
                                                <option value="">{{__('web.select')}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="inputLabel">  {{__('web.location_image')}}  <span class="text-danger">*</span>  </label>
                                            <div class="drop_box">
                                                <input id="demo1" class="demo1" name="location_image" type="file" accept="" placeholder="{{__('web.uploading_image')}}"  />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="form-group mb-4">
                                            <label class="inputLabel">  {{__('web.stock_image')}}      <span class="text-danger">*</span>  </label>
                                            <div class="drop_box">
                                                <input id="demo1" class="demo1" name="stock_image" type="file" accept="" placeholder="{{__('web.uploading_image')}}"  />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="mb-4">
                                            <label class="inputLabel"> {{__('web.latlng')}} <span class="text-danger">*</span>  </label>
                                            <div class="map_box">
                                                <input type="hidden" name="latlng" id="latlng" value="">
                                                <div id="map" style="width:100%;display: block;position: relative;overflow: hidden;height: 15pc;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @include('web.pages.components.cart.cart')
                            </div>
                            <div class="d-flex align-items-center justify-content-end">
                                <p class="small fw-bold mb-0 me-2 color-gray2">{{__('web.order_accept')}}<a href="{{route('conditions')}}" target="_blank" class="color-gray2 underline">الشروط والأحكام</a></p>
                                <button class="butn primary_butn">
                                    {{__('web.order_finish')}}
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>


    </main>
@section('inject_js')
    <script>
        $("#newLocForm").hide();
        $('input[type="radio"][name="address_id"]').click(function() {
            if ($(this).attr("value") == "") {
                $("#newLocForm").show();
            }  else {
                $("#newLocForm").hide();
            }
        });

        $("#bankTransferForm").hide();
        $('input[type="radio"][name="status"]').click(function() {
            if ($(this).attr("value") == "bank") {
                $("#bankTransferForm").show();
            }  else {
                $("#bankTransferForm").hide();
            }
        });
    </script>
    <script>
        $('#companyFile #chooseFile').bind('change', function () {
            var filename = $("#chooseFile").val();
            if (/^\s*$/.test(filename)) {
                $("#companyFile").removeClass('active');
                $("#companyFile #noFile").text("No file chosen...");
            }
            else {
                $("#companyFile").addClass('active');
                $("#companyFile #noFile").text(filename.replace("C:\\fakepath\\", ""));
            }
        });
    </script>

    <script type="text/javascript">

        var latlng = new google.maps.LatLng({!! $location ?? ''  && $location->id ? $location->latlng : '21.4989, 39.2509' !!});
        var map = new google.maps.Map(document.getElementById('map'), {
            center: latlng,
            zoom: 11,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: 'Set lat/lon values for this property',
            draggable: true
        });
        google.maps.event.addListener(marker, 'dragend', function(a) {
            console.log(a);
            var div = document.createElement('div');
            div.innerHTML = a.latLng.lat().toFixed(4) + ', ' + a.latLng.lng().toFixed(4);
            document.getElementsByTagName('body')[0].appendChild(div);
            $("#latlng").val(function() {
                return  div.innerHTML;
            });
        });

function addYourLocationButton (map, marker) 
{
    var controlDiv = document.createElement('div');

    var firstChild = document.createElement('button');
    firstChild.setAttribute('type', 'button');
    firstChild.style.backgroundColor = '#fff';
    firstChild.style.border = 'none';
    firstChild.style.outline = 'none';
    firstChild.style.width = '28px';
    firstChild.style.height = '28px';
    firstChild.style.borderRadius = '2px';
    firstChild.style.boxShadow = '0 1px 4px rgba(0,0,0,0.3)';
    firstChild.style.cursor = 'pointer';
    firstChild.style.marginRight = '10px';
    firstChild.style.padding = '0';
    firstChild.title = 'Your Location';
    controlDiv.appendChild(firstChild);

    var secondChild = document.createElement('div');
    secondChild.setAttribute('type', 'button');
    secondChild.style.margin = '5px';
    secondChild.style.width = '18px';
    secondChild.style.height = '18px';
    secondChild.style.backgroundImage = 'url(https://maps.gstatic.com/tactile/mylocation/mylocation-sprite-2x.png)';
    secondChild.style.backgroundSize = '180px 18px';
    secondChild.style.backgroundPosition = '0 0';
    secondChild.style.backgroundRepeat = 'no-repeat';
    firstChild.appendChild(secondChild);

    google.maps.event.addListener(map, 'center_changed', function () {
        secondChild.style['background-position'] = '0 0';
    });

    firstChild.addEventListener('click', function () {
        var imgX = '0',
            animationInterval = setInterval(function () {
                imgX = imgX === '-18' ? '0' : '-18';
                secondChild.style['background-position'] = imgX+'px 0';
            }, 500);

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                marker.setPosition(latlng);
                map.setCenter(latlng);
                let newlatlng = String(latlng);
                $('#latlng').val(newlatlng.slice(1, -1))
                clearInterval(animationInterval);
                secondChild.style['background-position'] = '-144px 0';
            });
        } else {
            clearInterval(animationInterval);
            secondChild.style['background-position'] = '0 0';
        }
    });

    controlDiv.index = 1;
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(controlDiv);
}
addYourLocationButton(map, marker);
    </script>

    <script>
        let url_edit_cart = "{{url(getCurrentLocale().'/cart/edit')}}"
        let url_delete_cart = "{{url(getCurrentLocale().'/cart/delete')}}"
        let url_calculate_order = "{{route('order.calculate')}}"
        let sar = " "+"{{__('web.sar')}}"
        let cost = "{{__('web.cost')}}"
        let cost_after = "{{__('web.cost_after')}}"
    </script>
    <script>
        setTimeout(function(){
            calculate()
        }, 700);
        var buttonPlus  = $(".qty-btn-plus");
        var buttonMinus = $(".qty-btn-minus");

        var incrementPlus = buttonPlus.click(function() {
            var $n = $(this)
                .parent(".qty-container")
                .find(".input-qty");
            var cart_id = $(this).attr('data-id')

            $.ajax
            ({
                url : url_edit_cart+'/'+cart_id,
                type: "POST",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: 'count='+(Number($n.val())+1)+'&status=plus',
                dataType:'json',
                success:function(data)
                {
                    $n.val(Number($n.val())+1 );
                    toasterSuccess(data.message);
                    calculate()
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })

        });

        var incrementMinus = buttonMinus.click(function() {
            var $n = $(this)
                .parent(".qty-container")
                .find(".input-qty");
            var cart_id = $(this).attr('data-id')
            var amount = Number($n.val());
            if (amount > 1) {
                $.ajax
                ({
                    url : url_edit_cart+'/'+cart_id,
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: 'count='+(amount-1)+'&status=minus',
                    dataType:'json',
                    success:function(data)
                    {
                        $n.val(amount-1);
                        toasterSuccess(data.message);
                        calculate()
                    }
                    ,error:function(data)
                    {
                        toasterError(Object.values(data.responseJSON.errors)[0]);
                    }
                })
            }
        });

        function calculate()
        {
            let dataform = $('#form').serialize();
            $.ajax
            ({
                url : url_calculate_order,
                type: "GET",
                data: dataform,
                dataType:'json',
                success:function(data)
                {
                    $.each(data.products, function (key, product) {
                        $('#cart'+product.cart_id).html(product.count);
                        $('#product_cost'+product.cart_id).html(product.product_cost+sar);
                        $('#tax_value'+product.cart_id).html(product.tax+sar);
                        $('#product_cost_total'+product.cart_id).html(product.product_total+sar);
                    });
                    $('#products_total').html(data.total_products+sar);
                    $('#tax_total').html(data.total_tax+sar);
                    $('#cost_org').html(data.cost_org+sar);
                    if(data.cobon_msg != '' || data.discount_status !='' || data.cobon != '')
                    {
                        if(data.cobon != '' && data.cobon != null)
                        {
                            $('#cobon_msg').css('color','green');
                            $('#cost_org_status').show();
                            $('#cost_after').html(cost_after);
                        }
                        else
                        {
                            $('#cobon_msg').css('color','red');
                            $('#cost_org_status').hide();
                            $('#cost_after').html(cost);
                        }
                        $('#cobon_msg').html(data.cobon_msg);
                        $('#cobon_msg').show();
                    }
                    else
                    {
                        $('#cobon_msg').hide();
                        $('#cost_org_status').hide();
                        $('#cost_after').html(cost);
                    }
                    if(data.tax_valid == 'true')
                    {
                        $('.tax_valid').show();
                    }
                    else
                    {
                        $('.tax_valid').hide();
                    }
                    
                    if(data.total_shipping > 0)
                    {
                        $('#total_shipping').html(data.total_shipping+sar);
                        $('#total_shipping_card').show();
                    }
                    else
                    {
                        $('#total_shipping_card').hide();
                    }
                    
                    if(data.on_hand_cost > 0)
                    {
                        $('#on_hand_cost').html(data.on_hand_cost+sar);
                        $('#on_hand_cost_card').show();
                    }
                    else
                    {
                        $('#on_hand_cost_card').hide();
                    }
                    
                    if(data.cobon != null)
                    {
                        $('#total_cobon').html(data.total_cobon+sar);
                        $('#cobon_card').show()
                    }
                    else
                    {
                        $('#cobon_card').hide()
                    }
                    $('#wallet').html(data.wallet+sar)
                    $('#wallet_pay').html(data.total_order+sar);
                    $('#wallet_remain').html(data.remain+sar);
                    if(data.wallet_status == true)
                    {
                        $('#wallet_enough').show()
                        $('#wallet_not_enough').hide()
                    }
                    else
                    {
                        $('#wallet_not_enough').show()
                        $('#wallet_enough').hide()
                    }
                    $('#order_total').html((data.total_order)+sar);
                }
                ,error:function(data)
                {
                    toasterError(Object.values(data.responseJSON.errors)[0]);
                }
            })
        }
        function deleteCart(elem)
        {
            let cart_id = $(elem).attr('data-id');
            $.ajax
            ({
                url : url_delete_cart+'/'+cart_id,
                type: 'GET',
                data: '',
                success:function(data)
                {
                    $(elem).closest('.cart_row').fadeOut(1000);
                    calculate()
                }
            })
        }
    </script>
@endsection
@stop