@extends('layouts.agent')
@section('styles')
<style type="text/css">
    h1 {
        text-align: center;
    }
    h2 {
        margin: 0;
    }
    #multi-step-form-container {
        /*margin-top: 5rem;*/
    }
    .text-center {
        text-align: center;
    }
    .mx-auto {
        margin-left: auto;
        margin-right: auto;
    }
    .pl-0 {
        padding-left: 0;
    }
    .button {
        padding: 0.7rem 1.5rem;
        border: 1px solid #f7bd47;
        background-color: #f7bd47;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
    }
    .submit-btn {
        border: 1px solid #2c180d;
        background-color: #2c180d;
        color: #fff;
    }
    .submit-btn:hover{
        color: #f5f5f5;
    }
    .mt-3 {
        margin-top: 2rem;
    }
    .d-none {
        display: none;
    }
    .form-step {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 20px;
        padding: 3rem;
    }
    .font-normal {
        font-weight: normal;
    }
    ul.form-stepper {
        counter-reset: section;
        margin-bottom: 3rem;
    }
    ul.form-stepper .form-stepper-circle {
        position: relative;
    }
    ul.form-stepper .form-stepper-circle span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
    }
    .form-stepper-horizontal {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    ul.form-stepper > li:not(:last-of-type) {
        margin-bottom: 0.625rem;
        -webkit-transition: margin-bottom 0.4s;
        -o-transition: margin-bottom 0.4s;
        transition: margin-bottom 0.4s;
    }
    .form-stepper-horizontal > li:not(:last-of-type) {
        margin-bottom: 0 !important;
    }
    .form-stepper-horizontal li {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: start;
        -webkit-transition: 0.5s;
        transition: 0.5s;
    }
    .form-stepper-horizontal li:not(:last-child):after {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 1px;
        content: "";
        top: 32%;
    }
    .form-stepper-horizontal li:after {
        background-color: #dee2e6;
    }
    .form-stepper-horizontal li.form-stepper-completed:after {
        background-color: #2c180d;
    }
    .form-stepper-horizontal li:last-child {
        flex: unset;
    }
    ul.form-stepper li a .form-stepper-circle {
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-right: 0;
        line-height: 1.7rem;
        text-align: center;
        background: rgba(0, 0, 0, 0.38);
        border-radius: 50%;
    }
    .form-stepper .form-stepper-active .form-stepper-circle {
        background-color: #f7bd47 !important;
        color: #000;
    }
    .form-stepper .form-stepper-active .label {
        color: #000 !important;
    }
    .form-stepper .form-stepper-active .form-stepper-circle:hover {
        background-color: #f7bd47 !important;
        color: #fff !important;
    }
    .form-stepper .form-stepper-unfinished .form-stepper-circle {
        background-color: #f8f7ff;
    }
    .form-stepper .form-stepper-completed .form-stepper-circle {
        background-color: #2c180d !important;
        color: #fff;
    }
    .form-stepper .form-stepper-completed .label {
        color: #2c180d !important;
    }
    .form-stepper .form-stepper-completed .form-stepper-circle:hover {
        background-color: #2c180d !important;
        color: #fff !important;
    }
    .form-stepper .form-stepper-active span.text-muted {
        color: #fff !important;
    }
    .form-stepper .form-stepper-completed span.text-muted {
        color: #fff !important;
    }
    .form-stepper .label {
        font-size: 1rem;
        margin-top: 0.5rem;
    }
    .form-stepper a {
        cursor: default;
    }
</style>
@endsection

@section('content')
<div>
    <div id="multi-step-form-container">
        <!-- Form Steps / Progress Bar -->
        <ul class="form-stepper form-stepper-horizontal text-center mx-auto pl-0">
            <!-- Step 1 -->
            <li class="form-stepper-active text-center form-stepper-list" step="1">
                <a class="mx-2">
                    <span class="form-stepper-circle">
                        <span>1</span>
                    </span>
                    <div class="label">Your Details</div>
                </a>
            </li>
            <!-- Step 2 -->
            <li class="form-stepper-unfinished text-center form-stepper-list" step="2">
                <a class="mx-2">
                    <span class="form-stepper-circle text-muted">
                        <span>2</span>
                    </span>
                    <div class="label text-muted">Customer Details</div>
                </a>
            </li>
        </ul>
        <!-- Step Wise Form Content -->
        <form action="{{ route('agent.register') }}" id="registerForm" enctype="multipart/form-data" method="POST">
            @csrf
            <!-- Step 1 Content -->
            <section id="step-1" class="form-step">
                <h2 class="font-normal">Your Details</h2>
                <!-- Step 1 input fields -->
                <div class="mt-3">
                    <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" id="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="{{ 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-address-book fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" name="address" id="address" class="form-control{{ $errors->has('address') ? ' is-invalid' : '' }}" required placeholder="{{ 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="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" id="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-envelope fa-fw"></i>
                            </span>
                        </div>
                        <input type="email" name="email" id="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" id="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" id="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="upload_ic" 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>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary btn-navigate-form-step" type="button" step_number="2">Next</button>
                </div>
            </section>
            <!-- Step 2 Content, default hidden on page load. -->
            <section id="step-2" class="form-step d-none">
                <h2 class="font-normal">Customer Details</h2>
                <!-- Step 2 input fields -->
                <div class="mt-3">
                    <fieldset class="form-group border p-3">
                        <legend class="w-auto px-2">Customer 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="company_name" class="form-control{{ $errors->has('company_name') ? ' is-invalid' : '' }}" placeholder="Registered Company Name" value="{{ old('company_name', null) }}" required />
                                @if($errors->has('company_name'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('company_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="brn_ic_no" class="form-control{{ $errors->has('brn_ic_no') ? ' is-invalid' : '' }}" placeholder="Business Registration No./IC No." value="{{ old('brn_ic_no', null) }}" required />
                                @if($errors->has('brn_ic_no'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('brn_ic_no') }}
                                    </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="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>
                        <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="reg_address" class="form-control{{ $errors->has('reg_address') ? ' is-invalid' : '' }}" placeholder="Registered Address" value="{{ old('reg_address', null) }}" required />
                                @if($errors->has('reg_address'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('reg_address') }}
                                    </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="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>
                        <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="tel_no" class="form-control{{ $errors->has('tel_no') ? ' is-invalid' : '' }}" placeholder="Telephone No." value="{{ old('tel_no', null) }}" required />
                                @if($errors->has('tel_no'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('tel_no') }}
                                    </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="fax_no" class="form-control{{ $errors->has('fax_no') ? ' is-invalid' : '' }}" placeholder="Fax No." value="{{ old('fax_no', null) }}" required />
                                @if($errors->has('fax_no'))
                                    <div class="invalid-feedback">
                                        {{ $errors->first('fax_no') }}
                                    </div>
                                @endif
                            </div>
                        </div>

                        <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_persons[contact_person_name][]" class="form-control{{ $errors->has('contact_person_name') ? ' is-invalid' : '' }}" placeholder="Contact Person Name" value="{{ old('contact_person_name', null) }}" required />
                                    @if($errors->has('contact_person_name'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_person_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="contact_persons[designation][]" class="form-control{{ $errors->has('designation') ? ' is-invalid' : '' }}" placeholder="Designation" value="{{ old('designation', null) }}" required />
                                    @if($errors->has('designation'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('designation') }}
                                        </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_persons[email_address][]" class="form-control{{ $errors->has('email_address') ? ' is-invalid' : '' }}" placeholder="Email Address" value="{{ old('email_address', null) }}" required />
                                    @if($errors->has('email_address'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('email_address') }}
                                        </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_persons[contact_no][]" class="form-control{{ $errors->has('contact_no') ? ' is-invalid' : '' }}" placeholder="Contact No." value="{{ old('contact_no', null) }}" required />
                                    @if($errors->has('contact_no'))
                                        <div class="invalid-feedback">
                                            {{ $errors->first('contact_no') }}
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-md-6">
                                    <label for="signature">Signature :</label>
                                    <input type="file" name="contact_persons[signature][]" required />
                                </div>
                                <div class="col-md-6">
                                    <label for="company_stamp">Stamp :</label>
                                    <input type="file" name="contact_persons[company_stamp][]" required />
                                </div>
                            </div>
                        </fieldset>
                        <div class="form-group text-right">
                            <button class="btn btn-info" type="button">Add Contact Person</button>
                        </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>
                <div class="mt-3">
                    <button class="btn btn-primary btn-navigate-form-step" type="button" step_number="1">Prev</button>
                    <button class="btn submit-btn" type="submit">Save</button>
                </div>
            </section>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"></script>
<script type="text/javascript">
    function validateForm(stepNumber) {
        // This function deals with validation of the form fields
        var x, y, z, i, foundPicture = false, valid = true;
        x = document.getElementById("step-1");
        y = x.getElementsByTagName("input");
        z = x.getElementsByTagName("select");

        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
            if(y[i].id == "education_level_answer")
            {
                continue;
            }

            if(y[i].id == "upload_ic")
            {
                if(y[i].value == "")
                {
                    // add an "invalid" class to the field:
                    y[i].className += " invalid";
                    // and set the current valid status to false
                    valid = false;
                }
                else
                {
                    foundPicture = true;
                }
            }

            if(y[i].id == "upload_ssm")
            {
                if(y[i].value == "")
                {
                    // add an "invalid" class to the field:
                    y[i].className += " invalid";
                    // and set the current valid status to false
                    valid = false;
                }
                else
                {
                    foundPicture = true;
                }
            }

            if(foundPicture)
            {
                valid = true;

                continue;
            }

            // If a field is empty...
            if (y[i].value == "") {
                // add an "invalid" class to the field:
                y[i].className += " invalid";
                // and set the current valid status to false
                valid = false;
            }
        }

        for (i = 0; i < z.length; i++) {
            if (z[i].value == "") {
                // add an "invalid" class to the field:
                z[i].className += " invalid";
                // and set the current valid status to false
                valid = false;
            }
        }

        return valid; // return the valid status
    }

    /**
     * Define a function to navigate betweens form steps.
     * It accepts one parameter. That is - step number.
     */
    const navigateToFormStep = (stepNumber) => {
        /**
         * Hide all form steps.
         */
        document.querySelectorAll(".form-step").forEach((formStepElement) => {
            formStepElement.classList.add("d-none");
        });
        /**
         * Mark all form steps as unfinished.
         */
        document.querySelectorAll(".form-stepper-list").forEach((formStepHeader) => {
            formStepHeader.classList.add("form-stepper-unfinished");
            formStepHeader.classList.remove("form-stepper-active", "form-stepper-completed");
        });
        /**
         * Show the current form step (as passed to the function).
         */
        document.querySelector("#step-" + stepNumber).classList.remove("d-none");
        /**
         * Select the form step circle (progress bar).
         */
        const formStepCircle = document.querySelector('li[step="' + stepNumber + '"]');
        /**
         * Mark the current form step as active.
         */
        formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-completed");
        formStepCircle.classList.add("form-stepper-active");
        /**
         * Loop through each form step circles.
         * This loop will continue up to the current step number.
         * Example: If the current step is 3,
         * then the loop will perform operations for step 1 and 2.
         */
        for (let index = 0; index < stepNumber; index++) {
            /**
             * Select the form step circle (progress bar).
             */
            const formStepCircle = document.querySelector('li[step="' + index + '"]');
            /**
             * Check if the element exist. If yes, then proceed.
             */
            if (formStepCircle) {
                /**
                 * Mark the form step as completed.
                 */
                formStepCircle.classList.remove("form-stepper-unfinished", "form-stepper-active");
                formStepCircle.classList.add("form-stepper-completed");
            }
        }
    };
    /**
     * Select all form navigation buttons, and loop through them.
     */
    document.querySelectorAll(".btn-navigate-form-step").forEach((formNavigationBtn) => {
        /**
         * Add a click event listener to the button.
         */
        formNavigationBtn.addEventListener("click", () => {
            /**
             * Get the value of the step.
             */
            const stepNumber = parseInt(formNavigationBtn.getAttribute("step_number"));

            if (!validateForm(stepNumber)) return false;
            /**
             * Call the function to navigate to the target form step.
             */
            navigateToFormStep(stepNumber);
        });
    });

    $(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;
            }
        });

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