@extends('layout')

@section('body')
<div class="row px-0 px-md-3 my-4">
	<div class="col-12 col-md-6 mb-3">
		<div class="blck-white">
			<h5 class="ms-2 mt-2 mb-3">Appointment:</h5>
			<div class="d-flex flex-row align-items-center mb-2">
				<div class="flex-fill">
					<label class="form-label">Driver:</label>
				</div>
				<div class="flex-fill">{{$maintenance->truck_number}} | {{$maintenance->fullname}}</div>
			</div>
			<div class="d-flex flex-row align-items-center mb-2">
				<div class="flex-fill"><label class="form-label">Date:</label></div>
				<div class="flex-fill">{{date('d M Y', strtotime($maintenance->appointment))}}</div>
			</div>
		</div>
	</div>
	<div class="col-12 col-md-6 mb-3">
		<div class="blck-white h-100">
			<h5 class="ms-2 mt-2">Invoice:</h5>
			@if($maintenance->invoice)
			<a href="{{$maintenance->invoice}}" download="{{$maintenance->appointment.'_invoice.pdf'}}" class="text-decoration-none"><i class="bi bi-receipt"></i> Download Invoice</a>
			@else
			<p class="text-center">Invoice does not ready yet.</p>
			@endif
		</div>
	</div>
	<div class="col-12 mb-3">
		<div class="blck-white">
			<h5>Truck Repair Service:</h5>
			{{$maintenance->truck_job}}
		</div>
	</div>
	<div class="col-12 mb-3">
		<div class="blck-white">
			<h5>Trailer Repair Service:</h5>
			{{$maintenance->trailer_job}}
		</div>
	</div>
	@if(!$maintenance->invoice && $maintenance->status == 1)
	<div class="col-12 col-md-3 btndeleteapp">
		<button class="btn btn-outline-danger"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span> Delete Appointment</button>
	</div>
	@endif
</div>
@endsection

@section('script')
@if(!$maintenance->invoice && $maintenance->status == 1)
<script>
const deletebtn = document.querySelector('.btndeleteapp');
deletebtn.addEventListener('click',(e)=>{
	e.target.children[0].style.display="inline-block";
	fetch('/delete/appointment', {
		method: 'PUT',
		headers: {
			'Content-Type': 'application/json',
			'X-CSRF-TOKEN': '{{ csrf_token() }}',
		},
	})
	.then(response => {
		if(response.ok){
			e.target.children[0].style.display="none";
			return response.text();
		}
	})
	.then(data => {
		console.log(data);
		if(data === 'deleted'){
			window.location.replace("/maintenance");
		}
	})
	.catch(error => {
		console.log(error);
	});
});
</script>
@endif
@endsection