@extends('layouts.app')
    @section('header')
        <link
            rel="shortcut icon"
            type="image/x-icon"
            href="./../public/assets/images/favicon.ico"
        />
        <!--! END: Favicon-->
        <!--! BEGIN: Bootstrap CSS-->
        <link
            rel="stylesheet"
            type="text/css"
            href="./../public/assets/css/bootstrap.min.css"
        />
        <!--! END: Bootstrap CSS-->
        <!--! BEGIN: Vendors CSS-->
        <link
            rel="stylesheet"
            type="text/css"
            href="./../public/assets/vendors/css/vendors.min.css"
        />
        <!--! END: Vendors CSS-->
        <!--! BEGIN: Custom CSS-->
        <link
            rel="stylesheet"
            type="text/css"
            href="./../public/assets/css/theme.min.css"
        />
        <!--! END: Custom CSS-->
        <!--! HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries !-->
        <!--! WARNING: Respond.js doesn"t work if you view the page via file: !-->
        <!--[if lt IE 9]>
            <script src="https:oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https:oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    @endsection

    
    @section('content')
        <div class="d-flex flex-column justify-content-center align-items-center">
            <div class="auth-creative-inner">
                <div class="creative-card-wrapper">
                    <div class="card my-4 overflow-hidden" style="z-index: 1">
                        <div class="row flex-1 g-0">
                            <div class="col-lg-6 h-100 my-auto">
                                <div
                                    class="wd-50 bg-white p-2 rounded-circle shadow-lg position-absolute translate-middle top-50 start-50"
                                >
                                    <img
                                        src="./../public/assets/images/logo-abbr.png"
                                        alt=""
                                        class="img-fluid"
                                    />
                                </div>
                                <div
                                    class="creative-card-body card-body p-sm-5"
                                >
                                <h2 class="fs-20 fw-bolder mb-4">{{ __('auth.register') }}</h2>
                                <h4 class="fs-13 fw-bold mb-2">{{ __('auth.manage_crm') }}</h4>
                                <p class="fs-12 fw-medium text-muted">{{ __('auth.setup_info') }}</p>

                                <form action="{{ route('auth.register.submit') }}" method="POST" class="w-100 mt-4 pt-2">
                                    @csrf
                                    <div class="mb-4">
                                        <input type="text" name="name" class="form-control" placeholder="{{ __('auth.full_name') }}" required value="{{ old('name') }}" />
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="mb-4">
                                        <input type="email" name="email" class="form-control" placeholder="{{ __('auth.email') }}" required value="{{ old('email') }}" />
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="mb-4">
                                        <input type="text" name="company" class="form-control" placeholder="{{ __('auth.company_name') }}" value="{{ old('company') }}" />
                                        @error('company')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="mb-4">
                                        <input type="password" name="password" class="form-control" placeholder="{{ __('auth.password') }}" required />
                                        @error('password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="mb-4">
                                        <input type="password" name="password_confirmation" class="form-control" placeholder="{{ __('auth.confirm_password') }}" required />
                                        @error('password_confirmation')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>

                                    <div class="mt-4">
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" name="terms" class="custom-control-input" id="termsCondition" required />
                                            <label class="custom-control-label c-pointer text-muted" for="termsCondition">
                                                {!! __('auth.terms_conditions', ['terms' => '<a href="">'.__('auth.terms').'</a>', 'fees' => '<a href="">'.__('auth.fees').'</a>']) !!}
                                            </label>
                                        </div>
                                        @error('terms')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <input type="hidden" id="recaptcha-token" name="recaptcha_token">
                                    <div class="mt-5">
                                        <button type="submit" class="btn btn-lg btn-primary w-100">
                                            {{ __('auth.create_account') }}
                                        </button>
                                    </div>
                                </form>

                                <div class="mt-5 text-muted">
                                    <span>{{ __('auth.already_have_account') }}</span>
                                    <a href="{{ route('login') }}" class="fw-bold">{{ __('auth.login') }}</a>
                                </div>
                                </div>
                            </div>
                            <div class="col-lg-6 bg-primary">
                                <div
                                    class="h-100 d-flex align-items-center justify-content-center"
                                >
                                    <img
                                        src="./../public/assets/images/auth/auth-user.png"
                                        alt=""
                                        class="img-fluid"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--! ================================================================ !-->
        <!--! [End] Main Content !-->
        <!--! ================================================================ !-->
        <!--! ================================================================ !-->
        <!--! BEGIN: Theme Customizer !-->
        <!--! ================================================================ !-->
        <div class="theme-customizer">
            <div class="customizer-handle">
                <a
                    href="javascript:void(0);"
                    class="cutomizer-open-trigger bg-primary"
                >
                    <i class="feather-settings"></i>
                </a>
            </div>
            <div class="customizer-sidebar-wrapper">
                <div
                    class="customizer-sidebar-header px-4 ht-80 border-bottom d-flex align-items-center justify-content-between"
                >
                    <h5 class="mb-0">Theme Settings</h5>
                    <a
                        href="javascript:void(0);"
                        class="cutomizer-close-trigger d-flex"
                    >
                        <i class="feather-x"></i>
                    </a>
                </div>
                <div
                    class="customizer-sidebar-body position-relative p-4"
                    data-scrollbar-target="#psScrollbarInit"
                >
                    <!--! BEGIN: [Skins] !-->
                    <div
                        class="position-relative px-3 pb-3 pt-4 mt-3 mb-5 border border-gray-2 theme-options-set"
                    >
                        <label
                            class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                            style="top: -12px"
                            >Skins</label
                        >
                        <div
                            class="row g-2 theme-options-items app-skin"
                            id="appSkinList"
                        >
                            <div
                                class="col-6 text-center position-relative single-option light-button active"
                            >
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-skin-light"
                                    name="app-skin"
                                    value="1"
                                    data-app-skin="app-skin-light"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-skin-light"
                                    >Light</label
                                >
                            </div>
                            <div
                                class="col-6 text-center position-relative single-option dark-button"
                            >
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-skin-dark"
                                    name="app-skin"
                                    value="2"
                                    data-app-skin="app-skin-dark"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-skin-dark"
                                    >Dark</label
                                >
                            </div>
                        </div>
                    </div>
                    <!--! END: [Skins] !-->
                    <!--! BEGIN: [Typography] !-->
                    <div
                        class="position-relative px-3 pb-3 pt-4 mt-3 mb-0 border border-gray-2 theme-options-set"
                    >
                        <label
                            class="py-1 px-2 fs-8 fw-bold text-uppercase text-muted text-spacing-2 bg-white border border-gray-2 position-absolute rounded-2 options-label"
                            style="top: -12px"
                            >Typography</label
                        >
                        <div
                            class="row g-2 theme-options-items font-family"
                            id="fontFamilyList"
                        >
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-lato"
                                    name="font-family"
                                    value="1"
                                    data-font-family="app-font-family-lato"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-lato"
                                    >Lato</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-rubik"
                                    name="font-family"
                                    value="2"
                                    data-font-family="app-font-family-rubik"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-rubik"
                                    >Rubik</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-inter"
                                    name="font-family"
                                    value="3"
                                    data-font-family="app-font-family-inter"
                                    checked
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-inter"
                                    >Inter</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-cinzel"
                                    name="font-family"
                                    value="4"
                                    data-font-family="app-font-family-cinzel"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-cinzel"
                                    >Cinzel</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-nunito"
                                    name="font-family"
                                    value="6"
                                    data-font-family="app-font-family-nunito"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-nunito"
                                    >Nunito</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-roboto"
                                    name="font-family"
                                    value="7"
                                    data-font-family="app-font-family-roboto"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-roboto"
                                    >Roboto</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-ubuntu"
                                    name="font-family"
                                    value="8"
                                    data-font-family="app-font-family-ubuntu"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-ubuntu"
                                    >Ubuntu</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-poppins"
                                    name="font-family"
                                    value="9"
                                    data-font-family="app-font-family-poppins"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-poppins"
                                    >Poppins</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-raleway"
                                    name="font-family"
                                    value="10"
                                    data-font-family="app-font-family-raleway"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-raleway"
                                    >Raleway</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-system-ui"
                                    name="font-family"
                                    value="11"
                                    data-font-family="app-font-family-system-ui"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-system-ui"
                                    >System UI</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-noto-sans"
                                    name="font-family"
                                    value="12"
                                    data-font-family="app-font-family-noto-sans"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-noto-sans"
                                    >Noto Sans</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-fira-sans"
                                    name="font-family"
                                    value="13"
                                    data-font-family="app-font-family-fira-sans"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-fira-sans"
                                    >Fira Sans</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-work-sans"
                                    name="font-family"
                                    value="14"
                                    data-font-family="app-font-family-work-sans"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-work-sans"
                                    >Work Sans</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-open-sans"
                                    name="font-family"
                                    value="15"
                                    data-font-family="app-font-family-open-sans"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-open-sans"
                                    >Open Sans</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-maven-pro"
                                    name="font-family"
                                    value="16"
                                    data-font-family="app-font-family-maven-pro"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-maven-pro"
                                    >Maven Pro</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-quicksand"
                                    name="font-family"
                                    value="17"
                                    data-font-family="app-font-family-quicksand"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-quicksand"
                                    >Quicksand</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-montserrat"
                                    name="font-family"
                                    value="18"
                                    data-font-family="app-font-family-montserrat"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-montserrat"
                                    >Montserrat</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-josefin-sans"
                                    name="font-family"
                                    value="19"
                                    data-font-family="app-font-family-josefin-sans"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-josefin-sans"
                                    >Josefin Sans</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-ibm-plex-sans"
                                    name="font-family"
                                    value="20"
                                    data-font-family="app-font-family-ibm-plex-sans"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-ibm-plex-sans"
                                    >IBM Plex Sans</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-source-sans-pro"
                                    name="font-family"
                                    value="5"
                                    data-font-family="app-font-family-source-sans-pro"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-source-sans-pro"
                                    >Source Sans Pro</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-montserrat-alt"
                                    name="font-family"
                                    value="21"
                                    data-font-family="app-font-family-montserrat-alt"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-montserrat-alt"
                                    >Montserrat Alt</label
                                >
                            </div>
                            <div class="col-6 text-center single-option">
                                <input
                                    type="radio"
                                    class="btn-check"
                                    id="app-font-family-roboto-slab"
                                    name="font-family"
                                    value="22"
                                    data-font-family="app-font-family-roboto-slab"
                                />
                                <label
                                    class="py-2 fs-9 fw-bold text-dark text-uppercase text-spacing-1 border border-gray-2 w-100 h-100 c-pointer position-relative options-label"
                                    for="app-font-family-roboto-slab"
                                    >Roboto Slab</label
                                >
                            </div>
                        </div>
                    </div>
                    <!--! END: [Typography] !-->
                </div>
                <div
                    class="customizer-sidebar-footer px-4 ht-60 border-top d-flex align-items-center gap-2"
                >
                    <div class="flex-fill w-50">
                        <a
                            href="javascript:void(0);"
                            class="btn btn-danger"
                            data-style="reset-all-common-style"
                            >Reset</a
                        >
                    </div>
                    <div class="flex-fill w-50">
                        <a href="javascript:void(0);" class="btn btn-primary"
                            >Download</a
                        >
                    </div>
                </div>
            </div>
        </div>
        @endsection
        <!--! ================================================================ !-->
        <!--! [End] Theme Customizer !-->
        <!--! ================================================================ !-->
        <!--! ================================================================ !-->
        @section('scripts')
        <!--! Footer Script !-->
        <!--! ================================================================ !-->
        <!--! BEGIN: Vendors JS !-->
        <script src="./../public/assets/vendors/js/vendors.min.js"></script>
        <!-- vendors.min.js {always must need to be top} -->
        <script src="./../public/assets/vendors/js/lslstrength.min.js"></script>
        <!--! END: Vendors JS !-->
        <!--! BEGIN: Apps Init  !-->
        <script src="./../public/assets/js/common-init.min.js"></script>
        <!--! END: Apps Init !-->
        <!--! BEGIN: Theme Customizer  !-->
        <script src="./../public/assets/js/theme-customizer-init.min.js"></script>
        <script>
            grecaptcha.ready(function () {
            grecaptcha.execute('{{ config('services.recaptcha.site_key') }}', { action: 'submit' })
                .then(function (token) {
                    document.getElementById('recaptcha-token').value = token;
                });
        });

        </script>
        <!--! END: Theme Customizer !-->
        @endsection