@extends('layouts.admin.app')
@section('content')

<style>
    .dicisionTable tr td{
            border:1px solid #ffff;
        }
    .dicisionTable td{
        padding: 1px;
    }
    .tdborder{
        border-top: 1px solid #fff;
    }
    .tblHead{
        font-weight: 600;
        font-size: 13px;
    }
    p{
        margin-bottom: 2px;
    }
    .lableText{
        display: inline-block;
        margin-bottom: .5rem;
        color: #000;
        font-weight: 400;
    }
    .ck-powered-by{
        display: none !important;
    }
</style>

	<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	  	<div class="modal-dialog" role="document">
	    	<div class="modal-content" style="border:none;background:transparent!important">
	      		<div class="modal-body">
	      			<img src="{{asset('admin/gif/Hourglass.gif')}}" alt="processing..." />
	      		</div>
	    	</div>
	  	</div>
	</div>

	<div class="pd-30">
        <div class="col-sm-12 col-xl-12 " style="display: flex;">
          <h4 class="col-sm-8 col-xl-8 tx-gray-800 mg-b-5 title" style="">Send Mail</h4>
          <div class="col-sm-4 col-xl-4" style="text-align:end">
           
          </div>
        </div>
    </div>

    <form id="myform" class="form" method="post" action="/gpclrmainportal/submit-study-submited-to-client">
        @csrf @method('POST')

        <div class=" br-pagebody mg-t-5 pd-x-30">

          	<div class="br-section-wrapper row row-sm p-20">  

          		<!--  hidden field  -->

            		<input type="hidden" name="sel_region_id" id="regionID" value="{{$region_id}}">
            		<input type="hidden" name="sel_cas_no" id="casNO" value="{{$cas_no}}">

        		<!--  hidden field  -->

            		<div class="col-sm-12 col-xl-12" style="padding-bottom: 20px">

                        <div class="row">

                            <div class="col-lg-12 col-md-12 col-sm-12">

                                <table class="table dicisionTable tdborder" style="width:100%;">
                                    <tr>
                                        <td class="td tdborder tblHead" style="width: 15%;">REGION</td>
                                        <td class="td tdborder" style="width: 5%;text-align: center;">:</td>
                                        <td class="tdborder" style="width: 80%;text-align: left;">{{ $disicionData->region_name}}</td>
                                    </tr>
                                    <tr>
                                        <td class="td tdborder tblHead" style="width: 15%;">CASE NO </td>
                                        <td class="td tdborder" style="width: 5%;text-align: center;">:</td>
                                        <td class="tdborder" style="width: 80%;text-align: left;">{{ $disicionData->cas_no}}</td>
                                    </tr>
                                    <tr>
                                        <td class="td tdborder tblHead" style="width: 15%;">DECISION TYPE</td>
                                        <td class="td tdborder" style="width: 5%;text-align: center;">:</td>
                                        <td class="tdborder" style="width: 80%;text-align: left;">{{ $disicionData->desicion_type}}</td> 
                                    </tr>
                                    <tr>
                                        <td class="td tdborder tblHead" style="width: 15%;">DATE OF DECISION</td>
                                        <td class="td tdborder" style="width: 5%;text-align: center;">:</td>
                                        <td class="tdborder" style="width: 80%;text-align: left;">{{ date('d-m-Y',strtotime($disicionData->date_of_decision))}}</td>
                                    </tr>
                                    <tr>
                                        <td class="td tblHead" style="width: 15%;">DESCRIPTION:</td>
                                        <td class="td" style="width: 5%;text-align: center;">:</td>
                                        <td style="width: 80%;text-align: left;">{{ $disicionData->description}}</td>
                                    </tr>
                                    
                                </table>
                            </div>

                        </div> <!-- ./row -->
                        <hr>

                        <div class="row">

                            <div class="col-lg-12 col-md-12 col-sm-12">

                                <label>Subject<span class="text-danger">*</span></label>

                                <input class="form-control" name="emailSubject" id="emailSubject" value="" readonly placeholder="Enter CC">

                            </div>

                        </div><!-- ./row -->

                        <div class="row">

                            <div class="col-lg-12 col-md-12 col-sm-12">

                                <label>Email Content<span class="text-danger">*</span></label>

                                <textarea class="ckeditor_long_desc form-control" name="messageEmail" required>
                                                                        
                                </textarea>

                            </div>
                            
                        </div><!-- ./row -->
                        <hr>
                    </div><!-- /.col -->

                    <div class="col-sm-12 col-xl-12" style="padding-bottom: 20px">

                        <div class="row">
                            <div class="col-md-12">
                                <p style="color: red;">(NOTE : The red checkbox is showing because there is no email ID entered. So, you need to enter the email ID first.)</p>
                            </div>
                        </div>
                        <hr>
                		<div class="row">
                			
                			<div class="col-lg-12 col-md-12 col-sm-12">
                				<input type="checkbox" id="select_all" /> Select all</li>
                			</div>

                		</div>
                		<hr>

                	</div><!-- /./col -->

                    <input type="hidden" value="{{ $disicionData->desicion_type}}" name="decisionType">
                    <input type="hidden" value="{{ $disicionData->id}}" name="decisionId">

                	<div class="col-lg-12 col-md-12 col-sm-12" style="padding-bottom: 20px" id="clientListRows">

                		
                	</div>

                    <div class="col-sm-12 col-xl-12" style="padding-bottom: 20px">
                        <hr>
                        <div class="row">
                            <button type="submit" class="btn btn-primary" id="sendMailBtn" disabled>Send Mail</button>
                            <a class="btn btn-secondary" href="/gpclrmainportal/upload-decision/list-of-decision">Back</a>
                        </div>

                    </div><!-- /.col -->
                
            </div> <!--  /.p 20 -->

        </div><!-- /.x 30 -->

    </form>

