@extends('layouts.register-layout')

@section('content')
    @include('layouts.partials.register-partial-2')
    <div class="col-6">
        <div class="card custom-card" id="card-account" style="height: 100%;min-height: calc(100vh - 30vh);">
            <div class="card-body">
                <div class="row" style="padding-bottom: 3.938rem;">
                    <div class="col-12">
                        <button type="button" class="btn btn-user-demo float-end" id="btn-demo">
                            Masuk User Demo
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="d-flex justify-content-center" style="gap: 0.5rem;">
                            <div class="card account-card"
                                style="border: none;background-color: #F8F8F8;max-width: 11.875rem;cursor: pointer;"
                                data-account="CUSTOM_ACCOUNT">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <h6 class="text-center" style="font-size: 1.125rem;font-weight: 600;">Memiliki
                                                Akun</h6>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-bottom: 0.5rem;">
                                        <div class="col-12">
                                            <p class="text-center" style="font-size: 0.75rem;font-weight: 400;">Upload
                                                langsung akun perusahaan kamu yang sudah siap.</p>
                                        </div>
                                    </div>
                                    <img class="d-block" alt="cloud-upload"
                                        src="{{ asset('asset_web/img/pages/cloud-upload.png') }}"
                                        style="margin-left: auto;margin-right: auto;">
                                </div>
                            </div>
                            <div class="card account-card"
                                style="border: none;background-color: #F8F8F8;max-width: 11.875rem;cursor: pointer;"
                                data-account="STANDARD_ACCOUNT">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-12">
                                            <h6 class="text-center" style="font-size: 1.125rem;font-weight: 600;">Akun
                                                Standar</h6>
                                        </div>
                                    </div>
                                    <div class="row" style="padding-bottom: 0.5rem;">
                                        <div class="col-12">
                                            <p class="text-center" style="font-size: 0.75rem;font-weight: 400;">Kami
                                                menyediakan akun standar yang bisa perusahaan kamu gunakan.</p>
                                        </div>
                                    </div>
                                    <img class="d-block" alt="cloud-upload"
                                        src="{{ asset('asset_web/img/pages/control-panel.png') }}"
                                        style="margin-left: auto;margin-right: auto;">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-absolute" style="bottom: 0.5rem;left: 0.5rem;right: 0.5rem;">
                    <div class="row">
                        <div class="col-6">
                            <a href="/register" class="btn btn-previous">
                                <img alt="small-arrow-left" src="{{ asset('asset_web/img/pages/arrow-small-left.svg') }}">
                                <span class="fw-bold" style="color: #375cb4;font-size: 0.8rem;">Kembali</span>
                            </a>
                        </div>
                        <div class="col-6">
                            <form method="POST" action="{{ url('register/account') }}">
                                @csrf
                                <input type="hidden" name="jenis_akun">
                                <button id="btn-submit" type="submit" class="btn btn-next float-end" disabled="disabled">
                                    <span class="fw-bold" style="color: #375cb4;font-size: 0.8rem;">Selanjutnya</span>
                                    <img alt="small-arrow-right"
                                        src="{{ asset('asset_web/img/pages/arrow-small-right.svg') }}">
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $(".account-card").click(function(e) {
                e.preventDefault();

                $(this).addClass("active");
                $(".account-card").not(this).removeClass("active");

                let jenis_akun = $(this).data("account");
                $('input[name="jenis_akun"]').val(jenis_akun);

                $("#btn-submit").removeAttr("disabled");
            });
        });
    </script>
@endsection