<div class="livewire-component-wrapper">
	<!-- Add Modal -->
          <div wire:ignore.self class="modal fade" id="addModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <form class="needs-validation" novalidate>
				@csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="addModalLabel1">Add Proposal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
				  
				    <input type="hidden"  id="FinanceBillID" class="form-control"  name="FinanceBillID" wire:model="FinanceBillID" placeholder="FinanceBillID" aria-label="FinanceBillID" aria-describedby="FinanceBillID">
					
					<div class="col-md-12 mb-3">
						  <input type="text"  id="FinanceBillName" class="form-control readonly"  name="FinanceBillName" wire:model="FinanceBillName" placeholder="FinanceBillName" aria-label="FinanceBillName" aria-describedby="FinanceBillName" disabled>
                    </div>
				  
					<div class="col-md-12 mb-3">
                      <label for="addParticulars" class="form-label">Particulars</label>
                      <textarea name="Particulars" rows="2" wire:model="Particulars" class="form-control" placeholder="Particulars" required>{{ old('Particulars')}}</textarea>
					  @error('Particulars') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Particulars is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addUnitOfMeasure" class="form-label">Unit Of Measure</label>
						  <input type="text" class="form-control" name="UnitOfMeasure" wire:model="UnitOfMeasure" aria-label="UnitOfMeasure" aria-describedby="UnitOfMeasure">
						  @error('UnitOfMeasure') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Unit of measure is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addAmount" class="form-label">Amount</label>
						  <input type="text"   class="form-control" name="Amount" wire:model.live.debounce.500ms="Amount" aria-label="Amount" aria-describedby="Amount">
						  @error('Amount') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Amount is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addRemarks" class="form-label">Remarks</label>
                      <textarea name="Remarks" rows="2" wire:model="Remarks" class="form-control" placeholder="Remarks">{{ old('Remarks')}}</textarea>
					  @error('Remarks') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Remarks is required</div>
                    </div>
			
                  </div>	
                </div>
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" wire:click="saveProposal">Save</button>
                  <button type="button" class="btn btn-outline-kco" data-bs-dismiss="modal">Close</button>
                </div>
			  </form>
              </div>
            </div>
          </div>
		  
		  <!-- view Modal -->
          <div wire:ignore.self class="modal fade" id="viewModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <form class="needs-validation" novalidate>
				@csrf
				<div id="printable">
                <div class="modal-header">
                  <h5 class="modal-title" id="editModalLabel1">Proposal#: {{ $this->ProposalID }}</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
				  
				  <div class="col-md-12 mb-3">
						  <label for="FinanceBill" class="form-label">Finance Bill</label>
						  <input type="text"  id="FinanceBillName" class="form-control readonly"  name="FinanceBillName" wire:model="FinanceBillName" placeholder="FinanceBillName" aria-label="FinanceBillName" aria-describedby="FinanceBillName" disabled>
                    </div>
				  
					<div class="col-md-12 mb-3">
                      <label for="addParticulars" class="form-label">Particulars</label>
                      <textarea name="Particulars" rows="2" wire:model="Particulars" class="form-control readonly" placeholder="Particulars" disabled></textarea>
					  @error('Particulars') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Particulars is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addUnitOfMeasure" class="form-label">Unit Of Measure</label>
						  <input type="text" class="form-control readonly" name="UnitOfMeasure" wire:model="UnitOfMeasure" aria-label="UnitOfMeasure" aria-describedby="UnitOfMeasure" disabled>
						  @error('UnitOfMeasure') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Unit of measure is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addAmount" class="form-label">Amount</label>
						  <input type="text"   class="form-control readonly " name="Amount" wire:model.live.debounce.500ms="Amount" aria-label="Amount" aria-describedby="Amount" disabled>
						  @error('Amount') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Amount is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addRemarks" class="form-label">Remarks</label>
                      <textarea name="Remarks" rows="2" wire:model="Remarks" class="form-control readonly" placeholder="Remarks" disabled></textarea>
					  @error('Remarks') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Remarks is required</div>
                    </div>
					
                  </div>	
                </div>
				</div><!--./printable-->
				
                <div class="modal-footer">
							@if($this->Response==1)
								<button type="button" class="btn btn-success" disabled><i class='bx bxs-check-circle'></i>&nbsp;You Approved Proposal</button>
							@endif
							@if($this->Response==2)
								<button type="button" class="btn btn-danger" disabled><i class='bx bxs-x-circle'></i>&nbsp;You Rejected Proposal</button>
							@endif		
				
						@if($this->has_responded==1)
						@if($this->FinanceBillStatus==0)
						<button type="button"  class="btn btn-outline-warning" wire:click="$dispatch('confirmRetract',{ ProposalID:{{ $this->ProposalID }}, LoggedInUser:{{ $this->LoggedInUser }}, targetComponent: 'proposals', targetEvent: 'retractDecision' })">Retract</button>
						@endif
						@endif
						
					@if($this->has_responded==0)
					@if($this->FinanceBillStatus==0)
					@if($this->has_been_actioned==0)
					<button type="button" class="btn btn-success" wire:click="$dispatch('ConfirmApproveProposal',{ ProposalID:{{ $this->ProposalID }}, LoggedInUser:{{ $this->LoggedInUser }}, targetComponent: 'proposals', targetEvent: 'approveProposal' })">Approve</button>
					<button type="button" class="btn btn-danger" wire:click="$dispatch('ConfirmRejectProposal',{ ProposalID:{{ $this->ProposalID }}, LoggedInUser:{{ $this->LoggedInUser }}, targetComponent: 'proposals', targetEvent: 'rejectProposal' })">Reject</button>
					@endif
					@endif
					@endif
					
					<!--<button type="button" class="btn btn-outline-kco" id="printBtn">Print</button>-->
                    <button type="button" class="btn btn-outline-kco close-edit-modal" data-bs-dismiss="modal">Close</button>
					<div style="margin-top:20px;display:block;width:100%;text-align:right;">
					@if(auth()->user()->can('pass-proposals'))
					@if($this->has_been_actioned==0)
					@if($this->FinanceBillStatus==0)
					<button type="button" class="btn btn-success" wire:click="$dispatch('ConfirmPassProposal',{ ProposalID:{{ $this->ProposalID }}, LoggedInUser:{{ $this->LoggedInUser }}, targetComponent: 'proposals', targetEvent: 'passProposal' })">Pass</button>
					<button type="button" class="btn btn-danger" wire:click="$dispatch('ConfirmAnnulProposal',{ ProposalID:{{ $this->ProposalID }}, LoggedInUser:{{ $this->LoggedInUser }}, targetComponent: 'proposals', targetEvent: 'annulProposal' })">Annul</button>
					@endif
					@endif
					@endif
					</div>
                </div>
				
			  </form>
              </div>
            </div>
          </div>

		<!-- edit Modal -->
          <div wire:ignore.self class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <form class="needs-validation" novalidate>
				@csrf
                <div class="modal-header">
                  <h5 class="modal-title" id="editModalLabel1">Edit Proposal</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <div class="row">
				  
                  <div class="col-md-12 mb-3">
						  <label for="FinanceBill" class="form-label">Finance Bill</label>
						  <input type="text"  id="FinanceBillName" class="form-control readonly"  name="FinanceBillName" wire:model="FinanceBillName" placeholder="FinanceBillName" aria-label="FinanceBillName" aria-describedby="FinanceBillName" disabled>
                    </div>
				  
					<div class="col-md-12 mb-3">
                      <label for="addParticulars" class="form-label">Particulars</label>
                      <textarea name="Particulars" rows="2" wire:model="Particulars" class="form-control" placeholder="Particulars"></textarea>
					  @error('Particulars') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Particulars is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addUnitOfMeasure" class="form-label">Unit Of Measure</label>
						  <input type="text" class="form-control" name="UnitOfMeasure" wire:model="UnitOfMeasure" aria-label="UnitOfMeasure" aria-describedby="UnitOfMeasure">
						  @error('UnitOfMeasure') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Unit of measure is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addAmount" class="form-label">Amount</label>
						  <input type="text"   class="form-control" name="Amount" wire:model.live.debounce.500ms="Amount" aria-label="Amount" aria-describedby="Amount">
						  @error('Amount') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Amount is required</div>
                    </div>
					
					<div class="col-md-12 mb-3">
                      <label for="addRemarks" class="form-label">Remarks</label>
                      <textarea name="Remarks" rows="2" wire:model="Remarks" class="form-control" placeholder="Remarks"></textarea>
					  @error('Remarks') <span class="text-danger alert-sm">{{ $message }}</span> @enderror
					      <div class="invalid-feedback">Remarks is required</div>
                    </div> 
						
                  </div>	
                </div>
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" id="submit_btn" wire:click="updateProposal">Update</button>
                  <button type="button" class="btn btn-outline-kco" data-bs-dismiss="modal">Close</button>
                </div>
			  </form>
              </div>
            </div>
          </div>
		  
		  
		  <!-- Amendment Modal -->
          <div wire:ignore.self class="modal fade"  id="amendmentModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen"  role="document">
              <div class="modal-content">
			  
                <div class="modal-header">
				<div style="width:95%;display:block;">
                  <div class="card p-2 col-md-8 float-start"><h6 class="modal-title" id="amendmentModalLabel1">Finance Bill: {{ $this->FinanceBillName }}&emsp;&emsp;Proposal#: {{ $this->ProposalID}}&emsp;&emsp;By: {{ $this->DrafterID}}&emsp;&emsp;</h6></div>	
				  <div class="col-md-2 text-center mt-2 float-start">
				  <h6 class="modal-title">Suggest Amendment(s)</h6></div>
				  </div>
                  <button type="button" class="btn-close close-edit-modal" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
				
				<div class="modal-body"><!--body-->
				<div wire:ignore> <!--wire:ignore-->
				  <textarea id="Amendment" wire:model="Amendment"></textarea>
				</div>
                </div><!--/body-->
				
                <div class="modal-footer">
				  <button type="button" class="btn btn-kco-green" id="updateBtn" wire:click="saveAmendmentDraft">Save</button>
                  <button type="button" class="btn btn-outline-kco close-edit-modal" data-bs-dismiss="modal">Close</button>
                </div>
			  
              </div>
            </div>
          </div>
		  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.2.3/purify.min.js"></script>

<script>

addEventListener("livewire:navigated", () => {
	
	if(tinymce.activeEditor){
		tinymce.activeEditor.remove()
	}
			
tinymce.init({
            selector: '#Amendment', // Replace this CSS selector to match the placeholder element for TinyMCE
			plugins: 'table lists link fullscreen',
			license_key: 'gpl',
			toolbar: 'undo redo | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | table | link | fullscreen',
            forced_root_block: false,
			branding:false,
			promotion:false,
            setup: function (editor) {
				editor.on('init', function (e) {
					  });
                editor.on('init change', function () {
                    editor.save();
                });
                editor.on('blur', function (e) {
                    @this.set('Amendment', editor.getContent());
                });
            }
        });
  
	document.addEventListener('focusin', function (e) { 
	  if (e.target.closest('.tox-tinymce-aux, .moxman-window, .tam-assetmanager-root') !== null) { 
		e.stopImmediatePropagation();
	  } 
	});
	
})

	$(document).ready( function () {
		
		var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
		var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
		  return new bootstrap.Tooltip(tooltipTriggerEl)
		});
		
		
		$('.close-edit-modal').click(function(){
		});
		
	});
	 
		$('#printBtn').click(function() {
		window.jsPDF = window.jspdf.jsPDF;
        var doc = new jsPDF('p', 'pt', 'a4');
		doc.setFont("Helvetica");
		doc.setFontSize(1);
        var elementHTML = document.getElementById('printable').innerHTML
		//console.log(elementHTML);

        doc.html(elementHTML, {
		callback: function(doc) {
			// Save the PDF
			doc.save('proposal_'+'.pdf');
		},
		x: 15,
		y: 15,
		width: 550, //target width in the PDF document
		windowWidth: 600 //window width in CSS pixels
	});

    });
</script>