@extends('layouts.paybase')

@section('form-name')
    <form method="post" id="form" action="" data-parsley-validate>
    @endsection

    @section('pay-details')
        <div class="fdb-box py-3 mb-3">
            <div class="row justify-content-left">
                <div class="col text-left">
                    <h3>ANUGERAH USAHAWAN MARA (AURA) <i class="lead fas"></i> </h3>
                </div>
            </div>
            <div class="row justify-content-left">
                <div class="col text-left">
                    <input type="hidden" name="program_id" value="{{ $program->id }}" />
                    <strong>{{ $program->name }}</strong>
                    <br />
                    <strong>Sesi:</strong> {{ $program->program_start->format('d M Y') }} -
                    {{ $program->program_end->format('d M Y') }}
                    <br />
                </div>
            </div>
        </div>

        <div class="fdb-box py-3 mb-3">
            <div class="row justify-content-left py-2">
                <div class="col text-left">
                    <i class="far fa-user-circle text-info"></i> <strong>Sila lengkapkan maklumat berikut sebelum meneruskan
                        pembayaran</strong>
                </div>
            </div>
            <div class="form-group row">
                <label for="nama_peserta" class="col-sm-2 col-form-label required">Nama Peserta</label>
                <div class="col-sm-10">
                    <input name="nama_peserta" type="text" class="form-control" value="{{ old('nama_peserta') }}"
                        data-parsley-trigger="change" data-parsley-pattern="^[a-zA-Z0-9\s\/\'\-\@\(\)\&]+"
                        data-parsley-maxlength="220" style="text-transform: uppercase"
                        oninput="this.value = this.value.toUpperCase()" required>
                </div>
            </div>
            <div class="form-group row">
                <label for="yuran" class="col-sm-2 col-form-label required">Yuran/Fi</label>
                <div class="col-sm-10">
                    RM {{ $program->amount }} - per individu
                </div>
            </div>
            <div class="form-group row">
                <label for="bil_peserta" class="col-sm-2 col-form-label required">Bil. Individu</label>
                <div class="col-sm-10">
                    <select id="bil_peserta" name="bil_peserta" class="form-control form-control-sm" required>
                        <option selected disabled>Sila pilih bilangan individu</option>
                        @for ($i = 1; $i <= $limit; $i++)
                            {{-- Adjust 10 to max allowed individuals --}}
                            <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>
            </div>
        </div>

        <div class="row text-center">
            <div class="col my-0 py-0">
                <div class="alert alert-info" role="alert">
                    Sila pastikan jumlah bayaran yang anda lakukan adalah benar
                </div>
            </div>
        </div>
    @endsection

    @section('pay-amount')
        <div class="form-group row justify-content-left">
            <div class="col-sm-2">
                <label class="" for="nilai_bayaran" class="col-form-label">Nilai (RM)</label>
            </div>
            <div class="col-sm-10">
                <span id="nilai-txt">{{ number_format($program->amount, 2) }}</span>
                <input type="hidden" name="nilai_bayaran" id="nilai_bayaran" value="{{ $program->amount }}"
                    data-parsley-min='1' required>
            </div>
        </div>
    @endsection

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var bilPesertaSelect = document.getElementById('bil_peserta');
            var nilaiTxt = document.getElementById('nilai-txt');
            var nilaiBayaranInput = document.getElementById('nilai_bayaran');
            var baseAmount = {{ $program->amount }};

            bilPesertaSelect.addEventListener('change', function() {
                var quantity = parseInt(this.value);
                var totalAmount = baseAmount * quantity;

                nilaiTxt.textContent = totalAmount.toFixed(2);
                nilaiBayaranInput.value = totalAmount;

                console.log('Base: ' + baseAmount + ', Quantity: ' + quantity + ', Total: ' + totalAmount);
            });
        });
    </script>

    @section('button-block')
        @parent
        <a href="{{ action('AuraController@index') }}" class="btn btn-dark">
            Kembali
        </a>
    @endsection