@extends ('backend.layouts.app')

@section ('title', __('customer::labels.backend.customer.management') . ' | ' . __('customer::labels.backend.customer.edit'))

@section('breadcrumb-links')
    @include('customer::includes.breadcrumb-links')
@endsection

@push('after-styles')
{{ style("assets/plugins/select2/css/select2.min.css") }}
{{ style("assets/plugins/select2/css/select2-bootstrap.min.css") }}
<link href="{{ asset('assets/plugins/waitme/waitMe.css') }}" rel="stylesheet" type="text/css"/>
{{ style("assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css") }}  
@endpush

@section('content')
{{ html()->modelForm($customer, 'PATCH', route('admin.customer.update', $customer->id))->class('form-horizontal')->open() }}
    <div class="card">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-5">
                    <h4 class="card-title mb-0">
                        {{ __('customer::labels.backend.customer.management') }}
                        <small class="text-muted">{{ __('customer::labels.backend.customer.edit') }}</small>
                    </h4>
                </div><!--col-->
            </div><!--row-->

            <hr />

            <div class="row mt-4 mb-4">
                <div class="col">

                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.name').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('name') }}

                        <div class="col-md-10">
                            {{ html()->text('name')
                                ->class('form-control')
                                ->placeholder(__('customer::labels.backend.customer.table.name'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->
                   
                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.mobile').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('mobile') }}

                        <div class="col-md-10">
                            {{ html()->text('mobile')
                                ->class('form-control')
                                ->placeholder(__('customer::labels.backend.customer.table.mobile'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.nrc').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('nrc') }}

                        <div class="col-md-10">
                            {{ html()->text('nrc')
                                ->class('form-control')
                                ->placeholder(__('customer::labels.backend.customer.table.nrc'))
                                ->attribute('maxlength', 191)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                        {{ html()->label(__('customer::labels.backend.customer.table.dob'))->class('col-md-2 form-control-label')->for('dob') }}

                        <div class="col-md-10">
                            {{ html()->text('dob')
                                ->class('form-control date')
                                ->placeholder(__('customer::labels.backend.customer.table.dob'))
                                ->attribute('maxlength', 191)
                                ->attribute('readonly', true)}}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.city').'<span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('city') }}

                        <div class="col-md-10">
                            <select name="city_id" id="city_id" class="form-control">
                                @foreach($cities as $city)
                                    <option></option>
                                    <option value="{{$city->id}}" @if($city->id == $customer->city_id) selected @endif>{{ $city->name}}</option>
                                @endforeach
                            </select>
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.township').'<span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('township') }}

                        <div class="col-md-10">
                            <select name="township_id" id="township_id" class="form-control" >
                                @if($customer->township_id)
                                    @foreach($townships as $township)
                                        <option></option>
                                        <option value="{{$township->id}}" @if($township->id == $customer->township_id) selected @endif>{{ $township->name}}</option>
                                    @endforeach
                                @else
                                    <option></option>
                                @endif
                            </select>
                            <span style="color:red;display:none;" id="township_text">Township Not found in this City</span>
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.address').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('address') }}

                        <div class="col-md-10">
                            {{ html()->textarea('address')
                                ->class('form-control')
                                ->placeholder(__('customer::labels.backend.customer.table.address'))
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                    {{ html()->label(__('customer::labels.backend.customer.table.gender').'*')->class('col-md-2 form-control-label')->for('gender') }}

                        <div class="col-md-10">

                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" {{ ($customer->gender == 'Male')?'checked':'' }} name="gender" value="Male">
                              <label class="form-check-label" for="gender_1">Male</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" {{ ($customer->gender == 'Female')?'checked':'' }} name="gender" value="Female">
                              <label class="form-check-label" for="gender_2">Female</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" type="radio" {{ ($customer->gender == 'Other')?'checked':'' }} name="gender" value="Other">
                              <label class="form-check-label" for="platform_type_3">Other</label>
                            </div>

                        </div><!--col-->
                    </div><!--form-group-->

                    <div class="form-group row">
                        {{ html()->label(__('validation.attributes.backend.access.users.timezone'))->class('col-md-2 form-control-label')->for('timezone') }}

                        <div class="col-md-10">
                            <select name="timezone" id="timezone" class="form-control" required="required">
                                @foreach (timezone_identifiers_list() as $timezone)
                                    <option value="{{ $timezone }}" {{ $timezone == config('app.timezone') ? 'selected' : '' }} {{ $timezone == old('timezone') ? ' selected' : '' }}>{{ $timezone }}</option>
                                @endforeach
                            </select>
                        </div><!--col-->
                    </div><!--form-group-->

                    <h3>Account Informations</h3>
                    <input type="hidden" name="user_id" value="{{ $customer->user->id }}">
                    <div class="form-group row">
                        {{ html()->label(__('validation.attributes.backend.access.users.email').' <span class="text-danger">*</span>')->class('col-md-2 form-control-label')->for('email') }}

                        <div class="col-md-10">
                            {{ html()->email('email')
                                ->class('form-control')
                                ->placeholder(__('validation.attributes.backend.access.users.email'))
                                ->attribute('maxlength', 191)
                                ->value($customer->user->email)
                                ->required() }}
                        </div><!--col-->
                    </div><!--form-group-->
                    
                </div><!--col-->
            </div><!--row-->
        </div><!--card-body-->

        <div class="card-footer">
            <div class="row">
                <div class="col">
                    {{ form_cancel(route('admin.customer.index'), __('buttons.general.cancel')) }}
                </div><!--col-->

                <div class="col text-right">
                    {{ form_submit(__('buttons.general.crud.update')) }}
                </div><!--row-->
            </div><!--row-->
        </div><!--card-footer-->
    </div><!--card-->
{{ html()->closeModelForm() }}
@endsection

@push('after-scripts')
{{ script('assets/plugins/select2/js/select2.full.min.js')}}
{{ script("assets/plugins/select2/component/components-select2.js") }}
<script src="{{ asset('assets/plugins/waitme/waitMe.js') }}" type="text/javascript"></script>
{{ script('assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js')}}
<script>
    function run_waitMe() {
        $('body').waitMe({
            effect : 'bounce',
            text: 'Please wait',
            bg: 'rgba(255,255,255,0.7)',
            color: '#000',
            sizeW: '',
            sizeH: ''
        });
    }

    function stop_waitMe() {
        $('body').waitMe('hide');
    }

    $('.date').datepicker({
        format: 'yyyy-mm-dd',
        autoclose: true
    });

    $('#city_id').select2({
       placeholder: "Choose City"
    });

    $('#township_id').select2({
       placeholder: "Choose Township"
    });

    $('#city_id').on('select2:select', function(){
        run_waitMe();
        var cityId = $(this).val();
        if(cityId){
            var township_id= $('#township_id').val();
            $('#township_id').empty();
        
            $('#township_id').removeAttr('disabled','disabled');
            $.ajax({
                url: "{{ url('admin/customer/get-townships/') }}/"+cityId,
                type: 'GET',
                success: function (data){
                    if(data.length == 0) {

                        $('#township_id').attr('disabled','disabled');
                        $('#township_id').find('option').remove().end();
                        $('#township_id').hide();
                        $('#township_text').show();
                        stop_waitMe();

                    }else {
                        $('#township_id').show();
                        $('#township_id').removeAttr('disabled','disabled');
                        $('#township_text').hide();
                        $('#township_id').find('option').remove().end();
                        $('#township_id').append($('<option></option>') .attr('selected',true).text('Seletct Township'));

                        $.each(data, function(i, value) {

                            $('#township_id').append($('<option></option>').attr('value', value.id).text(value.name ));
                            $('#township_id').trigger('change');  
                            stop_waitMe();
                        });    
                        $('#township_id').removeAttr('disabled','disabled');

                            $('#township_id').trigger('change');
                            stop_waitMe();
                    }  
                }, 
            });
        }else{
        $('#township_id').attr('disabled','disabled');  
        }  
    });

</script>
@endpush