@extends('layouts.frontend.app')
@section('title', trans('onlineShare.online-share'))

@section('content')
@include('inner.breadcrumb',['pageName'=> trans('onlineShare.online-share')])

<section id="inner-contanier">
    <img class="service-shape1 animate-y" src="{{asset('mechi/images/shape1.png')}}" alt="">
    <img class=" about-shape1 animate-y" src="{{asset('mechi/images/shape2.png')}}" alt="">
    <form id="captcha-form" method="post" action="{{route('online-share.submit')}}" class="container needs-validation" novalidate enctype="multipart/form-data">
        @if(Session::has('success'))
        <div class="alert alert-success">
            <strong>Success!</strong> {{ Session::get('success') }}
        </div>
        @endif

        @if(Session::has('error'))
        <div class="alert alert-danger">
            <strong>Error!</strong> {{ Session::get('error') }}
        </div>
        @endif
        @if($errors->any())

        <div class="alert alert-danger">
            <strong>Error!</strong> Please see below for validation error!!
        </div>
        @endif


        <h1>{{trans('onlineShare.application-form-for-national-cooperative-bank-share-membership-online')}}
        </h1>
        <div class="org-txt">
            <div class="senior-tilte">{{trans('onlineShare.president')}}
            </div>
            <div>{{trans('onlineShare.executive-committee')}}
            </div>
            <div>{{trans('onlineShare.nepal-cooperative-bank-limited')}}
            </div>
            <div>{{trans('onlineShare.kupondole-lalitpur')}}
            </div>
            <p class="form-paragraph">{{trans('onlineShare.share-acquisition-process')}}
            </p>
        </div>
        <div class="row ncbl-form">
            @csrf
            <h5>{{trans('onlineShare.cooperative-organization-name')}}
                <span class="asterisk"> * </span>
            </h5>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="text" class="form-control" placeholder="Name " required name="organization_name_nepali" value="{{old('organization_name_nepali')}}">
                    <label for="">{{trans('onlineShare.cooperative-organization-name-in-nepali')}}
                    </label>
                </div>
                @if ($errors->has('organization_name_nepali'))
                <span class="text-danger">{{ $errors->first('organization_name_nepali') }}</span>
                @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="text" class="form-control" placeholder="Name " required name="organization_name_english" value="{{old('organization_name_english')}}">
                    <label for="">{{trans('onlineShare.cooperative-organization-name-in-english')}}
                    </label>
                </div>
                @if ($errors->has('organization_name_english'))
                <span class="text-danger">{{ $errors->first('organization_name_english') }}</span>
                @endif
            </div>
        </div>
        <div class="formblock-below"></div>
        <div class="row ncbl-form">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <h5>{{trans('onlineShare.registration-certificate-number')}}
                    <span class="asterisk"> * </span>
                </h5>
                <div class="mb-4  form-floating">
                    <input type="number" min="0" class="form-control" placeholder="Name " required name="registration_certificate_number" value="{{old('registration_certificate_number')}}">
                    <label for="">{{trans('onlineShare.registration-certificate-number')}}</label>
                </div>
                @if ($errors->has('registration_certificate_number')) <span class="text-danger">{{ $errors->first('registration_certificate_number') }}</span> @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <h5>{{trans('onlineShare.organization-email')}}
                    <span class="asterisk"> * </span>
                </h5>
                <div class="mb-4  form-floating">
                    <input type="email" class="form-control" placeholder="Email" required name="organization_email" value="{{old('organization_email')}}">
                    <label for="">{{trans('onlineShare.organization-email')}}</label>
                </div>
                @if ($errors->has('organization_email')) <span class="text-danger">{{ $errors->first('organization_email') }}</span> @endif
            </div>
        </div>
        <div class="formblock-below"></div>
        <div class="row ncbl-form">
            <h5>{{trans('onlineShare.organization-address')}}
                <span class="asterisk"> * </span>
            </h5>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="text" class="form-control" placeholder="Name" required name="organization_municipality" value="{{old('organization_municipality')}}">
                    <label for="">{{trans('onlineShare.name-of-municipality')}}
                    </label>
                </div>
                @if ($errors->has('organization_municipality')) <span class="text-danger">{{ $errors->first('organization_municipality') }}</span> @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="text" class="form-control" placeholder="Village-Toll" required name="organization_ward" value="{{old('organization_ward')}}">
                    <label for="">{{trans('onlineShare.village-ward')}}
                    </label>

                </div>
                @if ($errors->has('organization_ward')) <span class="text-danger">{{ $errors->first('organization_ward') }}</span> @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="number" min="0" class="form-control" placeholder="Ward" required name="organization_ward_no" value="{{old('organization_ward_no')}}">
                    <label for="">{{trans('onlineShare.ward-number')}}
                    </label>
                </div>
                @if ($errors->has('organization_ward_no')) <span class="text-danger">{{ $errors->first('organization_ward_no') }}</span> @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="number" min="0" class="form-control" placeholder="Number" required name="organization_telephone_number" value="{{old('organization_telephone_number')}}">
                    <label for=""> {{trans('onlineShare.telephone-number')}}
                    </label>
                </div>
                @if ($errors->has('organization_telephone_number')) <span class="text-danger">{{ $errors->first('organization_telephone_number') }}</span> @endif
            </div>
        </div>
        <div class="formblock-below"></div>
        <div class="row ncbl-form">
            <h5>{{trans('onlineShare.contact-person-details')}}
                <span class="asterisk"> * </span>
            </h5>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="text" class="form-control" placeholder="Contact-Name" required name="contact_person_name" value="{{old('contact_person_name')}}">
                    <label for="">{{trans('onlineShare.contact-person-name')}}
                    </label>
                </div>
                @if ($errors->has('contact_person_name')) <span class="text-danger">{{ $errors->first('contact_person_name') }}</span> @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <div class="mb-4  form-floating">
                    <input type="number" min="0" class="form-control" placeholder="Mobile" required name="contact_person_phone" value="{{old('contact_person_phone')}}">
                    <label for="">{{trans('onlineShare.contact-person-mobile-number')}}
                    </label>
                </div>
                @if ($errors->has('contact_person_phone')) <span class="text-danger">{{ $errors->first('contact_person_phone') }}</span> @endif
            </div>
        </div>
        <div class="formblock-below"></div>
        <div class="row ncbl-form">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <h5>{{trans('onlineShare.bank-branch-office-nearby-for-share-certificates')}}
                    <span class="asterisk"> * </span>
                </h5>
                <div class="mb-4  form-floating">
                    <select class="form-select" aria-label="Default select example" required name="nearby_branch">
                        <option value=""> Select one option </option>

                        @foreach($branchName as $key=>$info)

                        <option value="{{$info->id}}" @if(old('nearby_branch')==$info->id) selected @endif>{{$info->title}}</option>

                        @endforeach
                    </select>
                    <p class="amt-dpt">{{trans('onlineShare.choose-share-certificate-issuing-branch-office')}}
                    </p>
                </div>
                @if ($errors->has('nearby_branch')) <span class="text-danger">{{ $errors->first('nearby_branch') }}</span> @endif
            </div>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
                <h5>{{trans('onlineShare.total-desired-purchased-shares')}} <span class="asterisk"> * </span>
                </h5>
                <div class="mb-4  form-floating">
                    <input type="number" min="0" class="form-control" placeholder="Post-Name" required name="desired_purchased_share" value="{{old('desired_purchased_share')}}">
                    <label for="">{{trans('onlineShare.total-desired-purchased-shares')}} </label>
                    <p class="amt-dpt">(Rs. 100 per Share and Entry Fee Rs. 500)</p>
                </div>
                @if ($errors->has('desired_purchased_share')) <span class="text-danger">{{ $errors->first('desired_purchased_share') }}</span> @endif
            </div>
        </div>
        <div class="formblock-below"></div>
        <div class="row ncbl-form">
            <h5>{{trans('onlineShare.cooperative-organization-executive-committee-list')}}
                <span class="asterisk"> * </span>
            </h5>
            <p class="gov-details">{{trans('onlineShare.click-plus-sign-to-add-another-detail')}}
            </p>


            <div class="  executive-fields">
                @if(old('executive_details'))
                <div class="executive-field row">
                    <div class="another-row">
                        <a class="anotherrow-plus"> <i class="fal fa-plus-circle"></i></a>
                        <!-- <a class="anotherrow-minus"> <i class="fal fa-minus-circle"></i></a> -->
                    </div>
                    @foreach(old('executive_details', []) as $index => $executive)

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                        <div class="mb-4 form-floating">
                            <input type="text" class="form-control" placeholder="Director-Name" required name="executive_details[{{$index}}][name]" value="{{ $executive['name'] }}">
                            <label for=""> {{trans('onlineShare.executive-name')}}
                            </label>
                        </div>
                        <span class="text-danger executive-name-error">
                            @error("executive_details.$index.name")
                            {{ $message }}
                            @enderror
                        </span>
                    </div>
                    <!-- ... Repeat for other fields ... -->

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Post-Name" required name="executive_details[{{$index}}][position]" value="{{$executive['position'] }}">
                            <label for=""> {{trans('onlineShare.position')}}
                            </label>
                        </div>
                        <span class="text-danger executive-name-error">
                            @error("executive_details.$index.position")
                            {{ $message }}
                            @enderror
                        </span>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Post-Name" required name="executive_details[{{$index}}][address]" value="{{$executive['address'] }}">
                            <label for=""> {{trans('onlineShare.executive-address')}}
                            </label>
                        </div>
                        <span class="text-danger executive-name-error">
                            @error("executive_details.$index.address")
                            {{ $message }}
                            @enderror
                        </span>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3">
                        <div class="mb-4  form-floating">
                            <input type="number" min="0" class="form-control" placeholder="Post-Name" required name="executive_details[{{$index}}][phone]" value="{{$executive['phone'] }}">
                            <label for=""> {{trans('onlineShare.executive-phone-number')}}
                            </label>

                        </div>
                        <span class="text-danger executive-name-error">
                            @error("executive_details.$index.phone")
                            {{ $message }}
                            @enderror
                        </span>
                    </div>

                    @endforeach
                </div>

                @else
                <div class="executive-field row">
                    <div class="another-row">
                        <a class="anotherrow-plus"> <i class="fal fa-plus-circle"></i></a>
                        <!-- <a class="anotherrow-minus"> <i class="fal fa-minus-circle"></i></a> -->
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3   ">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Director-Name" required name="executive_details[0][name]">
                            <label for=""> {{trans('onlineShare.executive-name')}}
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3  ">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Post-Name" required name="executive_details[0][position]">
                            <label for=""> {{trans('onlineShare.position')}}
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3  ">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Transfer-Name" required name="executive_details[0][address]">
                            <label for=""> {{trans('onlineShare.executive-address')}}
                            </label>
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3  ">
                        <div class="mb-4  form-floating">
                            <input type="number" min="0" class="form-control" placeholder="Transfer-Name" required name="executive_details[0][phone]">
                            <label for=""> {{trans('onlineShare.executive-phone-number')}}
                            </label>
                        </div>
                    </div>
                </div>
                @endif
            </div>
            <div class="formblock-below"></div>
            <div class="ncbl-form">
                <h5>{{trans('onlineShare.upload-proof-of-share-amount-deposit')}}
                    <span class="asterisk"> * </span>
                </h5>

                <!-- <p class="amt-recovered">{{trans('onlineShare.upload-proof-of-share-and-entry-fee-amount-deposit-in-any-bank')}}
                </p> -->
                <ul class="cont-list">
                    <li>{{trans('onlineShare.upload-proof-of-share-and-entry-fee-amount-deposit-in-any-bank')}}</li>
                    <li>{{trans('onlineShare.bank-details-upload-rastriya-banijya-bank')}}</li>
                    <li>{{trans('onlineShare.bank-details-upload-prabhu-bank')}}</li>
                    <li> {{trans('onlineShare.bank-details-upload-nic-asia')}}</li>
                </ul>

                <!-- <p class="amt-recovered">{{trans('onlineShare.bank-details-upload-rastriya-banijya-bank')}}
                    <br>
                    {{trans('onlineShare.bank-details-upload-prabhu-bank')}}
                    <br>
                    {{trans('onlineShare.bank-details-upload-nic-asia')}}
                    <br>
                    {{trans('onlineShare.bank-details-upload-prabhu-bank')}}
                </p> -->
                <p class="amt-recovered">{{trans('onlineShare.additional-bank-share-information')}}</p>
                <div class="row upload-doc">

                    <div class="col-lg-4 col-md-6">
                        <div class="file-chosen">
                            <label for="formFile" class="form-label"> {{trans('onlineShare.upload-proof-of-share-amount-deposit')}}
                            </label>
                            <input class="form-control" type="file" accept=".jpg, .jpeg, .png, .pdf, " name="upload_proof_share_amount" id="formFile">
                        </div>
                        @if($errors->has('upload_proof_share_amount')) <span class="text-danger">{{ $errors->first('upload_proof_share_amount') }}</span> @endif
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="file-chosen">
                            <label for="formFile" class="form-label">{{trans('onlineShare.share-purchase-letter-to-bank')}} </label>
                            <input class="form-control" name="share_purchase_letter_to_bank" type="file" accept=".jpg, .jpeg, .png, .pdf, " id="formFile">
                        </div>
                        @if($errors->has('share_purchase_letter_to_bank')) <span class="text-danger">{{ $errors->first('share_purchase_letter_to_bank') }}</span> @endif
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="file-chosen">
                            <label for="formFile" class="form-label">{{trans('onlineShare.copy-of-organization-pan')}}
                            </label>
                            <input name="copy_of_organization_pan" class="form-control" type="file" accept=".jpg, .jpeg, .png, .pdf, " id="formFile">
                        </div>
                        @if($errors->has('copy_of_organization_pan')) <span class="text-danger">{{ $errors->first('copy_of_organization_pan') }}</span> @endif
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="file-chosen">
                            <label for="formFile" class="form-label"> {{trans('onlineShare.copy-of-executive-committee-citizenship')}}
                            </label>
                            <input name="copy_of_executive_committee_citizenship" class="form-control" type="file" accept=".jpg, .jpeg, .png, .pdf, " id="formFile">
                        </div>
                        @if($errors->has('copy_of_executive_committee_citizenship')) <span class="text-danger">{{ $errors->first('copy_of_executive_committee_citizenship') }}</span> @endif
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="file-chosen">
                            <label for="formFile" class="form-label"> {{trans('onlineShare.copy-of-organization-bylaws')}}
                            </label>
                            <input name="copy_of_organization_bylaws" class="form-control" type="file" accept=".jpg, .jpeg, .png, .pdf, " id="formFile">
                        </div>
                        @if($errors->has('copy_of_organization_bylaws')) <span class="text-danger">{{ $errors->first('copy_of_organization_bylaws') }}</span> @endif
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="file-chosen">
                            <label for="formFile" class="form-label"> {{trans('onlineShare.copy-of-organization-registration-certificate')}}
                            </label>
                            <input name="copy_of_organization_registration_certificate" class="form-control" type="file" accept=".jpg, .jpeg, .png, .pdf, " id="formFile">
                        </div>
                        @if($errors->has('copy_of_organization_registration_certificate')) <span class="text-danger">{{ $errors->first('copy_of_organization_registration_certificate') }}</span> @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <p class="note-msg">फाईल अपलोड फर्म्याटहरु : jpg, png र pdf, फाईल अपलोडको अधिकतम साईज : 2 MB
                    </p>
                </div>
            </div>
            <div class="formblock-below"></div>
            <ul class="cont-list">
                <li>{{trans('onlineShare.share-purchase-duration-online')}}
                </li>
                <li>
                    यसै फारमसाथ पेश गरिएका सम्पूर्ण विवरण तथा कागजातहरु सुरक्षित राखिनुका साथै बैंकिङ प्रयोजनकालागि मात्र प्रयोग हुनेछन्।
                </li>
                <li>{{trans('onlineShare.share-certificate-received-after-complete-bank-process')}}
                </li>
                <li>{{trans('onlineShare.share-certificate-received-from-selected-branch-or-central-office')}}
                </li>
            </ul>
            <p class="self-dec-txt"> <span class="self-dec">{{trans('onlineShare.self-declaration')}}
                </span>{{trans('onlineShare.self-declaration-text')}}
            </p>
            <ul class="cont-list">
                <li>{{trans('onlineShare.rule-awareness-in-membership-form')}}
                </li>
                <li>{{trans('onlineShare.information-accuracy-declaration')}}
                </li>
            </ul>

            <div class="form-check click-here">
                <input class="form-check-input mb-4" type="checkbox" value="" required id="flexCheckChecked" checked>
                <label class="form-check-label" for="flexCheckChecked">
                    माथि उल्लेखित शर्तहरुमा सहमति जनाउँदछु ।
                </label>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 captcha-enter">
                <div class="form-group captcha" style="float: left; position: relative;">
                    <span>{!! captcha_img('flat') !!}</span>
                    <a href="javascript:void(0)" id="refresh" style="top: 16px; position: absolute; right: -28px; z-index: 2;"><i class="fas fa-sync-alt"></i></a>
                </div>
                <div class="form-grp">
                    <input type="text" value="{{ old('captcha') }}" required name="captcha" class="form-control" id="captcha" placeholder="Enter Captcha *" value="{{ old('captcha') }}" required>
                    @if ($errors->has('captcha'))
                    <div class="text-danger">{{ $errors->first('captcha') }}</div>
                    @endif

                    <div class="text-danger captcha-error"></div>

                </div>
            </div>

            <div class="clear"></div>

            <div class="col-lg-6 col-md-6 readmore-btn">
                <button type="submit" id="submit-button" class="btn btn-primary">Submit </button>
            </div>
        </div>
    </form>
