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

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


        <!-- Start section -->
        <section class="checkout_pg section">
            <div class="container">
                <form method="post" action="{{$action}}" onsubmit="formAction(this)" id="form"
                      enctype="multipart/form-data">
                    @CSRF
                    <div class="row">

                        @if($status == 'visitor')

                            <div class="col-lg-12">
                                <div class=" mb-5">
                                    <!-- Location -->
                                    @if($status == 'visitor')
                                        <div class="box mb-5">
                                            <h2 class="sec_title bb fw-bold mb-4"> {{__('web.user_info')}}  </h2>

                                            <div class="row mb-4">
                                                <div class="col-lg-6">
                                                    <div class="form-group mb-4">
                                                        <label
                                                            class="inputLabel">    {{__('members.name')}}      </label>
                                                        <input type="text" name="name" class="form-control"
                                                               placeholder="" value="{{$user->name}}">
                                                    </div>
                                                </div>
                                                <div class="col-lg-6">
                                                    <div class="form-group mb-4">
                                                        <label class="inputLabel">   {{__('members.email')}}    </label>
                                                        <input type="email" name="email" class="form-control"
                                                               placeholder="" value="{{$user->email}}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>

                        @endif


                        <div class="col-lg-12">
                            <div class=" mb-5">
                                <!-- Location -->
                                <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="row mb-4">
                                        @foreach($locations as $key=>$row)
                                            <div class="col-lg-4">
                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="radio" onclick="calculate()"
                                                           name="address_id" value="{{$row->id}}" @if($key == 0) checked
                                                           @endif 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>
                                            </div>
                                        @endforeach
                                        @if(\Auth::user())
                                            <div class="col-lg-4">
                                                <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>
                                        @endif


                                    </div>
                                    <div class="row form_box mb-0" @if(\Auth::user()) id="newLocForm" @endif>
                                        <div class="col-lg-6">
                                            <div class="row">
                                                <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>
                                        </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="demo2" class="demo1" name="stock_image" type="file"
                                                           accept="" placeholder="{{__('web.uploading_image')}}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <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>
                                </div>
                                <!-- Payment -->
                                <div class="box  mb-5">
                                    <h2 class="sec_title bb fw-bold mb-4"> {{__('web.way_pay')}}</h2>
                                    <h6 class="mb-4">{{__('web.way_pay_desc')}}</h6>
                                    <div class="row">
                                        <div class="col-lg-3">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" onclick="calculate()" type="radio"
                                                       name="status" value="when_receiving" id="payRadio1">
                                                <label class="form-check-label" for="payRadio1">
                                                    {{__('orders.when_recieving')}}
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" onclick="calculate()" checked
                                                       type="radio" name="status" value="online" id="payRadio2">
                                                <label class="form-check-label" for="payRadio2">
                                                    {{__('web.online')}}
                                                    <img src="{{url('')}}/assets/web/images/pay-2.svg"
                                                         class="smImg mx-2" alt="">
                                                    <img src="{{url('')}}/assets/web/images/pay-4.svg"
                                                         class="smImg mx-2" alt="">
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-lg-3">
                                            <div class="form-check mb-3">
                                                <input class="form-check-input" onclick="calculate()" type="radio"
                                                       value="bank" name="status" id="payRadio3">
                                                <label class="form-check-label" for="payRadio3">
                                                    {{__('orders.bank')}}
                                                </label>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="mt-4" id="bankTransferForm">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="box">
                                                    <div class="table-responsive mb-0">
                                                        <table class="table sm_table mb-1">
                                                            <thead>
                                                            <tr>
                                                                <th>   {{__('accounts.bank')}}  </th>
                                                                <th>   {{__('accounts.name')}}  </th>
                                                                <th> {{__('accounts.account_number')}}    </th>
                                                                <th> {{__('accounts.iban')}}  </th>
                                                            </tr>
                                                            </thead>
                                                            <tbody>
                                                            @foreach($accounts as $row)
                                                                <tr>
                                                                    <td> {{$row->bank}} </td>
                                                                    <td> {{$row->name}}  </td>
                                                                    <td>{{$row->account_number}} </td>
                                                                    <td>{{$row->iban}} </td>
                                                                </tr>
                                                            @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="box">
                                                    <div class="form-group">
                                                        <label
                                                            class="inputLabel fw-bold mb-4">  {{__('web.upload_image_payment')}}    </label>
                                                        <div class="file-upload" id="companyFile">
                                                            <div class="file-select">
                                                                <div class="file-select-button" id="fileName"><i
                                                                        class="fas fa-paperclip"></i></div>
                                                                <div class="file-select-name"
                                                                     id="noFile">{{__('web.upload_image')}}  </div>
                                                                <input type="file" name="image" id="chooseFile">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4">
                            <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 class="box mb-5">
                                <h2 class="sec_title bb fw-bold mb-4"> {{__('orders.note')}}    </h2>
                                <p style="color:red">{{__('web.max_250')}}</p>
                                <textarea class="form-control" name="note" placeholder="" rows="7"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-8">
                            <div class="box mb-5">
                                @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()
                        }
                        $('#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