@extends('layouts.main')

@push('styles')
<link rel="stylesheet" type="text/css" href="{{asset('datatables/datatables.min.css')}}">
<!-- International Telephone Input-->
<link rel="stylesheet" type="text/css" href="{{asset('css/intlTelInput.css')}}">
<!-- International Telephone Input -->
@endpush

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
            @if(!isset($employee))    
            
            <div class="card-header">
                <h1 class="card-title">{{__('strings.employee_registration')}}</h1>
            </div>
                <div class="card-block">

                    <div class="col-md-2"></div>

                    <div class="col-md-8">
                        <form class="form" action="{{route('employees_post')}}" method="post">
                            {{ csrf_field() }}

                            <div class="form-body">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="employee_number" class="form-control-label">{{__('strings.employee_number')}}</label>
                                        <input id="employee_number" name="employee_number" class="form-control" placeholder="{{__('strings.employee_number')}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="qr_code" class="form-control-label">Código QR</label>
                                        <input id="qr_code" name="qr_code" class="form-control" placeholder="Código QR">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="name" class="form-control-label">{{__('strings.name')}}</label>
                                        <input id="name" name="name" class="form-control" placeholder="{{__('strings.name')}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="last_name" class="form-control-label">{{__('strings.last_name')}}</label>
                                        <input id="last_name" name="last_name" class="form-control" placeholder="{{__('strings.last_name')}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="user_phone">{{ __('strings.phone') }}</label>
                                        <div class="form-group">
                                            <input type="text" id="user_phone" name="full_phone" class="form-control" placeholder="{{ __('strings.phone') }}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="blood_type" class="form-control-label">{{__('strings.blood_type')}}</label>
                                        <input id="blood_type" name="blood_type" class="form-control" placeholder="{{__('strings.blood_type')}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="department" class="form-control-label">{{__('strings.department')}}</label>
                                        <input id="department" name="department" class="form-control" placeholder="{{__('strings.department')}}" value="{{$employee->department ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="sex">{{__('strings.sex')}}</label>
                                        <select id="sex" name="sex" class="form-control">   
                                            <option value="N/A" >N/A</option>   
                                            <option value="M">M</option>                                  
                                            <option value="F">F</option>
                                        </select>
                                    </div>
                                </div>                        

                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="address" class="form-control-label">{{__('strings.address')}}</label>
                                        <input id="address" name="address" class="form-control" placeholder="{{__('strings.address')}}">
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><li class="fas fa-map-pin"></li></span>
                                        </div>
                                        <input id="lat" name="lat" type="number" class="form-control" placeholder="lat" step="any" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><li class="fas fa-map-pin"></li></span>
                                        </div>
                                        <input id="lng" name="lng" type="number" class="form-control" placeholder="lng" step="any" readonly>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="google_url" class="form-control-label">URL Google</label>
                                        <input id="google_url" name="google_url" class="form-control" placeholder="..." readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-block btn-primary">
                                    {{ __('strings.save') }}
                                </button>
                            </div>

                        </form>
                    </div>

                    <div class="col-md-2"></div>

                </div>
            @else  
            
            <div class="card-header">
                <h1 class="card-title">{{__('strings.employee_update')}}</h1>
            </div>
                <div class="card-block">

                    <div class="col-md-2"></div>

                    <div class="col-md-8">
                        <form class="form" action="{{route('employees_edit_post', ['employee_id' => $employee])}}" method="post">
                            {{ csrf_field() }}

                            <div class="card" style="width:203px">
                                <div id="qrcode"></div>
                            </div>
                            

                            <hr>
                            <div class="form-body">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="employee_number" class="form-control-label">{{__('strings.employee_number')}}</label>
                                        <input id="employee_number" name="employee_number" class="form-control" placeholder="{{__('strings.employee_number')}}" value="{{$employee->employee_number ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="qr_code" class="form-control-label">Código QR</label>
                                        <input id="qr_code" name="qr_code" class="form-control" placeholder="Código QR" value="{{$employee->qr_code ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="name" class="form-control-label">{{__('strings.name')}}</label>
                                        <input id="name" name="name" class="form-control" placeholder="{{__('strings.name')}}" value="{{$employee->name ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="last_name" class="form-control-label">{{__('strings.last_name')}}</label>
                                        <input id="last_name" name="last_name" class="form-control" placeholder="{{__('strings.last_name')}}" value="{{$employee->last_name ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="user_phone">{{ __('strings.phone') }}</label>
                                        <div class="form-group">
                                            <input type="text" id="user_phone" name="full_phone" class="form-control" placeholder="{{ __('strings.phone') }}" value="{{$employee->phone ?? ''}}">
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="blood_type" class="form-control-label">{{__('strings.blood_type')}}</label>
                                        <input id="blood_type" name="blood_type" class="form-control" placeholder="{{__('strings.blood_type')}}" value="{{$employee->blood_type ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="department" class="form-control-label">{{__('strings.department')}}</label>
                                        <input id="department" name="department" class="form-control" placeholder="{{__('strings.department')}}" value="{{$employee->department ?? ''}}">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="sex">{{__('strings.sex')}}</label>
                                        <select id="sex" name="sex" class="form-control">   
                                            <option value="N/A" {{$employee->sex == 'N/A' ? 'selected':''}} >N/A</option>   
                                            <option value="M" {{$employee->sex == 'M' ? 'selected':''}} >M</option>                                  
                                            <option value="F" {{$employee->sex == 'F' ? 'selected':''}} >F</option>
                                        </select>
                                    </div>
                                </div>                        

                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="address" class="form-control-label">{{__('strings.address')}}</label>
                                        <input id="address" name="address" class="form-control" placeholder="{{__('strings.address')}}" value="{{$employee->address ?? ''}}">
                                    </div>
                                </div>


                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><li class="fas fa-map-pin"></li></span>
                                        </div>
                                        <input id="lat" name="lat" type="number" class="form-control" placeholder="lat" step="any" readonly value="{{$employee->lat ?? ''}}">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><li class="fas fa-map-pin"></li></span>
                                        </div>
                                        <input id="lng" name="lng" type="number" class="form-control" placeholder="lng" step="any" readonly value="{{$employee->lng ?? ''}}">
                                    </div>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <div class="form-group">
                                        <label for="google_url" class="form-control-label">URL Google</label>
                                        <input id="google_url" name="google_url" class="form-control" placeholder="..." readonly value="{{$employee->google_url ?? ''}}">
                                    </div>
                                </div>
                            </div>

                            @if($employee->trashed())
                            <input type="hidden" name="verified" value="verified" />
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-block btn-success">
                                    {{ __('strings.verify') }}
                                </button>
                            </div>
                            @else
                            <div class="col-md-6">
                                <button type="submit" class="btn btn-block btn-primary">
                                    {{ __('strings.save') }}
                                </button>
                            </div>
                            @endif
                            

                        </form>
                    </div>
                    <div class="col-md-2"></div>
                </div>
            @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- International Telephone Input -->
