@extends('layouts.parting')
@section('content')
    <section id="hero" class="heading-section">
        <div class="container-xl">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-12">
                    <div class="row mb-4">
                        <div class="col-12 d-flex gap-3 mb-3">
                            <img class="logo" src="assets_client/image/logo.png" alt="">
                            <span class="fs-1 text-primary fw-bold lh-0">Mendaftar AIMI</span>
                        </div>

                        <div class="col-12">
                            <p>Perkenalkan diri anda dan jelajahi aplikasi kami</p>
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        <div class="col-md-6 col-12 mb-3">
                            <a href="{{ route('login') }}" class="w-100 btn btn-sm bg-secondary text-primary">Masuk</a>
                        </div>
                        <div class="col-md-6 col-12 mb-3">
                            <button id="check-redirect" class="w-100 btn btn-sm bg-secondary text-primary">Cek kartu
                                Anggota</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if (session()->has('response'))
        @if (session('response')['status'] === 200)
            <div class="alert alert-success alert-dismissible fade show position-absolute top-0 end-0 mt-3 me-3"
                role="alert">
                <h4 class="alert-heading">Berhasil!</h4>
                <span> {{ session('response')['message'] }} </span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @else
            <div class="alert alert-warning alert-dismissible fade show position-absolute top-0 end-0 mt-3 me-3"
                role="alert">
                <h4 class="alert-heading">Oops!</h4>
                <span> {{ session('response')['message'] }} </span>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
    @endif

    <section id="content">
        <div class="container-xl">
            <form class="row justify-content-center pb-5" method="POST" id="registerForm"
                action="{{ route('register.submit') }}" enctype="multipart/form-data">
                @csrf
                <div class="col-lg-8 col-12">
                    <div class="row">
                        <div class="col-12">
                            <h4 class="text-primary fw-semibold">
                                @if (session()->has('response'))
                                    @if (session('response')['status'] === 200)
                                        Data Token (simpan token ini, karena hanya ada satu kali)
                                    @endif
                                @else
                                    Data Perusahaan
                                @endif
                            </h4>
                        </div>
                    </div>

                    @if (session()->has('response'))
                        @if (session('response')['status'] === 200)
                            <div class="row justify-content-center mb-lg-3 mb-0">
                                <div class="col-12 mb-3">
                                    <input type="text" id="token" value="{{ session('response')['token'] }}"
                                        class="form-control border-primary border-width-2 rounded-3 text-primary py-3 px-4">
                                </div>
                            </div>
                        @endif
                    @else
                        <div class="row justify-content-center mb-lg-3 mb-0">
                            <div class="col-12 mb-3">
                                <input type="text" name="nama_perusahaan" id="nama_perusahaan"
                                    class="form-control border-primary border-width-2 rounded-3 text-primary py-3 px-4"
                                    placeholder="Asal Instansi">
                            </div>
                            <div class="col-12 mb-3">
                                <input type="text" name="nama" id="nama"
                                    class="form-control border-primary border-width-2 rounded-3 text-primary py-3 px-4"
                                    placeholder="Nama Lengkap">
                            </div>
                        </div>

                        <div class="row justify-content-center mb-lg-3 mb-0">
                            <div class="col-md-6 col-12 mb-3">
                                <div class="upload-file d-flex align-items-center justify-content-center">
                                    <div class="position-absolute d-flex flex-column">
                                        <i class="display-1 bi bi-person-vcard mx-auto text-muted"></i>
                                        <p id="ktp-keterangan" class="text-muted">Upload Kartu Tanda Penduduk</p>
                                    </div>
                                    <img src="" class="label-upload rounded-3 object-fit-cover">
                                    <input type="file" id="ktp" name="ktp"
                                        class="form-upload border-primary border-width-2 text-primary py-3 px-4">
                                </div>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <div class="upload-file d-flex align-items-center justify-content-center">
                                    <div class="position-absolute d-flex flex-column">
                                        <i class="display-1 bi bi-person-circle mx-auto text-muted"></i>
                                        <p id="profil" class="text-muted">Foto Profil</p>
                                    </div>
                                    <img src="" class="label-upload rounded-3 object-fit-cover">
                                    <input type="file" id="profil" name="profil"
                                        class="form-upload border-primary border-width-2 text-primary py-3 px-4">
                                </div>
                            </div>

                        </div>

                        <div class="col-12">
                            <input type="text" id="notelp"
                                class="form-control border-primary border-width-2 rounded-3 mb-3 text-primary py-3 px-4"
                                name="notelp" placeholder="No Telepon">
                            <input type="text" id="nofax"
                                class="form-control border-primary border-width-2 rounded-3 mb-3 text-primary py-3 px-4"
                                name="nofax" placeholder="No Fax (optional)">
                            <select id="cabang"
                                class="form-select border-primary border-width-2 rounded-3 mb-3 text-primary py-3 px-4"
                                name="cabang">
                                <option value="" selected>Pilih Cabang</option>
                                @foreach ($lokasi as $cabang)
                                    <option value="{{ $cabang->id_lokasi }}">{{ $cabang->nama }}</option>
                                @endforeach
                            </select>
                            <input type="text" id="website"
                                class="form-control border-primary border-width-2 rounded-3 mb-3 text-primary py-3 px-4"
                                name="website" placeholder="Website (optional)">
                        </div>

                        <div class="col-12 mb-3">
                            <textarea rows="5" id="alamat" name="alamat"
                                class="form-control border-primary border-width-2 rounded-3 text-primary py-3 px-4"
                                placeholder="Alamat Perusahaan"></textarea>
                        </div>

                        <div class="col-12 mb-3">
                            <textarea rows="5" id="informasi_tambahan"
                                class="form-control border-primary border-width-2 rounded-3 text-primary py-3 px-4" name="informasi_tambahan"
                                placeholder="Informasi Tambahan (optional)"></textarea>
                        </div>

                        <div class="col-12 d-flex justify-content-between radio-button">
                            <div class="items">
                                <span class="fs-6 fw-semibold">Jenis Perusahaan</span>
                                <small class="mb-3 d-inline-block">(optional)</small>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="jenis_perusahaan"
                                        id="jenis_perusahaan" value="Jasa">
                                    <label class="form-check-label" for="jenis_perusahaan">Jasa</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="jenis_perusahaan"
                                        id="Manufaktur" value="Manufaktur">
                                    <label class="form-check-label" for="Manufaktur">Manufaktur</label>
                                </div>
                            </div>
                            <div class="items">
                                <span class="fs-6 fw-semibold">BPJS Ketenagakerjaan</span>
                                <small class="mb-3 d-inline-block">(optional)</small>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="bpjs_ketenagakerjaan"
                                        id="bpjs_ketenagakerjaan_ya" value="Ya">
                                    <label class="form-check-label" for="bpjs_ketenagakerjaan_ya">Ya</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="bpjs_ketenagakerjaan"
                                        id="bpjs_ketenagakerjaan_tidak" value="Tidak">
                                    <label class="form-check-label" for="bpjs_ketenagakerjaan_tidak">Tidak</label>
                                </div>
                            </div>

                            <div class="items">
                                <span class="fs-6 fw-semibold">BPJS Kesehatan</span>
                                <small class="mb-3 d-inline-block">(optional)</small>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="bpjs_kesehatan"
                                        id="bpjs_kesehatan_ya" value="Ya">
                                    <label class="form-check-label" for="bpjs_kesehatan_ya">Ya</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="bpjs_kesehatan"
                                        id="bpjs_kesehatan_tidak" value="Tidak">
                                    <label class="form-check-label" for="bpjs_kesehatan_tidak">Tidak</label>
                                </div>
                            </div>
                            <div class="items">
                                <span class="fs-6 fw-semibold">Serikat Pekerja</span>
                                <small class="mb-3 d-inline-block">(optional)</small>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="serikat_pekerja"
                                        id="serikat_pekerja_ada" value="Ada">
                                    <label class="form-check-label" for="serikat_pekerja_ada">Ada</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="serikat_pekerja"
                                        id="serikat_pekerja_belum" value="Belum">
                                    <label class="form-check-label" for="serikat_pekerja_belum">Belum</label>
                                </div>
                            </div>

                            <div class="items">
                                <span class="fs-6 fw-semibold">Status Perusahaan</span>
                                <small class="mb-3 d-inline-block">(optional)</small>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="status_perusahaan"
                                        id="status_perusahaan_bumn" value="BUMN">
                                    <label class="form-check-label" for="status_perusahaan_bumn">BUMN</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="status_perusahaan"
                                        id="status_perusahaan_bumd" value="BUMD">
                                    <label class="form-check-label" for="status_perusahaan_bumd">BUMD</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="status_perusahaan"
                                        id="status_perusahaan_swasta_nasional" value="Swasta Nasional">
                                    <label class="form-check-label" for="status_perusahaan_swasta_nasional">Swasta
                                        Nasional</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="status_perusahaan"
                                        id="status_perusahaan_swasta_asing" value="Swasta Asing">
                                    <label class="form-check-label" for="status_perusahaan_swasta_asing">Swasta
                                        Asing</label>
                                </div>
                            </div>

                            <div class="items">
                                <span class="fs-6 fw-semibold">Jenis Kelamin</span>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="jenis_kelamin"
                                        id="jenis_kelamin_pria" value="Pria">
                                    <label class="form-check-label" for="jenis_kelamin_pria">Pria</label>
                                </div>
                                <div class="form-check p-0 mb-2">
                                    <input class="form-check-input" type="radio" name="jenis_kelamin"
                                        id="jenis_kelamin_wanita" value="Wanita">
                                    <label class="form-check-label" for="jenis_kelamin_wanita">Wanita</label>
                                </div>
                            </div>
                        </div>
                        <hr class="col-12 mx-auto my-4">

                        <div class="g-recaptcha mb-3" data-sitekey="{{ config('google_captcha.site_key') }}"></div>
                        <div class="row justify-content-center">
                            <div class="col-12">
                                <button class="w-100 btn btn-lg bg-secondary text-primary">Mendaftar</button>
                            </div>
                        </div>
                    @endif

                </div>
            </form>
    </section>
@endsection