@extends('frontend.layouts.template')
@section('stylesheet')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .trs {
        padding: 5px 10px 3px;
        border-radius: 3px;
        background: #FEFEFE;
        border: 1px solid #ECECEC;
        color: #8E8E8E;
        cursor: pointer;
    }

    .trs:hover,
    .acv {
        background: #58BCA6 !important;
        color: #fff !important;
        border: 1px solid #58BCA6 !important;
    }

</style>
@endsection
@section('content')
	<!-- START SECTION BREADCRUMB -->
	<div class="breadcrumb_section bg_gray page-title-mini">
		<div class="container">
			<!-- STRART CONTAINER -->
			<div class="row align-items-center">
				<div class="col-md-6">
					<div class="page-title">
						<h1>{{ trans('label.my_account') }}</h1>
					</div>
				</div>
				<div class="col-md-6">
					<ol class="breadcrumb justify-content-md-end">
						<li class="breadcrumb-item"><a href="{{ url('/') }}">{{ trans('label.home')}}</a></li>
						<li class="breadcrumb-item active">{{ trans('label.my_account') }}</li>
					</ol>
				</div>
			</div>
		</div><!-- END CONTAINER-->
	</div>
	<!-- END SECTION BREADCRUMB -->
	<!-- START MAIN CONTENT -->
	<div class="main_content">

		<!-- START SECTION SHOP -->
		<div class="section">
			<div class="container">
				<div class="row">
					<div class="col-lg-3 col-md-4">
						<div class="dashboard_menu">
							<ul class="nav nav-tabs flex-column" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="false"><i class="ti-layout-grid2"></i>{{ trans('label.my_point') }}</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="orders-tab" data-toggle="tab" href="#orders" role="tab" aria-controls="orders" aria-selected="false"><i class="ti-shopping-cart-full"></i>{{ trans('label.orders') }}</a>
								</li>
                                @if( approver_user() )
								<li class="nav-item">
									<a class="nav-link" id="approval-tab" data-toggle="tab" href="#approval" role="tab" aria-controls="orders" aria-selected="false">
									<i class="ti-check-box"></i>{{ trans('label.my_approval') }}</a>
								</li>
                                @endif
								<li class="nav-item">
									<a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="true"><i class="ti-location-pin"></i>{{ trans('label.my_address') }}</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="account-detail-tab" data-toggle="tab" href="#account-detail" role="tab" aria-controls="account-detail" aria-selected="true"><i class="ti-id-badge"></i>{{ trans('label.account_details') }}</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="{{ url('account/signout') }}"><i class="ti-lock"></i>{{ trans('label.logout') }}</a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-lg-9 col-md-8">
						<div class="tab-content dashboard_content">
							<div class="tab-pane fade active show" id="dashboard" role="tabpanel" aria-labelledby="dashboard-tab">
								@include('frontend.member.tab-dashboard')
							</div>

							<div class="tab-pane fade" id="orders" role="tabpanel" aria-labelledby="orders-tab">
								@include('frontend.member.tab-orders')
							</div>
                            @if( approver_user() )
                            <div class="tab-pane fade" id="approval" role="tabpanel" aria-labelledby="approval-tab">
								@include('frontend.member.tab-approval')
                            </div>
                            @endif
							<div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby="address-tab">
								@include('frontend.member.tab-address')
							</div>
							<div class="tab-pane fade" id="account-detail" role="tabpanel" aria-labelledby="account-detail-tab">
								@include('frontend.member.tab-account-detail')
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- END SECTION SHOP -->
	</div>
	<!-- END MAIN CONTENT -->

@endsection
@section('modals')
    @include('frontend.member.modal-address-form')
@endsection
@section('javascript')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
    (function($){
        @if( $user->active_password == 'N' )
            alert('Please change your password for active user');
            $('#account-detail-tab').trigger('click');
        @endif
    }(jQuery));
</script>

