@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-12">
                      <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">

                            <div class="row">
                                <div class="col-md-7">
                                    <div class="top-head">
                                        <h1>Projects</h1>
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="#">Settings</a></li>
                                                <li class="breadcrumb-item"><a href="#">Projects</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Add projects</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col-md-5 text-sm-right text-left">
                                    <button type="button" data-target="#profile" data-toggle="tab" class="btn save-btn">Save & Next</button>
                                </div>
                            </div>

                            <ul class="supplier-tab mt-3">
                                <li class="active">
                                    <span class="tab-circle" ><i class="fa fa-check" aria-hidden="true"></i></span>  1. Project Details
                                </li>
                                <li>
                                   <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 2. Project Milestones
                                </li>
                                <li>
                                  <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 3. Project Pricing
                                </li>
                                <li>
                                     <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 4. Payment Terms</a>
                                </li>
                            </ul>

                            <div class="row mt-4 mt-sm-5">
                                <div class="col-md-12">
                                    <div class="user-editbox">
                                        <div class="row">
                                            <div class="col-md-6 col-7">
                                                <div class="inner-head">
                                                    <p>Project Details</p>
                                                </div>
                                            </div>
                                            <div class="col-md-6 col-5">
                                                <div class="toogleSwitch float-right">
                                                    <label class="switch">
                                                        <input type="checkbox" />
                                                        <div class="slider round">
                                                            <span class="swactive">Active</span>
                                                            <span class="swinactive">Inactive</span>
                                                        </div>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="border-bottom pt-2 mb-4"></div>
    
                                        <div class="row justify-content-center">
                                            <div class="col-md-9">
    
                                                <div class="edit-userprofile">
                                                    <img src="{{ asset('assets/img/edit-user.png') }}" alt="">
                                                </div>
    
                                                <div class="d-flex justify-content-center">
                                                    <div class="upload-btn-wrapper">
                                                        <button class="uploadBtn">
                                                            Tap to change <span>photo</span> 
                                                        </button>
                                                        <input type="file">
                                                    </div>
                                                </div>
    
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <span class="size-img">Max size 20 MB</span>
                                                </div>
    
    
                                                <div class="form-group mt-4">
                                                    <label class="edit-label">Project Name</label>
                                                    <input type="email" class="form-control edit-input" placeholder="Enter Project Name">
                                                </div>
    
                                                <div class="form-group">
                                                    <label class="edit-label">Improvement Area</label>
                                                    <select class="form-control edit-input edit-select">
                                                        <option>Select Improvement Area</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>
                                                </div>
    
                                                <div class="form-group">
                                                    <label class="edit-label">Description</label>
                                                    <textarea class="form-control edit-input" rows="3" placeholder="Write..."></textarea>
                                                </div>
    
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <label class="edit-label">Survey completion period (for Service Provider)</label>
                                                        <div class="input-group mb-3">
                                                            <input type="text" class="form-control edit-input" placeholder="eg: 02"  >
                                                            <div class="input-group-append new-daysbox">
                                                              <span class="input-group-text" id="basic-addon2">Days</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <label class="edit-label">Repayment start period (for Farmer)</label>
                                                        <div class="input-group mb-3">
                                                            <input type="text" class="form-control edit-input" placeholder="eg: 02"  >
                                                            <div class="input-group-append new-daysbox">
                                                              <span class="input-group-text" id="basic-addon2">Days</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
    
                                            </div>
                                        </div>
    
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="top-head">
                                        <h1>Projects</h1>
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="#">Settings</a></li>
                                                <li class="breadcrumb-item"><a href="#">Projects</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Project Milestones</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col-md-5 text-sm-right text-left">
                                    <button type="button" data-target="#home" data-toggle="tab" class="btn cancel-btn mr-1 mr-sm-2">Back</button>
                                    <button type="button" data-target="#contact" data-toggle="tab" class="btn save-btn">Save & Next</button>
                                </div>
                            </div>

                            <ul class="supplier-tab mt-3">
                                <li class="active" >
                                    <span class="tab-circle" ><i class="fa fa-check" aria-hidden="true"></i></span>  1. Project Details
                                </li>
                                <li class="active" >
                                   <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 2. Project Milestones
                                </li>
                                <li>
                                  <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 3. Project Pricing
                                </li>
                                <li>
                                     <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 4. Payment Terms</a>
                                </li>
                            </ul>

                            <div class="row mt-4 mt-sm-5">
                                <div class="col-md-12">
                                    <div class="accordion settings-accord" 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-center">
                                                <div class="col-md-9 col-9">
                                                <p>  Milestone One</p>
                                                </div>
                                                <div class="col-md-3 col-3">
                                                    <i class="fa-fa-plus float-right" aria-hidden="true"></i>
                                                    <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                                </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="border-bottom"></div>
                                                <div class="row mt-3">
                                                    <div class="col-md-6 mb-sm-0 mb-3">
                                                        <div class="form-group">
                                                            <label class="edit-label">Title</label>
                                                            <input type="email" class="form-control edit-input" placeholder="Water tank">
                                                        </div>

                                                        <div class="form-group">
                                                            <label class="edit-label">Description</label>
                                                                <textarea class="form-control edit-input" placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since." rows="3"></textarea>
                                                        </div>
                                                        <div class="mb-2">
                                                            <label class="edit-label">Task Involved</label>
                                                            <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>

                                                    <div class="col-md-6">
                                                        <div class="mb-2">
                                                            <label class="edit-label">Applicable Type</label>
                                                            <input type="email" class="form-control edit-input" placeholder="Plastic">
                                                        </div>
                                                        <span class="badge plastic-badge">Plastic
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Concrete
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Lorem Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Plastic
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Concrete
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Lorem Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>

                                                        <div class="mb-2 mt-3 mt-sm-4">
                                                            <label class="edit-label">Applicable Size/Capacity</label>
                                                            <input type="email" class="form-control edit-input" placeholder="eg: 15 Days">
                                                        </div>

                                                        <span class="badge plastic-badge">5000 Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">20,000Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">50,000 Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>

                                                        <div class="mb-2 mt-3 mt-sm-4">
                                                            <label class="edit-label">Milestone Duration</label>
                                                            <input type="email" class="form-control edit-input" placeholder="eg: 15 Days">
                                                        </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-center">
                                                    <div class="col-md-9 col-9">
                                                    <p>Milestone Two</p>
                                                    <span>Pipeline installation</span>
                                                    </div>
                                                    <div class="col-md-3 col-3">
                                                        <i class="fa-fa-plus float-right" aria-hidden="true"></i>
                                                        <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                              </button>
                                            </h2>
                                          </div>
                                          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                            <div class="card-body pt-0">
                                                <div class="border-bottom"></div>
                                                <div class="row mt-3">
                                                    <div class="col-md-6 mb-sm-0 mb-3">
                                                        <div class="form-group">
                                                            <label class="edit-label">Title</label>
                                                            <input type="email" class="form-control edit-input" placeholder="Water tank">
                                                        </div>

                                                        <div class="form-group">
                                                            <label class="edit-label">Description</label>
                                                                <textarea class="form-control edit-input" placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since." rows="3"></textarea>
                                                        </div>
                                                        <div class="mb-2">
                                                            <label class="edit-label">Task Involved</label>
                                                            <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>

                                                    <div class="col-md-6">
                                                        <div class="mb-2">
                                                            <label class="edit-label">Applicable Type</label>
                                                            <input type="email" class="form-control edit-input" placeholder="Plastic">
                                                        </div>
                                                        <span class="badge plastic-badge">Plastic
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Concrete
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Lorem Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Plastic
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Concrete
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Lorem Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>

                                                        <div class="mb-2 mt-3 mt-sm-4">
                                                            <label class="edit-label">Applicable Size/Capacity</label>
                                                            <input type="email" class="form-control edit-input" placeholder="eg: 15 Days">
                                                        </div>

                                                        <span class="badge plastic-badge">5000 Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">20,000Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">50,000 Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>

                                                        <div class="mb-2 mt-3 mt-sm-4">
                                                            <label class="edit-label">Milestone Duration</label>
                                                            <input type="email" class="form-control edit-input" placeholder="eg: 15 Days">
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="card">
                                          <div class="card-header" id="headingThree">
                                            <h2 class="mb-0">
                                              <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" 
                                              aria-expanded="false" aria-controls="collapseThree">
                                              <div class="row align-items-center">
                                                <div class="col-md-9 col-9">
                                                <p>Milestone Three</p>
                                                <span>Pipeline installation</span>
                                                </div>
                                                <div class="col-md-3 col-3">
                                                    <i class="fa-fa-plus float-right" aria-hidden="true"></i>
                                                    <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                              </button>
                                            </h2>
                                          </div>
                                          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                            <div class="card-body pt-0">
                                                <div class="border-bottom"></div>
                                                <div class="row mt-3">
                                                    <div class="col-md-6 mb-sm-0 mb-3">
                                                        <div class="form-group">
                                                            <label class="edit-label">Title</label>
                                                            <input type="email" class="form-control edit-input" placeholder="Water tank">
                                                        </div>

                                                        <div class="form-group">
                                                            <label class="edit-label">Description</label>
                                                                <textarea class="form-control edit-input" placeholder="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since." rows="3"></textarea>
                                                        </div>
                                                        <div class="mb-2">
                                                            <label class="edit-label">Task Involved</label>
                                                            <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>

                                                    <div class="col-md-6">
                                                        <div class="mb-2">
                                                            <label class="edit-label">Applicable Type</label>
                                                            <input type="email" class="form-control edit-input" placeholder="Plastic">
                                                        </div>
                                                        <span class="badge plastic-badge">Plastic
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Concrete
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Lorem Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Plastic
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Concrete
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">Lorem Ipsum
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>

                                                        <div class="mb-2 mt-3 mt-sm-4">
                                                            <label class="edit-label">Applicable Size/Capacity</label>
                                                            <input type="email" class="form-control edit-input" placeholder="eg: 15 Days">
                                                        </div>

                                                        <span class="badge plastic-badge">5000 Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">20,000Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>
                                                        <span class="badge plastic-badge">50,000 Ltr.
                                                            <span class="cross-plastic"><i class="fa fa-times" aria-hidden="true"></i></span>
                                                        </span>

                                                        <div class="mb-2 mt-3 mt-sm-4">
                                                            <label class="edit-label">Milestone Duration</label>
                                                            <input type="email" class="form-control edit-input" placeholder="eg: 15 Days">
                                                        </div>
                                                    </div>
                                                    
                                                </div>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <div class="row">
                                <div class="col-md-7 col-10">
                                    <div class="top-head">
                                        <h1>Projects</h1>
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="#">Settings</a></li>
                                                <li class="breadcrumb-item"><a href="#">Projects</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Project Pricing</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col-md-5 text-sm-right text-left">
                                    <button type="button" data-target="#profile" data-toggle="tab" class="btn cancel-btn mr-2">Back</button>
                                    <button type="button" data-target="#contactnew" data-toggle="tab" class="btn save-btn">Save & Next</button>
                                </div>
                            </div>

                            <ul class="supplier-tab mt-3">
                                <li class="active" >
                                    <span class="tab-circle" ><i class="fa fa-check" aria-hidden="true"></i></span>  1. Project Details
                                </li>
                                <li class="active" >
                                   <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 2. Project Milestones
                                </li>
                                <li  class="active" >
                                  <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 3. Project Pricing
                                </li>
                                <li>
                                     <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 4. Payment Terms</a>
                                </li>
                            </ul>

                            <div class="row mt-3 mt-sm-5">
                                <div class="col-md-12">
                                    <div class="top-head text-center">
                                        <h1>Dam Construction <span>(Water Facility)</span></h1>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div class="accordion settings-accord" 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-center">
                                                <div class="col-md-9 col-9">
                                                <p>Milestone One</p>
                                                <span>Pipeline installation</span>
                                                </div>
                                                <div class="col-md-3 col-3">
                                                    <i class="fa-fa-plus float-right" aria-hidden="true"></i>
                                                    <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                                </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="water-facilitybox mt-2">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <h6>Material Type</h6>
                                                            <h5>Plastic</h5>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">5000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">20,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div>
                                                                <label class="edit-label">50,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="water-facilitybox mt-3">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <h6>Material Type</h6>
                                                            <h5>Plastic</h5>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">5000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">20,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div>
                                                                <label class="edit-label">50,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </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-center">
                                                    <div class="col-md-9 col-9">
                                                    <p>Milestone Two</p>
                                                    <span>Pipeline installation</span>
                                                    </div>
                                                    <div class="col-md-3 col-3 text-right">
                                                        <small class="green-update">Updated</small>
                                                        <i class="fa-fa-plus float-right" aria-hidden="true"></i>
                                                        <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                                    </div>
                                                </div>
                                              </button>
                                            </h2>
                                          </div>
                                          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                            <div class="card-body pt-0">
                                                <div class="water-facilitybox mt-2">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <h6>Material Type</h6>
                                                            <h5>Plastic</h5>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">5000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">20,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div>
                                                                <label class="edit-label">50,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="water-facilitybox mt-3">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <h6>Material Type</h6>
                                                            <h5>Plastic</h5>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">5000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">20,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div>
                                                                <label class="edit-label">50,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="card">
                                          <div class="card-header" id="headingThree">
                                            <h2 class="mb-0">
                                              <button class="btn collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" 
                                              aria-expanded="false" aria-controls="collapseThree">
                                              <div class="row align-items-center">
                                                <div class="col-md-9 col-9">
                                                <p>Milestone Three</p>
                                                <span>Pipeline installation</span>
                                                </div>
                                                <div class="col-md-3 col-3 text-right">
                                                    <small class="green-update not-updatetext">Not Updated</small>
                                                    <i class="fa-fa-plus float-right" aria-hidden="true"></i>
                                                    <i class="fa fa-minus float-right" aria-hidden="true"></i>
                                                </div>
                                            </div>
                                              </button>
                                            </h2>
                                          </div>
                                          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
                                            <div class="card-body pt-0">
                                                <div class="water-facilitybox mt-2">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <h6>Material Type</h6>
                                                            <h5>Plastic</h5>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">5000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">20,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div>
                                                                <label class="edit-label">50,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="water-facilitybox mt-3">
                                                    <div class="row">
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <h6>Material Type</h6>
                                                            <h5>Plastic</h5>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">5000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3 mb-2 mb-sm-0">
                                                            <div>
                                                                <label class="edit-label">20,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <div>
                                                                <label class="edit-label">50,000 Ltr.</label>
                                                                <input type="email" class="form-control edit-input facility-input" placeholder="UGX">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="tab-pane fade" id="contactnew" role="tabpanel" aria-labelledby="contact-tabnew">
                            <div class="row">
                                <div class="col-md-7 col-10">
                                    <div class="top-head">
                                        <h1>Projects</h1>
                                        <nav aria-label="breadcrumb">
                                            <ol class="breadcrumb">
                                                <li class="breadcrumb-item"><a href="#">Settings</a></li>
                                                <li class="breadcrumb-item"><a href="#">Projects</a></li>
                                                <li class="breadcrumb-item active" aria-current="page">Project Pricing</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <div class="col-md-5 text-sm-right text-left">
                                    <button type="button" data-target="#contact" data-toggle="tab" class="btn cancel-btn mr-1 mr-sm-2">Back</button>
                                    <button type="button" class="btn draft-btn mr-1 mr-sm-2"> <img src="{{ asset('assets/img/loding.svg" c') }}lass="mr-1" alt=""> Save as Draft</button>
                                    <button type="button" data-target="###" data-toggle="tab" class="btn save-btn">Publish</button>
                                </div>
                            </div>

                            <ul class="supplier-tab mt-3">
                                <li class="active" >
                                    <span class="tab-circle" ><i class="fa fa-check" aria-hidden="true"></i></span>  1. Project Details
                                </li>
                                <li class="active" >
                                   <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 2. Project Milestones
                                </li>
                                <li  class="active" >
                                  <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 3. Project Pricing
                                </li>
                                <li class="active">
                                     <span class="tab-circle"><i class="fa fa-check" aria-hidden="true"></i></span> 4. Payment Terms</a>
                                </li>
                            </ul>

                            <div class="user-editbox new-usereditbox mt-3 mt-sm-5">
                                <div class="row">
                                    <div class="col-md-8 mb-3 mb-sm-0">
                                        <div class="inner-head">
                                            <p>Advance</p>
                                            <h6>At the start of the project</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control edit-input" placeholder="eg: 25%">
                                            <div class="input-group-append new-daysbox">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="user-editbox new-usereditbox mt-3">
                                <div class="row">
                                    <div class="col-md-8 mb-3 mb-sm-0">
                                        <div class="inner-head">
                                            <p>Installation of water tank</p>
                                            <h6>On Completion of Milestone one</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control edit-input" placeholder="eg: 25%">
                                            <div class="input-group-append new-daysbox">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="user-editbox new-usereditbox mt-3">
                                <div class="row">
                                    <div class="col-md-8 mb-3 mb-sm-0">
                                        <div class="inner-head">
                                            <p>Pipeline installation</p>
                                            <h6>On Completion of Milestone two</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control edit-input" placeholder="eg: 25%">
                                            <div class="input-group-append new-daysbox">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="user-editbox new-usereditbox mt-3">
                                <div class="row">
                                    <div class="col-md-8 mb-3 mb-sm-0">
                                        <div class="inner-head">
                                            <p>Installation of water pump</p>
                                            <h6>On Completion of Milestone three</h6>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="input-group">
                                            <input type="text" class="form-control edit-input" placeholder="eg: 25%">
                                            <div class="input-group-append new-daysbox">
                                                <span class="input-group-text" id="basic-addon2">%</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

            <div class="row mt-5 justify-content-center">
                <div class="col-md-4">
                    <div class="pagination_rounded">
                        <ul>
                            <li>
                                <a href="#" class="prev">
                                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li class="active"><a href="#">1</a> </li>
                            <li class="hidden-xs"><a href="#">2</a> </li>
                            <li class="hidden-xs"><a href="#">3</a> </li>
                            <li class="visible-xs"><a href="#">4</a> </li>
                            <li>
                                <a href="#" class="next">
                                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>


            <div class="row my-3 my-sm-5">
                <div class="col-md-12">
                    <p class="copy-right">Glad website © . All rights reserved.</p>
                </div>
            </div>

        </div>

    </div>
</section>
@endsection