@php
    $customizerHidden = 'customizer-hide';
    $configData = Helper::appClasses();
    $pageConfigs['myLayout'] = 'blank';
@endphp

@extends('layouts/layoutMaster')

@section('title', 'Account Activation')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css') }}" />
@endsection

@section('page-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/page-auth.css') }}">
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js') }}"></script>
@endsection

@section('page-script')
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script src="{{ asset('assets/js/pages-auth.js') }}"></script>
@endsection

@section('content')
    <div style="background-image: url({{ asset('assets/images/bg/2.jpg') }});">
        {{-- <div class="container-xxl"> --}}
        <div class="authentication-wrapper authentication-basic container-p-y">
            <div class="authentication-inner py-4">
                @if (session('reg-ok'))
                    <div class="card" style="width: 600px;">
                        <div class="card-body">
                            <div class="app-brand justify-content-center mb-4">
                                <a href="{{ route('dashboard.index') }}"><img class="img-fluid" style="height: 100px;"
                                        alt="app-logo" src="{{ asset('assets/images/app-logo-dark.png') }}" />
                                </a>
                            </div>
                            <h4 class=" mb-1">Registration Complete</h4>
                            <p class="mb-4">Your account has been successfully created. Please login to start using
                                the
                                system.</p>
                            <div class="mb-3">
                                <a href="{{ route('auth.login') }}" class="btn btn-primary d-grid w-100">Continue to sign
                                    in</a>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="card" style="width: 600px;">
                        <div class="card-body">
                            @if (session('error'))
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                    {{ session('error') }}
                                    <div class="small text-muted">{{ session('errorMessage') }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif

                            {{-- @if ($errors->any())
                                <div class="col-md-12 alert alert-danger alert-dismissable fade show" role="alert">
                                    <ul class="px-3 my-1">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                    {{ $errors[0] }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif --}}

                            @if ($errors->any())
                                @foreach ($errors->all() as $error)
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        {{ $error }}
                                        <button type="button" class="btn-close" data-bs-dismiss="alert"
                                            aria-label="Close"></button>
                                    </div>
                                @endforeach
                            @endif

                            @if (session('status'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('success') }}
                                    <div>{{ session('status') }}</div>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="Close"></button>
                                </div>
                            @endif

                            <div class="app-brand justify-content-center mb-4">
                                <a href="{{ route('dashboard.index') }}"><img class="img-fluid" style="height: 100px;"
                                        alt="app-logo" src="{{ asset('assets/images/app-logo-dark.png') }}" />
                                </a>
                            </div>
                            <h4 class=" mb-1">Account Activation</h4>
                            <p class="mb-4">Please fill up all fields to complete your registration.</p>
                            <form class="mb-3" role="form" method="POST" action="{{ route('auth.activate') }}">
                                {!! csrf_field() !!}

                                <input type="hidden" value="{{ $invite->code }}" name="code" />

                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="text" class="form-control" id="email" name="email" readonly
                                        value="{{ $invite->email }}">
                                </div>

                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="first-name" class="form-label">First name</label>
                                        <input type="text" class="form-control" name="first_name" maxlength="191"
                                            value="{{ old('first_name') }}" id="first-name">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="last-name" class="form-label">Last name</label>
                                        <input type="text" class="form-control" name="last_name" maxlength="191"
                                            value="{{ old('last_name') }}" id="last-name">
                                    </div>
                                </div>

                                <div class="row g-3 mb-3">
                                    <div class="col-md-6">
                                        <label for="password" class="form-label">
                                            Password
                                            <i class="ti ti-help text-muted" data-bs-toggle="tooltip"
                                                data-bs-placement="top" title="{{ $invite->passInfo }}"></i>
                                        </label>
                                        <input type="password" maxlength="191" class="form-control" name="password"
                                            id="password" maxlength="191">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="password-confirm" class="form-label">
                                            Confirm password
                                        </label>
                                        <input type="password" maxlength="191" class="form-control"
                                            name="password_confirmation" id="password-confirm" maxlength="191">
                                    </div>
                                </div>

                                <div class="mb-3">
                                    <label class="form-check m-0">
                                        <input type="checkbox" name="agree_term" class="form-check-input" />
                                        <span class="form-check-label">I have read and accept the <a
                                                href="{{ url('pages/terms') }}">Terms of Use</a>
                                            and
                                            <a href="{{ url('pages/privacy') }}">Privacy Policy</a></span>
                                    </label>
                                </div>

                                {{-- <div class="mb-3" style="display: flex; justify-content: center;">
                                    <div class="g-recaptcha" data-sitekey="{{ config('recaptcha.site_key') }}">
                                    </div>
                                </div> --}}

                                <div class="mb-3">
                                    <button class="btn btn-primary d-grid w-100" type="submit">Submit</button>
                                </div>

                            </form>
                        </div>
                    </div>
                @endif
            </div>
        </div>
        {{-- </div> --}}
    @endsection