@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">
                    <h1>{{ trans('panel.site_title') }}</h1>
                    <p class="text-muted">{{ trans('global.register') }}</p>

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

                        <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 class="form-group text-right">
                            <button class="btn btn-primary" type="submit">Register</button>
                            <a class="btn btn-danger" href="{{ route('agent.login') }}">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(function(){
        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>';
        }
    })
</script>
@endsection