@extends('layout')

@section('body')
<div class="px-0 px-md-3 my-4">
	@if(session('error'))
	<div class="alert alert-danger alert-dismissible fade show" role="alert">
		<strong>{{ session('error') }}</strong>
		<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
	</div>
	@endif
	<form method="POST" action="/update/maintenance" class="row" enctype="multipart/form-data">
		@csrf
		@method('PUT')
		<div class="col-12 col-md-6 mb-3">
			<div class="blck-white">
				<h5 class="ms-2 mt-2 mb-3">Make 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>
				@if($maintenance->owner_id)
				<div class="d-flex flex-row align-items-center mb-2">
					<div class="flex-fill">
						<label class="form-label">Owner:</label>
					</div>
					<div class="flex-fill">{{$maintenance->fOwnerData->firstname}} {{$maintenance->fOwnerData->lastname}}</div>
				</div>
				@endif
				<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">
						@if($usr->role == 'admin')
						<input type="date" value="{{$maintenance->appointment}}" name="appointment" class="form-control"> 
						@else
						{{date('d M Y', strtotime($maintenance->appointment))}}
						@endif
					</div>
				</div>
				@if(in_array($usr->role,['admin','accounting']))
				<div class="d-flex flex-row align-items-center mb-2">
					<div class="flex-fill"><label class="form-label">Status<span class="fw-bold text-danger">*</span>:</label></div>
					<div class="flex-fill">
						<select class="form-control" name="status" required>
							<option {{$maintenance->status == 1 ? 'selected' : '' }} value="1">Active</option>
							<option {{$maintenance->status == 0 ? 'selected' : '' }} value="0">Canceled</option>
						</select>
					</div>
				</div>
				@endif
			</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)
				<div>
					<a href="{{asset($maintenance->invoice)}}" download="{{$maintenance->appointment.'_invoice.pdf'}}" class="text-decoration-none"><i class="bi bi-receipt"></i> Download Invoice</a>
					<a data-fancybox data-type="pdf" href="{{asset($maintenance->invoice)}}" class="text-decoration-none float-end"><i class="bi bi-receipt"></i> View</a>
				</div>
				@endif
				@if(in_array($usr->role,['admin','accounting']))
				<div class="mt-2">
					<input type="file" name="invoice" class="form-control" accept=".pdf">
				</div>
				@endif
			</div>
		</div>

		<div class="col-12 mb-3">
			<div class="blck-white truckjob">
				<h5>Truck Repair Service:</h5>
				<input type="checkbox" class="btn-check" name="truck[]" value="registration" id="truckplate" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truckplate">Plate Registration</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="insurance" id="truckinsurance" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truckinsurance">Insurance</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="annual" id="truckannual" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truckannual">Annual Inspection</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="engine" id="truckengine" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truckengine">Engine</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="wheels" id="truckwheels" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truckwheels">Wheels</label>
				<input type="checkbox" class="btn-check" name="truck[]" value="break" id="truckbreak" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truckbreak">Brakes</label>
			</div>
		</div>
		<div class="col-12 mb-3">
			<div class="blck-white trailerjob">
				<h5>Trailer Repair Service:</h5>
				<input type="checkbox" class="btn-check" name="trailer[]" value="registration" id="trailerkplate" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="trailerkplate">Plate Registration</label>
				<input type="checkbox" class="btn-check" name="trailer[]" value="insurance" id="truailerinsurance" autocomplete="off">
				<label class="btn btn-outline-primary mb-1" for="truailerinsurance">Insurance</label>
				<input type="checkbox" class="btn-check" name="trailer[]" value="engine" id="trailerengine" autocomplete="off">
				<label class="btn btn-outline-secondary mb-1" for="trailerengine">Engine</label>
				<input type="checkbox" class="btn-check" name="trailer[]" value="wheels" id="trailerwheels" autocomplete="off">
				<label class="btn btn-outline-secondary mb-1" for="trailerwheels">Wheels</label>
				<input type="checkbox" class="btn-check" name="trailer[]" value="brake" id="trailerbreak" autocomplete="off">
				<label class="btn btn-outline-secondary mb-1" for="trailerbreak"><i class="bi bi-car-front-fill"></i> Brakes</label>
			</div>
		</div>
		<div class="col-12 col-md-3">
			<button class="btn btn-primary w-100">Change appointment</button>
		</div>
		<div class="col-12 col-md-3">
			<span class="delapp btn btn-outline-danger w-100"><span class="spinner-border spinner-border-sm status me-1" role="status" style="display:none;"></span>Cancel appointment</span>
		</div>
	</form>
</div>
@endsection


@section('head')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
@endsection

@section('script')
<script>
Fancybox.bind("[data-fancybox]",{});
</script>

<script>
document.addEventListener('DOMContentLoaded', function(){
	const selectedTruckJob = '{{$maintenance->truck_job}}'.split(', ');
	const selectedTraileJob = '{{$maintenance->trailer_job}}'.split(', ');
	var blocktruck = document.querySelector('.truckjob');
	var blocktrailer = document.querySelector('.trailerjob');
	const truckInputs = blocktruck.querySelectorAll('input');
	const trailerInputs = blocktrailer.querySelectorAll('input');

	truckInputs.forEach((trucki) => {
		if(selectedTruckJob.includes(trucki.value)){
			trucki.checked = true;
		}
	});

	trailerInputs.forEach((traileri) => {
		if(selectedTraileJob.includes(traileri.value)){
			traileri.checked = true;
		}
	});
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function(){
	const appdelbtn = document.querySelector('.delapp');

	appdelbtn.addEventListener('click', function(e){
		appdelbtn.firstChild.style.display="inline-block";
		fetch('/delete/appointment', {
			method: 'PUT',
			headers: {
				'Content-Type': 'application/json',
				'X-CSRF-TOKEN': '{{ csrf_token() }}',
			},
		})
		.then(response => {
			if(response.ok){
				appdelbtn.firstChild.style.display="none";
				return response.text();
			}
		})
		.then(data => {
			console.log(data);
			if(data === 'deleted'){
				window.location.replace("/maintenance");
			}
		})
		.catch(error => {
			console.log(error);
		});
	});
});
</script>

@endsection