@extends('layouts.front.app')

@section('content')
    <!-- Main content -->
    <section class="container content">
        @include('layouts.errors-and-messages')
        <div class="box">
            <form action="{{ route('customer.address.update', [$customer->id, $address->id]) }}" method="post" class="form" enctype="multipart/form-data">
                <input type="hidden" name="status" value="1">
                <input type="hidden" id="address_country_id" value="{{ $address->country_id }}">
                <input type="hidden" id="address_province_id" value="{{ $address->province_id }}">
                <input type="hidden" id="address_state_code" value="{{ $address->state_code }}">
                <input type="hidden" id="address_city" value="{{ $address->city }}">
                <input type="hidden" name="_method" value="put">
                <div class="box-body">
                    {{ csrf_field() }}
                    <div class="form-group">
                        <div class="col-md-6">
                            <label for="country_id">País </label>
                            <select name="country_id" id="country_id" class="form-control select2">
                                @foreach($countries as $country)
                                    <option @if($address->country_id == $country->id) selected="selected" @endif value="{{ $country->id }}">{{ $country->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="alias">Tipo de endereço <span class="text-danger">*</span></label>
                            <input type="text" name="alias" id="alias" placeholder="Casa ou Trabalho" class="form-control" value="{{ old('alias') ?? $address->alias }}">
                        </div>

                        <div class="col-md-3">
                            <label for="phone">Celular </label>
                            <input type="text" name="phone" id="phone" placeholder="Telefone" class="form-control" value="{{ old('phone') ?? $address->phone }}">
                        </div>

                    </div>

                    <div class="form-group">
                        <div class="col-md-2">
                            <label for="zip">CEP </label>
                            <input type="text" name="zip" id="zip" placeholder="CEP" class="form-control" value="{{ old('zip') ?? $address->zip }}">
                        </div>
                        <div class="col-md-6">
                            <label for="address_1">Endereço (linha 1) <span class="text-danger">*</span></label>
                            <input type="text" name="address_1" id="address_1" placeholder="Endereço (linha 1)" class="form-control" value="{{ old('address_1') ?? $address->address_1 }}">
                        </div>
                        <div class="col-md-2">
                            <label for="address_1">Número <span class="text-danger">*</span></label>
                            <input type="text" name="numero" id="numero" placeholder="Número" class="form-control" value="{{ old('numero') ?? $address->numero }}">
                        </div>
                        <div class="col-md-2">
                            <label for="address_1">Complemento </label>
                            <input type="text" name="complemento" id="complemento" placeholder="Complemento" class="form-control" value="{{ old('complemento') ?? $address->complemento }}">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-5 bairro">
                            <label for="address_2">Bairro </label>
                            <input type="text" name="address_2" id="address_2" placeholder="Endereço (linha 2)" class="form-control" value="{{ old('address_2') ?? $address->address_2 }}">
                        </div>
                        <div class="col-md-2">
                            <div id="estados" class="form-group" >
                                <label for="state_code">Estado </label>
                                <select name="state_code" id="state_code" class="form-control">
                                    <option>Aguarde...</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div id="cidades" class="form-group" >
                                <label for="city">Cidade </label>
                                <select name="city" id="city" class="form-control select2">
                                    <option>Aguarde...</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="form-group">
                    <div class="col-md-12">
                        <a href="{{ route('accounts', ['tab' => 'address']) }}" class="btn btn-default">Voltar</a>
                        <button type="submit" class="btn btn-primary">Atualizar</button>
                    </div>
                </div>
            </form>
        </div>
        <!-- /.box -->

    </section>
    <!-- /.content -->
@endsection

@section('css')
    <link href="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css') }}" rel="stylesheet" />
@endsection

@section('js')
    <script src="{{ asset('https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js') }}"></script>

    <script type="text/javascript">
        function aplicaMascara() {
            let country_id = $('#country_id option:selected').val()
            if (country_id === '30') {
                $('#phone').mask('(99) 9 9999-9999')
                $('#zip').mask('99999-999')
            } else {
                $('#phone').unmask()
                $('#zip').unmask()
            }
        }

        aplicaMascara()

        $('#country_id').on('change', function() {
            aplicaMascara()
        })

        function carregaEstados (uf = null, cep = false) {
            if (uf === null) {
                uf = $('#address_state_code').val()
            }

            $.ajax({
                url: '/api/estado/',
                contentType: 'json',
                success: function (resultado) {
                    let html = '<label for="state_code">Estado </label>'
                    html += '<select name="state_code" id="state_code" class="form-control select2">'
                    html += '<option value="">Selecione</option>'
                    $(resultado).each(function (idx, v) {
                        html += '<option '
                        if (uf === v.uf) {
                            html += ' selected="selected" '
                        }
                        html +=' value="'+ v.uf +'">'+ v.nome_uf +'</option>'
                    });
                    html += '</select>'

                    $('#estados').html(html)
                    if(!cep) {
                        carregaCidades (uf)
                    }
                }
            })
        }

        function carregaCidades (uf = null, cod_cidade = null) {
            if (uf === null) {
                uf = $('#address_state_code').val()
            }
            if (cod_cidade === null) {
                cod_cidade = $('#address_city').val()
            }
            $.ajax({
                url: '/api/cidade/' + uf,
                contentType: 'json',
                success: function (resultado) {
                    let html = '<label for="city">Cidade </label>'
                    html += '<select name="city" id="city" class="form-control select2">'
                    html += '<option value="">Selecione</option>'
                    $(resultado).each(function (idx, v) {
                        html += '<option '
                        if (cod_cidade === v.cod_municipio_completo) {
                            html += ' selected="selected" '
                        }
                        html +=' value="'+ v.cod_municipio_completo + '">'+ v.nome_municipio +'</option>'
                    });
                    html += '</select>'

                    $('#cidades').html(html)
                }
            })
        }

        $(document).ready(function () {
            carregaEstados()

            $("#zip").on('blur', function(){
                let CEP = $(this).val()
                let country_id = $('#country_id option:selected').val()
                {{-- /* Só irá executar executar a busca por CEP se for morador do Brasil */--}}
                if (country_id === '30'){
                    $.ajax({
                        url : '/api/cep/' + CEP,
                        contentType: 'json',
                        success: function (res) {
                            $('#address_1').val(res.logradouro)
                            $('#address_2').val(res.bairro)
                            $('.bairro').removeClass('col-md-12').addClass('col-md-6')
                            carregaEstados(res.uf, true)
                            carregaCidades(res.uf, res.ibge)
                            $('#numero').focus()
                        }
                    });
                }
            })
            $('#estados').on('change', function(){
                let uf = $('#estados option:selected').val()
                carregaCidades(uf)
            })
        })
    </script>
@endsection