import React from 'react'
import Layout from '../components/layout/Layout'

function water() {
  return (
    <Layout headTitle="Dashboard" pageTitle="Water" pageTitleSub={""} pageClass={"dashboard"} parent={"Home"} child={"Water"}>
    <div className="row">
        <div className="col-xxl-12 col-xl-12 col-lg-12">
            <div className="card">
                <div className="card-header">
                    <h4 className="card-title">Create Connection</h4>
                </div>
                <div className="card-body">
                    <form className="invoice-form">
                        <form>
                            <div className="row justify-content-between">
                                <div className="col-xl-6">
                                    <div className="mb-3">
                                        <label className="form-label">Name</label>
                                        <input type="email" className="form-control" placeholder="Jonaed Bogdadi"/>
                                    </div>
                                    <div className="mb-3">
                                        <label className="form-label">Email</label>
                                        <input type="email" className="form-control"
                                            placeholder="Jonaed@bogdad.com "/>
                                    </div>
                                    <div className="mb-3">
                                        <label className="form-label">Location</label>
                                        <input type="text" className="form-control"
                                            placeholder="Location"/>
                                    </div>
                                </div>
                                <div className="col-xl-6">
                                    <div className="mb-3">
                                        <label className="form-label">Phone</label>
                                        <input type="number" className="form-control" placeholder="+91 9876543218"/>
                                    </div>
                                    <div className="mb-3">
                                        <label className="form-label">Pincode</label>
                                        <input type="text" className="form-control" placeholder="987654"/>
                                    </div>
                                    <div className="mb-3">
                                        <label className="form-label">Address</label>
                                        <input type="text" className="form-control"
                                            placeholder="Address"/>
                                    </div>
                                </div>
                            </div>
                                <div className='d-none'>
                                <div className="row">
                                <div className="mb-3 col-xl-6">
                                    <label className="form-label">Items</label>
                                    <input type="email" className="form-control" placeholder="Wireframe" />
                                </div>
                                <div className=" mb-3 col-xl-3">
                                    <label className="form-label">Quantity</label>
                                    <input type="email" className="form-control" placeholder="360"/>
                                </div>
                                <div className="mb-3 col-xl-2">
                                    <label className="form-label">Price</label>
                                    <input type="email" className="form-control" placeholder="82"/>
                                </div>
                                <div className="col-1">
                                    <span><i className="ri-close-fill"></i></span>
                                </div>
                            </div>
                            <div className="row">
                                <div className="mb-3 col-xl-6">
                                    <input type="email" className="form-control" placeholder="High-Fidelity"/>
                                </div>
                                <div className="mb-3 col-xl-3">
                                    <input type="email" className="form-control" placeholder="220"/>
                                </div>
                                <div className="mb-3 col-xl-2">
                                    <input type="email" className="form-control" placeholder="67"/>
                                </div>
                                <div className="col-1">
                                    <span><i className="ri-close-fill"></i></span>
                                </div>
                            </div>
                            <div className="add-reset d-flex justify-content-between">
                                <button className="btn btn-outline-primary"><span><i
                                            className="bi bi-plus"></i></span>Reset</button>
                                <button className="btn btn-primary"><span><i className="bi bi-plus"></i></span>Add
                                    Item</button>
                            </div>
                            </div>
                        </form>
                    </form>
                    <div className="text-end">
                        <a href="#" className="btn btn-primary">Save</a>
                        {/* <a href="#" className="btn btn-outline-primary">Send</a> */}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div className="row">
    <div className="col-xxl-12 col-xl-12 col-lg-12">
            <div className='pb-2 card'>
                <div className="payments-content">
                            <div className="table-responsive">
                                <table className="table">
                                    <thead>
                                        <tr>
                                            <th>
                                                <div className="form-check">
                                                    <input className="form-check-input" type="checkbox" value="" id="flexCheckDefault"/>
                                                </div>
                                            </th>
                                            <th>Application No</th>
                                            <th>File No</th>
                                            <th>Name</th>
                                            <th>Mobile</th>
                                            <th>Status</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        value=""
                                                        id="flexCheckDefault"
                                                    />
                                                </div>
                                            </td>
                                            <td>ABCD4556464QWE</td>
                                            <td>File_2023_01</td>
                                            <td>Jhon</td>
                                            <td>5678909876</td>
                                            <td>
                                                <span className="badge px-3 py-2 bg-success"> Paid</span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        value=""
                                                        id="flexCheckDefault"
                                                    />
                                                </div>
                                            </td>
                                           
                                            <td>ABMK846493CFE</td>
                                            <td>File_2023_02</td>
                                            <td>Jhon</td>
                                            <td>5678907865</td>
                                            <td>
                                                <span className="badge px-3 py-2 bg-danger">
                                                    Cancel
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        value=""
                                                        id="flexCheckDefault"
                                                    />
                                                </div>
                                            </td>
                                            
                                            <td>ABGU745632CFE</td>
                                            <td>File_2023_03</td>
                                            <td>Rajesh</td>
                                            <td>5678903491</td>
                                            <td>
                                                <span className="badge px-3 py-2 bg-success">
                                                    Paid
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        value=""
                                                        id="flexCheckDefault"
                                                    />
                                                </div>
                                            </td>
                                           
                                            <td>ABJK879125HNE</td>
                                            <td>File_2023_04</td>
                                            <td>Karan</td>
                                            <td>5678905672</td>
                                            <td>
                                                <span className="badge px-3 py-2 bg-warning">
                                                    Due
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        value=""
                                                        id="flexCheckDefault"
                                                    />
                                                </div>
                                            </td>
                                           
                                            <td>ABTY876545JIE</td>
                                            <td>File_2023_05</td>
                                            <td>Rathod</td>
                                            <td>5678901232</td>
                                            <td>
                                                <span className="badge px-3 py-2 bg-success">
                                                    Paid
                                                </span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <div className="form-check">
                                                    <input
                                                        className="form-check-input"
                                                        type="checkbox"
                                                        value=""
                                                        id="flexCheckDefault"
                                                    />
                                                </div>
                                            </td>
                                            <td>ABQW345678RTE</td>
                                            <td>File_2023_06</td>
                                            <td>Smith</td>
                                            <td>5678903456</td>
                                            <td>
                                                <span className="badge px-3 py-2 bg-warning">
                                                    Due
                                                </span>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
            </div>
    </div>
    </div>
</Layout>
  )
}

export default water