@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 class="d-flex align-items-center">Dam Construction <span
                                    class="badge suggested-btn ml-2">Active</span></h1>
                            <p>Water Management</p>
                            <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">
                        <div class="progress-circle progress-25 float-sm-right">
                            <h5 class="progress-txt">25% <span class="progress-txtgray">Completed</span></h5>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <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-4">
                    <div class="col-md-4">
                        <a href="#">
                            <div class="card statment-card">
                                <div class="card-body">
                                    <div class="account-statmentbox">
                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <h1>Farmer</h1>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <h2> <img src="img/star.svg" class="mr-1" alt=""> 4.2
                                                    <span>(17)</span>
                                                </h2>
                                            </div>
                                        </div>

                                        <div class="row mt-3">
                                            <div class="col-md-3 col-3">
                                                <div class="statement-users">
                                                    <img src="img/framers-user.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-9 col-9">
                                                <h3>Matts Francesca</h3>
                                                <div class="d-flex align-items-center mb-2 mt-2">
                                                    <div class="mr-2"><img src="img/call.svg" alt=""></div>
                                                    <div>
                                                        <h4>+256 758711344</h4>
                                                    </div>
                                                </div>
                                                <div class="d-flex ">
                                                    <div class="mr-2"><img src="img/loaction.svg" alt=""></div>
                                                    <div>
                                                        <h4>Plot 11,Luwum St. Rwoozi, Kampala - 23489...</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-12 text-right">
                                                <p><span class="green-box"><i class="fa fa-check"
                                                            aria-hidden="true"></i></span> KYC Verified</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="settings-ddedetails.html">
                            <div class="card statment-card">
                                <div class="card-body">
                                    <div class="account-statmentbox">
                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <h1>DDE</h1>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <h2> <img src="img/star.svg" class="mr-1" alt=""> 4.2
                                                    <span>(17)</span>
                                                </h2>
                                            </div>
                                        </div>

                                        <div class="row mt-3">
                                            <div class="col-md-3 col-3">
                                                <div class="statement-users">
                                                    <img src="img/framers-user.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-9 col-9">
                                                <h3>Matts Francesca</h3>
                                                <div class="d-flex align-items-center mb-2 mt-2">
                                                    <div class="mr-2"><img src="img/call.svg" alt=""></div>
                                                    <div>
                                                        <h4>+256 758711344</h4>
                                                    </div>
                                                </div>
                                                <div class="d-flex ">
                                                    <div class="mr-2"><img src="img/loaction.svg" alt=""></div>
                                                    <div>
                                                        <h4>Plot 11,Luwum St. Rwoozi, Kampala - 23489...</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-4">
                        <a href="settings-ddedetails.html">
                            <div class="card statment-card">
                                <div class="card-body">
                                    <div class="account-statmentbox">
                                        <div class="row">
                                            <div class="col-md-6 col-6">
                                                <h1>Supplier</h1>
                                            </div>
                                            <div class="col-md-6 col-6">
                                                <h2> <img src="img/star.svg" class="mr-1" alt=""> 4.2
                                                    <span>(17)</span>
                                                </h2>
                                            </div>
                                        </div>

                                        <div class="row mt-3">
                                            <div class="col-md-3 col-3">
                                                <div class="statement-users">
                                                    <img src="img/framers-user.png" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-9 col-9">
                                                <h3>Matts Francesca</h3>
                                                <div class="d-flex align-items-center mb-2 mt-2">
                                                    <div class="mr-2"><img src="img/call.svg" alt=""></div>
                                                    <div>
                                                        <h4>+256 758711344</h4>
                                                    </div>
                                                </div>
                                                <div class="d-flex ">
                                                    <div class="mr-2"><img src="img/loaction.svg" alt=""></div>
                                                    <div>
                                                        <h4>Plot 11,Luwum St. Rwoozi, Kampala - 23489...</h4>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="row mt-2 mt-sm-3">
                    <div class="col-md-8">
                        <div class="row">
                            <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">
                                <button type="button" class="btn save-btn">Account Statment</button>
                            </div>
                        </div>

                        <div class="row mt-3">
                            <div class="col-md-3 mb-3 mb-sm-0 col-6">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money.svg" alt="">
                                    </div>
                                    <h3>UGX 1.8M</h3>
                                    <h4>Investment</h4>
                                </div>
                            </div>
                            <div class="col-md-3  mb-3 mb-sm-0 col-6">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money2.svg" alt="">
                                    </div>
                                    <h3>UGX 2.4M</h3>
                                    <h4>Revenue</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money3.svg" alt="">
                                    </div>
                                    <h3>133%</h3>
                                    <h4>ROI</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money4.svg" alt="">
                                    </div>
                                    <h3>UGX 1M</h3>
                                    <h4>Loan</h4>
                                </div>
                            </div>

                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money5.svg" alt="">
                                    </div>
                                    <h3>UGX 1.8M</h3>
                                    <h4>Investment</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money6.svg" alt="">
                                    </div>
                                    <h3>UGX 2.4M</h3>
                                    <h4>Revenue</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money7.svg" alt="">
                                    </div>
                                    <h3>133%</h3>
                                    <h4>ROI</h4>
                                </div>
                            </div>
                            <div class="col-md-3 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="img/money8.svg" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-4 text-right">
                                            <a href="#">
                                                <i class="fa fa-ellipsis-v kpi-dotsicon" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <h3>UGX 1M</h3>
                                    <h4>Loan</h4>
                                </div>
                            </div>

                            <div class="col-md-3 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="img/money5.svg" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-4 text-right">
                                            <a href="#">
                                                <i class="fa fa-ellipsis-v kpi-dotsicon" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                    </div>
                                    <h3>UGX 1.8M</h3>
                                    <h4>Investment</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money6.svg" alt="">
                                    </div>
                                    <h3>UGX 2.4M</h3>
                                    <h4>Revenue</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money7.svg" alt="">
                                    </div>
                                    <h3>133%</h3>
                                    <h4>ROI</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money9.svg" alt="">
                                    </div>
                                    <h3>UGX 1M</h3>
                                    <h4>Loan</h4>
                                </div>
                            </div>

                            <div class="col-md-3 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="img/money10.svg" alt="">
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-4 text-right">
                                            <a href="#">
                                                <i class="fa fa-ellipsis-v kpi-dotsicon" aria-hidden="true"></i>
                                            </a>
                                        </div>
                                    </div>
                                    
                                    <h3>133%</h3>
                                    <h4>ROI</h4>
                                </div>
                            </div>
                            <div class="col-md-3 col-6 mt-3">
                                <div class="farmer-kpibox">
                                    <div class="farmer-kpiboximg">
                                        <img src="img/money8.svg" alt="">
                                    </div>
                                    <h3>UGX 1M</h3>
                                    <h4>Loan</h4>
                                </div>
                            </div>


                        </div>

                        <label class="accord-label mt-4">Project Milestones</label>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="water-tankcheck applied-check">
                                    <input type="checkbox" class="filled-in" id="exampleCheck01">
                                    <label class="education-label" for="exampleCheck01">
                                        <div class="water-tankcheckinnerbox">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <h2>Installation of water pump</h2>
                                                    <h3>04 tasks included in this milestone.
                                                        <span><a href="#">Remarks 
                                                            <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                data-toggle="tooltip" data-placement="bottom"
                                                                title="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"
                                                                alt="/">
                                                        </a></span>
                                                    </h3>
                                                </div>
                                                <div class="col-md-4"></div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-md-3 col-4">
                                                    <h5>Value</h5>
                                                    <h6 class="red-text">UGX 600k</h6>
                                                </div>
                                                <div class="col-md-3 col-4">
                                                    <h5>Value</h5>
                                                    <h6>15 days</h6>
                                                </div>
                                                <div class="col-md-3 col-4">
                                                    <h5>Value</h5>
                                                    <h6>15 days</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>

                                <div class="water-tankcheckinnerbox mt-5" data-toggle="modal"
                                    data-target="#join-menu" >
                                    <div class="row">
                                        <div class="col-md-8 col-8">
                                            <h2>Installation of water pump</h2>
                                            <h3>04 tasks included in this milestone. </h3>
                                        </div>
                                        <div class="col-md-4 col-4">
                                            <div class="progress-circle progress-25 float-right">
                                                <h5 class="progress-txt">25% <span class="progress-txtgray">Completed</span></h5>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-sm-0 mt-3">
                                        <div class="col-md-3 col-4">
                                            <h5>Value</h5>
                                            <h6 class="red-text">UGX 600k</h6>
                                        </div>
                                        <div class="col-md-3 col-4">
                                            <h5>Value</h5>
                                            <h6>15 days</h6>
                                        </div>
                                        <div class="col-md-3 col-4">
                                            <h5>Value</h5>
                                            <h6>15 days</h6>
                                        </div>
                                    </div>
                                </div>

                                <div class="water-tankcheck applied-check mt-4 mt-sm-2">
                                    <input type="checkbox" class="filled-in" id="exampleCheck03">
                                    <label class="education-label" for="exampleCheck03">
                                        <div class="water-tankcheckinnerbox">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    <h2>Installation of water pump</h2>
                                                    <h3>04 tasks included in this milestone.</h3>
                                                </div>
                                                <div class="col-md-4"></div>
                                            </div>
                                            <div class="row mt-3">
                                                <div class="col-md-3 col-4">
                                                    <h5>Value</h5>
                                                    <h6 class="red-text">UGX 600k</h6>
                                                </div>
                                                <div class="col-md-3 col-4">
                                                    <h5>Value</h5>
                                                    <h6>15 days</h6>
                                                </div>
                                                <div class="col-md-3 col-4">
                                                    <h5>Value</h5>
                                                    <h6>15 days</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-md-12">`
                                <div class="accordion project-detailsaccord" id="accordionExample">
                                    <div class="card">
                                        <div class="card-header" id="headingOne">
                                            <h2 class="mb-0">
                                                <button class="btn" type="button" data-toggle="collapse"
                                                    data-target="#collapseOne" aria-expanded="true"
                                                    aria-controls="collapseOne">
                                                    <div class="row align-items-sm-center">
                                                        <div class="col-md-8 col-9">
                                                            <p>Payment Terms</p>
                                                        </div>
                                                        <div class="col-md-4 col-3">
                                                            <div class="row justify-content-end">
                                                                <div class="col-md-2">
                                                                    <div class="arow-boxprojectdetails">
                                                                        <i class="fa fa-angle-up"
                                                                            aria-hidden="true"></i>
                                                                        <i class="fa fa-angle-down"
                                                                            aria-hidden="true"></i>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </button>
                                            </h2>
                                        </div>

                                        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
                                            data-parent="#accordionExample">
                                            <div class="card-body pt-0">
                                                <div class="projectdetails-accordcontent">
                                                    <div class="row">
                                                        <div class="col-md-9">
                                                            <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>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card">
                                        <div class="card-header" id="headingTwo">
                                            <h2 class="mb-0">
                                                <button class="btn collapsed" type="button"
                                                    data-toggle="collapse" data-target="#collapseTwo"
                                                    aria-expanded="false" aria-controls="collapseTwo">
                                                    <div class="row align-items-sm-center">
                                                        <div class="col-md-8 col-10">
                                                            <p>Loan documents</p>
                                                        </div>
                                                        <div class="col-md-4 col-2">
                                                            <div class="row justify-content-end">
                                                                <div class="col-md-2">
                                                                    <div class="arow-boxprojectdetails">
                                                                        <i class="fa fa-angle-up"
                                                                            aria-hidden="true"></i>
                                                                        <i class="fa fa-angle-down"
                                                                            aria-hidden="true"></i>
                                                                    </div>
                                                                </div>
                                                            </div>

                                                        </div>
                                                    </div>
                                                </button>
                                            </h2>
                                        </div>
                                        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                            data-parent="#accordionExample">
                                            <div class="card-body pt-0">
                                                <div class="projectdetails-accordcontent">
                                                    <div class="row">
                                                        <div class="col-md-9">
                                                            <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>
                                                    </div>

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

                    </div>

                    <div class="col-md-4">
                        <div class="pl-sm-3">
                            <label class="accord-label mb-0">Project timeline</label>
                            <p class="stauts-belowtext">You can check the status below:</p>

                            <div class="row mt-3 mb-3">
                                <div class="col-md-12">
                                    <div class="timeline-new">
                                        <div class="row align-items-center">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox">
                                                    <img src="img/job.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-7 col-9">
                                                            <h4>Applied</h4>
                                                            <h6>Loan application submitted by the farmer.</h6>
                                                        </div>
                                                        <div class="col-md-5 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck1">
                                                                <label class="" for="exampleCheck1"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-2 mt-sm-3">
                                                        <div class="col-md-6 col-7">
                                                            <p>21 Feb, 23 by: Hurton</p>
                                                        </div>
                                                        <div class="col-md-6 col-5 text-right">
                                                            <h3><a href="#">Remarks 
                                                                <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                    data-toggle="tooltip" data-placement="bottom"
                                                                    title="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"
                                                                    alt="/">
                                                            </a> </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row align-items-center pt-3">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox timeline-activebox2">
                                                    <img src="img/download.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-8 col-9">
                                                            <h4>Pre-approved</h4>
                                                            <h6>Application pre-approved by the Credit Committee
                                                                and survey is in progress.</h6>
                                                        </div>
                                                        <div class="col-md-4 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck11">
                                                                <label class="" for="exampleCheck11"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-2 mt-sm-3">
                                                        <div class="col-md-6 col-7">
                                                            <p>21 Feb, 23 by: Hurton</p>
                                                        </div>
                                                        <div class="col-md-6 col-5 text-right">
                                                            <h3><a href="#">Remarks 
                                                                <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                    data-toggle="tooltip" data-placement="bottom"
                                                                    title="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"
                                                                    alt="/">
                                                            </a> </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row align-items-center pt-3">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox timeline-activebox3">
                                                    <img src="img/survey.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-8 col-9">
                                                            <h4>Survey Completed</h4>
                                                            <h6>Survey of the site completed by the service
                                                                provider.</h6>
                                                        </div>
                                                        <div class="col-md-4 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck12">
                                                                <label class="" for="exampleCheck12"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-sm-3 mt-2">
                                                        <div class="col-md-6 col-7">
                                                            <p>21 Feb, 23 by: Hurton</p>
                                                        </div>
                                                        <div class="col-md-6 col-5 text-right">
                                                            <h3><a href="#">Remarks 
                                                                <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                    data-toggle="tooltip" data-placement="bottom"
                                                                    title="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"
                                                                    alt="/">
                                                            </a> </h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row align-items-center pt-3">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox timeline-activebox3">
                                                    <img src="img/verfied-check.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-8 col-9">
                                                            <h4>Verified</h4>
                                                            <h6>Details verified and accepted by the farmer.
                                                            </h6>
                                                        </div>
                                                        <div class="col-md-4 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck13">
                                                                <label class="" for="exampleCheck13"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-sm-3 mt-2">
                                                        <div class="col-md-6 col-7">
                                                            <p>21 Feb, 23 by: Hurton</p>
                                                        </div>
                                                        <div class="col-md-6 col-5 text-right">
                                                            <h3><a href="#">Remarks 
                                                                <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                    data-toggle="tooltip" data-placement="bottom"
                                                                    title="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"
                                                                    alt="/">
                                                            </a></h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row align-items-center pt-3">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox timeline-activebox4">
                                                    <img src="img/check-app.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-8 col-9">
                                                            <h4>Approved</h4>
                                                            <h6>Loan approved by the Credit Committee.</h6>
                                                        </div>
                                                        <div class="col-md-4 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck14">
                                                                <label class="" for="exampleCheck14"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-sm-3 mt-2">
                                                        <div class="col-md-6 col-7">
                                                            <p>21 Feb, 23 by: Hurton</p>
                                                        </div>
                                                        <div class="col-md-6 col-5 text-right">
                                                            <h3><a href="#">Remarks 
                                                                <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                    data-toggle="tooltip" data-placement="bottom"
                                                                    title="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"
                                                                    alt="/">
                                                            </a></h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row align-items-center pt-3">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox timeline-activebox5">
                                                    <img src="img/accepted.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-8 col-9">
                                                            <h4>Accepted</h4>
                                                            <h6>Loan approved by the Credit Committee.</h6>
                                                        </div>
                                                        <div class="col-md-4 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck15">
                                                                <label class="" for="exampleCheck15"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="row mt-sm-3 mt-2">
                                                        <div class="col-md-6 col-7">
                                                            <p>21 Feb, 23 by: Hurton</p>
                                                        </div>
                                                        <div class="col-md-6 col-5 text-right">
                                                            <h3><a href="#">Remarks 
                                                                <img src="img/info-circle.svg" class="far fa-trash-alt ml-1 "
                                                                    data-toggle="tooltip" data-placement="bottom"
                                                                    title="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"
                                                                    alt="/">
                                                            </a></h3>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row align-items-center pt-3">
                                            <div class="col-md-2 col-2">
                                                <div class="timeline-activebox timeline-activebox6">
                                                    <img src="img/complete.svg" alt="">
                                                </div>
                                            </div>
                                            <div class="col-md-10 col-10 pl-sm-0">
                                                <div class="timeline-boxcontent">
                                                    <div class="row">
                                                        <div class="col-md-8 col-9">
                                                            <h4>Completed</h4>
                                                            <h6>Project is completed.</h6>
                                                        </div>
                                                        <div class="col-md-4 col-3 text-right">
                                                            <div class="applied-check">
                                                                <input type="checkbox" class="filled-in"
                                                                    id="exampleCheck16">
                                                                <label class="" for="exampleCheck16"></label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <h2>Pending</h2>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <a href="#" class="progress-tracktext">Track the progress</a>

                        </div>
                    </div>

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

    </div>
    <div class="chat-botbox">
        <img src="{{asset('assets/img/chat-botimg.svg')}}" alt="">
    </div>
    </div>
    <!-- Start Side Modal Section -->
	<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="img/dash-cross.svg" class="cross-dash" alt="">
						</span>
					</button>
				</div>
				<div class="modal-body pt-0">
					<div class="row align-items-center">
						<div class="col-md-9 col-9">
							<div class="pop-head">
								<h2>Pipeline installation</h2>
							</div>
						</div>
						<div class="col-md-3 col-3">
							<div class="progress-circle progress-25 float-right">
								<h5 class="progress-txt">25% <span class="progress-txtgray">Completed</span></h5>
							</div>
						</div>
					</div>

					<div class="inner-popcontent">
						<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>Value</h6>
								<h5>12 days</h5>
							</div>
							<div>
								<h6>Value</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="attributes-contentbox">
						<div class="row align-items-center">
							<div class="col-md-8 col-9">
								<h4>Various versions have evolved</h4>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="applied-check pb-2">
									<input type="checkbox" class="filled-in" id="exampleCheck76">
									<label class="" for="exampleCheck76"></label>
								</div>
							</div>
						</div>
					</div>
					<div class="attributes-contentbox mt-2">
						<div class="row align-items-center">
							<div class="col-md-8 col-9">
								<h4>Various versions have evolved</h4>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="applied-check pb-2">
									<input type="checkbox" class="filled-in" id="exampleCheck77">
									<label class="" for="exampleCheck77"></label>
								</div>
							</div>
						</div>
					</div>
					<div class="attributes-contentbox mt-2">
						<div class="row align-items-center">
							<div class="col-md-8 col-9">
								<h4>Various versions have evolved</h4>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="applied-check pb-2">
									<input type="checkbox" class="filled-in" id="exampleCheck78">
									<label class="" for="exampleCheck78"></label>
								</div>
							</div>
						</div>
					</div>
					<div class="attributes-contentbox mt-2">
						<div class="row align-items-center">
							<div class="col-md-8 col-9">
								<h4>Various versions have evolved</h4>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="applied-check pb-2">
									<input type="checkbox" class="filled-in" id="exampleCheck79">
									<label class="" for="exampleCheck79"></label>
								</div>
							</div>
						</div>
					</div>
					<div class="attributes-contentbox mt-2">
						<div class="row align-items-center">
							<div class="col-md-8 col-9">
								<h4>Various versions have evolved</h4>
							</div>
							<div class="col-md-4 col-3 text-right">
								<div class="applied-check pb-2">
									<input type="checkbox" class="filled-in" id="exampleCheck80">
									<label class="" for="exampleCheck80"></label>
								</div>
							</div>
						</div>
					</div>

					<label class="upload-poplabel mt-2 mt-sm-4">Uploaded pictures</label>
					<div class="row mb-3 mb-sm-5">
						<div class="col-md-6 col-6">
							<div class="pop-uploadimgbox">
								<img src="img/project-leftimg.png" alt="">
								<span class="badge value-badge badge-position">12 Jun,23</span>
							</div>
						</div>
						<div class="col-md-6 col-6">
							<div class="pop-uploadimgbox">
								<img src="img/project-leftimg.png" alt="">
								<span class="badge value-badge badge-position">12 Jun,23</span>
							</div>
						</div>
						<div class="col-md-6 col-6 mt-2">
							<div class="pop-uploadimgbox">
								<img src="img/project-leftimg.png" alt="">
								<span class="badge value-badge badge-position">12 Jun,23</span>
							</div>
						</div>
						<div class="col-md-6 col-6 mt-2">
							<div class="pop-uploadimgbox">
								<img src="img/project-leftimg.png" alt="">
								<span class="badge value-badge badge-position">12 Jun,23</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <!-- Close Side Modal Section -->
@endsection