@extends('templates.structure')
@section('custom_css')

<link rel="stylesheet" href="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('intltel/build/css/intlTelInput.css')}}">
<style>
    .intl-tel-input {
        width: 100%;
    }
</style>
@endsection
@section('content')

<div class="row">
    <div class="col-md-12">        
        <div class="card">
            <form role="form" id="form">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                                <h4 class="text-center">Client Details</h4>
                            <hr>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Firstname</label>
                                <input type="text" name="firstname" class="form-control">
                            </div>                            
                        </div>                        
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Lastname</label>
                                <input type="text" name="lastname" class="form-control">
                            </div>                            
                        </div>                                            
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>ID Type</label>
                                <div class="input-group">
                                    <div class="radio">
                                        <label for="optionsRadios1" style="font-weight:400">
                                            <input type="radio" name="id_type" id="optionsRadios1" value="1" >
                                            Identity Card
                                        </label>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="radio">
                                        <label for="optionsRadios2" style="font-weight:400">
                                            <input type="radio" name="id_type" id="optionsRadios2" value="2" >
                                            Driving License
                                        </label>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="radio">
                                        <label for="optionsRadios3" style="font-weight:400">
                                            <input type="radio" name="id_type" id="optionsRadios3" value="3" >
                                            Passport
                                        </label>
                                    </div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <div class="radio">
                                        <label for="optionsRadios4" style="font-weight:400">
                                            <input type="radio" name="id_type" id="optionsRadios4" value="4" >
                                            Taxpayer ID Number
                                        </label>
                                    </div>
                                </div>
                            </div>                        
                        </div>                    
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>ID No.</label>
                                <input type="text" name="id_no" class="form-control" placeholder="number of id type">
                            </div>                        
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Phone</label>                                
                                <div class="input-group">
                                    <input type="tel" id="phone_1" name="phone" class="form-control" placeholder="">
                                </div>
                            </div>                            
                        </div>                    
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Secondary Phone</label>
                                <input type="tel" id="phone_2" name="unity_clients_dt[secondary_phone]" class="form-control">
                            </div>                            
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Email</label>
                                <input type="text" name="email" class="form-control">
                            </div>                        
                        </div>
                        <div class="col-md-6">                                
                            <div class="form-group">
                                <label>Location</label>
                                <select name="location_id" class="form-control">                                    
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Address</label>
                                <textarea name="address" rows="3" class="form-control"></textarea>
                            </div>                            
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>City</label>
                                <input type="text" name="city" class="form-control">
                            </div>                            
                        </div>
                        <div class="col-md-6">                            
                            <div class="form-group">
                                <label>Country</label>
                                <select name="country" class="form-control">
                                    <option value=""></option>
                                    @foreach ($unity_config_countries as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">                            
                            <div class="form-group">
                                <label>Postal Code</label>
                                <input type="text" name="postal_code" class="form-control">
                            </div>
                        </div>
                    </div>    
                    <div class="row">
                        <div class="col-12">
                            <hr>
                                <h4 class="text-center">Company Details</h4>
                            <hr>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Company Name</label>
                                <input type="text" name="company_name" class="form-control">
                            </div>                            
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Company Tax ID</label>
                                <input type="text" name="company_tax_id" class="form-control">
                            </div>  
                        </div>
                    </div>
                </div>                
                <div class="card-footer">
                    <div class="row">
                        {{-- <div class="col-md-6">
                            <div class="form-group">
                                <input type="checkbox" name="complete_profile" value="1" readonly>  
                                <small for="complete_profile">this checked if information was complete</small>
                            </div>
                        </div> --}}
                        <div class="col-md-12">                            
                            <button type="submit" class="btn btn-info float-right">Save</button>
                        </div>
                    </div>
                    {{-- <button class="btn btn-default float-right">Cancel</button> --}}
                </div>
            </form>
        </div>        
    </div>
</div>
@endsection

@section('custom_js')
<script src="{{asset('AdminLTE-3.0.0-alpha.2/plugins/select2/select2.full.min.js')}}"></script>
<script src="{{asset('intltel/build/js/intlTelInput.js')}}"></script>
<script src="{{asset('intltel/build/js/utils.js')}}"></script>
<script>
    var phone_1 = window.intlTelInput(document.querySelector("#phone_1"), {
            customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
                return "e.g. " + selectedCountryPlaceholder;
            },
            preferredCountries: ["id", "ph", "th", "my", "sg"]
        });

    var phone_2 = window.intlTelInput(document.querySelector("#phone_2"), {
            customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
                return "e.g. " + selectedCountryPlaceholder;
            },
            preferredCountries: ["id", "ph", "th", "my", "sg"]
        });

    $('[name="location_id"]').select2({
            placeholder: '',
            width: '100%',
            allowClear: true,
            ajax: {            
                url: '{{route("locations.datatable")}}',
                dataType: 'json',
                data: function(params) {                
                    return {                    
                        start: params.page == NaN ? 0 : (params.page-1) * 25,
                        length: 25,
                        columns: {
                            0:{
                            name: 'op.location_name',
                            orderable: true,
                            searchable: true
                            }
                        },
                        search: {value: params.term},
                        order: {0:{dir:'asc'}}
                    }
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;                
                    var newData = []
                    $.each(data.data, function(key, val){
                        newData[key] = {'id' : val.id, 'text' : val.location_name};                    
                    })

                    data.results = newData;
                
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 25) < data.recordsFiltered
                        }
                    }

                },
                cache: true
            }
        });

    // $('form').change(function() {
    //     var complete = []
    //     $(":text, :file, :checkbox, select, textarea").each(function() {
    //         if($(this).val() === ""){
    //             complete.push(1)
    //         } else {
    //             complete.push(0)
    //         }
    //     });
    //     var sum = complete.reduce((a, b) => a + b, 0);

    //     if(sum == 0){            
    //         document.querySelector("[name='complete_profile']").checked = true;
    //     } else {
    //         document.querySelector("[name='complete_profile']").checked = false;
    //     }
        
    // }).keyup(function(){
    //     var complete = []
    //     $(":text, :file, :checkbox, select, textarea").each(function() {
    //         if($(this).val() === ""){
    //             complete.push(1)
    //         } else {
    //             complete.push(0)
    //         }
    //     });

    //     var sum = complete.reduce((a, b) => a + b, 0);

    //     if(sum == 0){            
    //         document.querySelector("[name='complete_profile']").checked = true;
    //     } else {
    //         document.querySelector("[name='complete_profile']").checked = false;
    //     }

    // }) 
</script>
<script>
    $(function () {
        //Initialize Select2 Elements
        $('[name="country"]').select2()

        $( "#form" ).submit(function( e ) {
            e.preventDefault()

            var input = $(this).serialize()
            input += '&phone='+phone_1.getNumber()
            input += '&unity_clients_dt[secondary_phone]='+phone_2.getNumber()

            axios.post('{{route("clients.store")}}', input, config) .then(function (response) {
                        console.log(response);
                        window.location = response.data.additional.redirect;

                    })
                    .catch(function (error) { console.log(error);
                        $('.newerror').remove()
                        var msgs = error.response.data.data.message
                        $.each(msgs, function (index, value) {
                                $('[name="'+index+'"]').closest( ".form-group" ).after('<label id="'+index+'-error" class="newerror" for="'+index+'">'+value[0]+'</label>')
                                // console.log(value[0])
                            });
                    });
        })

    })
    
</script>

@endsection