<?php
$jobDetail = json_decode($job);
?>
<div class="container">
	<br>
	<br>
	<br>
	<div class="row">
		<div class="col-lg-8">
			<div class="card">
				<div class="card-header">
					<h3 class="card-title">Job Title : <?= $jobDetail->posts->title ?></h3>
					<p>Budget : <?= $jobDetail->posts->budget ?> BDT.</p>
					<p>Category : <?= $jobDetail->category ?> </p>
					<p>Skills :
						<?php
						foreach ($jobDetail->skills as $key => $skill) {
							echo ' <b class="bg-warning " style="padding: 5px 10px; border-radius: 5px; display: inline-block; ">' . $skill->name . '</b> ';
						}
						?>
					</p>

					<p>Published Date : <?= $jobDetail->posts->created_at ?></p>
					<p>Deadline : <?= $jobDetail->posts->deadline ?></p>
					<p>Total Bid : <small class="bg-warning totalBid round" style="padding: 5px 10px;font-size: 1rem;">Total Bid loading...</small> </p>
				</div>
			</div>
			<br>
			<br>
			<br>
		</div>

		<div class="col-lg-4">
			<div class="card" style="border: 1px solid rgba(255,224,0,0.7);">
				<div class="card-header">
					<h3 class="card-title">Job Posted By : <?= $jobDetail->posts->merchant_name ?></h3>
					<p>Payment Verification Status : <small class="bg-success" style="font-size: 1rem;padding: 5px 7px;border-radius: 5px;color: #fff;font-weight: bold;">Verified</small> </p>
				</div>
			</div>

		</div>

		<div class="col-lg-12">
			<p>
				<b>Job Responsibilities </b> :
				<br>
				<br>
				<?= $jobDetail->posts->description ?>
			</p>

			<hr />

			<p>
				<b>Project Files : </b>
				<?php
				$images = ['png', 'jpg', 'gif', 'jpeg', 'svg'];
				?>
			</p>

		</div>

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

			<p>
				<b>Project Files : </b>
				<?php
				$images = ['png', 'jpg', 'gif', 'jpeg', 'svg'];
				?>
			</p>

			<div class="row">

				<?php
				$download = null;
				if (count($jobDetail->files) > 0) {

					foreach ($jobDetail->files as $key => $file) {
						$ext = pathinfo($file->filename, PATHINFO_EXTENSION);
						if (in_array($ext, $images)) {
				?>
							<div class="col-lg-3" style="padding: 0">
								<div class="" style="border: 1px solid rgba(255,224,0,1);padding: 5px 5px 10px;text-align: center; margin: 3px;">
									<div class="img" style="height: 230px;width: 100%; ">
										<img src="<?= $jobDetail->url . $file->filename ?>" style="height: 100%; width: 100%" />

									</div>
									<a href="<?= $jobDetail->url . $file->filename ?>" class="bg-success" style="padding: 5px 10px;border-radius: 5px;color: #fff!important;" target="_blank">
										Download
									</a>
								</div>
							</div>
				<?php
						} else {
							$download .= '
								<a href="' . $jobDetail->url . $file->filename . '" class="bg-success " target="_blank" style="padding:5px 10px;margin:3px; border-radius:5px;color:#fff">Download ' . $ext . ' </a> 
								';
						}
					}
				}
				?>

				<div class="col-lg-12">
					<br>
					<br>
					<?= $download ?>
					<br>
					<br>

				</div>


				<div class="col-lg-7">
					<h3 class="text-left"> Latest Bid by other worker. </h3>
					<div class="row">
						<div class="allBids" style="width: 100%">
							<h2 class="bg-success" style="padding: 10px;">All Bids loading.... </h2>
						</div>
					</div>
				</div>

				<div class="col-lg-5">
					<h3>My Bid</h3>
					<br>
					<div class="appliedMsg"></div>
					<form action="<?= $jobDetail->applyUrl ?>" method="post" id="applyJob">

						<!-- Merchant Information start -->
						<input type="hidden" name="merchant_id" value="<?= $user->id ?>">
						<input type="hidden" name="merchant_name" value="<?= $user->name ?>">
						<input type="hidden" name="merchant_code" value="<?= $user->own_refer_id ?>">
						<!-- Merchant Information End -->

						<div class="form-group">
							<label for="">Bid Rate </label>
							<input type="number" name="amount" value="0" min="1" max="<?= $jobDetail->posts->budget ?>" class="form-control maxAmount" placeholder="Max : <?= $jobDetail->posts->budget ?>">
						</div>

						<div class="form-group">
							<label for="">Cover Letter </label>
							<textarea name="description" class="form-control" placeholder="Write here as Cover Letter" cols="30" rows="10"></textarea>
						</div>
						<button type="submit" class="btn btn-success applySubmit"> Apply Job</button>
					</form>

				</div>


			</div>
		</div>


	</div>
</div>

<script>
	$(function() {
		singleJobBids();
	});

	$(document).on('keyup', '.maxAmount', function() {
		var max = $(this).attr('max');
		var amount = $(this).val();

		if (Number(max) < Number(amount)) {
			alert("Job Budget is : " + max + " Tk.");
			$(this).val(0);
		}

	});


	/* Submit Apply start */
	$("#applyJob").submit(function(e) {
		e.preventDefault();
		var url = $(this).attr('action');
		var formdata = $(this).serialize();
		$.ajax({
			method: $(this).attr('method'),
			url: url,
			data: formdata,
			processData: false,
			dataType: "json",
			success: function(res) {
				singleJobBids();
				if (res.applied == 0) {
					var msg = '<div class="alert alert-success alert-dismissible">\n' +
						'  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
						'  <strong>Success!</strong> successfully applied.\n' +
						'</div>';
					$(".appliedMsg").html(msg);
				} else {
					var msg = '<div class="alert alert-warning alert-dismissible">\n' +
						'  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>\n' +
						'  <strong>Applied!</strong> You already applied for this job.\n' +
						'</div>';
					$(".appliedMsg").html(msg);
				}
				$(".applySubmit").text("Applied");
				$(".applySubmit").attr("disabled");
				console.log(res);
			},
			error: function(err) {
				console.log(err);
			}
		});

	});
	/* Submit Apply End */


	function singleJobBids() {
		$.ajax({
			method: "get",
			url: "https://myadmin.mali-mart.com/api/single-job-bids/<?= $jobDetail->posts->id ?>",
			dataType: "json",
			success: function(res) {
				$(".totalBid").text(res.total);
				$(".allBids").html(res.bids);
			},
			error: function(err) {

			}
		});
	}
</script>