@extends('layouts.frontend')

@section('title', 'Edit Profile')

@section('content')
    <div class="page-content">

        <div class="profile-img mb-3 border p-3 text-center rounded-3 bg-light">
            <img src="assets/images/avatars/01.webp" width="90" height="90" class="rounded-circle" alt="">
            <h6 class="mb-0 fw-bold mt-3 text-dark">Michael Clarke</h6>
        </div>

        <div class="card rounded-3 border-0 bg-transparent">
            <div class="card-body p-0">
                <form>
                    <div class="row row-cols-1 g-3">
                        <div class="col">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="floatingInputName"
                                    placeholder="Name" value="jhon Deo">
                                <label for="floatingInputName">Name</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="floatingInputNumber"
                                    placeholder="Name" value="+99-85XXXXXXXX">
                                <label for="floatingInputNumber">Mobile Number</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="floatingInputEmail"
                                    placeholder="Email" value="name@example.com">
                                <label for="floatingInputEmail">Email</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
                                    value="option1" checked>
                                <label class="form-check-label" for="inlineRadio1">Male</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
                                    value="option2">
                                <label class="form-check-label" for="inlineRadio2">Female</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-floating">
                                <input type="date" class="form-control rounded-3" id="floatingInputDOB" value="">
                                <label for="floatingInputDOB">Date of Birth</label>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-floating">
                                <input type="text" class="form-control rounded-3" id="floatingInputLocation"
                                    placeholder="Location" value="United Kingdom">
                                <label for="floatingInputLocation">Location</label>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection