@extends('Layout.app')

<section id="top-area">
    <header>
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-xs-3" id="logo"><a href="{{ route('insurance.home') }}"><img
                            src="{{ url('Assets/img/nem.jpg') }}" alt="logo"></a></div>
                <div class="btn-responsive-menu"> <span class="bar"></span> <span class="bar"></span> <span
                        class="bar"></span> </div>
                <nav class="col-md-8 col-xs-9" id="top-nav">
                    <ul>
                        <li><a href="{{ route('policy.renew.form') }}">Renew Policy</a></li>
                        <li><a href="{{ route('certificate.searchForm') }}">Reprint Certificate</a></li>
                        <li><a href="{{ route('insurance.claim-create') }}" id="purchase">Claim Notification</a></li>
                    </ul>
                </nav>
            </div><!-- End row -->
        </div><!-- End container -->
    </header> <!-- End header -->
    <div class="container">
        <div class="row">
            <div class="col-md-12 main-title">
                <h1>Advocate Registration Form</h1>

            </div>
        </div>
    </div>
</section>

@section('content')




    <section class="container" id="main">
        <!-- Start Survey container -->
        <div id="survey_container">

            {{-- Validation Errors --}}
            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <strong>Error!</strong> Please check the following:
                    <ul class="list-unstyled">
                        @foreach ($errors->all() as $error)
                            <li><span class="glyphicon glyphicon-remove-sign"></span> {{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- Success Message --}}
            @if (session('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <strong>Success!</strong> {{ session('success') }}
                </div>
            @endif

            {{-- Error Message --}}
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible" role="alert">
                    <strong>Error!</strong> {{ session('error') }}
                </div>
            @endif
            <div id="top-wizard">
                <strong>Progress <span id="location"></span></strong>
                <div id="progressbar"></div>
                <div class="shadow"></div>
            </div><!-- end top-wizard -->
            <form id="wrapped" action="{{ route('advocate.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div id="middle-wizard">

                    <!-- Step 1: Personal Info -->
                    <div class="step">
                        <div class="row">
                            <h3 class="col-md-10">Personal information</h3>
                            <div class="col-md-6">
                                <ul class="data-list">
                                    <li><input type="text" name="first_name"
                                            value="{{ old('first_name', session('insurance_data.first_name')) }}"
                                            class="required form-control" placeholder="First name"></li>
                                    <li><input type="text" name="last_name"
                                            value="{{ old('last_name', session('insurance_data.last_name')) }}"
                                            class="required form-control" placeholder="Last name"></li>
                                    <li><input type="email" name="email"
                                            value="{{ old('email', session('insurance_data.email')) }}"
                                            class="required form-control" placeholder="Your Email"></li>
                                    <li><input type="text" name="phone_number"
                                            value="{{ old('phone_number', session('insurance_data.phone_number')) }}"
                                            class="required form-control" placeholder="Your Mobile Number"></li>
                                    <li>Your date of birth <input type="date" name="date_of_birth"
                                            value="{{ old('date_of_birth', session('insurance_data.date_of_birth')) }}"
                                            class="required form-control"></li>

                                    <select class="form-control required" name="channel">Advocate Channel*

                                        <option value="" selected>Select Advocate Channel</option>
                                        <option value="Brokers">Brokers</option>
                                        <option value="Agent"> Agent</option>
                                        <option value="Others">Others</option>
                                    </select>
                                    <li>License Number <input type="text" name="L_number"
                                            value="{{ old('L_number', session('insurance_data.L_number')) }}"
                                            class=" form-control" placeholder="23456"></li>


                                    <li>Occupation <input type="text" name="other_source_of_income"
                                            value="{{ old('other_source_of_income', session('insurance_data.other_source_of_income')) }}"
                                            class="required form-control" placeholder="Occupation"></li>
                                    <li>Your Location<input type="text" name="residential_address"
                                            value="{{ old('residential_address', session('insurance_data.residential_address')) }}"
                                            class="required form-control" placeholder="74 Isawo Road"></li>
                                </ul>
                            </div>

                            <div class="col-md-6">
                                <ul class="data-list">
                                    <li><input type="text" name="place_of_birth"
                                            value="{{ old('place_of_birth', session('insurance_data.place_of_birth')) }}"
                                            class="required form-control" placeholder="Place of Birth"></li>
                                    <li><input type="text" name="nationality"
                                            value="{{ old('nationality', session('insurance_data.nationality')) }}"
                                            class="required form-control" placeholder="Nationality"></li>
                                    <li><input type="text" name="nin"
                                            value="{{ old('nin', session('insurance_data.nin')) }}" class=" form-control"
                                            placeholder="Your NIN"></li>

                                    <li><input type="text" name="id_type"
                                            value="{{ old('id_type', session('insurance_data.id_type')) }}"
                                            class="required form-control" placeholder="Means Of Identification (eig NIN)">
                                    </li>

                                    <li><input type="text" name="id_number"
                                            value="{{ old('id_number', session('insurance_data.id_number')) }}"
                                            class="required form-control" placeholder="ID Number (e.g. NIN)"></li>
                                    <li>Issued Date<input type="date" name="issued_date"
                                            value="{{ old('issued_date', session('insurance_data.issued_date')) }}"
                                            class="form-control"></li>
                                    <li>Expiry Date (If Applicable)<input type="date" name="expiry_date"
                                            value="{{ old('expiry_date', session('insurance_data.expiry_date')) }}"
                                            class="form-control"></li>

                                    <li>password<input type="password" name="password"
                                            value="{{ old('password', session('insurance_data.password')) }}"
                                            class="form-control"></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {{-- step 2: bank information --}}
                    <div class="step">
                        <div class="row">
                            <h3 class="col-md-10">Bank Account Information</h3>

                            <div class="col-md-11">
                                <ul class="data-list">
                                    <li>Your BVN <input type="text" name="bvn"
                                            value="{{ old('bvn', session('insurance_data.bvn')) }}" class="form-control"
                                            placeholder="967834"></li>
                                    <li>Account Number <input type="text" name="account_number"
                                            value="{{ old('account_number', session('insurance_data.account_number')) }}"
                                            class="required form-control" placeholder="96783465"></li>

                                    <li>Bank Name <input type="text" name="bank_name"
                                            value="{{ old('bank_name', session('insurance_data.bank_name')) }}"
                                            class="requireds form-control" placeholder="Access Bank">
                                    </li>

                                    <select class="form-control required" name="account_type">Bank ype*

                                        <option value="savings" selected>savings</option>
                                        <option value="current" selected>current</option>
                                        <option value="fixed_deposit" selected>fixed deposit*</option>
                                        <option value="other" selected>Other*</option>
                                    </select>

                                </ul>
                            </div>

                        </div>
                    </div>


                    <!-- Step 3: Uploads -->
                    <div class="step text-center">
                        <div class="row">

                            <!-- NAICOM License Upload -->
                            <div class="col-sm-6">
                                <div class="upload-box">
                                    <div class="preview-box" id="previewOwnership"></div>
                                    <input type="text" name="doc_type" value="Proof of Ownership" hidden>
                                    <input type="file" id="ownershipProof" name="license"
                                        class="custom-file-input" onchange="previewFile(this, 'previewOwnership')">
                                    <label for="ownershipProof" class="upload-btn">
                                        <i class="fa fa-upload"></i> <span class="required-star">Agent License</span>
                                    </label>
                                </div>
                            </div>

                            <!-- Identification Upload -->

                            <div class="col-sm-6">
                                <div class="upload-box">
                                    <div class="preview-box" id="previewID"></div>
                                    <input type="text" name="doc_id" value="Valid ID" hidden>
                                    <input type="file" id="validID" name="identification_document"
                                        class="custom-file-input required" onchange="previewFile(this, 'previewID')">
                                    <label for="validID" class="upload-btn">
                                        <i class="fa fa-upload"></i> <span class="required-star">Valid ID</span>
                                    </label>
                                </div>
                            </div>


                        </div>
                    </div>

                    <!-- Step 4: Submit -->
                    <div class="submit step" id="complete">
                        {{-- <i class="icon-check"></i>
                        <h3>Proceed To Making Payment.</h3> --}}

                        <P>I consent to the processing of my data in accordance with the company's Privacy Policy. <br />
                            Read more about our Data Privacy Policy <a
                                href="https://nem-insurance.com/Data-Privacy-Policy">Read More</a></P>

                        <div class="mb-10 form-group">
                            <ul class="data-list  floated clearfix2">
                                <li><input name="privacy_policy" type="radio" class="required check_radio"
                                        value="Accept" {{ old('privacy_policy') ? 'checked' : '' }}><label
                                        class="label_privacy_policy"> Accept</label></li>
                                <li><input name="privacy_policy" type="radio" class="required check_radio"
                                        value="Decline" {{ old('privacy_policy') ? 'checked' : '' }}><label
                                        class="label_privacy_policy"> Decline</label></li>
                            </ul>
                        </div>
                        <br />
                        <div class="form-group">
                            <button type="submit" class="submit">Create Accunt</button>
                        </div>

                    </div>

                </div>

                <!-- Bottom Wizard -->
                <div id="bottom-wizard">
                    <button type="button" name="backward" class="backward">Backward</button>
                    <button type="button" name="forward" class="forward">Forward </button>
                </div>
            </form>

        </div>






        <script>
            function previewFile(input, previewId) {
                const previewBox = document.getElementById(previewId);
                previewBox.innerHTML = ""; // Clear previous preview

                if (input.files && input.files[0]) {
                    const file = input.files[0];
                    const reader = new FileReader();

                    // Image preview
                    if (file.type.startsWith('image/')) {
                        reader.onload = function(e) {
                            const img = document.createElement('img');
                            img.src = e.target.result;
                            previewBox.appendChild(img);
                        };
                        reader.readAsDataURL(file);
                    } else {
                        // Non-image: show file name
                        const span = document.createElement('span');
                        span.textContent = file.name;
                        previewBox.appendChild(span);
                    }
                }
            }

            document.addEventListener('DOMContentLoaded', function() {
                const channelSelect = document.querySelector('select[name="channel"]');
                const licenseNumberField = document.querySelector('input[name="L_number"]').closest('li');
                const agentLicenseUpload = document.querySelector('input[name="license"]').closest('.col-sm-6');

                function toggleFields() {
                    const selectedChannel = channelSelect.value;

                    if (selectedChannel === 'Brokers' || selectedChannel === 'Agent') {
                        // Show fields and make them required
                        licenseNumberField.style.display = 'block';
                        agentLicenseUpload.style.display = 'block';

                        document.querySelector('input[name="L_number"]').classList.add('required');
                        document.querySelector('input[name="license"]').classList.add('required');
                    } else {
                        // Hide fields and remove required
                        licenseNumberField.style.display = 'none';
                        agentLicenseUpload.style.display = 'none';

                        document.querySelector('input[name="L_number"]').classList.remove('required');
                        document.querySelector('input[name="license"]').classList.remove('required');

                        // Clear values when hidden
                        document.querySelector('input[name="L_number"]').value = '';
                        document.querySelector('input[name="license"]').value = '';
                        document.getElementById('previewOwnership').innerHTML = '';
                    }
                }

                // Run on page load
                toggleFields();

                // Run when selection changes
                channelSelect.addEventListener('change', toggleFields);
            });
        </script>

    </section>











@endsection