@extends('layouts.register-layout')

@section('content')
    @include('layouts.partials.register-partial-2')
    <div class="col-6">
        <div class="card custom-card" id="card-account-upload" style="height: 100%;min-height: calc(100vh - 30vh);">
            <div class="card-body" style="width: 50%;margin: 0 auto;">
                <div class="row">
                    <div class="col-12">
                        <a href="/register/account" class="btn btn-previous">
                            <img alt="small-arrow-left" src="{{ asset('asset_web/img/pages/arrow-small-left-black.svg') }}">
                            <span class="fw-bold" style="color: #000000;font-size: 0.8rem;">Kembali</span>
                        </a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="card border-0" style="background-color: #f8f8f8;">
                            <div class="card-body">
                                <h6 class="fw-semibold" style="font-size: 1.125rem;">Memiliki Akun</h6>
                                <p style="font-size: 0.75rem;font-weight: 400;">
                                    Ikuti langkah-langkah berikut agar kami bisa menampilkan laporan keuangan sesuai harapan
                                </p>
                                <table>
                                    <tbody>
                                        <tr>
                                            <td rowspan="3" class="fw-semibold"
                                                style="padding-right: 0.5rem;font-size: 0.75rem;color: #000000;vertical-align: top;">
                                                1.</td>
                                            <td colspan="2" class="fw-semibold"
                                                style="font-size: 0.75rem;color: #000000;">Download Template</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"
                                                style="padding-top: 0.5rem;font-size: 0.75rem;color: #000000;font-weight: 400;">
                                                Pastikan kolom-kolom disesuaikan dengan akun yang kamu miliki.
                                                Jika merasa kebingungan kami menyediakan tutorial.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="padding-top: 1.125rem;">
                                                <a href="{{ config('api.url') }}admin-auth/masakun-export?nik={{ session('register_nik') }}&type=template"
                                                    target="_blank" class="btn btn-upload">Download
                                                    Template
                                                </a>
                                            </td>
                                            <td style="padding-top: 1.125rem;">
                                                <a href="https://www.youtube.com/" target="_blank" class="btn btn-tutorial">
                                                    <img alt="yt-logo"
                                                        src="{{ asset('asset_web/img/pages/yt-logo.png') }}">
                                                    <span>Tutorial</span>
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table style="margin-top: 2rem;">
                                    <tbody>
                                        <tr>
                                            <td rowspan="3" class="fw-semibold"
                                                style="padding-right: 0.5rem;font-size: 0.75rem;color: #000000;vertical-align: top;">
                                                2.</td>
                                            <td colspan="2" class="fw-semibold"
                                                style="font-size: 0.75rem;color: #000000;">Upload Akun</td>
                                        </tr>
                                        <tr>
                                            <td colspan="2"
                                                style="padding-top: 0.5rem;font-size: 0.75rem;color: #000000;font-weight: 400;">
                                                Akun sudah siap? kamu bisa proses sekarang!
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colspan="2" style="padding-top: 1.125rem;">
                                                <button id="btn-upload" type="button" class="btn btn-upload">Upload
                                                    Akun
                                                </button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="position-absolute" style="bottom: 0.5rem;left: 0;right: 0.5rem;">
                    <div class="row">
                        <div class="col-12">
                            <a href="/register/account/saldo" class="btn btn-next float-end">
                                <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') }}">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="uploadModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="modalUploadLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="modalUploadLabel">Upload Akun</h1>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="formFile" class="form-label">Silahkan Upload Akun Kamu Disini</label>
                        <input class="form-control is-error" type="file" id="formFile">
                        <input id="user_id" value="{{ session('register_nik') }}" type="hidden">
                        <div id="invalid-upload" class="fw-semibold" style="font-size: 0.8rem;color:#dc2626;display: none;">
                        </div>
                        <div id="status-upload" class="fw-semibold" style="font-size: 0.8rem;color:#a3a3a3;display: none;">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="close-modal" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $("#btn-upload").click(function(e) {
                e.preventDefault();

                $("#formFile").val("");
                $("#formFile").removeClass("is-error");
                $("#invalid-upload").hide();
                $("#status-upload").hide();

                $("#uploadModal").modal("show");
            });

            $("#formFile").change(function(e) {
                e.preventDefault();

                let file = $(this)[0];
                let value = file.value;
                let allowedExtensions = /(\.xls|\.xlsx)$/i;

                if (!allowedExtensions.exec(value)) {
                    $("#formFile").addClass("is-error");
                    $("#invalid-upload").text("File harus berformat .xls/.xlsx");
                    $("#invalid-upload").show();

                    file.value = "";
                    $(this).val("");

                    return false;
                }

                let fileSize = file.files[0].size / 1024 / 1024;
                if (fileSize > 2) {
                    $("#formFile").addClass("is-error");
                    $("#invalid-upload").text("File tidak boleh melebihi 2 mb");
                    $("#invalid-upload").show();

                    file.value = "";
                    $(this).val("");

                    return false;
                }

                let formData = new FormData();
                formData.append("file", file.files[0]);
                formData.append("user_id", $("#user_id").val());

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/account/upload') }}",
                    data: formData,
                    contentType: false,
                    cache: false,
                    processData: false,
                    async: true,
                    beforeSend: function() {
                        $("#status-upload").text("Proses Upload...");
                        $("#status-upload").show();

                        $("#close-modal").attr("disabled", "disabled");
                    },
                    success: function(response) {
                        $("#status-upload").text("Upload Akun Selesai.");

                        setTimeout(() => {
                            $("#uploadModal").modal("hide");
                        }, 1000);
                    },
                    complete: function() {
                        $("#close-modal").removeAttr("disabled");
                    }
                });
            });
        });
    </script>
@endsection