@extends('master_layout.app')

@section('style')
    <style>
        .icon-wizard .nav-item .nav-link {
            padding: 11px 14px !important;
            -webkit-box-shadow: none;
            box-shadow: none;
            display: -webkit-box;
            display: -ms-flexbox;
            display: block;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: start;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: left;
            gap: 3px;
            border-radius: var(--bs-border-radius) !important;
            text-align: left;
            float: left;
        }

        .nav-pills .nav-link.active .tab-img {
            filter: hue-rotate(45deg);
        }

        .tab-img {
            width: 30px;
            filter: brightness(0.5);
            padding: 2px;
        }

        .add-item {
            display: flex;
            align-items: center;
        }

        .ri-add-circle-line {
            font-size: 20px;
            padding-left: 5px;
        }

        .nav-pills .nav-link.active,
        .nav-pills .show>.nav-link {
            color: #fff;
            background-color: #E35205;
            -webkit-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
            box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .05);
        }
    </style>
@endsection

@section('content')
    <!-- CONTENTS -->
    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <section id="content" class="content">
        <div class="content__header content__boxed overlapping">
            <div class="content__wrap">


                <h4 class="mb-3 fw-semibold">Create New User</h4>


                <div class="container-fluid">


                    <div class="row">
                        <div class="col-12">

                            <div class="card" class="propertywizard">

                                <div class="card-body">
                                    <div class="mb-5">


                                        <div class="row">
                                            <div class="col-lg-3">


                                                <ul class="nav nav-pills nav-justified flex-column icon-wizard form-wizard-header bg-light p-1"
                                                    role="tablist">
                                                    <li class="nav-item" role="presentation">
                                                        <a href="#generaldetails1" id="generaldetails1-tab"
                                                            data-bs-toggle="tab" data-toggle="tab"
                                                            class="nav-link rounded-0 py-2 active" aria-selected="true"
                                                            role="tab"><img src="/new_template/admin/assets/img/1.png"
                                                                class="tab-img">

                                                            New User
                                                        </a>
                                                    </li>
                                                </ul>


                                            </div>

                                            <div class="col-lg-9">
                                                <div class="tab-content mb-0">


                                                    <div class="tab-pane active show" id="generaldetails1" role="tabpanel">
                                                        <h4 class="fs-16 fw-semibold mb-1">New User</h4>

                                                        <form id="verticalwizard" action="{{ route('users.store') }}"
                                                            method="POST">
                                                            @csrf
                                                            <div class="row py-2">
                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="propertyname" class="form-label">First
                                                                            Name</label>
                                                                        <input id="propertyname" type="text"
                                                                            class="form-control @error('first_name') is-invalid @enderror"
                                                                            placeholder="Enter First Name" name="first_name"
                                                                            value="{{ old('first_name') }}">
                                                                        @error('first_name')
                                                                            <div class="text-red-600 text-sm">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="propertyname" class="form-label">Last
                                                                            Name</label>
                                                                        <input id="propertyname" type="text"
                                                                            class="form-control @error('last_name') is-invalid @enderror"
                                                                            placeholder="Enter Last Name" name="last_name"
                                                                            value="{{ old('last_name') }}">
                                                                        @error('last_name')
                                                                            <div class="text-red-600 text-sm">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="propertyname" class="form-label">Email
                                                                            ID</label>
                                                                        <input id="propertyname" type="text"
                                                                            class="form-control @error('email') is-invalid @enderror"
                                                                            placeholder="Enter email id" name="email"
                                                                            value="{{ old('email') }}">
                                                                        @error('email')
                                                                            <div class="text-red-600 text-sm">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="propertyname" class="form-label">Mobile
                                                                            Number</label>
                                                                        <input id="propertyname" type="text"
                                                                            class="form-control @error('mobile') is-invalid @enderror"
                                                                            placeholder="Enter Mobile number" name="mobile"
                                                                            value="{{ old('mobile') }}">
                                                                        @error('mobile')
                                                                            <div class="text-red-600 text-sm">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="propertpass"
                                                                            class="form-label">Password</label>
                                                                        <input id="propertypass" type="text"
                                                                            class="form-control @error('password') is-invalid @enderror"
                                                                            placeholder="Enter Password" name="password"
                                                                            value="{{ old('password') }}">
                                                                        @error('password')
                                                                            <div class="text-red-600 text-sm">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <label for="Description"
                                                                            class="form-label">Role</label>

                                                                        <select
                                                                            class="form-select @error('role') is-invalid @enderror"
                                                                            aria-label="Default select example"
                                                                            name="role">
                                                                            <option value="" selected>Select Role
                                                                            </option>
                                                                            @foreach ($roles as $role)
                                                                                <option value="{{ $role->id }}">
                                                                                    {{ $role->name }}</option>
                                                                            @endforeach
                                                                        </select>
                                                                        @error('role')
                                                                            <div class="text-red-600 text-sm">
                                                                                {{ $message }}</div>
                                                                        @enderror
                                                                    </div>
                                                                </div> <!-- end col -->

                                                                <div class="col-lg-6">
                                                                    <div class="mb-3">
                                                                        <div class="form-check">
                                                                            <input type="hidden" name="welcome_email"
                                                                                value="0">
                                                                            <input class="form-check-input"
                                                                                type="checkbox" value="1"
                                                                                {{ old('welcome_email') ? 'checked' : '' }}
                                                                                id="flexCheckDefault"
                                                                                name="welcome_email">
                                                                            <label class="form-check-label"
                                                                                for="flexCheckDefault">
                                                                                Send Welcome Email
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="next" id="nextBtn">
                                                                    <a href="javascript:void(0);" class="btn btn-primary"
                                                                        onclick="document.getElementById('verticalwizard').submit(); return false;">
                                                                        Create New User
                                                                    </a>
                                                                </div>

                                                            </div> <!-- end row -->
                                                        </form>
                                                    </div><!-- end tab-pane -->


                                                </div> <!-- tab-content -->
                                            </div>
                                        </div> <!-- end #horizontalwizard-->
                                    </div>

                                </div> <!-- end card body -->
                            </div> <!-- end card -->
                        </div><!-- end col -->
                    </div> <!-- end row -->


                </div>


            </div>



        </div>

    </section>

    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
    <!-- END - CONTENTS -->
@endsection