Vue.component('account_addresses_create', {
    template: `
<div id="account_addresses_create">

<div class="card_head">
    <div id="title" v-if="address_to_update == null">Add address</div>
    <div id="title" v-if="address_to_update != null">Update address</div>
</div>

<div class="v-divider"></div>

        <form v-if="!success" @submit="submit_router">

        <enas_input :value_model.sync="title" label="Address title (eg. home, work, etc.)" :required="false"></enas_input>


            <div class="row no-gutters">
                <div class="col-sm-4">
                    <enas_input :value_model.sync="building" label="Building" :required="true"></enas_input>
                </div>
                <div class="col-sm-4">
                    <enas_input :value_model.sync="road" label="Road" :required="true"></enas_input>
                </div>
                <div class="col-sm-4">
                    <enas_input :value_model.sync="block" label="Block" :required="true"></enas_input>
                </div>
            </div>

                <enas_input :value_model.sync="phone_number" label="Phone number" :required="true"></enas_input>
                <enas_input :value_model.sync="memo" label="More details" ></enas_input>


<label class="bmd-label-static">Area</label>
<select class="custom-select" v-model="area">
  <option v-for="area_iter in areas" :value="area_iter.name_en">{{area_iter.name_en}}</option>

</select>

<br /><br />
                <b-btn type="submit" v-if="address_to_update == null">Add</b-btn>
                <b-btn type="submit" v-if="address_to_update != null">Update</b-btn>
                <b-btn @click="$emit('cancel',true)">Cancel</b-btn>
        </form>

        <div v-if="is_loading">
            <div class="loader"></div>
        </div>

        <div v-if="success">
            <div style="font-size:20px;text-align:center">
                <br />
                    <i class="fas fa-check" style="color:green"></i>
                <br /> {{success_msg}}
            </div>
        </div>


</div>
`,
    props: ['api_url', 'site_url', 'address_to_update'],
    data: function () {
        return {
            success_msg: 'Your new address has been added.',
            is_loading: false,
            success: false,
            valid: true,
            requiredRules: [
                v => !!v || 'This field is required',
            ],
            title: 'Home',
            building: '',
            road: '',
            block: '',
            area: 'Manama',
            areas: [
                {
                    "name_ar": "المنامة",
                    "name_en": "Manama"
                },
                {
                    "name_ar": "الجفير",
                    "name_en": "Juffair"
                },
                {
                    "name_ar": "العدلية",
                    "name_en": "Adliya"
                },
                {
                    "name_ar": "البرهامة",
                    "name_en": "Burhama"
                },
                {
                    "name_ar": "الديه",
                    "name_en": "Daih"
                },
                {
                    "name_ar": "مدينة عيسى",
                    "name_en": "Isa Town"
                },
                {
                    "name_ar": "مدينة حمد",
                    "name_en": "Hamad Town"
                },
                {
                    "name_ar": "منقطة أخرى",
                    "name_en": "Other"
                }
            ]
            ,
            phone_number: '',
            memo: '',
        }

    },

    methods: {
        submit_router(e) {
            e.preventDefault();

            if(this.address_to_update == null) {
                this.submit();
            } else {
                this.update();
            }

        },
        submit() {

            this.success_msg = "Your new address has been added.";


            var thisCompo = this;

            this.is_loading = true;

            axios.post(this.api_url + '/users/addresses/create', {
                'access_token': getCookie("access_token"),
                'building': thisCompo.building,
                'road': thisCompo.road,
                'block': thisCompo.block,
                'memo': thisCompo.memo,
                'area': thisCompo.area,
                'phone_number': thisCompo.phone_number,
                'title': thisCompo.title,
            }).then(function (response) {


                var responseRes = response.data;
                if (responseRes.success) {

                    thisCompo.success = true;

                    thisCompo.$emit('success', true);

                    thisCompo.is_loading = false;
                    // thisCompo.success = false;
                    // thisCompo.valid = true;



                } else {
                    alert("error");
                }

                thisCompo.is_loading = false;
            })
                .catch(function (error) {
                    console.log(error);
                });

        },
        update() {
            this.success_msg = "The address has been updated.";


            var thisCompo = this;

            this.is_loading = true;

            axios.post(this.api_url + '/users/addresses/update', {
                'access_token': getCookie("access_token"),
                'address_id': thisCompo.address_to_update.id,
                'building': thisCompo.building,
                'road': thisCompo.road,
                'block': thisCompo.block,
                'memo': thisCompo.memo,
                'area': thisCompo.area,
                'phone_number': thisCompo.phone_number,
                'title': thisCompo.title,
            }).then(function (response) {
                var responseRes = response.data;
                if (responseRes.success) {

                    

                    thisCompo.$emit('success', true);


                    thisCompo.is_loading = false;
                    // thisCompo.success = false;
                    // thisCompo.valid = true;



                } else {
                    console.log(response.data);
                    alert("error");
                }

                thisCompo.is_loading = false;
            })
                .catch(function (error) {
                    thisCompo.is_loading = false;

                    console.log(error);
                });

        },
        clear() {
        }

    },
    watch: {
        address_to_update: {
            handler: function (newVal, oldVal) {
                if(newVal == null) {
                    this.title = 'Home';
                    this.building = '';
                    this.road = '';
                    this.block = '';
                    this.phone_number = '';
                    this.memo = '';
                    this.area = '';
                } else {
                    this.title = newVal.title;
                    this.building = newVal.building;
                    this.road = newVal.road;
                    this.block = newVal.block;
                    this.phone_number = newVal.phone_number;
                    this.memo = newVal.memo;
                    this.area = newVal.area;
                }

                this.success = false;
                this.is_loading = false;
            }
        }
    },
    created: function () {

    }
});