@extends('layouts.backendTemplate')

@section('content')

    <!--begin::Main-->
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">

        <div class="d-flex flex-column flex-column-fluid">

            @include('uc.admin.breadcrumb', [
                'title' => 'User Add',
                'pageName' => 'Add',
                'pageParent' => 'Users Management',
                'pageParentLink' => url('user'),
            ])

            <div id="kt_app_content" class="app-content flex-column-fluid">
                <div id="kt_app_content_container" class="app-container container-xxl">


                    <form class="form d-flex flex-column flex-lg-row" action="{{ url('user/insert') }}" method="post"
                        enctype="multipart/form-data">

                        <input type="hidden" name="_method" value="POST">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">


                        <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7 me-lg-10">

                            <div class="card card-flush py-4">



                                <div class="card-header">

                                    <div class="required card-title">
                                        <h2>Profile Picture</h2>
                                    </div>

                                </div>

                                <div class="card-body text-center pt-0">

                                    <style>
                                        .image-input-placeholder {
                                            background-image: url('{{ url('assets/media/svg/files/blank-image.svg') }}');
                                        }

                                        [data-bs-theme="dark"] .image-input-placeholder {
                                            background-image: url('{{ url('assets/media/svg/files/blank-image-dark.svg') }}');
                                        }
                                    </style>

                                    <div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3"
                                        data-kt-image-input="true">

                                        <div class="image-input-wrapper w-150px h-150px"></div>

                                        <label
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="change" data-bs-toggle="tooltip"
                                            title="Change avatar">

                                            <i class="bi bi-pencil-fill fs-7"></i>

                                            <input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
                                            <input type="hidden" name="avatar_remove" />

                                        </label>

                                        <span
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="cancel" data-bs-toggle="tooltip"
                                            title="Cancel avatar">
                                            <i class="bi bi-x fs-2"></i>
                                        </span>

                                        <span
                                            class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow"
                                            data-kt-image-input-action="remove" data-bs-toggle="tooltip"
                                            title="Remove avatar">
                                            <i class="bi bi-x fs-2"></i>
                                        </span>

                                    </div>

                                    <div class="text-muted fs-7">Set the profile picture. Only *.png, *.jpg and *.jpeg image
                                        files are accepted</div>

                                </div>

                            </div>

                        </div>

                        <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">

                            <div class="card card-flush py-4">

                                @if (Session::has('messageSuccess'))
                                    <div class="card-body">
                                        @include('uc/messageSuccess')
                                    </div>
                                @endif

                                @if (Session::has('messageFail'))
                                    <div class="card-body">
                                        @include('uc/messageFail')
                                    </div>
                                @endif


                                <div class="card-header">
                                    <div class="card-title">
                                        <h2>Overview</h2>
                                    </div>
                                </div>

                                <div class="card-body pt-0">

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Role</label>
                                        <div class="d-flex fv-row me-1 mb-5">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input me-3" name="role" type="radio"
                                                    value="0" checked="checked" data-gtm-form-interact-field-id="1">
                                                <label class="form-check-label" for="kt_modal_update_role_option_0">
                                                    <div class="fw-bold text-gray-800">Administrator</div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="d-flex fv-row me-1 mb-5">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input me-3" name="role" type="radio"
                                                    value="1" data-gtm-form-interact-field-id="1">
                                                <label class="form-check-label" for="kt_modal_update_role_option_0">
                                                    <div class="fw-bold text-gray-800">Editor</div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="d-flex fv-row me-1 mb-5">
                                            <div class="form-check form-check-custom form-check-solid">
                                                <input class="form-check-input me-3" name="role" type="radio"
                                                    value="2" data-gtm-form-interact-field-id="1">
                                                <label class="form-check-label" for="kt_modal_update_role_option_0">
                                                    <div class="fw-bold text-gray-800">Contributor</div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Firstname</label>
                                        <input type="text" name="first_name" class="form-control mb-2 col-6"
                                            value="{{ old('first_name') }}" />
                                    </div>

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Lastname</label>
                                        <input type="text" name="last_name" class="form-control mb-2 col-6"
                                            value="{{ old('last_name') }}" />
                                    </div>


                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">E-mail</label>
                                        <input type="email" name="email" class="form-control mb-2"
                                            value="{{ old('email') }}" />
                                    </div>

                                    <div class="mb-10 fv-row">
                                        <label class="required form-label">Password</label>
                                        <input type="password" name="password" class="form-control mb-2" />
                                    </div>

                                </div>

                            </div>

                            <div class="d-flex justify-content-end">

                                <a href="{{ url('user') }}" id="kt_ecommerce_add_product_cancel"
                                    class="btn btn-light me-5">Cancel</a>

                                <button type="submit" class="btn btn-primary">
                                    <span class="indicator-label">Save</span>
                                </button>

                            </div>

                        </div>


                    </form>
                </div>

            </div>

        </div>

    </div>


@stop

@section('script')

    <script type="text/javascript">
        $(function() {});
    </script>

@endsection