@extends('layouts.agent')
@section('content')

<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-12">

            <div class="card mx-4">
                <div class="card-body p-4">

                    <form method="POST" action="{{ route('agent.register') }}" enctype="multipart/form-data" novalidate>
                        {{ csrf_field() }}

                        <h1>{{ trans('panel.site_title') }}</h1>
                        <p class="text-muted">{{ trans('global.register') }}</p>


                        <fieldset class="form-group border p-3">
                            <legend class="w-auto px-2">Agent Information</legend>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" placeholder="{{ trans('global.user_name') }}" value="{{ old('name', null) }}" required />
                                @if($errors->has('name'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('name') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-id-card fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="ic_number" id="ic_number" pattern="[0-9]*" class="form-control{{ $errors->has('ic_number') ? ' is-invalid' : '' }}" required placeholder="Business Registration No./{{ trans('cruds.agent.fields.ic_number') }}" value="{{ old('ic_number', null) }}" />
                                @if($errors->has('ic_number'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('ic_number') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="sst_reg_no" class="form-control{{ $errors->has('sst_reg_no') ? ' is-invalid' : '' }}" placeholder="SST Registration No." value="{{ old('sst_reg_no', null) }}" required />
                                @if($errors->has('sst_reg_no'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('sst_reg_no') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-address-book fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" required placeholder="Registered {{ trans('cruds.agent.fields.address') }}" value="{{ old('address', null) }}" />
                                @if($errors->has('address'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('address') }}
                                    </div>
                                @endif
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3 {{ $errors->has('state_id') ? 'has-error' : '' }}">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-flag fa-fw"></i>
                                            </span>
                                        </div>
                                        <select class="form-control select2" name="state_id" id="state_id" required>
                                            <option value=""></option>
                                            @foreach($states as $id => $entry)
                                                <option value="{{ $id }}" {{ old('state_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->has('state_id'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('state_id') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3 {{ $errors->has('city_id') ? 'has-error' : '' }}">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-city"></i>
                                            </span>
                                        </div>
                                        <select class="form-control select2" name="city_id" id="city_id" required>
                                            <option value=""></option>
                                            @foreach($cities as $id => $entry)
                                                <option value="{{ $id }}" {{ old('city_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->has('city_id'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('city_id') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-user fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="bus_address" class="form-control{{ $errors->has('bus_address') ? ' is-invalid' : '' }}" placeholder="Business Address" value="{{ old('bus_address', null) }}" required />
                                @if($errors->has('bus_address'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('bus_address') }}
                                    </div>
                                @endif
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3 {{ $errors->has('bus_state_id') ? 'has-error' : '' }}">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-flag fa-fw"></i>
                                            </span>
                                        </div>
                                        <select class="form-control select2" name="bus_state_id" id="bus_state_id" required>
                                            <option value=""></option>
                                            @foreach($states as $id => $entry)
                                                <option value="{{ $id }}" {{ old('bus_state_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->has('bus_state_id'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('bus_state_id') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="input-group mb-3 {{ $errors->has('bus_city_id') ? 'has-error' : '' }}">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">
                                                <i class="fas fa-city"></i>
                                            </span>
                                        </div>
                                        <select class="form-control select2" name="bus_city_id" id="bus_city_id" required>
                                            <option value=""></option>
                                            @foreach($cities as $id => $entry)
                                                <option value="{{ $id }}" {{ old('bus_city_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                                            @endforeach
                                        </select>
                                        @if($errors->has('bus_city_id'))
                                            <div class="invalid-feedback">
                                                {{ $errors->first('bus_city_id') }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-mars-double fa-fw"></i>
                                    </span>
                                </div>
                                <select class="form-control {{ $errors->has('gender') ? 'is-invalid' : '' }}" name="gender" id="gender" required>
                                    <option value {{ old('gender', null) === null ? 'selected' : '' }}>Select Gender</option>
                                    @foreach(App\Models\Agent::GENDER_SELECT as $key => $label)
                                        <option value="{{ $key }}" {{ old('gender') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('gender'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('gender') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-ring fa-fw"></i>
                                    </span>
                                </div>
                                <select class="form-control {{ $errors->has('civil_status') ? 'is-invalid' : '' }}" name="civil_status" id="civil_status" required>
                                    <option value {{ old('civil_status', null) === null ? 'selected' : '' }}>Select Civil Status</option>
                                    @foreach(App\Models\Employee::CIVIL_STATUS_SELECT as $key => $label)
                                        <option value="{{ $key }}" {{ old('civil_status') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('civil_status'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('civil_status') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-phone fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="contact_number" class="form-control{{ $errors->has('contact_number') ? ' is-invalid' : '' }}" required placeholder="{{ trans('cruds.agent.fields.contact_number') }}" value="{{ old('contact_number', null) }}" />
                                @if($errors->has('contact_number'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('contact_number') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-phone fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="fax_no" class="form-control{{ $errors->has('fax_no') ? ' is-invalid' : '' }}" required placeholder="Fax No." value="{{ old('fax_no', null) }}" />
                                @if($errors->has('fax_no'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('fax_no') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-envelope fa-fw"></i>
                                    </span>
                                </div>
                                <input type="email" name="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.login_email') }}" value="{{ old('email', null) }}" />
                                @if($errors->has('email'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('email') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-university fa-fw"></i>
                                    </span>
                                </div>
                                <select class="form-control {{ $errors->has('education_level') ? 'is-invalid' : '' }}" name="education_level" id="education_level" required>
                                    <option value {{ old('education_level', null) === null ? 'selected' : '' }}>Select Education Level</option>
                                    @foreach(App\Models\Employee::EDUCATION_LEVEL_SELECT as $key => $label)
                                        <option value="{{ $key }}" {{ old('education_level') === (string) $key ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                                @if($errors->has('education_level'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('education_level') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3 education_level_answer">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-university fa-fw"></i>
                                    </span>
                                </div>
                                <input type="text" name="education_level_answer" id="education_level_answer" class="form-control{{ $errors->has('education_level_answer') ? ' is-invalid' : '' }}"  placeholder="Please key in your education level" value="{{ old('education_level_answer', null) }}" />
                                @if($errors->has('education_level_answer'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('education_level_answer') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-lock fa-fw"></i>
                                    </span>
                                </div>
                                <input type="password" name="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.login_password') }}" />
                                @if($errors->has('password'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('password') }}
                                    </div>
                                @endif
                            </div>

                            <div class="input-group mb-4">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fa fa-lock fa-fw"></i>
                                    </span>
                                </div>
                                <input type="password" name="password_confirmation" class="form-control" required placeholder="{{ trans('global.login_password_confirmation') }}" />
                            </div>

                            <div class="form-group">
                                <label for="AreaCitiesCover">Name the regional area / cities which you cover:</label>
                                <textarea class="form-control{{ $errors->has('area_cities_cover') ? ' is-invalid' : '' }}" id="AreaCitiesCover" name="area_cities_cover" rows="3" placeholder="{{ trans('cruds.agent.fields.area_cities_cover') }}"></textarea>
                                 @if($errors->has('area_cities_cover'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('area_cities_cover') }}
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="AnswerQuestion1">Do you have any relatives / family members connected with Happy Grains (whether as employees or sales agents)?</label>
                                <textarea class="form-control{{ $errors->has('answer_question_1') ? ' is-invalid' : '' }}" id="AnswerQuestion1" name="answer_question_1" rows="3" placeholder="{{ trans('cruds.agent.fields.answer_question_1') }}"></textarea>
                                 @if($errors->has('answer_question_1'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('answer_question_1') }}
                                    </div>
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="referral">Referral</label>
                                <textarea class="form-control{{ $errors->has('referral') ? ' is-invalid' : '' }}" id="referral" name="referral" rows="3" placeholder="Please key in your referral name"></textarea>
                                 @if($errors->has('referral'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('referral') }}
                                    </div>
                                @endif
                            </div>

                            <div class="form-group row">
                                <div class="col-sm-12">
                                    <h3 class="text-danger">Please choose either IC or SSM to upload for verification purpose.</h3>
                                </div>
                                <label for="UploadIC" class="col-sm-3 col-form-label col-form-label-sm">Upload IC</label>
                                <div class="col-sm-9">
                                    <div>
                                        <input type="file" class="form-control-file {{ $errors->has('upload_ic') ? ' is-invalid' : '' }}" name="upload_ic" id="UploadIC" onchange="Filevalidation(this, event)" />
                                        <small>Accepted files : PDF, JPG, PNG (2MB file size is maximum)</small>
                                    </div>
                                    <div>
                                        <img src="{{ asset('assets/SysImg/preview.png') }}" height="300" width="300" id="preview-img-ic" alt="Image preview...">
                                    </div>
                                </div>
                                @if($errors->has('upload_ic'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('upload_ic') }}
                                    </div>
                                @endif
                            </div>

                            <div class="form-group row">
                                <label for="upload_ssm" class="col-sm-3 col-form-label col-form-label-sm">Upload SSM</label>
                                <div class="col-sm-9">
                                    <div>
                                        <input type="file" class="form-control-file {{ $errors->has('upload_ssm') ? ' is-invalid' : '' }}" name="upload_ssm" id="upload_ssm" onchange="Filevalidation(this, event)" />
                                        <small>Accepted files : PDF, JPG, PNG (2MB file size is maximum)</small>
                                    </div>
                                    <div>
                                        <img src="{{ asset('assets/SysImg/preview.png') }}" height="300" width="300" id="preview-img-ssm" alt="Image preview...">
                                    </div>
                                </div>
                                @if($errors->has('upload_ssm'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('upload_ssm') }}
                                    </div>
                                @endif
                            </div>
                        </fieldset>
                        
                        <fieldset class="form-group border p-3">
                            <legend class="w-auto px-2">Contact Person Information for Customer Notification Purposes</legend>

                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_name_1" class="form-control{{ $errors->has('contact_person_name_1') ? ' is-invalid' : '' }}" placeholder="Contact Person Name" value="{{ old('contact_person_name_1', null) }}" required />
                                    @if($errors->has('contact_person_name_1'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_name_1') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_designation_1" class="form-control{{ $errors->has('contact_person_designation_1') ? ' is-invalid' : '' }}" placeholder="Designation" value="{{ old('contact_person_designation_1', null) }}" required />
                                    @if($errors->has('contact_person_designation_1'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_designation_1') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_email_address_1" class="form-control{{ $errors->has('contact_person_email_address_1') ? ' is-invalid' : '' }}" placeholder="Email Address" value="{{ old('contact_person_email_address_1', null) }}" required />
                                    @if($errors->has('contact_person_email_address_1'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_email_address_1') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_contact_no_1" class="form-control{{ $errors->has('contact_person_contact_no_1') ? ' is-invalid' : '' }}" placeholder="Contact No." value="{{ old('contact_person_contact_no_1', null) }}" required />
                                    @if($errors->has('contact_person_contact_no_1'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_contact_no_1') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="signature">Signature :</label>
                                    <input type="file" name="contact_person_signature_1" accept="image/jpeg, image/png, image/jpg" required />
                                </div>
                                <div class="col-md-6">
                                    <label for="company_stamp">Stamp :</label>
                                    <input type="file" name="contact_person_stamp_1" accept="image/jpeg, image/png, image/jpg" required />
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_name_2" class="form-control{{ $errors->has('contact_person_name_2') ? ' is-invalid' : '' }}" placeholder="Contact Person Name" value="{{ old('contact_person_name_2', null) }}" />
                                    @if($errors->has('contact_person_name_2'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_name_2') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_designation_2" class="form-control{{ $errors->has('contact_person_designation_2') ? ' is-invalid' : '' }}" placeholder="Designation" value="{{ old('contact_person_designation_2', null) }}" />
                                    @if($errors->has('contact_person_designation_2'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_designation_2') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_email_address_2" class="form-control{{ $errors->has('contact_person_email_address_2') ? ' is-invalid' : '' }}" placeholder="Email Address" value="{{ old('contact_person_email_address_2', null) }}" />
                                    @if($errors->has('contact_person_email_address_2'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_email_address_2') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="contact_person_contact_no_2" class="form-control{{ $errors->has('contact_person_contact_no_2') ? ' is-invalid' : '' }}" placeholder="Contact No." value="{{ old('contact_person_contact_no_2', null) }}" />
                                    @if($errors->has('contact_person_contact_no_2'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_contact_no_2') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="signature">Signature :</label>
                                    <input type="file" name="contact_person_signature_2" accept="image/jpeg, image/png, image/jpg" />
                                </div>
                                <div class="col-md-6">
                                    <label for="company_stamp">Stamp :</label>
                                    <input type="file" name="contact_person_stamp_2" accept="image/jpeg, image/png, image/jpg" />
                                </div>
                            </div>
                        </fieldset>

                        <fieldset class="form-group border p-3">
                            <legend class="w-auto px-2">Bank Information</legend>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="bank_beneficiary_name" class="form-control{{ $errors->has('bank_beneficiary_name') ? ' is-invalid' : '' }}" placeholder="Bank Beneficiary Name" value="{{ old('bank_beneficiary_name', null) }}" required />
                                    @if($errors->has('bank_beneficiary_name'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('bank_beneficiary_name') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="bank_name" class="form-control{{ $errors->has('bank_name') ? ' is-invalid' : '' }}" placeholder="Bank Name" value="{{ old('bank_name', null) }}" required />
                                    @if($errors->has('bank_name'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('bank_name') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">
                                            <i class="fa fa-user fa-fw"></i>
                                        </span>
                                    </div>
                                    <input type="text" name="bank_account_no" class="form-control{{ $errors->has('bank_account_no') ? ' is-invalid' : '' }}" placeholder="Bank Account No." value="{{ old('bank_account_no', null) }}" required />
                                    @if($errors->has('bank_account_no'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('bank_account_no') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </fieldset>

                        <fieldset class="form-group border p-3">
                            <legend class="w-auto px-2">Document for submission</legend>
                            <p>Please enclose the following documents: </p>
                            <ul class="pl-4">
                                <li>Photocopy of Certificate of Incorporation (Form 9)/ Business Registration Form.</li>
                                <li>Photocopy of Form 24, Form 44 and Form 49.</li>
                            </ul>
                            <input type="file" name="document_submission[]" id="file" onchange="javascript:updateList()" multiple />

                            <p class="mt-2">Selected files:</p>

                            <div id="fileList"></div>
                        </fieldset>

                        <div class="row">
                            <div class="col-6 text-center">
                                <button class="btn btn-block btn-primary" type="submit">{{ trans('global.register') }}</button>
                            </div>
                            <div class="col-6 text-center">
                                <a href="{{ url()->previous() }}" class="btn btn-block btn-danger">
                                    {{ trans('global.back') }}
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(function(){
        Filevalidation = (ele, evt) => {
            let preview = $(ele).parent().next('div').find('img');

            const fi = evt.target.files;

            // use the 1st file from the list
            let file = fi[0];
            
            let reader = new FileReader();

            reader.readAsDataURL(file);

            // Closure to capture the file information.
            reader.onload = (function(theFile) {

                return function(e) {
                    const fsize = theFile.size;
                    const file = Math.round((fsize / 1024));
                    // The size of the file.
                    if (file >= 2048) {
                        alert(
                          "File too Big, please select a file less than 2mb");

                        ele.value = '';
                        $(preview).attr('src', '../assets/SysImg/preview.png')
                    }
                    else
                    {
                        $(preview).attr('src', reader.result)
                        preview.src = reader.result;
                    }
                };
            })(file);
            // Read in the image file as a data URL
        }

        updateList = function() {
            var input = document.getElementById('file');
            var output = document.getElementById('fileList');
            var children = "";
            for (var i = 0; i < input.files.length; ++i) {
                children += '<li>' + input.files.item(i).name + '</li>';
            }
            output.innerHTML = '<ul class="pl-4">'+children+'</ul>';
        }
            

        $('.education_level_answer').hide();
        $('#education_level').change(function(){
            if($(this).val() == 6)
            {
                $('#education_level_answer').prop('required', true);
                $('.education_level_answer').show();
            }
            else
            {
                $('.education_level_answer').hide();
                $('#education_level_answer').removeAttr('required');
                $('#education_level_answer').val('');
            }
        });

        $('#ic_number').keypress(function( e ) {
            if (e.charCode != 46 && e.charCode != 45 && e.charCode > 31 && (e.charCode < 48 || e.charCode > 57))
            {
                alert("Only numbers is allowed!");
                return false;
            }
        });

        $('#ic_number').keypress(function( e ) {
            if (e.charCode != 46 && e.charCode != 45 && e.charCode > 31 && (e.charCode < 48 || e.charCode > 57))
            {
                alert("Only numbers is allowed!");
                return false;
            }
        });

        $("#state_id").change(function(){
            $.ajax({
                url: "{{ route('get-by-state') }}?state_id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#city_id').html(data.html);
                }
            });
        });

        $("#bus_state_id").change(function(){
            $.ajax({
                url: "{{ route('get-by-state') }}?state_id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#bus_city_id').html(data.html);
                }
            });
        });
    })
</script>
@endsection