@extends('layouts.site_layout')

@section('content')

<section class="py-5">
    <div class="container mt-lg-5 mb-lg-5 mt-0 mb-0">
        <div class="breadcrumbs">
            <span>
                <a href="#" class="fs-24 text-decoration-none text-dark opacity-5">Home <span class="px-lg-4 px-0">></span> </a>
                <a href="#" class="fs-24 text-decoration-none text-dark">My Profile</a>
            </span>
        </div>
        <h1 class="fs-42 my-4 text-dark">My Profile</h1>
        <div class="d-lg-flex d-md-flex d-block mb-4">
            <img src="{{asset('images/dashboard/profile-pic.png')}}" alt="Profile pic"
                class="img-fluid me-4 mb-lg-0 mb-md-0 mb-3">
            <div class="align-self-center">
                <button class="btn bg-orange text-white fs-18 me-4">Change</button>
                <button class="fs-20 fw-bold bg-white btn">Remove</button>
            </div>
        </div>
        <p class="fs-34">Edit Your Profile</p>
        <div class="row">
            <div class="col-lg-8">
                <form action="" class="row g-3">
                    <div class="col-md-6 mb-3">
                        <label for="first-name" class="form-label fw-bold fs-20">First Name<span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="first-name">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="last-name" class="form-label fw-bold fs-20">Last Name<span
                                class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="last-name">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="user-name" class="form-label fw-bold fs-20">Username</label>
                        <input type="text" class="form-control" id="user-name" placeholder="Enter a username">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="password" class="form-label fw-bold fs-20">Password</label>
                        <input type="password" class="form-control mb-2" id="password">
                        <a href="" class="fs-20">Change Password</a>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="first-name" class="form-label fw-bold fs-20">Email Address</label>
                        <input type="email" class="form-control" id="first-name">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="last-name" class="form-label fw-bold fs-20">Confirm Email Address</label>
                        <input type="email" class="form-control" id="last-name">
                    </div>
                    <p class="fs-34">Fields</p>
                    <div class="col-lg-6 col-md-6 mb-3">
                        <label for="interested-field" class="form-label fw-bold fs-20">Interested In<span
                                class="text-danger">*</span></label>
                        <select class="form-select" aria-label="select example" id="interested-field">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <p class="fs-34">User Actions Log Options</p>
                    <label for="" class="fw-bold fs-20">Send notifications for User Actions Log <span
                            class="text-danger">*</span></label>
                    <div class="d-flex mb-3">
                        <div class="form-check me-5">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                id="send-notification" value="option1">
                            <label class="form-check-label fs-18" for="send-notification">Yes</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                id="notification-not-sent" value="option2">
                            <label class="form-check-label fs-18" for="notification-not-sent">No</label>
                        </div>
                    </div>
                    <div class="col-lg-12 mb-5">
                        <label for="interested-field" class="form-label fw-bold fs-20">Select events to be notified
                            for</label>
                        <select class="form-select" aria-label="select example" id="interested-field">
                            <option selected>Open this select menu</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                            <option value="3">Three</option>
                        </select>
                    </div>
                    <div>
                        <button class="btn bg-orange text-white fs-18 me-3">Save</button>
                        <button class="btn btn-outline-orange text-orange fs-18">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="col-lg-4"></div>
        </div>
    </div>
</section>


@endsection