<script>
    var _token = $('meta[name="csrf-token"]').attr('content');
    var base_url = $('meta[name="base-url"]').attr('content');
	$(document).ready(function() {

        $('#new-address').on('click',function(e){
            $('#form-address input[type="text"]').val('');
            $('#form-address input[name="type"]').val('shipping');
            $('#form-address input[name="id"]').val('0');
            $('#modal-address-form').modal('show');
            set_selector();
        });

        $('#new-billing').on('click',function(e){
            $('#form-address input[type="text"]').val('');
            $('#form-address input[name="type"]').val('billing');
            $('#form-address input[name="id"]').val('0');
            $('#modal-address-form').modal('show');
            set_selector();
        });
        $('.address-edit').on('click',function(e){
            e.preventDefault();
            let id = $(this).attr('data-id');
            setInput(id);
            $('#modal-address-form').modal('show');
        });

        function setInput(id){
            $.ajax({
                url : `${base_url}/account/address/${id}`,
                type : 'post',
                data : {_token : _token },
                success : function(obj){
                    let data = obj.data;
                    let address = JSON.parse(data.address);
                    // console.log('shipping address ', address);
                    set_selection(address);
                    $('#form-address input[name="type"]').val(data.type);
                    $('#form-address input[name="id"]').val(data.id);
                    $('#form-address input[name="firstname"]').val(address.firstname);
                    $('#form-address input[name="lastname"]').val(address.lastname);
                    $('#form-address input[name="phone"]').val(address.phone);
                    $('#form-address input[name="address"]').val(address.address);
                    // $('#form-address #province').val(address.province).trigger('change');
                    // $('#form-address #district').val(address.district).trigger('change');
                    // $('#form-address #city').val(address.city).trigger('change');
                    $('#form-address input[name="zipcode"]').val(address.zipcode);
                }
            })
        }

        function set_selection(address){
            let province = $('#province');
            let city = $('#city');
            let district = $('#district');
            province.val(address.province).trigger('change');
            amphures_data(address.province,'#city').then( function(cities){
                city.val(address.city).trigger('change');
                districts_data( address.city, '#district' ).then( function(districts){
                    const _districs = districts.data;
                    district.val( address.district ).trigger('change');
                });
            });

            district.select2();
            city.select2();
            province.select2();


            // Bind an event
            province.on('select2:select', function (e) {
                amphures_data( $(this).val(), '#city' ).then( function(cities){
                    let _province = $(this);
                        district.val('').trigger('change');
                        city.val('').trigger('change');
                        $('#zipcode').val('');
                    city.on('select2:select', function (e) {
                        const _this = $(this);
                        districts_data( $(this).val(), '#district' ).then( function(districts){
                            const _districs = districts.data;
                                // console.log('promise res : ', _districs, ' : ' );
                                district.on('select2:select',function(e){
                                    const item = _districs.find(x => x.id == $(this).val() );
                                    if( item )
                                        $('#zipcode').val( item.zip_code );
                                })
                        });
                    });
                });

            });
        }

        function set_selector(){
            let province = $('#province');
            let city = $('#city');
            let district = $('#district');
            district.select2();
            city.select2();
            province.select2();

            province.on('select2:select', function (e) {
                amphures_data( $(this).val(), '#city' ).then( function(cities){
                    let _province = $(this);
                        district.val('').trigger('change');
                        city.val('').trigger('change');
                        $('#zipcode').val('');
                    city.on('select2:select', function (e) {
                        const _this = $(this);
                        districts_data( $(this).val(), '#district' ).then( function(districts){
                            const _districs = districts.data;
                                // console.log('promise res : ', _districs, ' : ' );
                                district.on('select2:select',function(e){
                                    const item = _districs.find(x => x.id == $(this).val() );
                                    if( item )
                                        $('#zipcode').val( item.zip_code );
                                })
                        });
                    });
                });

            });
        }

        function set_default(id,type,_class,_this){
            $.ajax({
                url : `${base_url}/account/address-default/${id}`,
                type : 'post',
                data : { _token : _token,type : type },
                success : function(obj){
                    _class.removeClass("acv");
                    _this.addClass("acv");

                }
            })
        }
        $('.remove-address').on('click',function(e){
            if( !confirm('Please confirm delete this.') ){
                e.preventDefault();
                return false;
            }
        })

		$(".trs1").click(function() {
            let id = $(this).attr('data-id');
            set_default(id,'billing',$('.trs1'),$(this));
		});

		$(".trs2").click(function() {
            let id = $(this).attr('data-id');
            set_default(id,'shipping',$('.trs2'),$(this));
			// $(".trs2").removeClass("acv");
			// $(this).addClass("acv");
		});

        $('#address_copy').on('change',function(e){
            let status = $(this).is(':checked') ? 1 : 0;
            let url = base_url + '/account/info/update';
            let data = {
                _token : _token,
                address_copy : status
            }
            $.ajax({
                url : url,
                data : data,
                type : 'POST',
                success : function( response ){
                    let html = '<div class="alert ' + ( status == 1 ? 'alert-success' : 'alert-danger' ) +'">'
                                + ( status == 1 ? 'Use Billing Address from Shipping Address' : 'Unuse Billing Address from Shipping Address' )
                             + '</div>';
                    $('#response-update').html(html).fadeIn();
                    setTimeout( () => {
                        $('#response-update').fadeOut();
                    },1500);
                }
            })
        })

        @if ( Session::has('tab')  )
            @if(Session::get('tab') == 'account-detail')
                $('#account-detail-tab').trigger('click')
            @endif
            @if(Session::get('tab') == 'address')
                $('#address-tab').trigger('click')
            @endif
            @if (Session::has('success'))
                setTimeout( () => {
                    $('.alert-success').hide();
                },6000);
            @endif
        @endif
	});

</script>
@endsection