</section>
<!-- from above form get all required name=" " and list below  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    // Wait for the document to be fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        const addButton = document.querySelector(".anotherrow-plus");
        const executiveFields = document.querySelector(".executive-fields");
        let currentIndex = 0;
        // Add event listener to the "+" sign
        addButton.addEventListener("click", function() {
            // Create a new "executive-field" block
            const newExecutiveField = document.createElement("div");
            newExecutiveField.classList.add("executive-field", "row");
            currentIndex++;
            // Add your custom HTML content
            newExecutiveField.innerHTML = `
             <div class="another-row mt-4">
                    
                        <a class="anotherrow-minus"> <i class="fal fa-minus-circle"></i></a> 
                    </div>
           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3   ">
           
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Director-Name" required name="executive_details[${currentIndex}][name]" value="{{old('')}}" >
                            <label for=""> {{trans('onlineShare.executive-name')}}
                            </label>
                        </div>
                        @if($errors->has('executive_name')) <span class="text-danger">{{ $errors->first('executive_name') }}</span> @endif
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3  ">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Post-Name" required name="executive_details[${currentIndex}][position]" value="{{old('')}}" >
                            <label for=""> {{trans('onlineShare.position')}}
                            </label>
                        </div>
                        @if($errors->has('position')) <span class="text-danger">{{ $errors->first('position') }}</span> @endif
                    </div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3  ">
                        <div class="mb-4  form-floating">
                            <input type="text" class="form-control" placeholder="Transfer-Name" required name="executive_details[${currentIndex}][address]" value="{{old('')}}" >
                            <label for=""> {{trans('onlineShare.executive-address')}}
                            </label>
                        </div>
                        @if($errors->has('executive_address')) <span class="text-danger">{{ $errors->first('executive_address') }}</span> @endif
                    </div>

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 col-xl-3  ">
                        <div class="mb-4  form-floating">
                            <input type="number" min="0" class="form-control" placeholder="Transfer-Name" required name="executive_details[${currentIndex}][phone]" value="{{old('')}}" >
                            <label for=""> {{trans('onlineShare.executive-phone-number')}}
                            </label>
                        </div>
                        @if($errors->has('executive_phone_number')) <span class="text-danger">{{ $errors->first('executive_phone_number') }}</span> @endif
                    </div>
                 
        `;

            // Append the new block to the container
            executiveFields.appendChild(newExecutiveField);


            // Attach event listener to remove button in the new block
            const removeButton = newExecutiveField.querySelector(".anotherrow-minus");
            removeButton.addEventListener("click", function() {
                executiveFields.removeChild(newExecutiveField);
            });
        });
    });
</script>
@endsection