<script src="{{asset('js/intlTelInput.min.js')}}" type="text/javascript"></script>
<script src="{{asset('js/jquery-qrcode-0.18.0.min.js')}}" type="text/javascript"></script>
<!-- International Telephone Input -->
<script>

$(document).ready(function() {
    $('#qrcode').qrcode({ quiet: 2, text: $('#qr_code').val()});

    $('#qr_code').on('input',function(e){
        $('#qrcode').empty().qrcode({ quiet: 2, text: $('#qr_code').val()});
    });

});

// detect paste or typing on start address to proccess lat,lng data        
$("#address").on('input', function () {
    // regualar expression to validate if given string has lat,lng values.
    // online regular expresion validator: https://www.debuggex.com/r/mNdKcumz2T5n-fWr#cheatsheet
    var patt = new RegExp(/.*(\/.*\/)@(\-?\d+\.\d+),\s*(\-?\d+\.\d+)/);

    if (patt.test($(this).val())) {
        var data = patt.exec($(this).val());
        console.log(data);
        var lat = data[2];
        var lng = data[3];  
        // get string elementos from regular expresion,                
        // replace all '+' characters with white space. 
        var address = decodeURIComponent(data[1]).replace(/\+/g, " ").replace(/\//g, "");
        $('#google_url').val($(this).val());
        $(this).val(address);
        $("#lat").val(lat);
        $("#lng").val(lng);
    }
});


</script>
@endpush