@extends('auth.layouts.app')
@section('title', 'Register')
@section('content')
    <!--begin::Root-->
    <div class="d-flex flex-column flex-root" id="kt_app_root">
        <!--begin::Page bg image-->
        <style>
            body {
                background-image: url('{{ asset('assets/media/auth/bg10.jpeg') }}');
            }

            [data-theme="dark"] body {
                background-image: url('{{ asset('assets/media/auth/bg10-dark.jpeg') }}');
            }
        </style>
        <!--end::Page bg image-->
        <!--begin::Authentication - Sign-in -->
        <div class="d-flex flex-column flex-lg-row flex-column-fluid">
            <!--begin::Aside-->
            <div class="d-flex flex-lg-row-fluid">
                <!--begin::Content-->
                <div class="d-flex flex-column flex-center pb-0 pb-lg-10 p-10 w-100">
                    <!--begin::Image-->
                    <img class="theme-light-show mx-auto mw-100 w-150px w-lg-300px mb-10 mb-lg-20"
                        src="{{ asset('/') }}assets/media/doc.png" style="border-radius: 5%" alt="FlyExpress" />
                    <!--end::Image-->
                    <!--begin::Title-->
                    <h4 class="text-gray-800 fw-bold text-center mb-7">FileManager system provides a way to manage files and directories efficiently within your application.</h4>
                    <!--end::Title-->

                </div>
                <!--end::Content-->
            </div>
            <!--begin::Aside-->
            <!--begin::Body-->
            <div class="d-flex flex-column-fluid flex-lg-row-auto justify-content-center justify-content-lg-end p-12">
                <!--begin::Wrapper-->
                <div class="bg-body d-flex flex-center rounded-4 w-md-600px p-10">
                    <!--begin::Content-->
                    <div class="w-md-400px">
                        <!--begin::Form-->
                        <form class="form w-100" action="{{route('registerAction')}}" method="post" data-kt-redirect-url="#" action="#">
                            @csrf
                            <!--begin::Heading-->
                            <div class="text-center mb-8">
                                <!--begin::Title-->
                                <h1 class="text-dark fw-bolder mb-3">Register new account</h1>
                                <!--end::Title-->
                                <!--begin::Subtitle-->
                                <div class="text-gray-500 fw-semibold fs-6">Welcome to FileManager system</div>
                                <!--end::Subtitle=-->
                            </div>
                            <!--begin::Heading-->

                            <!--begin::Input group=-->
                            <div class="fv-row mb-4">
                                <!--begin::Name-->
                                <input type="text" placeholder="FullName" name="name" autocomplete="off" value="{{old('name')}}" class="form-control form-control-solid" />
                                <!--end::Name-->
                            </div>
                            <!--end::Input group=-->

                            <!--begin::Input group=-->
                            <div class="fv-row mb-4">
                                <!--begin::Email-->
                                <input type="text" placeholder="Email" name="email" autocomplete="off" value="{{old('email')}}" class="form-control form-control-solid" />
                                <!--end::Email-->
                            </div>
                            <!--end::Input group=-->

                            <!--begin::Input group=-->
                            <div class="fv-row mb-4">
                                <!--begin::Phone-->
                                <input type="number" placeholder="Phone Number" name="phone" autocomplete="off" value="{{old('phone')}}" class="form-control form-control-solid" />
                                <!--end::Phone-->
                            </div>
                            <!--end::Input group=-->
                            
                            <!--begin::Input group=-->
                            <div class="row mb-4">
                                <!--begin::name&pin-->
                                <div class="col-md-6">
                                    <input type="text" placeholder="UserName" name="username" autocomplete="off" value="{{old('username')}}" class="form-control form-control-solid" />
                                </div>
                                <div class="col-md-6">
                                    <input type="number" placeholder="Pin" name="pin" autocomplete="off" value="{{old('pin')}}" class="form-control form-control-solid" />
                                </div>
                                <!--end::name&pin-->
                            </div>
                            <!--end::Input group=-->

                            <!--begin::Input group=-->
                            <div class="row mb-4">
                                <!--begin::Password-->
                                <div class="col-md-6">
                                    <input type="password" placeholder="Password" name="password" autocomplete="off" value="{{old('password')}}" class="form-control form-control-solid" />
                                </div>
                                <div class="col-md-6">
                                    <input type="password" placeholder="Confirm password" name="password_confirmation" autocomplete="off" value="{{old('password_confirmation')}}" class="form-control form-control-solid" />
                                </div>
                                <!--end::Password-->
                            </div>
                            <!--end::Input group=-->
                            <!--begin::Wrapper-->
                            <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-4">
                                <div></div>
                                <!--begin::Link-->
                                <a href="{{route('login')}}" class="link-primary">Already have an account ?</a>
                                <!--end::Link-->
                            </div>
                            <!--end::Wrapper-->
                            <!--begin::Submit button-->
                            <div class="d-grid mb-5">
                                <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                                    <!--begin::Indicator label-->
                                    <span class="indicator-label">Sign Up</span>
                                    <!--end::Indicator label-->
                                    <!--begin::Indicator progress-->
                                    <span class="indicator-progress">Please wait...
                                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                                    <!--end::Indicator progress-->
                                </button>
                            </div>
                            <!--end::Submit button-->

                        </form>
                        <!--end::Form-->
                    </div>
                    <!--end::Content-->
                </div>
                <!--end::Wrapper-->
            </div>
            <!--end::Body-->
        </div>
        <!--end::Authentication - Sign-in-->
    </div>
    <!--end::Root-->
@endsection