@extends('layouts.app')
@section('content')
<section class="content">
    <div class="container-fluid">

        <div class="px-sm-4">

            <div class="row mt-2 mt-sm-3">
                <div class="col-md-7 col-10">
                    <div class="top-head">
                        <h1>Begumanya Charles</h1>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Projects </a></li>
                                <li class="breadcrumb-item active" aria-current="page">Dam Construction</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="col-md-5 text-sm-right text-left">
                    <h4 class="improvement-areatext">Improvement Area: <span>Water Management</span> </h4>
                </div>
            </div>

            <div class="row mt-3 align-items-center">
                <div class="col-md-9 col-10">
                    <div class="active-detailscontent">
                        <h3 class="d-flex align-items-center">Dam Construction <span
                                class="badge suggested-btn ml-2">Suggested</span></h3>
                    </div>
                </div>
                <div class="col-md-3 col-2 text-right">
                    <span class="badge pencil-box">
                        <i class="fa fa-pencil-alt" aria-hidden="true"></i>
                    </span>
                </div>
            </div>

            <div class="row mt-2">
                <div class="col-md-11 col-12">
                    <div class="active-detailscontent">
                        <p>Construct a water tank and water trough in night paddock plus water pump
                            Construct a water tank and water
                            trough in night Construct a water tank and water trough in night paddock plus
                            water pump Construct a water
                            tank and water trough in night paddock plus water pump Construct a water tank
                            and water trough in pump...
                            <a href="#">read more</a>
                        </p>
                    </div>
                </div>
            </div>

            <div class="commission-box mt-4">
                <div class="row">
                    <div class="col-md-4 col-12 mb-2 mb-sm-0">
                        <h2>Project Cost: <span class="ml-2">UGX 1.4M</span></h2>
                    </div>
                    <div class="col-md-4 col-12 mb-2 mb-sm-0 dashed-borderright dashed-borderleft pl-sm-5">
                        <h2>GLAD Commission: <span class="ml-2">UGX 300K</span> <span
                                class="badge value-badge ml-2">30%</span> </h2>
                    </div>
                    <div class="col-md-4 col-12 pl-sm-5 mb-2 mb-sm-0">
                        <h2>DDE Commission: <span class="ml-2">UGX 100K</span> <span
                                class="badge value-badge ml-2">10%</span></h2>
                    </div>
                </div>
            </div>

            <div class="row mt-sm-4 mt-3">
                <div class="col-md-6 col-5">
                    <label class="accord-label">Farmer KPI's</label>
                </div>
                <div class="col-md-6 col-7 text-right">
                    <span class="badge pencil-box cursor-pointer" data-toggle="modal"
                        data-target="#resume-menu" >
                        <i class="fa fa-pencil-alt" aria-hidden="true"></i>
                    </span>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-2 mb-3 mb-sm-0 col-6">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money.svg" alt="">
                        </div>
                        <h3>UGX 1.8M</h3>
                        <h4>Investment</h4>
                    </div>
                </div>
                <div class="col-md-2  mb-3 mb-sm-0 col-6">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money2.svg" alt="">
                        </div>
                        <h3>UGX 2.4M</h3>
                        <h4>Revenue</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6 mb-3 mb-sm-0">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money3.svg" alt="">
                        </div>
                        <h3>133%</h3>
                        <h4>ROI</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6 mb-3 mb-sm-0">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money4.svg" alt="">
                        </div>
                        <h3>UGX 1M</h3>
                        <h4>Loan</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money5.svg" alt="">
                        </div>
                        <h3>UGX 1.8M</h3>
                        <h4>Investment</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money6.svg" alt="">
                        </div>
                        <h3>UGX 2.4M</h3>
                        <h4>Revenue</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6 mt-3">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money7.svg" alt="">
                        </div>
                        <h3>133%</h3>
                        <h4>ROI</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6 mt-3">
                    <div class="farmer-kpibox">
                        <div class="row align-items-center">
                            <div class="col-md-8 col-8">
                                <div class="farmer-kpiboximg">
                                    <img src="/assets/img/money8.svg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 col-4 text-right">

                                    <i class="fa fa-ellipsis-v kpi-dotsicon cursor-pointer" data-toggle="modal" data-target="#Supplied-menu" aria-hidden="true"></i>

                            </div>
                        </div>
                        <h3>UGX 1M</h3>
                        <h4>Loan</h4>
                    </div>
                </div>

                <div class="col-md-2 col-6 mt-3">
                    <div class="farmer-kpibox">
                        <div class="row">
                            <div class="col-md-8">
                                <div class="farmer-kpiboximg">
                                    <img src="/assets/img/money5.svg" alt="">
                                </div>
                            </div>
                            <div class="col-md-4 text-right">
                            </div>
                        </div>
                        <h3>UGX 1.8M</h3>
                        <h4>Investment</h4>
                    </div>
                </div>
                <div class="col-md-2 col-6 mt-3">
                    <div class="farmer-kpibox">
                        <div class="farmer-kpiboximg">
                            <img src="/assets/img/money6.svg" alt="">
                        </div>
                        <h3>UGX 2.4M</h3>
                        <h4>Revenue</h4>
                    </div>
                </div>
            </div>

            <div class="row mt-sm-4 mt-3 align-items-center">
                <div class="col-md-6 col-8">
                    <label class="accord-label">Project Milestones</label>
                </div>
                <div class="col-md-6 col-4 text-right">
                    <div class="plus-box" data-toggle="modal" data-target="#plus-menu" >
                        <img src="/assets/img/plus.svg" class="cursor-pointer" alt="">
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6 mb-3 mb-sm-0">
                    <div class="water-tankcheckinnerbox cursor-pointer" data-toggle="modal"
                        data-target="#join-menu">
                        <div class="row">
                            <div class="col-md-8 col-8">
                                <h2>Pipeline installation</h2>
                                <h3>04 tasks included in this milestone.</h3>
                            </div>
                            <div class="col-md-4 col-4 text-right">
                                <div class="cross-boxnew">
                                    <img src="/assets/img/cross.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4 col-4">
                                <h5>Value</h5>
                                <h6 class="red-text">UGX 600k</h6>
                            </div>
                            <div class="col-md-4 col-4">
                                <h5>Value</h5>
                                <h6>15 days</h6>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="water-tankcheckinnerbox">
                        <div class="row">
                            <div class="col-md-8 col-8">
                                <h2>Pipeline installation</h2>
                                <h3>04 tasks included in this milestone.</h3>
                            </div>
                            <div class="col-md-4 col-4 text-right">
                                <div class="cross-boxnew">
                                    <img src="/assets/img/cross.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4 col-4">
                                <h5>Value</h5>
                                <h6 class="red-text">UGX 600k</h6>
                            </div>
                            <div class="col-md-4 col-4">
                                <h5>Value</h5>
                                <h6>15 days</h6>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 mt-3">
                    <div class="water-tankcheckinnerbox">
                        <div class="row">
                            <div class="col-md-8 col-8">
                                <h2>Pipeline installation</h2>
                                <h3>04 tasks included in this milestone.</h3>
                            </div>
                            <div class="col-md-4 col-4 text-right">
                                <div class="cross-boxnew">
                                    <img src="/assets/img/cross.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-md-4 col-4">
                                <h5>Value</h5>
                                <h6 class="red-text">UGX 600k</h6>
                            </div>
                            <div class="col-md-4 col-4">
                                <h5>Value</h5>
                                <h6>15 days</h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-sm-5 mt-3">
                <div class="col-md-12">
                    <h6 class="assigned-progresstext" data-toggle="modal" data-target="#progress-menu" >Track the progress</h6>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-3 col-5">
                    <button type="button" class="btn btn-block save-btn p-sm-3" data-toggle="modal" data-target="#exampleModal">Mark as cold</button>
                </div>
            </div>

            <div class="chat-botbox">
                <img src="/assets/img/chat-botimg.svg" alt="">
            </div>

        </div>

    </div>
