@extends('templates.'. $template_name .'.layouts.default')

@section('title', trans('message.check_out'))

@section('content')

    

    <div class="main-content shop-page shoppingcart-content">
        <div class="container">
            <div class="breadcrumbs">
                <a href="{!! url('/') !!}">{{trans('message.home')}}</a> \
                <span class="active">{{trans('message.check_out')}}</span>
            </div>

            <div class="shopping-head-area">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="shopping-head">
                            <div class="clerafix">
                                <div class="sh-menu-item">
                                    <p>{{trans('message.shopping_cart')}}</p>
                                </div>
                                <div class="sh-menu-item active">
                                    <p>{{trans('message.check_out')}}</p>
                                </div>
                                <div class="sh-menu-item">
                                    <p>{{trans('message.review_orders')}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {!! Form::open(['url' => url('/post-check-out'), 'method' => 'POST', 'id' => 'frmCheckOut']) !!}
            <div class="row content-form">
                <!-- session flash message -->
                {!! getFlashMessage() !!}

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-8 content-offset">
                    <div class="proceed-checkout">
                        <div class="content">
                            <h5 class="main-title title">{{trans('message.shipping_method')}}</h5>
                            <!-- pickup in store -->
                            @if($pickup_instore_service)
                                <div class="checkout-billing-adress-box">
                                    <div class="billing-address-input clearfix">
                                        <input class="shipping_method main-title title" type="radio"
                                               name="shipping_method"
                                               value="pickup" {{$chk_pickup}} >
                                        {{trans('message.pickup_in_store')}}
                                    </div>
                                    <div class="{{ empty($delivery_info) ?"in": "collapse" }}" id="choose-pickup">
                                        <div class="billing-address-input form-group clearfix">
                                            <span class="label-text">{{trans('message.pickup_branch')}}</span>
                                            <select name="pickup[branch_code]" class="shop_lat_long form-control">
                                                @foreach($branch_list as $k => $v)
                                                    <option {{ old("pickup[branch_code]",@$pickup_info['shop_id']) == $v->branch_code ? 'selected="selected"' : "" }}
                                                            value="{{$v->branch_code}}"
                                                            data-lat="{{ $v->latitude }}"
                                                            data-long="{{ $v->longitude }}">{{$v->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="billing-address-input clearfix">
                                            <label><a href="#"
                                                      id="btn-select-map-pickup"><strong>{{trans('message.click_here')}}</strong></a>
                                                @lang("message.show_location_shop")</label>
                                        </div>
                                    </div>
                                    <br>
                                </div>

                            @endif
                        <!-- end pickup in store -->

                            <!-- delivery -->
                            @if($delivery_service)
                                <hr>

                                <div class="checkout-billing-adress-box">
                                    <div class="billing-address-input clearfix">
                                        <input class="shipping_method" type="radio" name="shipping_method"
                                               {{ empty($delivery_info) ?: "checked" }}
                                               value="delivery" {{$chk_delivery}} >
                                        {{trans('message.delivery')}}
                                    </div>

                                    <div class="{{ empty($delivery_info) ?"collapse": "in" }}" id="choose-delivery">

                                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                            <div class="login-form">

                                                <span class="label-text">{{trans('message.name')}}</span>
                                                <input class="input-info req" type="text" name="delivery[name]"
                                                       value="{{ old("delivery['name'",@$delivery_info['name']) }}">

                                                <span class="label-text">{{trans('message.phone')}}</span>
                                                <input class="input-info req" type="number" name="delivery[phone]"
                                                       value="{{ old("delivery['name'",@$delivery_info['phone']) }}">

                                                <span class="label-text">{{trans('message.address')}}</span>
                                                <input class="input-info req" type="text" name="delivery[address]"
                                                       value="{{ old("delivery['name'",@$delivery_info['address']) }}">

                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                                        <span class="label-text">{{trans('message.longitude')}}</span>
                                                        <input type="text" id="latitude" name="delivery[latitude]"
                                                               class="input-info req"
                                                               placeholder="{{trans('message.latitude')}}"
                                                               value="{{ old("delivery['name'",@$delivery_info['latitude']) }}">
                                                    </div>
                                                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                                        <span class="label-text">{{trans('message.latitude')}}</span>
                                                        <input type="text" id="longitude" name="delivery[longitude]"
                                                               class="input-info req"
                                                               placeholder="{{trans('message.longitude')}}"
                                                               value="{{ old("delivery['name'",@$delivery_info['longitude']) }}">
                                                    </div>
                                                </div>

                                                <div class="billing-address-input">
                                                    <label>or <a href="#"
                                                                 id="btn-select-map-delivery"><strong>{{trans('message.click_here')}}</strong></a>
                                                        to select location</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                        @endif
                        <!-- end delivery -->

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

                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 ">
                    <div class="proceed-checkout">
                        <!-- <div class="content">
                            <h5 class="main-title title">{{ trans('message.payment_method') }}</h5>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="payment_method" id="cash_on_delivery" value="1" checked>
                                <label class="form-check-label" for="cash_on_delivery">{{trans('message.cash_on_delivery')}}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="payment_method" id="credit_debit_card" value="2">
                                <label class="form-check-label" for="credit_debit_card">{{trans('message.credit_debit_card')}}</label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="payment_method" id="aba_pay" value="3">
                                <label class="form-check-label" for="aba_pay">{{trans('message.aba_pay')}}</label>
                            </div>
                        </div> -->

                        <div class="content">
                            <h5 class="main-title title">{{trans('message.select_membership_card')}}</h5>
                            @if($has_card)
                                <span class="label-text">{{trans('message.please_select_card')}}</span>
                                <select name="membership_card[card_id]" id="select-membership-card"
                                        class="selectpicker form-control">
                                    @foreach($customer_card as $k => $v)
                                        <option value="{{$v['mcard_number']}}">{{$v['mcard_number_format']}}</option>
                                    @endforeach
                                </select>
                                <div class="card-container row">
                                    <div class="col-md-12 col-sm-12 col-xs-12 img-container">
                                        <img class="img-box" src="" id="card-src"/>
                                    </div>
                                    <div class="col-md-12 col-sm-12 col-xs-12 info-review">
                                        <p class="item" id="card-title"></p>
                                        <p class="item" id="card-type"></p>
                                        <p class="item" id="valid-until"></p>
                                        <p class="item" id="card-balance"></p>
                                    </div>
                                </div>

                            @else
                                <p>{{trans('message.you_have_no_card')}}</p>
                            @endif
                        </div>

                        @if($has_card)
                            <div class="content">
                                <h5 class="main-title title">{{trans('message.redemption')}}</h5>
                                <div class="pcb-content">
                                    <div class="no-redemption-available">
                                        <p>{{trans('message.no_redemption_available_for_selected_card')}}</p>
                                    </div>
                                    <div class="div-redemption-value pcb-cuppon-input clearfix">
                                        <span class="label-text">{{trans('message.enter_redemption_note')}}</span>
                                        <input class="input-info" type="number" name="redemption[redemption_value]"
                                               id="redemption-value">
                                    </div>
                                    <div class="div-select-redemption">
                                        <span class="label-text">{{trans('message.select_redemption_note')}}</span>
                                        <select name="" id="select-redemption">
                                            <option value="">{{trans('message.select_an_option')}}</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="content">
                            <h5 class="main-title title">{{ trans('message.review_orders') }}</h5>
                            <div class="group-button">
                                <button href="{!! url('/review-orders') !!}"
                                   class="button submit button--padding">{{strtoupper(trans('message.review_orders'))}}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="redemption[redemption_id]" id="redemption-id">
            <input type="hidden" name="redemption[str_redemption]" id="str-redemption">
            {!! Form::close() !!}
        </div>

    </div>



    <!-- map modal -->
    <div id="map-modal-pickup" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h5 class="modal-title text-bold">
                        @lang("message.shop_location")
                    </h5>
                </div>
                <div class="modal-body">
                    <div id="map-container-pickup" class="map-wrapper" style="border:1px solid #CCC;"></div>
                </div>
                {{--<div class="modal-footer">
                    <span id="location-display" class="text-bold pull-left"></span>
                    <button type="button"
                            id="btn-current-location"
                            class="btn btn-success">
                        {{trans('message.current_location')}}
                    </button>
                    <button type="button"
                            id="btn-select-location"
                            class="btn btn-primary">
                        {{trans('message.select_location')}}
                    </button>
                </div>--}}
            </div>
        </div>
    </div>
    <!-- end map modal -->

    <!-- map modal -->
    <div id="map-modal-delivery" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h5 class="modal-title text-bold">
                        {{trans('message.note') . " : " . trans('message.use_right_click_to_select_location')}}
                    </h5>
                </div>

                <form action="#" class="form-horizontal">
                    <div class="modal-body">
                        <div id="map-container" class="map-wrapper" style="border:1px solid #CCC;"></div>
                    </div>
                    <input type="hidden" id="selected-lat">
                    <input type="hidden" id="selected-lng">
                </form>

                <hr>
                <div class="modal-footer">
                    <span id="location-display" class="text-bold pull-left"></span>
                    <button type="button"
                            id="btn-current-location"
                            class="btn btn-success">
                        {{trans('message.current_location')}}
                    </button>
                    <button type="button"
                            id="btn-select-location"
                            class="btn btn-primary">
                        {{trans('message.select_location')}}
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!-- end map modal -->

    <style type="text/css">
        .sh-menu-item p { line-height: 20px; }
        .img-container {
            text-align: center;
        }

        .img-box {
            display: inline-block;
        }

        .button--padding {
            width: 100%;
            padding: 0 30px !important;
            border: 0;
        }

        .info-review p.item {
            margin-bottom: 5px;
        }

        .card-container {
            margin-top: 10px;
        }

        .card-container img {
            margin: 10px 0;
        }

        #map-container, #map-container-pickup {
            height: 400px;
        }

        .pcb-content {
            padding: 25px 35px 25px;
        }

        .pcb-content select {
            border: 0 none;
            border-bottom: 1px solid #e5e5e5;
            color: #646a7c;
            font-size: 14px;
            font-weight: 300;
            height: 40px;
            padding: 0 10px;
            width: 100%;
        }

        .align-right {
            text-align: right !important;
        }

        a.shopping-cart-button {
            color: #fff;
        }
    </style>

@endsection

@section('script')
    <!-- google-map-script -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key={{config('global.google_key')}}"></script>
    <script type="text/javascript">

        var input_redemption = $('input#redemption-value'),
            div_input_redemption = $('.div-redemption-value'),
            select_redemption = $('select#select-redemption'),
            div_select_redemption = $('.div-select-redemption'),
            no_redemption = $('.no-redemption-available');

        var json_card = {!! json_encode($arr_cards) !!};
        var has_card = "{!! $has_card !!}";
        var card_redeem_rules = [];

        var currency_symbol = "{!! $currency_symbol !!}";


        function shipping_methods() {
            const shipping_method = $(".shipping_method");
            const choose_pickup = $("#choose-pickup");
            const choose_delivery = $("#choose-delivery");
            shipping_method.on("change", function () {
                const value = $(this).val();
                if (value === "pickup") {

                    choose_pickup.collapse("show");
                    choose_delivery.collapse("hide");

                    $("input.req").prop('required',false);
                } else {
                    choose_delivery.collapse("show");
                    choose_pickup.collapse("hide");

                    $("input.req").prop('required',true);
                }
            });
        }

        $(function () {
            shipping_methods();

            if (has_card == 1) {
                card_redeem_rules = {!! json_encode($card_redeem_rules) !!};
                // console.log(card_redeem_rules);
                var card_id = $('select#select-membership-card').val(),
                    redeem_data = card_redeem_rules[card_id],
                    card_type = redeem_data['card_type_id'],
                    redeem_rules = redeem_data.rules;
                showRedemption(card_type, redeem_rules);
                showCardInfo(card_id);
            }

            // select lat long from shopping location
            const shop_lat_long = $(".shop_lat_long");
            const option = $("option:selected", shop_lat_long);
            let lat = option.attr("data-lat"); // default select
            let long = option.attr("data-long"); // default select
            shop_lat_long.on("change", function () { // shopping change select
                const option = $("option:selected", this);
                lat = option.attr("data-lat");
                long = option.attr("data-long");
            });
            // Map Modal pickup show location shop
            $('#btn-select-map-pickup').click(function () {
                var modal = $('div#map-modal-pickup');
                modal.on("shown.bs.modal", function () {
                    initializeMap('show_location', lat, long);
                }).modal('show');
            });

            // Map Modal select location user
            $('#btn-select-map-delivery').click(function () {
                var modal = $('div#map-modal-delivery');
                modal.on("shown.bs.modal", function () {
                    initializeMap('add_location');
                }).modal('show');
            });

            // select location
            $('#btn-select-location').click(function () {
                $('div#map-modal-delivery').modal('hide');
            });

            // current location
            $('#btn-current-location').click(function () {
                initializeMap('current_location');
            });

            // check out
            $('.btn-confirm-checkout').click(function (e) {
                e.preventDefault();
                var form = $('#frmCheckOut');
                form.submit();
            });

            // select membership card
            $('#select-membership-card').on('change', function () {
                var me = $(this);
                card_id = me.val();
                redeem_data = card_redeem_rules[card_id];
                card_type = redeem_data['card_type_id'];
                redeem_rules = redeem_data.rules;
                showCardInfo(card_id);
                showRedemption(card_type, redeem_rules);
            });

            // select select-redemption
            $('#select-redemption').on('change', function () {
                var me = $(this),
                    val = me.val(),
                    redemption_id = 0,
                    redemption_value = 0;
                var res = val.split("-");
                // console.log(res.length);
                if (res.length == 2) {
                    redemption_id = res[0];
                    redemption_value = res[1];
                }
                // console.log(redemption_id);
                // console.log(redemption_value);
                $('#redemption-id').val(redemption_id);
                $('#redemption-value').val(redemption_value);
                var str_redemption = "";
                str_redemption = $('#select-redemption').find('option:selected').text();
                $('#str-redemption').val(str_redemption);
            });

            // input redemption-value
            $('#redemption-value').on('blur', function () {
                var me = $(this),
                    val = me.val(),
                    str_redemption = "";
                str_redemption = "Redeem " + val + " " + currency_symbol;
                $('#str-redemption').val(str_redemption);
            });

        });


        function showRedemption(card_type, redeem_rules) {
            var redemption_points = 0,
                redemption_stamps = 0,
                redemption_value = 0;
            var rules_id = 0;
            $('#redemption-value').val(redemption_value);
            // console.log(redeem_rules.length);
            // if empty redemption rules
            if (redeem_rules.length == 0) {
                div_input_redemption.hide();
                div_select_redemption.hide();
                no_redemption.show();
            } else {
                // reset select redemption
                select_redemption
                    .empty()
                    .append('<option value="">Select an option</option>');
                // stamp and earn point card
                if (card_type == 1 || card_type == 3) {
                    div_select_redemption.show();
                    div_input_redemption.hide();
                    no_redemption.hide();
                    // if stamp card
                    if (card_type == 1) {
                        $.each(redeem_rules, function (ind, val) {
                            rules_id = val['id'];
                            redemption_stamps = val['redemption_stamps'];
                            redemption_value = val['redemption_value'];
                            select_redemption.append($('<option>',
                                {
                                    value: rules_id,
                                    text: "Redeem " + redemption_stamps + " Stamps For Value Of " + redemption_value + " USD"
                                }));
                        });
                    }
                    // if earn point card
                    else {
                        $.each(redeem_rules, function (ind, val) {
                            rules_id = val['id'];
                            redemption_points = val['redemption_points'];
                            redemption_value = val['redemption_value'];
                            $('select#select-redemption').append($('<option>',
                                {
                                    value: rules_id + "-" + redemption_value,
                                    text: "Redeem " + redemption_points + " Points For Value Of " + redemption_value + " USD"
                                }));
                        });
                    }
                }
                // cash back card
                else if (card_type == 4) {
                    div_input_redemption.show();
                    div_select_redemption.hide();
                    no_redemption.hide();
                    var redemption_id = redeem_rules[0].id,
                        redemption_maximum_amount = redeem_rules[0].redemption_maximum_amount,
                        redemption_minimum_balance = redeem_rules[0].redemption_minimum_balance;
                    $('#redemption-id').val(redemption_id);
                    // input_redemption.val(redemption_maximum_amount);
                    // input_redemption.attr({
                    //     "max" : redemption_maximum_amount,
                    //     "min" : redemption_minimum_balance
                    // });
                }
                // discount card
                else {
                    div_input_redemption.hide();
                    div_select_redemption.hide();
                }
            }
            // set hidden card type id
            // $('input#card-type-id').val(card_type);
        }

        function showCardInfo(card_id) {
            var card_info = json_card[card_id],
                card_picture = card_info['picture'],
                card_title = card_info['card_title'],
                card_type = card_info['card_type'],
                card_balance = card_info['card_balance'],
                valid_until = card_info['valid_until'];
            $('#card-src').attr('src', card_picture);
            $('#card-title').text('Card Name: ' + card_title);
            $('#card-type').text('Type: ' + card_type);
            $('#valid-until').text('Valid Until: ' + valid_until);
            if (card_type === "Discount Card") {
                $.each(card_info.rules, function (i, rule) {
                    console.log(rule);
                    let max_purchase = "";
                    if (rule.max_purchase > 0) {
                        max_purchase = rule.max_purchase;
                    }
                    const html = `<p>Card Rule: Purchase ${rule.min_purchase + currency_symbol} to ${max_purchase} get ${rule.discount}% .</p>`;
                    $('#card-balance').html(html + '<br>');
                });
            } else {
                $('#card-balance').text('Card Balance: ' + card_balance);
            }
        }

        //  init map
        function initializeMap(modal_action, latitude, longitude) {

            // default lat & lng
            var lat = 11.55306780937478;
            var lng = 104.92454051971436;
            var default_lat_lng = {lat: lat, lng: lng};
            // init map
            var map = new google.maps.Map(document.getElementById('map-container'), {
                zoom: 15,
                center: default_lat_lng
            })
            let marker = "";

            if (modal_action === "show_location") {
                default_lat_lng.lat = parseFloat(latitude);
                default_lat_lng.lng = parseFloat(longitude);
                // init map
                const map_shop = new google.maps.Map(document.getElementById('map-container-pickup'), {
                    zoom: 16,
                    center: default_lat_lng
                });

                marker = new google.maps.Marker({position: default_lat_lng, map: map_shop});
            }

            if (modal_action == 'current_location' || modal_action == 'add_location') {
                // Try HTML5 geolocation.
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(function (position) {
                        lat = position.coords.latitude;
                        lng = position.coords.longitude;

                        // set current location
                        var objCoordinate = new google.maps.LatLng(lat, lng);
                        map.setCenter(objCoordinate);
                        marker = new google.maps.Marker({
                            map: map,
                            position: objCoordinate,
                            title: ''
                        });
                        $('input#latitude').val(lat);
                        $('input#longitude').val(lng);
                    });
                } else {
                    marker = new google.maps.Marker({
                        position: default_lat_lng,
                        map: map
                    });
                    $('input#latitude').val(lat);
                    $('input#longitude').val(lng);
                }
            }
            google.maps.event.addListener(map, 'rightclick', function (event) {
                var lat = event.latLng.lat();
                var lng = event.latLng.lng();
                setMarker(lat, lng, map, marker);
            });
        }

        // set marker
        function setMarker(lat, lng, map, marker) {
            var myLatLng = {lat: lat, lng: lng};
            $('input#latitude').val(lat);
            $('input#longitude').val(lng);

            if (marker == null) {
                marker = new google.maps.Marker(myLatLng);
                marker.setPosition(myLatLng);
            } else {
                marker.setPosition(myLatLng);
            }
        }

    </script>
@endsection