@extends('layouts.store')
@section('body')
    <section class="section-content padding-y">
        <div class="container">

            <div class="row">
                @include("partials.store.profile-menu")
                <main class="col-md-9">
                    <div class="card">
                        <div class="card-body">
                            <div class="col-md">
                                <div class="form-row">
                                    <div class="col form-group">
                                        <label>Name</label>
                                        <input type="text" id="name" class="form-control">
                                    </div> <!-- form-group end.// -->
                                    <div class="col form-group">
                                        <label>Phone</label>
                                        <input type="email" id="phone" class="form-control">
                                    </div> <!-- form-group end.// -->
                                    <div class="form-group col">
                                        <label>Postal Code</label>
                                        <input type="text" id="postal_code" class="form-control">
                                    </div> <!-- form-group end.// -->
                                </div> <!-- form-row.// -->

                                <div class="form-row">
                                    <div class="form-group col-md-4">
                                        <label>Province</label><br>
                                        <select class="js-example-basic-single form-control" name="province" id="province">
                                            <option value=""></option>
                                        </select>
                                    </div> <!-- form-group end.// -->
                                    <div class="form-group col-md-4">
                                        <label>City</label><br>
                                        <select class="js-example-basic-single form-control" name="city" id="city">
                                            <option value=""></option>
                                        </select>
                                    </div> <!-- form-group end.// -->
                                    <div class="form-group col-md-4">
                                        <label>District</label><br>
                                        <select class="js-example-basic-single form-control" name="district" id="district">
                                            <option value=""></option>
                                        </select>
                                    </div> <!-- form-group end.// -->
                                </div> <!-- form-row.// -->

                                <div class="form-row">
                                    <div class="col form-group">
                                        <label>Address</label>
                                        <textarea name="" id="full_address" class="form-control"
                                            style="min-width: 100%"></textarea>
                                        {{-- <input type="email" name="email" class="form-control" value="{{$user->email}}"> --}}
                                    </div> <!-- form-group end.// -->
                                </div> <!-- form-row.// -->
                                <div class="form-check mb-3">
                                    <input class="form-check-input" value="0" type="checkbox" id="is_primary">
                                    <label class="form-check-label" for="exampleCheck1">Default</label>
                                </div>

                                <button id='save' type="submit" class="btn btn-primary mb-3">Save</button>

                            </div> <!-- col.// -->
                        </div> <!-- card-body.// -->
                    </div>
                </main> <!-- col.// -->
            </div>

        </div> <!-- container .//  -->
    </section>
@endsection
@section('script')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        const base_url_logistic = "https://logistic.fusi.id/api/v1";
        const token_logistic = "1|cs8vicbSK0MKudDhwuYZdk28071jHVMLSMhnhNMy";
        $(document).ready(function() {
            $('.js-example-basic-single').select2();
            $('#province').on('select2:select', function(e) {
                city(e.params.data.id);
            });
            $('#city').on('select2:select', function(e) {
                district(e.params.data.id);
            });
            $('#is_primary').click(function() {
                if ($(this).is(':checked')) {
                        $(this).attr('value', '1');
                    } else {
                        $(this).attr('value', '0');
                    }
                console.log($('#is_primary').val());
            });
            $('#save').click(function() {
                const jsonBody = {
                    user_id: '{!! Auth::user()->sub !!}',
                    name_receiver: $('#name').val(),
                    phone_number_receiver: $('#phone').val(),
                    province_id: $('#province').val(),
                    district_id: $('#district').val(),
                    city_id: $('#city').val(),
                    full_address: $('#full_address').val() + ', ' + $('#postal_code').val(),
                    is_primary: $('#is_primary').val(),
                }
                console.log(jsonBody);
                $.ajax({
                    headers: {
                        'x-csrf-token': '{!! csrf_token() !!}'
                    },
                    method: 'POST',
                    url: "/store/profile/setting/address",
                    data: jsonBody,
                    success: function(e) {
                        window.location = "/store/profile/setting"
                    }
                });
            });
        });

        function province() {
            $.ajax({
                url: base_url_logistic + '/logistics/province',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer ' + token_logistic,
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                data: JSON.stringify({}),
                success: function(data) {
                    // console.log(JSON.stringify(data));
                    var result = [{
                        "id": 0,
                        "text": "Select"
                    }];
                    data.forEach(function(item) {
                        result.push({
                            "id": item.id,
                            "text": item.name
                        });
                    });
                    $('#province').empty();
                    $('#city').empty();
                    $('#district').empty();
                    $('#province').select2({
                        data: result
                    });
                }
            });
        }
        province();

        function city(id) {
            $.ajax({
                url: base_url_logistic + '/logistics/city',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer ' + token_logistic,
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                data: JSON.stringify({
                    "province_id": id
                }),
                success: function(data) {
                    // console.log(JSON.stringify(data));
                    var result = [{
                        "id": 0,
                        "text": "Select"
                    }];
                    data.forEach(function(item) {
                        result.push({
                            "id": item.id,
                            "text": item.name
                        });
                    });
                    $('#city').empty();
                    $('#district').empty();
                    $('#city').select2({
                        data: result
                    });
                }
            });
        }

        function district(id) {
            $.ajax({
                url: base_url_logistic + '/logistics/district',
                type: 'POST',
                dataType: 'json',
                headers: {
                    "Authorization": 'Bearer ' + token_logistic,
                    "Content-Type": "application/json"
                },
                contentType: 'application/json',
                data: JSON.stringify({
                    "city_id": id
                }),
                success: function(data) {
                    // console.log(JSON.stringify(data));
                    var result = [{
                        "id": 0,
                        "text": "Select"
                    }];
                    data.forEach(function(item) {
                        result.push({
                            "id": item.id,
                            "text": item.name
                        });
                    });
                    $('#district').empty();
                    $('#district').select2({
                        data: result
                    });
                }
            });
        }
    </script>
@endsection