@endsection

@section('scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>

	$(document).ready(function(){

        ClassicEditor
        .create(document.querySelector('.ckeditor_long_desc'), {
            toolbar: [
                'bold', 'italic', '|', 'link', '|', 'bulletedList', 'numberedList', '|', 'undo', 'redo'
            ],
            ckfinder: {
                uploadUrl: "{{ url('/gpclrmainportal/ckeditor/upload?_token=' . csrf_token()) }}"
            }
            // Remove: extraPlugins: [insertFilePlugin]
        })
        .then(editor => {
            console.log('CKEditor is ready.');
        })
        .catch(error => {
            console.error('CKEditor error:', error);
        });

	/* -------- CLIENT ROW APPEND --------- */

		var regionId = $('#regionID').val();
		var casNo    = $('#casNO').val();

		$.ajaxSetup({
	        headers: {
	           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        	}
    	});

    	$.ajax({

            url: "/gpclrmainportal/get-all-client-against-region-n-casno",
            type:'POST',
            dataType: "json",
            data:{'regionId':regionId,'casNo':casNo},
            beforeSend: function() {
	            console.log('start spinner');
	            $("#exampleModal").modal("show");
          	},
            success: function(data) {

               $('#clientListRows').html('');

                var chunkSize = 4;

				for (var i = 0; i < data.casNo_data.length; i += chunkSize) {

				    var chunkdata = data.casNo_data.slice(i, i + chunkSize);
				    // do whatever
				    
				    var rowhtml = '<div class="row">';

				    for(var j=0;j<chunkdata.length;j++){

                        var slno = parseInt(j) + parseInt(1);

                        var emailPattern = /^[\w\.\-]+@([\w\-]+\.)+[a-zA-Z]{2,7}$/;

                        if (chunkdata[j].sief_email_id === '' || !emailPattern.test(chunkdata[j].sief_email_id)) {
                            var addCss = 'color:red';
                            var disabledT = 'disabled';
                        }else{
                            var addCss = '';
                            var disabledT = '';
                        }

				    	rowhtml+= '<div class="col-lg-6 col-md-6 col-sm-12">'+
        							'<input type="checkbox" class="checkbox chkCheckbox" name="clientName[]" value="'+chunkdata[j].id+'~'+regionId+'~'+casNo+'~'+chunkdata[j].sief_email_id+'" onclick="getcheckboxchck()" style="'+addCss+'" '+disabledT+'>'+
									'<label class="lableText" style="'+addCss+'">&nbsp;&nbsp; '+chunkdata[j].sief_member+'</label>'+
        							'</div>';

				    }

				    rowhtml+= '</div>';

				    $('#clientListRows').append(rowhtml);

				}

            },
            complete: function() {
               //  console.log('stop');
              	// $("#exampleModal").modal("hide");
                setTimeout(function () {
                    console.log('stop');
                  $("#exampleModal").modal("hide");   // Add 300ms delay
                }, 300);
          	},
    	});
    	
    /* -------- CLIENT ROW APPEND --------- */

	/* CHECK ALL CHECKBOX */

		$('#select_all').on('click',function(){
	        if(this.checked){
	            $('.checkbox').each(function(){
	                this.checked = true;
	            });
                $('#sendMailBtn').prop('disabled',false);
	        }else{
	             $('.checkbox').each(function(){
	                this.checked = false;
	            });
                $('#sendMailBtn').prop('disabled',true);
	        }
	    });

	/* CHECK ALL CHECKBOX */

	});

    function getcheckboxchck(){

        var checboxChk = $('input[type="checkbox"]:checked').length;
        if(checboxChk > 0){
            $('#sendMailBtn').prop('disabled',false);
        }else{
            $('#sendMailBtn').prop('disabled',true);
        }
    }

</script>
@endsection