import React from "react";
import BreadcrumbComBS from "../breadcrumb/BreadcrumbComBS";
import getImage from "../../utils/getImage";


export default function Settings() {
    const avtarImage = "avtar/merms-user.png";
    return (
        <>
            <BreadcrumbComBS title='Settings' paths={['Dashboard', 'Settings']}/>
            {/*<div className="row">*/}
            {/*    <div className="vh-100 col-12 flex align-items-center">Coming Soon</div>*/}
            {/*</div>*/}


            <div className="row account-contant">
                <div className="col-12">
                    <div className="card card-statistics">
                        <div className="card-body p-0" style={{backgroundColor: "#f9f9fb"}}>
                            <div className="row no-gutters">
                                <div className="col-xl-3 pb-xl-0 pb-5 border-right">
                                    <div className="page-account-profil pt-5">
                                        <div className="profile-img text-center rounded-circle">
                                            <div className="pt-5">
                                                <div className="bg-img m-auto">
                                                    {/*<img src="assets/img/avtar/01.jpg" className="img-fluid"*/}
                                                    {/*     alt="users-avatar" />*/}
                                                    <img src={getImage(avtarImage)}
                                                         className="img-fluid" alt="user"/>
                                                </div>
                                                <div className="profile pt-4">
                                                    <h4 className="mb-1">Alice Williams</h4>
                                                    <div style={{padding: '10px'}}>
                                                        <hr/>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="profile-btn text-center">
                                            <div>
                                                <button className="btn btn-light text-primary mb-2">Upload New Avatar
                                                </button>
                                            </div>
                                            {/*<div>*/}
                                            {/*    <button className="btn btn-danger">Delete</button>*/}
                                            {/*</div>*/}
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-5 col-md-6 col-12 border-t border-right">
                                    <div className="page-account-form">
                                        <div className="form-titel border-bottom p-3">
                                            <h5 className="mb-0 py-2">Edit Your Personal Settings</h5>
                                        </div>
                                        <div className="p-4">
                                            <form>
                                                <div className="form-row">
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="name1">First Name</label>
                                                        <input type="text" className="form-control" id="name1"
                                                               value="Alice"/>
                                                    </div>
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="name1">Last Name</label>
                                                        <input type="text" className="form-control" id="name1"
                                                               value="Williams"/>
                                                    </div>
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="name1">Account Name</label>
                                                        <input type="text" className="form-control" id="name1"
                                                               value="This is the best hospital name"/>
                                                    </div>
                                                    {/*<div className="form-group col-md-12">*/}
                                                    {/*    <label htmlFor="title1">Email</label>*/}
                                                    {/*    <input type="text" className="form-control" id="title1"*/}
                                                    {/*           value="email@email.com" />*/}
                                                    {/*</div>*/}
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="phone1">Phone Number</label>
                                                        <input type="text" className="form-control" id="phone1"
                                                               value="(01) 97 563 15613"/>
                                                    </div>
                                                    <div className="form-group col-md-12">
                                                        <label htmlFor="email1">Email</label>
                                                        <input type="email" className="form-control" id="email1"
                                                               value="alicewilliams@gmail.com"/>
                                                    </div>
                                                </div>
                                                <div className="form-group">
                                                    <label htmlFor="add1">Address</label>
                                                    <input type="text" className="form-control" id="add1"
                                                           value="17504 Carlton Cuevas Rd, Gulfport, MS, 39503"/>
                                                </div>
                                                <div className="form-group">
                                                    <label htmlFor="add2">Address 2</label>
                                                    <input type="text" className="form-control" id="add2"
                                                           value="1234 North Avenue Luke Lane, South Bend, IN 360001"/>
                                                </div>

                                                {/*<div className="form-row">*/}
                                                {/*    <div className="form-group col-md-4">*/}
                                                {/*        <label htmlFor="inputState3">City</label>*/}
                                                {/*        <select id="inputState3" className="form-control">*/}
                                                {/*            <option>Choose...</option>*/}
                                                {/*            <option selected="">London</option>*/}
                                                {/*            <option>Montreal</option>*/}
                                                {/*            <option>Delhi</option>*/}
                                                {/*            <option>Tokyo</option>*/}
                                                {/*        </select>*/}
                                                {/*    </div>*/}
                                                {/*    <div className="form-group col-md-4">*/}
                                                {/*        <label htmlFor="inputState4">State</label>*/}
                                                {/*        <select id="inputState4" className="form-control">*/}
                                                {/*            <option>Choose...</option>*/}
                                                {/*            <option selected="">England</option>*/}
                                                {/*            <option>California</option>*/}
                                                {/*            <option>Texas</option>*/}
                                                {/*            <option>Scotland</option>*/}
                                                {/*        </select>*/}
                                                {/*    </div>*/}
                                                {/*    <div className="form-group col-md-4">*/}
                                                {/*        <label htmlFor="inputZip">Zip</label>*/}
                                                {/*        <input type="text" className="form-control" id="inputZip"*/}
                                                {/*               value="EC1A 1BB" />*/}
                                                {/*    </div>*/}
                                                {/*</div>*/}
                                                {/*<div className="form-group">*/}
                                                {/*    <div className="form-check">*/}
                                                {/*        <input className="form-check-input" type="checkbox"*/}
                                                {/*               id="gridCheck" />*/}
                                                {/*            <label className="form-check-label" htmlFor="gridCheck">*/}
                                                {/*                I agree to receive email notification.*/}
                                                {/*            </label>*/}
                                                {/*    </div>*/}
                                                {/*</div>*/}
                                                <div style={{textAlign: "right"}}>
                                                    <button type="submit" className="btn btn-primary">Update Profile
                                                    </button>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div className="col-xl-4 col-md-6 border-t col-12">
                                    <div className="page-account-form">
                                        <div className="form-titel border-bottom p-3">
                                            <h5 className="mb-0 py-2">Your External Link</h5>
                                        </div>
                                        <div className="p-4">
                                            <form>
                                                <div className="form-group">
                                                    <label htmlFor="fb">Facebook URL:</label>
                                                    <input type="text" className="form-control" id="fb"
                                                           value="https://www.facebook.com/"/>
                                                </div>
                                                <div className="form-group">
                                                    <label htmlFor="tr">Twitter URL:</label>
                                                    <input type="text" className="form-control" id="tr"
                                                           value="https://twitter.com/"/>
                                                </div>

                                                <div className="form-group">
                                                    <label htmlFor="br">Blogger URL:</label>
                                                    <input type="text" className="form-control" id="br"
                                                           value="https://www.blogger.com"/>
                                                </div>

                                                <div className="form-group">
                                                    <label htmlFor="go">Google+ URL:</label>
                                                    <input type="text" className="form-control" id="go"
                                                           value="https://plus.google.com/discover"/>
                                                </div>

                                                <div className="form-group">
                                                    <label htmlFor="li">LinkedIn URL:</label>
                                                    <input type="text" className="form-control" id="li"
                                                           value="https://in.linkedin.com/"/>
                                                </div>

                                                <div className="form-group">
                                                    <label htmlFor="we">Website URL:</label>
                                                    <input type="text" className="form-control" id="we"
                                                           value="https://yourwebsite.com"/>
                                                </div>
                                                <div style={{textAlign: "right"}}>
                                                    <button type="submit" className="btn btn-primary">Update Links
                                                    </button>
                                                </div>

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

        </>
    )
}