rs-admin/resources/views/modal_pages/add_doc_required.blade.php

@extends('modal_pages.base')
<style>
    .listFlag{
        height: 20px;
        border-radius: 50%;
        width: 20px;
        margin-right: 5px;
    }
    .btn1{
    background-color: #141639c4 !important;
    color:white !important;
    border-radius: 20px;
    box-shadow:none !important;
    }
    .btn1:hover{
        background: #ffff !important;
        color: #141639c4 !important;
        border-radius: 20px;
        border: 1px solid #141639c4;
    }

    .box-typical {
        font-size: 13px !important;
    }

    .box-typical {
        -webkit-border-radius: 4px;
        border-radius: 4px;
        background: #fff;
        border: solid 1px #d8e2e7;
        margin: 0 0 20px;
    }

    .box-white {
        background: #fff;
        border-radius: 3px;
        padding: 15px 20px;
        font-size: 13px;
    }

    .btn.btn-warning {
        background-color: #f29824 !important;
        border-color: #f29824 !important;
        color: #ffffff !important;
    }

    .text-right {
        text-align: right!important;
    }

    .cancel_btn_new {
        background-color: #ffc107 !important;
        border-width: 1px !important;
        border-color: #ffc107 !important;
        color: #fff !important;
        border-radius: 30px !important;
        padding: 4px 12px !important;
        height: 28px;
        display: inline-block;
    }

    .pretty {
        font-size: 14px;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-label {
        color: #5d5d5d !important;
        font-size: 12px;
        font-weight: 600;
    }

    .btn.btn-danger {
        background-color: #fa424a !important;
        border-color: #fa424a !important;
        color: #ffffff !important;
    }

    .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    .form-control {
        padding: 5px 0.75rem !important;
    }
</style>
@section('main')
<form class="modal-form" action="{{ url()->current() }}" method="POST">
	{{ csrf_field() }}
    <input type="hidden" name="id" value="{{$std_proposal->id}}">
    <input  type="hidden" name="requirement_source" value="others"/>
    <div class="box-typical" id="others" style="padding: 10px 15px 0px; margin: 10px 15px 15px; border-radius: .25rem;">
        <div class="row">
			<div class="col">
				<span style="font-size: 13px; font-weight: 600; display: block; margin-bottom: 5px;">Add Document requirements</span>
			</div>
			<div class="col text-right">
				<button type="button" class="btn btn-warning btn-sm add_more_div">
					Add More
				</button>
			</div>
		</div>
        <div class="others_div mt-2" style="border-top: 1px solid #e9f0f3;">
            <div class="row">
                <input type="hidden" class="index" name="others[1][index]" value="1"/>
                <div class="col-md-6 form-group mt-2">
                    <label class="form-label">Requirement</label>
                    <textarea class="form-control requirement_title" name="others[1][requirement_title]" rows="1"></textarea>
                </div>
                <div class="col-md-5 form-group mt-2">
                    <label class="form-label">Requirement Type</label>
                    <div class="d-flex">
                        <div class="pretty p-default p-curve">
                            <input class="need_upload" type="radio" name="others[1][need_upload]" value="1" />
                            <div class="state p-primary-o">
                                <label>
                                    <small>Document</small>
                                </label>
                            </div>
                        </div>
                        <div class="pretty p-default p-curve">
                            <input class="need_upload" type="radio" name="others[1][need_upload]" value="0" />
                            <div class="state p-primary-o">
                                <label>
                                    <small>Information</small>
                                </label>
                            </div>
                        </div>
                    </div>
                    
                </div>
             
                <div class="col-md-1 form-group mt-2">
                    <button type="button" class="btn btn-danger mt-4 remove_others_div d-none cancel_button" style="padding: 4px 7px; line-height: 0; margin-top: 15px !important;">
                        <i class="fa fa-close" aria-hidden="true"></i>
                    </button>
                </div>
            </div> 
            </div>
           
    </div>

    <div class="row">
        <div class="col">
            <button type="submit" class="btn btn-inline pull-right submit_button">
                Save
            </button>
            {{-- <button type="button" class="btn btn-inline pull-right btn-submit cancel_btn_new" data-dismiss="modal">
                Cancel
            </button> --}}
        </div>
    </div>
</form>

   <script>
    $(function(){
        $('#modal_page_footer').hide();


        $('.add_more_div').on('click', function(){

            var last_index=$('.others_div').last().index();

            var cloned=$('.others_div').last().clone(true);

            cloned.find(".remove_others_div" ).removeClass('d-none');

            cloned.find(".index" ).attr('name', "others["+(last_index+1)+"][index]").val(last_index+1);

            cloned.find(".requirement_title" ).attr('name', "others["+(last_index+1)+"][requirement_title]").val('');

            cloned.find(".need_upload" ).attr('name', "others["+(last_index+1)+"][need_upload]").prop('checked', false);

            cloned.appendTo( "#others" );

        });

        $('.remove_others_div').on('click', function(){

            $(this).closest('.others_div').remove();

        });

    });

    </script>


@endsection