</section>
<Section class="content">
    <div class="modal fade thank-youpop" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
		  <div class="modal-content">
			<div class="modal-header p-3">
			  <h5 class="modal-title" id="exampleModalLabel"></h5>
			  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
				<!-- <span aria-hidden="true">&times;</span> -->
				<img src="/assets/img/pop-close.svg" class="cross-dash" alt="">
			  </button>
			</div>
			<div class="modal-body pt-0">
			   <div class="thank-youcontentpop text-center pb-sm-3 pb-2">
				   <div class="confrimed-box mb-sm-4 mb-2">
					  <img src="/assets/img/confirme.svg" alt="">
				   </div>
				   <h3>Thank you!</h3>
				   <p>Project has been suggested.</p>
			   </div>
			</div>
		  </div>
		</div>
	  </div>


	{{-- <div class="modal fade" id="forgetpassword" tabindex="-1" role="dialog" aria-labelledby="loginpopupTitle"
		aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered" role="document">

			<div class="modal-content bg-light modalPad">
				<form class="needs-validation" novalidate>
					<div class="modal-header position-relative border-0">
						<div class="">
							<button type="button" class="close-btn" data-dismiss="modal" aria-label="Close">
								<img src="/assets/img/close.svg" />
							</button>
							<div class="">
								<h5>Change Password</h5>
								<p class="mb-0">Fill the below fields</p>
							</div>

						</div>
					</div>
					<div class="modal-body pt-0">

						<div class="row">
							<div class="col-md-12">
								<div class="form-group">
									<label>New password</label>
									<input type="text" class="form-control" placeholder="Enter New Password" />
								</div>
							</div>

							<div class="col-md-12">
								<div class="form-group">
									<label>Re-type New password</label>
									<input type="text" class="form-control" placeholder="Enter Re-type New Password" />
								</div>
							</div>


							<div class="col-md-12 mt-3">
								<a href="#" class="btn btn-primary">Update password</a>
							</div>

						</div>

					</div>

				</form>
			</div>

		</div>
	</div> --}}

	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="join-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header pb-0 mobile-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							<!-- &times; -->
							<img src="/assets/img/dash-cross.svg" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body pt-0">
					<div class="row align-items-center mt-2">
						<div class="col-md-10 col-10">
							<div class="pop-head">
								<h2>Installation of water tank...</h2>
							</div>
						</div>
						<div class="col-md-2 col-2 text-right">
							<span class="badge pencil-box cursor-pointer" data-toggle="modal" data-target="#add-menu" >
								<i class="fa fa-pencil-alt" aria-hidden="true"></i>
							</span>
						</div>
					</div>

					<div class="inner-popcontent mt-1">
						<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
							been the industry's
							standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
							scrambled it to make
							a type Lorem Ipsum has been the industry's standard dummy text specimen...</p>

						<div class="d-flex justify-content-between border-top border-bottom mt-3 mt-sm-4">
							<div>
								<h6>Value</h6>
								<h5 class="red-text">UGX 700k</h5>
							</div>
							<div>
								<h6>Duration</h6>
								<h5>12 days</h5>
							</div>
						</div>
					</div>

					<label class="label-pop mt-2 mt-sm-4">Attributes</label>
					<div class="attributes-contentbox">
						<div class="attributes-boxbg">
							<div class="row">
								<div class="col-md-6 col-6">
									<h6>Type</h6>
								</div>
								<div class="col-md-6 col-6">
									<h6>Plastic</h6>
								</div>
							</div>
						</div>
						<div class="attributes-boxbg mt-1">
							<div class="row">
								<div class="col-md-6 col-6">
									<h6>Size/ Capacity</h6>
								</div>
								<div class="col-md-6 col-6">
									<h6>5000 Ltr.</h6>
								</div>
							</div>
						</div>
						<div class="attributes-boxbg mt-1">
							<div class="row">
								<div class="col-md-6 col-6">
									<h6>Quantity</h6>
								</div>
								<div class="col-md-6 col-6">
									<h6>02 NOS</h6>
								</div>
							</div>
						</div>
						<div class="attributes-boxbg mt-1">
							<div class="row">
								<div class="col-md-6 col-6">
									<h6>Price</h6>
								</div>
								<div class="col-md-6 col-6">
									<h6>UGX 100K</h6>
								</div>
							</div>
						</div>
					</div>


					<label class="label-pop mt-2 mt-sm-4">Attributes</label>
					<div class="deliverables-box">
						<div class="d-flex justify-content-between align-items-center">
							<div>
								<h5>Various versions have evolved</h5>
							</div>
							<div class="deliverables-boxinner">
								01
							</div>
						</div>
					</div>

					<div class="deliverables-box mt-2">
						<div class="d-flex justify-content-between align-items-center">
							<div>
								<h5>Various versions have evolved</h5>
							</div>
							<div class="deliverables-boxinner">
								02
							</div>
						</div>
					</div>

					<div class="deliverables-box mt-2">
						<div class="d-flex justify-content-between align-items-center">
							<div>
								<h5>Various versions have evolved</h5>
							</div>
							<div class="deliverables-boxinner">
								03
							</div>
						</div>
					</div>

					<div class="deliverables-box mt-2">
						<div class="d-flex justify-content-between align-items-center">
							<div>
								<h5>Various versions have evolved</h5>
							</div>
							<div class="deliverables-boxinner">
								04
							</div>
						</div>
					</div>

					<div class="deliverables-box mt-2 mb-5">
						<div class="d-flex justify-content-between align-items-center">
							<div>
								<h5>Various versions have evolved</h5>
							</div>
							<div class="deliverables-boxinner">
								05
							</div>
						</div>
					</div>



				</div>
			</div>
		</div>
	</div>

	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="resume-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header pb-0 mobile-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							<!-- &times; -->
							<img src="/assets/img/dash-cross.svg" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body pt-0">
					<div class="row align-items-center mt-2">
						<div class="col-md-9 col-9">
							<div class="pop-head">
								<h2>Farmer KPI's</h2>
							</div>
						</div>
					</div>

					<div class="row mt-sm-4 mt-3">
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Investment</label>
								<input type="email" class="form-control edit-input" placeholder="UGX 1.8M">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Revenue</label>
								<input type="email" class="form-control edit-input" placeholder="UGX 2.4M">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">ROI</label>
								<input type="email" class="form-control edit-input" placeholder="133%">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Farmer Participation</label>
								<input type="email" class="form-control edit-input" placeholder="UGX 800K">
							</div>
						</div>

						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Loan</label>
								<input type="email" class="form-control edit-input" placeholder="UGX 1M">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Repayment Period</label>
								<input type="email" class="form-control edit-input" placeholder="12 Months">
							</div>
						</div>

						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">EMI</label>
								<input type="email" class="form-control edit-input" placeholder="UGX 100K">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Credit Ratio</label>
								<input type="email" class="form-control edit-input" placeholder="UGX 800K">
							</div>
						</div>

						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Current yield (Ltr.)</label>
								<input type="email" class="form-control edit-input" placeholder="10">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<label class="edit-label">Target yield (Ltr.)</label>
								<input type="email" class="form-control edit-input" placeholder="18">
							</div>
						</div>


					</div>

					<div class="row mt-sm-5 mt-4 mb-5 justify-content-center">
						<div class="col-md-10 col-8 text-center">
							<button type="button" class="btn btn-block save-btn p-sm-3 mb-4">Save</button>
							<a href="#" class="cancel-text">Cancel</a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="plus-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header pb-0 mobile-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							<!-- &times; -->
							<img src="/assets/img/dash-cross.svg" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body pt-0">
					<div class="row align-items-center mt-2">
						<div class="col-md-9">
							<div class="pop-head">
								<h2>Add project milestone</h2>
							</div>
						</div>
					</div>

					<div class="form-group mt-sm-4 mt-3">
						<label class="edit-label">Title of the milestone</label>
						<select class="form-control edit-input edit-select bg-white">
							<option>Installation of water tank...</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>

					<div class="form-group">
						<label class="edit-label">Describe the milestone</label>
						<textarea class="form-control edit-input" rows="5" placeholder="Construct a water tank and water trough in night paddock plus water pump Construct a water tank and water trough in Construct a water tank and water trough in night paddock plus water pump Construct a water tank and water trough.."></textarea>
					</div>

					<div class="form-group">
						<label class="edit-label">Duration</label>
						<input type="email" class="form-control edit-input" placeholder="12 days">
					</div>

					<label class="label-pop">Attributes</label>
					<div class="form-group">
						<label class="edit-label">Type</label>
						<select class="form-control edit-input edit-select bg-white">
							<option>Plastic</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
					<div class="form-group">
						<label class="edit-label">Size/Capacity</label>
						<select class="form-control edit-input edit-select bg-white">
							<option>5000 Ltr.</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>


					<label class="edit-label">Required Qty.</label>
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<input type="email" class="form-control edit-input" placeholder="12 days">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<select class="form-control edit-input edit-select bg-white">
									<option>5000 Ltr.</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="edit-label">Price per unit</label>
						<input type="email" class="form-control edit-input" placeholder="UGX 100K">
					</div>

					<label class="label-pop mt-2">Milestone deliverables</label>
					<div class="form-group">
						<input type="email" class="form-control edit-input" placeholder="Add task name...">
					</div>

					<span class="badge plastic-badge">Installation
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Fixing
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Versions have evolved
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Versions have evolved
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Installation
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>


					<div class="row mt-sm-5 mt-4 mb-5 justify-content-center">
						<div class="col-md-10 col-8 text-center">
							<button type="button" class="btn btn-block save-btn p-sm-3 mb-4">Save</button>
							<a href="#" class="cancel-text">Cancel</a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="add-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header pb-0 mobile-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							<!-- &times; -->
							<img src="/assets/img/dash-cross.svg" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body pt-0">
					<div class="row align-items-center mt-2">
						<div class="col-md-9">
							<div class="pop-head">
								<h2>Edit milestone</h2>
							</div>
						</div>
					</div>

					<div class="form-group mt-sm-4 mt-3">
						<label class="edit-label">Title of the milestone</label>
						<select class="form-control edit-input edit-select bg-white">
							<option>Installation of water tank...</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>

					<div class="form-group">
						<label class="edit-label">Describe the milestone</label>
						<textarea class="form-control edit-input" rows="5" placeholder="Construct a water tank and water trough in night paddock plus water pump Construct a water tank and water trough in Construct a water tank and water trough in night paddock plus water pump Construct a water tank and water trough.."></textarea>
					</div>

					<div class="form-group">
						<label class="edit-label">Duration</label>
						<input type="email" class="form-control edit-input" placeholder="12 days">
					</div>

					<label class="label-pop">Attributes</label>
					<div class="form-group">
						<label class="edit-label">Type</label>
						<select class="form-control edit-input edit-select bg-white">
							<option>Plastic</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>
					<div class="form-group">
						<label class="edit-label">Size/Capacity</label>
						<select class="form-control edit-input edit-select bg-white">
							<option>5000 Ltr.</option>
							<option>2</option>
							<option>3</option>
							<option>4</option>
							<option>5</option>
						</select>
					</div>


					<label class="edit-label">Required Qty.</label>
					<div class="row">
						<div class="col-md-6">
							<div class="form-group">
								<input type="email" class="form-control edit-input" placeholder="12 days">
							</div>
						</div>
						<div class="col-md-6">
							<div class="form-group">
								<select class="form-control edit-input edit-select bg-white">
									<option>5000 Ltr.</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
								</select>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="edit-label">Price per unit</label>
						<input type="email" class="form-control edit-input" placeholder="UGX 100K">
					</div>

					<label class="label-pop mt-2">Milestone deliverables</label>
					<div class="form-group">
						<input type="email" class="form-control edit-input" placeholder="Add task name...">
					</div>

					<span class="badge plastic-badge">Installation
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Fixing
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Versions have evolved
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Versions have evolved
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>
					<span class="badge plastic-badge">Installation
						<span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
					</span>


					<div class="row mt-sm-5 mt-4 mb-5 justify-content-center">
						<div class="col-md-10 col-8 text-center">
							<button type="button" class="btn btn-block save-btn p-sm-3 mb-4">Save</button>
							<a href="#" class="cancel-text">Cancel</a>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>

	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="progress-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header pb-0 mobile-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">
							<!-- &times; -->
							<img src="/assets/img/dash-cross.svg" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row align-items-center mt-2">
						<div class="col-md-9 col-9">
							<div class="pop-head">
								<h2>Progress tracker</h2>
							</div>
						</div>
					</div>

					<div class="progress-trackerpopcontent mt-4 mb-5">
						<div class="row mb-2">
							<div class="col-md-8 col-8">
								<h2>23 Jan, 2023 09:00 AM</h2>
							</div>
							<div class="col-md-4 col-4 text-right">
								<span class="badge suggested-btn">Suggested</span>
							</div>
						</div>
						<h6>Begumanya Charles (Admin)</h6>
						<h6> <span class="activity-text" >Activity: </span>  <span class="assigned-text">Assigned DDE:</span>   Begumanya Charles</h6>
						<p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
							PageMaker including versions of Lorem.</p>

						<div class="row mb-2 mt-sm-5 mt-4">
							<div class="col-md-8 col-8">
								<h2>23 Jan, 2023 09:00 AM</h2>
							</div>
							<div class="col-md-4 col-4 text-right">
								<h4>DIferred</h4>
							</div>
						</div>
						<h6>Begumanya Charles (Admin)</h6>
						<h6> <span class="activity-text" >Activity: </span>  <span class="assigned-text">Assigned DDE:</span>   Begumanya Charles</h6>
						<p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
								PageMaker including versions of Lorem.</p>

						<div class="row mb-2 mt-sm-5 mt-4">
							<div class="col-md-8 col-8">
								<h2>23 Jan, 2023 09:00 AM</h2>
							</div>
							<div class="col-md-4 col-4 text-right">
								<h4>Not Interested</h4>
							</div>
						</div>
						<h6>Begumanya Charles (Admin)</h6>
						<h6> <span class="activity-text" >Activity: </span>  <span class="assigned-text">Assigned DDE:</span>   Begumanya Charles</h6>
						<p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
								PageMaker including versions of Lorem.</p>

						<div class="row mb-2 mt-sm-5 mt-4">
							<div class="col-md-8 col-8">
								<h2>23 Jan, 2023 09:00 AM</h2>
							</div>
							<div class="col-md-4 col-4 text-right">
								<h4>Not Interested</h4>
							</div>
						</div>
						<h6>Begumanya Charles (Admin)</h6>
						<h6> <span class="activity-text" >Activity: </span>  <span class="assigned-text">Assigned DDE:</span>   Begumanya Charles</h6>
						<p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
								PageMaker including versions of Lorem.</p>

						<div class="row mb-2 mt-sm-5 mt-4">
							<div class="col-md-8 col-8">
								<h2>23 Jan, 2023 09:00 AM</h2>
							</div>
							<div class="col-md-4 col-4 text-right">
								<h4>Interested</h4>
							</div>
						</div>
						<h6>Begumanya Charles (Admin)</h6>
						<h6> <span class="activity-text" >Activity: </span>  <span class="assigned-text">Assigned DDE:</span>   Begumanya Charles</h6>
						<p>Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
								PageMaker including versions of Lorem.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--  -->

	<!-- start -->
	<div class="modal fade mobile-header filter-popup join-popup modal-dialog-slideout" id="Supplied-menu" tabindex="-1"
		role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog" role="document">
			<div class="modal-content border-0">
				<div class="supplied-popbox">
					<div class="modal-header pb-0 mobile-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">
								<!-- &times; -->
								<img src="/assets/img/white-closepop.svg" class="cross-dash" alt="">
							</span>
						</button>
						<div class="pop-headred">
							<h5>Milk supplied to PDFL</h5>
						    <h6>Last 6 months</h6>
						</div>
					</div>
					<div class="modal-body pt-0">
						<div class="row mt-3 pb-4">
							<div class="col-md-12">
								<canvas id="myChart" style="width:100%; height: 180px;"></canvas>
							</div>
						</div>
					</div>
				</div>
				<div class="modal-body pt-0">

					<div class="production-box mt-sm-5 mt-3">
						<div class="produtcion-innerbox">
							<div class="row">
								<div class="col-md-6 col-6 border-dashhed">
									<h4>45K Ltr</h4>
									 <h3>Total production</h3>
								</div>
								<div class="col-md-6 col-6 pl-sm-5">
									<h4>UGX 22.5M</h4>
									<h3>Worth</h3>
								</div>
							</div>
						</div>
					</div>

					<div class="milk-supplycontent mt-4">
							<p>April, 2023</p>
						<div class="d-flex mt-2 justify-content-between supply-contentbox supply-contentboxbg align-items-center">
							<div>
								<h3>30</h3>
								<h4>Milking cows</h4>
							</div>
							<div>
								<h3>5580 Ltr.</h3>
								<h4>Production</h4>
							</div>
							<div>
								<h3>06 Ltr.</h3>
								<h4>Yield /day</h4>
							</div>
						</div>
						<div class="d-flex  supply-borderbottom justify-content-between supply-contentbox align-items-center">
							<div>
								<h3>180 Ltr.</h3>
								<h4>Self use</h4>
							</div>
							<div>
								<h3>4000 Ltr.</h3>
								<h4>Supply to PDFL</h4>
							</div>
							<div>
								<h3>1400 Ltr.</h3>
								<h4>Supply to others</h4>
							</div>
						</div>
					</div>

					<div class="milk-supplycontent mt-4">
						<p>March, 2023</p>
					<div class="d-flex mt-2 justify-content-between supply-contentbox supply-contentboxbg align-items-center">
						<div>
							<h3>30</h3>
							<h4>Milking cows</h4>
						</div>
						<div>
							<h3>5580 Ltr.</h3>
							<h4>Production</h4>
						</div>
						<div>
							<h3>06 Ltr.</h3>
							<h4>Yield /day</h4>
						</div>
					</div>
					<div class="d-flex  supply-borderbottom justify-content-between supply-contentbox align-items-center">
						<div>
							<h3>180 Ltr.</h3>
							<h4>Self use</h4>
						</div>
						<div>
							<h3>4000 Ltr.</h3>
							<h4>Supply to PDFL</h4>
						</div>
						<div>
							<h3>1400 Ltr.</h3>
							<h4>Supply to others</h4>
						</div>
					</div>
				</div>

				<div class="milk-supplycontent mt-4">
					<p>May, 2023</p>
				<div class="d-flex mt-2 justify-content-between supply-contentbox supply-contentboxbg align-items-center">
					<div>
						<h3>30</h3>
						<h4>Milking cows</h4>
					</div>
					<div>
						<h3>5580 Ltr.</h3>
						<h4>Production</h4>
					</div>
					<div>
						<h3>06 Ltr.</h3>
						<h4>Yield /day</h4>
					</div>
				</div>
				<div class="d-flex  supply-borderbottom justify-content-between supply-contentbox align-items-center">
					<div>
						<h3>180 Ltr.</h3>
						<h4>Self use</h4>
					</div>
					<div>
						<h3>4000 Ltr.</h3>
						<h4>Supply to PDFL</h4>
					</div>
					<div>
						<h3>1400 Ltr.</h3>
						<h4>Supply to others</h4>
					</div>
				</div>
			</div>

			<div class="milk-supplycontent mt-4">
				<p>June, 2023</p>
			<div class="d-flex mt-2 justify-content-between supply-contentbox supply-contentboxbg align-items-center">
				<div>
					<h3>30</h3>
					<h4>Milking cows</h4>
				</div>
				<div>
					<h3>5580 Ltr.</h3>
					<h4>Production</h4>
				</div>
				<div>
					<h3>06 Ltr.</h3>
					<h4>Yield /day</h4>
				</div>
			</div>
			<div class="d-flex  supply-borderbottom justify-content-between supply-contentbox align-items-center">
				<div>
					<h3>180 Ltr.</h3>
					<h4>Self use</h4>
				</div>
				<div>
					<h3>4000 Ltr.</h3>
					<h4>Supply to PDFL</h4>
				</div>
				<div>
					<h3>1400 Ltr.</h3>
					<h4>Supply to others</h4>
				</div>
			</div>
		</div>

		<div class="milk-supplycontent mt-4 pb-5">
			<p>July, 2023</p>
		<div class="d-flex mt-2 justify-content-between supply-contentbox supply-contentboxbg align-items-center">
			<div>
				<h3>30</h3>
				<h4>Milking cows</h4>
			</div>
			<div>
				<h3>5580 Ltr.</h3>
				<h4>Production</h4>
			</div>
			<div>
				<h3>06 Ltr.</h3>
				<h4>Yield /day</h4>
			</div>
		</div>
		<div class="d-flex  supply-borderbottom justify-content-between supply-contentbox align-items-center">
			<div>
				<h3>180 Ltr.</h3>
				<h4>Self use</h4>
			</div>
			<div>
				<h3>4000 Ltr.</h3>
				<h4>Supply to PDFL</h4>
			</div>
			<div>
				<h3>1400 Ltr.</h3>
				<h4>Supply to others</h4>
			</div>
		</div>
	</div>

				</div>
			</div>
		</div>
	</div>
</Section>
@endsection