@extends('layouts.app')

@section('title','新增地址')

@section('css')
<link rel="stylesheet" href="{{ asset('assets/index/css/area.css') }}">
@endsection

@section('content')
<!-- footer -->

<!-- section -->
<section>
    <!-- 新增收货地址 -->
    <form action="{{ route('addresses.store', ['callback' => Request::get('callback')])}}" method="get" accept-charset="utf-8">
        <div class="addressForm">
            <div class="addressForm-input" >
                <div class="addressForm-input-name"><i class="icon-user address-i"></i>收货人</div>
                <input type="text" name="name" value="" placeholder="输入收货人姓名" class=" clear_null">
            </div>
            <div class="addressForm-input">
                <div class="addressForm-input-name"><i class="icon-tablet address-i"></i>手机号</div>
                <input type="number" name="mobile" value="" placeholder="输入手机号" class=" clear_null">
            </div>
            <div class="addressForm-input">
                {{-- <div class="addressForm-input-name"><i class="icon-map-marker address-i"></i>所在地区</div>
                <div class="addressForm-option">
                    <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" id="city">
                        <option value="">选择城市</option>
                    </select>
                    <select name="area_sn" id="area">
                        <option value=" ">请选择地区</option>
                    </select>
                </div> --}}
                <div class="ui-form-item ui-border-b">
                    <div class="addressForm-input-name"><i class="icon-map-marker address-i"></i>所在地区</div>
                    <div class="ui-select">
                        <input id="expressArea" name="area" data-name="custUa" data-required="true" data-label="所在地区" placeholder="选择省市区" readonly style="padding-left:0;">
                    </div>
                    <div class="browser">
                        <!--选择地区弹层-->
                        <div id="areaLayer" class="express-area-box">
                            <div class="addressForm-area">
                                <h3>选择省市区</h3>
                                <div class="selet-area-wrap">
                                    <p><span class="one"></span></p>
                                    <p><span class="two"></span></p>
                                    <p><span class="three"></span></p>
                                </div>
                                <div class="hot-city">
                                    <p>热门城市</p>
                                    <ul>
                                        <li onClick="selectPP(0,1)">北京</li>
                                        <li onClick="selectPP(10,1)">上海</li>
                                        <li onClick="quickselectC(18,0)">广州</li>
                                        <li onClick="quickselectC(18,1)">深圳</li>
                                        <li onClick="quickselectC(12,0)">杭州</li>
                                        <li onClick="quickselectC(11,0)">南京</li>
                                        <li onClick="quickselectC(11,4)">苏州</li>
                                        <li onClick="selectPP(1,1)">天津</li>
                                        <li onClick="quickselectC(16,0)">武汉</li>
                                        <li onClick="quickselectC(17,0)">长沙</li>
                                        <li onClick="selectPP(21,1)">重庆</li>
                                        <li onClick="quickselectC(22,0)">成都</li>
                                    </ul>
                                    <p>选择省份/地区</p>
                                </div>
                                <a id="backUp" class="back" href="javascript:void(0)" title="返回"></a>
                                <a id="closeArea" class="close" href="javascript:void(0)" title="关闭"></a>
                            </div>
                            <article id="areaBox">
                                <ul id="areaList" class="area-list"></ul>
                            </article>
                        </div>
                        <!--遮罩层-->
                        <div id="areaMask" class="mask"></div>
                    </div>
                </div>
            </div>

            <div class="addressForm-select">
                <div class="addressForm-input-name"><i class="icon-edit address-i"></i>详细地址</div>
                <textarea class="textarea" placeholder="街道等详细地址" name="address" id="desc" rows="2" style="padding-right: 1rem"></textarea>
            </div>
        </div>
        <div class="addressForm-mode">
            设为默认地址
            <div class="addressForm-mode-btn">
                <input type="checkbox" name="def" value="1">
                <label></label>
            </div>
        </div>
        @csrf
        <footer>
            <button type="button" class="addressAdd ajax-post">保存</button>
        </footer>
    </form>

</section>
@endsection

@section('script')
<script type="text/javascript" src="/assets/index/js/jquery.area.js"></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('').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('').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