@extends('layouts.main')

@push('styles')
<!-- 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-header">
                <h4 class="card-title">{{ __('strings.quiq_user_create') }}</h4>
            </div>
            <div class="card-body">
                <div class="card-block">
                   <form class="form" action="{{route('quiq_users_create_post')}}" method="post">
                        {{ csrf_field() }}
                        {{ method_field('post') }}
                        <div class="form-body">    
                            <div class="form-group  col-md-4">
                                <label for="email">{{ __('strings.profile.email') }}</label>
                                <input type="email" id="email" class="form-control" placeholder="{{ __('strings.profile.email') }}" name="email" required>
                            </div> 
                            <div class="form-group  col-md-4">
                                <label for="password">{{ __('strings.profile.password') }}</label>
                                <input type="password" id="password" class="form-control" placeholder="{{ __('strings.profile.password') }}" name="password"  autocomplete="new-password" required>
                            </div> 
                            <div class="form-group col-md-4">
                                <label for="name">{{ __('strings.profile.name') }}</label>
                                <input type="text" id="name" class="form-control" placeholder="{{ __('strings.profile.name') }}" name="name" required>
                            </div>
                            <div class="form-group col-md-4">
                                <label for="last_name">{{ __('strings.profile.last_name') }}</label>
                                <input type="text" id="last_name" class="form-control" placeholder="{{ __('strings.profile.last_name') }}" name="last_name" required>
                            </div>
                            
                            <div class="form-group col-md-4">   
                                <label for="producer_type">{{ __('strings.user_type') }}</label>
                                <select name="producer_type" class="form-control">
                                    <option value="null"> N / A </option>
                                    <option value="radiobase">Radio Base</option>
                                    <option value="empresa">Empresa</option>
                                    <option value="hotel">Hotel</option>
                                </select>
                            </div>
                            
                            <div class="form-group col-md-4">   
                                <label for="zone_id">Zona</label>
                                <select name="zone_id" class="form-control">
                                    <option value="null" selected> N / A </option>
                                    <option value="1">San Luis Potosí / SLP</option>
                                </select>
                            </div>
                            
                            <div class="form-group col-md-12">
                                <label for="user_phone">{{ __('strings.phone') }}</label>
                                <input type="text" id="user_phone" class="form-control" placeholder="{{ __('strings.phone') }}" name="user_phone">
                            </div>
                            <div class="form-group col-md-12">                                
                                <label for="is_producer"></label>
                                <div class="input-group">
                                <label class="display-inline-block custom-control custom-checkbox ml-1">
                                    <input name="is_producer" class="custom-control-input" type="checkbox">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description ml-0" data-toggle="tooltip" data-placement="right">{{ __('strings.is_producer') }}</span>
                                 </label>
                            </div>
                            </div>
                            <div class="form-group col-md-12">      
                                <div class="form-group col-md-4">   
                                <label for="type_of_capture">{{__('strings.tpye_of_capture')}}</label>
                                    <select id="type_of_capture" name="type_of_capture" class="form-control">
                                        <option value="Plataforma">{{__('strings.platform')}}</option>
                                        <option value="Manual" selected>Manual</option>
                                    </select>
                                </div>                                
                                <div class="form-group col-md-4">
                                    <label for="company_name">{{ __('strings.company_name') }}</label>
                                    <input type="text" id="company_name" class="form-control" placeholder="{{ __('strings.company_name') }}" name="company_name">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="rfc">RFC</label>
                                    <input type="text" id="rfc" class="form-control" placeholder="RFC" name="rfc">
                                </div>                               
                                <div class="form-group col-md-4">
                                    <label for="company_address">{{ __('strings.company_address') }}</label>
                                    <input type="text" id="company_address" class="form-control" placeholder="{{ __('strings.company_address') }}" name="company_address">
                                </div>
                                <div class="form-group col-md-4">   
                                    <label for="overprice">{{__('strings.overprice')}}</label>
                                    <select id="overprice" name="overprice" class="form-control" onchange="onOverprice()">
                                        <option value="SI">SI</option>
                                        <option value="NO" selected>NO</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">   
                                    <label for="overprice_type">{{__('strings.overprice_type')}}</label>
                                    <select id="overprice_type" name="overprice_type" class="form-control" onchange="onOverpriceType()" disabled>
                                        <option value="Fijo" selected>{{__('strings.fixed')}}</option>
                                        <option value="Variable">Variable</option>
                                        <option value="Mixto">{{__('strings.mixed')}}</option>
                                    </select>
                                </div>                                                             
                                <div class="form-group col-md-4">
                                    <label for="fixed">{{ __('strings.fixed') }}</label>
                                    <input type="number" max="50" min="0" value="0" id="fixed" class="form-control" placeholder="{{ __('strings.fixed') }}" name="fixed" disabled>
                                </div>                                                         
                                <div class="form-group col-md-4">
                                    <label for="variable">Variable</label>
                                    <input type="number" max="30" min="0" value="0" id="variable" class="form-control" placeholder="Variable" name="variable" disabled>
                                </div>
                                 <div class="form-group col-md-4">   
                                    <label for="company_commision">{{__('strings.company_commision')}}</label>
                                    <select id="company_commision" name="company_commision" class="form-control" onchange="onCompanyCommision()">
                                        <option value="SI">SI</option>
                                        <option value="NO" selected>NO</option>
                                    </select>
                                </div>
                                 <div class="form-group col-md-4">
                                    <label for="commission">{{ __('strings.commision') }}</label>
                                    <input type="number" max="30" min="0" value="0" id="commission" class="form-control" placeholder="{{ __('strings.commision') }}" name="commission" disabled>
                                </div>
                                
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-actions center col-md-12">
                            <a href="#" onclick="window.history.back();" class="btn btn-secondary">  {{__('strings.submit_cancel')}} </a>    
                            <button type="submit" class="btn btn-primary">{{ __('strings.profile.update') }}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<!-- International Telephone Input -->
<script src="{{asset('js/intlTelInput.min.js')}}" type="text/javascript"></script>
<!-- International Telephone Input -->
<script>
$("#user_phone").intlTelInput({
  utilsScript: "{{asset('js/phone_input_utils.js')}}",
  preferredCountries: ["mx"],
  hiddenInput: "full_phone"
});

function onOverprice(){ 
    var overprice = $("#overprice").val();
    if(overprice == 'SI') {
        $("#overprice_type").prop('disabled', false);
        $("#fixed").prop('disabled', false);
    } else {
        $("#overprice_type").prop('disabled', true);
        $("#fixed").prop('disabled', true);
        $("#variable").prop('disabled', true);
    }
}

function onOverpriceType() {
    var type = $("#overprice_type").val();
    if(type == 'Fijo') {
        $("#fixed").prop('disabled', false);
        $("#variable").prop('disabled', true);
    } else if(type == 'Variable'){        
        $("#fixed").prop('disabled', true);
        $("#variable").prop('disabled', false);
    } else if(type == 'Mixto'){
        $("#fixed").prop('disabled', false);
        $("#variable").prop('disabled', false);
    } 
}

function onCompanyCommision() {
    var value = $("#company_commision").val();
    if(value == "SI") {
        $("#commission").prop('disabled', false);
    } else {        
        $("#commission").prop('disabled', true);
    }
}
</script>
@endpush