@extends('layouts.register-layout')

@section('content')
    @include('layouts.partials.register-partial-3')
    <div class="col-6">
        <div class="card custom-card" id="card-saldo" style="height: 100%;">
            <form method="POST" action="{{ url('register/finish') }}">
                @csrf
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="position-relative" style="height: 5.5rem;">
                                <label for="periode_saldo" class="form-label"><span style="color: #dc2626;">*
                                    </span> Periode Saldo Awal
                                </label>
                                <input type="text" id="periode_saldo"
                                    class="form-control @error('periode_saldo') is-error @enderror"
                                    placeholder="Periode Saldo Awal..." autocomplete="off"
                                    value="{{ old('saldo_periode') ?? date('d-m-Y') }}" readonly>
                                <input type="hidden" name="periode_saldo"
                                    value="{{ old('periode_saldo') ?? date('Y-m-d') }}">
                            </div>
                        </div>
                    </div>
                    <div id="card-account" class="position-relative" style="margin-bottom: 1rem;">
                        <table id="table-saldo" class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="text-center sticky-top">#</th>
                                    <th class="text-center sticky-top">Akun</th>
                                    <th class="text-center sticky-top">Deskripsi</th>
                                    <th class="text-center sticky-top">Jumlah</th>
                                </tr>
                            </thead>
                            <tbody>
                                @for ($i = 0; $i < count($data); $i++)
                                    <tr>
                                        <td class="text-center">{{ $i + 1 }}</td>
                                        <td>
                                            <input type="text" name="kode_akun[]" class="form-control form-control-sm"
                                                value="{{ $data[$i]['kode_akun'] }}">
                                        </td>
                                        <td>
                                            <input type="text" name="deskripsi[]" class="form-control form-control-sm"
                                                value="{{ $data[$i]['nama'] }}">
                                        </td>
                                        <td>
                                            <input type="text" name="saldo[]"
                                                class="form-control form-control-sm text-end input-saldo" value="0">
                                        </td>
                                    </tr>
                                @endfor
                            </tbody>
                        </table>
                    </div>
                    <div class="position-absolute"
                        style="bottom: 0.5rem;left: 0.5rem;right: 0.5rem;background-color: #ffffff;">
                        <div class="row">
                            <div class="col-6">
                                <a href="/register/account/redirect" 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">
                                <button id="btn-submit" type="submit" class="btn btn-next float-end">
                                    <span class="fw-bold" style="color: #375cb4;font-size: 0.8rem;">Selesai</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @if ($errors->any())
        <div class="toast-container position-fixed top-0 start-50 translate-middle-x">
            <div id="toast-error" class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-header" style="background-color: #dc2626;">
                    <strong class="me-auto" style="color: #ffffff;">Setting Saldo Awal Gagal</strong>
                    <small style="color: #ffffff;">Just Now</small>
                    <button id="btn-close-toast" type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"
                        data-bs-target="#toast-otp" aria-label="Close"></button>
                </div>
                <div class="toast-body">
                    {{ $errors->first('message') }}
                </div>
            </div>
        </div>
    @endif

    <script>
        $(document).ready(function() {
            $("#card-account").css({
                "max-height": "39rem",
            });

            $(".input-saldo").inputmask("numeric", {
                radixPoint: ",",
                groupSeparator: ".",
                digits: 0,
                allowMinus: false,
                autoGroup: true,
                rightAlign: true,
                oncleared: function() {
                    return false;
                }
            });

            const picker = datepicker("#periode_saldo", {
                formatter: (input, date, instance) => {
                    const value = date.toLocaleDateString();

                    const temp = value.split('/');

                    for (let index = 0; index < temp.length; index++) {
                        if (parseInt(temp[index]) < 10) {
                            temp[index] = `0${temp[index]}`;
                        }

                    }

                    input.value = `${temp[1]}-${temp[0]}-${temp[2]}`;

                    $('input[name="periode_saldo"]').val(`${temp[2]}-${temp[0]}-${temp[1]}`);
                }
            });

            $("#btn-close-toast").click(function(e) {
                e.preventDefault();

                $("#toast-error").toast("hide");
            });
        });
    </script>
@endsection