@extends('layouts.user_app')
@section('content')
    <section class="agent-sec">
        @if (session('error'))
            <div class="alert alert-danger errorMsg">
                {{ session('error') }}
            </div>
        @endif
        @if (session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif
        <div class="custom-container1">
            <h1 class="custom-title1">Become a Receiving and Paying agent</h1>
            <div class="errorMsg mb-3"><sup>**</sup> All fields are mandatory</div>
            <div class="form-contents">

                <form class="row" name="frm-login" id="frm-login" method="post" action="{{ route('agent-registration') }}"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="custom-floating-input">

                                <input type="text" name="company_name" placeholder="Enter Company Name"
                                    class="form-control form-control-style-s1" required>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="company_registration_number"
                                placeholder="Company Registration Number" class="form-control form-control-style-s1"
                                required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="company_address" placeholder="Company Address"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="number" name="company_telephone" placeholder="Company Telephone Number"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="email" name="company_email" placeholder="Company Email Address"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="bank_name" placeholder="Name of the Bank"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-7">
                        <div class="form-group">
                            <input type="text" name="account_number" placeholder="Account Number"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-5">
                        <div class="form-group">
                            <select name="account_type" class="form-control form-control-style-s1" required>
                                <option value="">Account Type</option>
                                <option value="1">Type 1</option>
                                <option value="2">Type 2</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="bank_address" placeholder="Bank Address"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group"></div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="incharge_name" placeholder="Company In-charge Full Name"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="incharge_designation"
                                placeholder="Designation of the Person In-charge" class="form-control form-control-style-s1"
                                required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="incharge_address" placeholder="Postal Address of In-charge"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="idenitity_proof" placeholder="Identification Proof: Ex- Passport"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <input type="text" name="identity_number" placeholder="NIF/CIN"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <input type="text" name="drive_permit" placeholder="Permit to Drive"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <input type="text" name="agent_cellular" placeholder="Cellular"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-6">
                        <div class="form-group">
                            <input type="email" name="agent_email" placeholder="Email Address"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <input type="text" name="agent_occupation" placeholder="Occupation"
                                class="form-control form-control-style-s1" required>
                        </div>
                    </div>


                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="checkagree-with-label">
                                <div class="checkagree">
                                    <input type="checkbox" class="custom-checkbox-s1" required>
                                </div>
                                <label>By signing this form, I agree that TCS is conducting a legal and credit
                                    investigation on me to finalize my application.</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="attach-file-from-group">
                                <div class="attach-file-with-name">
                                    <button type="button" class="attch-btn theme-border-btn">
                                        <span>Attach File</span>
                                        <input type="file" id="identity_file" required name="identity_file">
                                    </button>
                                    <div class="preview-box d-none" id="file_preview">
                                        <div class="attach-file-preview"><span></span></div>
                                    </div>
                                    @if ($errors->has('identity_file'))
                                    <span class="help-block" style="color: red;">
                                        <strong>{{ $errors->first('identity_file') }}</strong>
                                    </span>
                                @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="form-group">
                            <div class="auth-more-text">
                                Upload a document of incorporation of the company (PATENTE) and two identity documents
                                of the responsible person (Passport, driver's license or national identity card), a
                                specimen check from the company.
                            </div>
                        </div>
                    </div>

                    {{-- <div class="form-group mt-3">
                        {!! NoCaptcha::renderJs('en', false, 'onloadCallback') !!}
                        {!! NoCaptcha::display(['data-theme' => 'light']) !!}
                    </div> --}}
                    <div class="col-md-12">
                        <div class="form-group{{ $errors->has('g-recaptcha-response') ? ' has-error' : '' }}">
                            {!! NoCaptcha::renderJs() !!}
                            <label class="col-md-4 control-label">@if ($errors->has('g-recaptcha-response'))<i class="fa fa-times-circle-o" style="color:red;"></i>@endif Captcha</label>
                            <div class="col-md-6 pull-center">
                                {!! app('captcha')->display() !!}
                                @if ($errors->has('g-recaptcha-response'))
                                    <span class="help-block" style="color: red;">
                                        <strong>{{ $errors->first('g-recaptcha-response') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-md-12">
                        <div class="submit-form-group">
                            <button type="submit" class="submit-btn theme-solid-btn">Become an Agent</button>

                            {{-- <button type="submit" class="submit-btn theme-solid-btn" data-toggle="modal" data-target="#success-alert-modal">Become an Agent</button> --}}
                        </div>
                    </div>


                </form>
            </div>
        </div>



        @if (Session::has('modal_message_error'))
      
            <link rel="stylesheet"
                href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
            <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
            <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js">
            </script>

            <script type="text/javascript">
                $(document).ready(function() {
                    Swal.fire({
                        type: 'error',
                        title: 'Oops...',
                        text: Session::get('message')
                    })
                });
            </script>
        @endif

        @if (Session::has('modal_success'))
            <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>

            <script type="text/javascript">
                $(document).ready(function() {
                    console.log('Under modal success');
                    $('#success-alert-modal').modal();
                });
            </script>
            <div class="modal success-alert-modal" id="success-alert-modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>

                        <div class="modal-body">
                            <figure>
                                <div class="icon-container">
                                    <img src="{{ asset('frontend/assets/images/success-tick1.svg') }}">
                                </div>
                                <figcaption>
                                    <p>You have successfully submitted your profile, your profile is under review, once
                                        completed we will let you know. Thank you. </p>
                                </figcaption>
                            </figure>
                            <div class="user-icon"><img src="{{ asset('frontend/assets/images/usergreen.svg') }}"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </section>
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $('#identity_file').change(function() {
            var file = $('#identity_file')[0].files[0].name;
            $('#file_preview').removeClass('d-none');
            $('#file_preview .attach-file-preview span').text(file);
        });
    })
   
</script>