@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<style>
    * {
        --hibiscus-love: #fc465c;
        --fine-ii: #f9b198;
        --afl: #f9b198;
        --mexican-sky: #cfdddd;
        --brasillia-peach: #0A1F44;
        --free: #ffc107;
        --captured: #2b2120;
        --form-bg: var(--brasillia-peach);
        --secondary-color: var(--hibiscus-love);
        --tertiary-color: var(--fine-ii);
        --quadrary-color: var(--afl);
        --bg-color: var(--mexican-sky);
        --text-color: var(--free);
        --header-color: var(--captured);
        --error-color: var(--hibiscus-love);
        --success-color: #73d12e;
        box-sizing: border-box;
    }

    .section-title {
        position: relative;
        margin: 25px 0 15px;
        text-align: center;
    }

    .section-title span {
        /* background: var(--form-bg); */
        background-color: white !important;
        padding: 6px 20px;
        font-weight: 600;
        color: var(--text-color);
        letter-spacing: 1px;
        border-radius: 30px;
        border: 1px solid var(--quadrary-color);
        font-size: 14px;
        z-index: 1;
        position: relative;
    }

    .section-title::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--quadrary-color);
        z-index: 0;
    }
</style>

@section('content')

    <div class="row align-items-center justify-content-between mb-3 mt-3">
        <div class="col-auto">
            <h5>
                   <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('admin.user_management') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>
                <i class="ti tabler-user-edit me-1 text-primary"></i> Edit User
            </h5>
        </div>
    </div>

    <div class="card p-3">
        <h6><i class="ti tabler-edit-circle me-1 text-primary"></i> Edit User</h6>

        <form>
            <div class="row g-2">
                <div class="section-title mt-1"> <span><i class="ti tabler-user-circle me-1"></i> Personal Details</span>
                </div>
                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-id me-1"></i>User ID</label>
                    <input type="text" class="form-control" value="OM1234" readonly>
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-user me-1"></i>User Name</label>
                    <input type="text" class="form-control" value="Name">
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-mail me-1"></i>Email</label>
                    <input type="text" class="form-control" placeholder="Enter Email">
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-phone me-1"></i>Phone</label>
                    <input type="text" class="form-control" placeholder="Enter Phone">
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-calendar-event me-1"></i>Date of Birth</label>
                    <input type="text" class="form-control" placeholder="Enter DOB">
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-gender-bigender me-1"></i>Gender</label>
                    <select class="form-select">
                        <option>Select</option>
                        <option>Female</option>
                        <option>Male</option>
                    </select>
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-map-pin me-1"></i>Address</label>
                    <input type="text" class="form-control" placeholder="Enter Address">
                </div>

                <div class="col-lg-3 mb-2">
                    <label class="form-label"><i class="ti tabler-map-2 me-1"></i>State</label>
                    <input type="text" class="form-control" placeholder="Enter State">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-building-community me-1"></i>District</label>
                    <input type="text" class="form-control" placeholder="Enter District">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-building-skyscraper me-1"></i>City</label>
                    <input type="text" class="form-control" placeholder="Enter City">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-map-pin-code me-1"></i>Pincode</label>
                    <input type="text" class="form-control" placeholder="Enter Pincode">
                </div>

                <div class="section-title mt-1"> <span><i class="ti tabler-user-circle me-1"></i> Nominee Details</span>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-user-heart me-1"></i>Nominee Name</label>
                    <input type="text" class="form-control" placeholder="Enter Nominee Name">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-link me-1"></i>Nominee Relation</label>
                    <input type="text" class="form-control" placeholder="Enter Relation">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-home me-1"></i>Nominee Address</label>
                    <input type="text" class="form-control" placeholder="Enter Address">
                </div>

                <div class="section-title mt-1"> <span><i class="ti tabler-building-bank me-1"></i> Bank Details</span>
                </div>
                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-user-dollar me-1"></i>Account Holder Name</label>
                    <input type="text" class="form-control" placeholder="Enter Name">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-credit-card me-1"></i>Account Number</label>
                    <input type="text" class="form-control" placeholder="Enter Account Number">
                </div>

                <div class="col-lg-4 mb-2">
                    <label class="form-label"><i class="ti tabler-building-bank me-1"></i>Bank Name</label>
                    <input type="text" class="form-control" placeholder="Enter Bank Name">
                </div>

                <div class="col-lg-6 mb-2">
                    <label class="form-label"><i class="ti tabler-git-branch me-1"></i>Branch Name</label>
                    <input type="text" class="form-control" placeholder="Enter Branch Name">
                </div>

                <div class="col-lg-6 mb-2">
                    <label class="form-label"><i class="ti tabler-code me-1"></i>IFSC Code</label>
                    <input type="text" class="form-control" placeholder="Enter IFSC Code">
                </div>


                <div class="section-title mt-1"> <span><i class="ti tabler-shield-check me-1"></i> KYC Details</span>
                </div>
                <div class="col-lg-6 mb-2">
                    <label class="form-label"><i class="ti tabler-id-badge me-1"></i>PAN Number</label>
                    <input type="text" class="form-control" placeholder="Enter PAN Number">
                </div>

                <div class="col-lg-6 mb-2">
                    <label class="form-label"><i class="ti tabler-cardboards me-1"></i>Aadhar Number</label>
                    <input type="text" class="form-control" placeholder="Enter Aadhar Number">
                </div>

                <div class="form-action d-flex justify-content-center mt-3">
                    <button class="btn btn-label-secondary me-4">
                        <i class="ti tabler-x me-1"></i>Discard
                    </button>

                    <button class="btn btn-primary">
                        <i class="ti tabler-device-floppy me-1"></i>Update
                    </button>
                </div>

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

@endsection