@extends('layouts/contentNavbarLayout')

@section('title', 'Suggested Proposal Amendments')

@section('content')

		<div class="card card-datatable table-responsive">
			<div class="card-header">
				<div id="custom-dt-toolbar">
					<div class="row">
						<div class="col-md-6">
							<div class="dt-toolbar-left">
								<h5 class="card-title mb-0">Suggested Proposal Amendments</h5>
								@php
								$FinanceBillID=DB::table('proposals')->where('ProposalID',$ProposalID)->pluck('FinanceBillID')->first();
								$FinanceBillName=DB::table('financebilldetails')->where('FinanceBillID',$FinanceBillID)->pluck('Name')->first();
								@endphp
								<h5 class="mt-3">{{ $FinanceBillName }}&emsp;|&emsp;Proposal#: {{ $ProposalID }}</h5>
							</div>
						</div>
						
						<div class="col-md-6 text-end">
							<div class="dt-toolbar-right">
								@if(auth()->user()->can('create-proposalamendments'))
								<!--<a href="{{ route('admin.financebills')}}" data-turbo-track="reload" class="btn btn-kco-dark-yellow type="button">
									<span><i class="bx bx-chevrons-left bx-sm me-sm-0"></i> 
									<span class="d-none d-sm-inline-block">Back</span>
									</span>
								</a>-->
								@endif
							</div>
						</div>
						
						</div>
					</div>
			</div><!--/.header-->
			<div class="card-body overflow-hidden">
				@livewire('suggestedproposalamendments-table',['ProposalID' => $ProposalID])
				@livewire('suggestedproposalamendments')
			</div>
		</div>
		
@endsection

@section('page-script')

<script>
addEventListener("turbo:load", () => {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
});
});
		window.addEventListener('openModal', (event) => {
			$('.modal-backdrop').remove();
			 //$('#editModal').modal('show');
			 const modalId = event.detail;
             //find modal
             const modal = new bootstrap.Modal(document.getElementById(modalId), {});
				modal.show();
		})
		
         window.addEventListener('closeModal', (event) => { 
             //the Id of the modal is passed from component
             const modalId = event.detail;
             //find modal
             const modalName = document.getElementById(modalId);
			 var modal = bootstrap.Modal.getInstance(modalName)
				modal.hide();
				$('.modal-backdrop').remove();
         })
     </script>

<script>
 //prepare toast
 window.Toast = Swal.mixin({
	 toast: true,
	 position: 'top-right',
	 showConfirmButton: false,
	 showCloseButton: true,
	 timer: 3000,
	 timerProgressBar: true,
	 didOpen: (toast) => {
		 toast.addEventListener('mouseenter', Swal.stopTimer)
		 toast.addEventListener('mouseleave', Swal.resumeTimer)
	 }
 });

  //fire toast on alert event
 window.addEventListener('alert', (event) => {

	 const eventData = event.detail;
	 const type = eventData[0].type;
	 const message = eventData[0].message;

	 Toast.fire({
		 icon: type,
		 title: message
	 })
 });
 
 window.addEventListener('confirmRetract', (event) => {
	const eventData = event.detail;
	 Swal.fire({
		 title: 'Retract?',
		 text: "Do you want to retract your decision?",
		 icon: 'warning',
		 showCancelButton: true,
		 confirmButtonColor: '#3085d6',
		 cancelButtonColor: '#d33',
		 confirmButtonText: 'Yes, retract!'
	 }).then((result) => {
		 if (result.isConfirmed) {
			 window.Livewire.dispatchTo(eventData.targetComponent,eventData.targetEvent,{ ProposalID:eventData.ProposalID,SuggestedProposalAmendmentID :eventData.SuggestedProposalAmendmentID,LoggedInUser:eventData.LoggedInUser })
		 }
	 })
 });

 window.addEventListener('ConfirmApproveAmendment', (event) => {
	const eventData = event.detail;
	 Swal.fire({
		 title: 'Approve?',
		 text: "Do you want to approve this amendment?",
		 icon: 'warning',
		 showCancelButton: true,
		 confirmButtonColor: '#3085d6',
		 cancelButtonColor: '#d33',
		 confirmButtonText: 'Yes, approve!'
	 }).then((result) => {
		 if (result.isConfirmed) {
			 window.Livewire.dispatchTo(eventData.targetComponent,eventData.targetEvent,{ ProposalID:eventData.ProposalID,SuggestedProposalAmendmentID :eventData.SuggestedProposalAmendmentID,LoggedInUser:eventData.LoggedInUser })
		 }
	 })
 });
 
 window.addEventListener('ConfirmdisApproveAmendment', (event) => {
	const eventData = event.detail;
	 Swal.fire({
		 title: 'Disapprove?',
		 text: "Do you want to disapprove this amendment?",
		 icon: 'warning',
		 showCancelButton: true,
		 confirmButtonColor: '#3085d6',
		 cancelButtonColor: '#d33',
		 confirmButtonText: 'Yes, disapprove!'
	 }).then((result) => {
		 if (result.isConfirmed) {
			 window.Livewire.dispatchTo(eventData.targetComponent,eventData.targetEvent,{ ProposalID:eventData.ProposalID,SuggestedProposalAmendmentID :eventData.SuggestedProposalAmendmentID,LoggedInUser:eventData.LoggedInUser})
		 }
	 })
 });
 
 window.addEventListener('ConfirmPassProposalAmendment', (event) => {
	const eventData = event.detail;
	 Swal.fire({
		 title: 'Pass?',
		 text: "Do you want to pass this proposal amendment?",
		 icon: 'warning',
		 showCancelButton: true,
		 confirmButtonColor: '#3085d6',
		 cancelButtonColor: '#d33',
		 confirmButtonText: 'Yes, pass it!'
	 }).then((result) => {
		 if (result.isConfirmed) {
			 window.Livewire.dispatchTo(eventData.targetComponent,eventData.targetEvent,{ SuggestedProposalAmendmentID:eventData.SuggestedProposalAmendmentID, LoggedInUser:eventData.LoggedInUser })
		 }
	 })
 });
 
 window.addEventListener('ConfirmAnnulProposalAmendment', (event) => {
	const eventData = event.detail;
	 Swal.fire({
		 title: 'Annul?',
		 text: "Do you want to annul this proposal amendment?",
		 icon: 'warning',
		 showCancelButton: true,
		 confirmButtonColor: '#3085d6',
		 cancelButtonColor: '#d33',
		 confirmButtonText: 'Yes, annul it!'
	 }).then((result) => {
		 if (result.isConfirmed) {
			 window.Livewire.dispatchTo(eventData.targetComponent,eventData.targetEvent,{ SuggestedProposalAmendmentID:eventData.SuggestedProposalAmendmentID, LoggedInUser:eventData.LoggedInUser })
		 }
	 })
 });
</script>
@endsection 