@extends('layouts.app')

@section('content')
<section class="padding_btm" >
    <!--添加收货地址-->
    <form action="{{ route('addresses.store', ['callback' => Request::get('callback')])}}" method="get" accept-charset="utf-8">
        <div class="j_address_bg">
            <div class="g-input">
                <div class="g-input-name"><i class="icon-user address-i"></i>收货人</div>
                <input type="text" name="name" value="" placeholder="输入收货人姓名">
            </div>
            <div class="g-input">
                <div class="g-input-name"><i class="icon-tablet address-i"></i>手机号</div>
                <input type="number" name="mobile" value="" placeholder="输入手机号">
            </div>
            <div class="g-select">
                <div class="g-input-name"><i class="icon-map-marker address-i"></i>收货地址</div>
                <select name="province_sn" id="province">
                    <option value="">选择省份</option>
                    @foreach ($provinces as $province)
                    <option value="{{ $province->sn }}">{{ $province->name }}</option>
                    @endforeach
                </select>
                <select name="city_sn" style="margin-top:15px;" id="city">
                    <option value="">选择城市</option>
                </select>
                <select name="area_sn" style="margin-top:15px;" id="area">
                    <option value=" ">请选择地区</option>
                </select>
                <textarea class="textarea" placeholder="街道等详细地址" name="address" id="desc" rows="2" style="margin-top:.75rem;"></textarea>
            </div>
        </div>
        <div class="j_my_list">
            设为默认地址
            <div class="use-mode">
                <input type="checkbox" name="def" value='1'>
                <label></label>
            </div>
        </div>
        <div class="button_btm">
            @csrf
            <button type="button" class="btn ajax-post">保存收货地址</button>
        </div>
    </form>
    <!--end 添加收货地址-->

</section>

@endsection
@section('footer')
@endsection
@section('script')
<script type="text/javascript">
    $("#province").on('change', function() {
        var psn = $(this).val();
        $.post('{{ route('addresses.areas')}}', {psn: psn, _token:"{{ csrf_token() }}"}, function(res) {
            if (res.code) {
                $('#city').html("");
                var option1 = $("<option>").val(0).text('请选择');
                $('#city').append(option1);
                $.each(res.data, function(key, val) {
                    var option1 = '<option value="' + val.sn + '">'+ val.name +'</option>';
                    $('#city').append(option1);
                });
                $("#area").get(0).selectedIndex = 0;
                $("#city").get(0).selectedIndex = 0;

            } else {
                updateAlert(res.msg);
            }
        });

    });

    $("#city").on('change', function() {
        var psn = $(this).val();
        $.post('{{ route('addresses.areas')}}', {psn: psn, _token:"{{ csrf_token() }}"}, function(res) {
            if (res.code) {
                $('#area').html("");
                var option1 = $("<option>").val(0).text('请选择');
                $('#area').append(option1);
                $.each(res.data, function(key, val) {
                    var option1 = '<option value="' + val.sn + '">'+ val.name +'</option>';
                    $('#area').append(option1);
                });
                $("#area").get(0).selectedIndex=0;
            } else {
                updateAlert(res.msg);
            }
        });

    });

</script>
@endsection