@extends('layouts.paybase')

@section('form-name')
    <form method="post" id="form" action="{{ action('CourseController@bllupdate', $kolej) }}" data-parsley-validate>
    @endsection

    @section('pay-details')
        <div class="fdb-box py-3 mb-3">
            <div class="row justify-content-left">
                <div class="col-md-12 text-left">
                    <h2>{{ $yuran->yuran }} </h2>
                </div>
            </div>
            <div class="row justify-content-left">
                <div class="col text-left">
                    <span class="">{{ $kolej->name }}</span>
                    <br />
                    <small>Peringkat:</small> <strong> {{ $level }} </strong>
                    <input type="hidden" name="level" value="{{ $level }}" />
                    <br />
                    <small>Sesi:</small> <strong> {{ $year }} </strong>
                    <input type="hidden" name="sesi" value="{{ $year }}" />
                    <br />
                    <small>Semester:</small> <strong> {{ $semester }} </strong>
                    <input type="hidden" name="semester" value="{{ $semester }}" />
                    <br />
                    <small>Jenis Pembayaran:</small> <strong> {{ $yuran->yuran }} </strong>
                    <input type="hidden" name="yuran" value="{{ $yuran->kod }}" />
                    <br />
                </div>
            </div>
            <div class="row pt-2">
                <div class="col small text-justify text-danger">
                    NOTIS PEMBAYARAN KM/KPM (LAIN-LAIN PEMBAYARAN) : SILA PASTIKAN BUTIRAN INSTITUSI, TAHUN, YURAN DAN
                    SEMESTER YANG DIPILIH ADALAH TEPAT SEBELUM MENERUSKAN PEMBAYARAN
                </div>
            </div>
        </div>

        <div class="fdb-box py-3 mb-3">
            <div class="row justify-content-left">
                <div class="col">
                    <h3>Maklumat Bayaran</h3>
                </div>
            </div>
            <div class="row justify-content-left my-3">
                <div class="col-sm-2">
                    <label class="required" for="carabayar" class="col-form-label">Yuran/Fi</label>
                </div>
                <div class="col-sm-10">
                    @foreach ($gradfee as $fee)
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" id="{{ 'fee' . $fee->id }}" name="fee"
                                value="{{ $fee->id }}" nilai="{{ $fee->amount }}" required
                                onchange="updateFee();" />
                            <label class="form-check-label" for="{{ 'fee' . $fee->id }}"><span>
                                    RM {{ number_format($fee->amount, 2) }}
                                </span>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="row justify-content-left my-2">
                <div class="col-sm-2">
                    <label class="required" for="refnote" class="col-form-label">Reference Note:</label>
                </div>
                <div class="col-sm-10">
                    <div class="row">
                        <div class="col-sm-12">
                            <input type="text" class="form-control" name="refnote" id="refnote" 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()"
                                value="{{ old('refnote') }}" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <small><strong>Nama ibu/bapa/penjaga</strong></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection


    @section('pay-amount')
        <div class="row pb-4">
            <div class="col text-justify text-danger">
                <strong>
                    Sila pastikan jumlah sebenar yuran sebelum membuat bayaran dengan merujuk pusat masing-masing
                </strong>
            </div>
        </div>
        <div class="row justify-content-left">
            <div class="col-sm-2">
                <label class="required" for="nilai_bayaran" class="col-form-label">Nilai (RM)</label>
            </div>
            <div class="col-sm-10">
                <span id="nilai-txt"></span>
                <input type="hidden" name="nilai_bayaran" id="nilai_bayaran" value="{{ old('nilai_bayaran') }}"
                    data-parsley-min='1' required>
            </div>
        </div>
    @endsection

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

    @section('page_scripts')
<script>

function updateFee(){
  var nilai;
  var pval = $('input[name=fee]:checked').attr('nilai') ? parseFloat($('input[name=fee]:checked').attr('nilai')) : 0 ;
  var oval = parseFloat($('input[name=optional]:checked').attr('nilai'));
  if( oval ){
      nilai = oval + pval;
  }else{
    nilai = pval;
  }
  nilai = nilai.toFixed(2);
  $('#nilai_bayaran').val(nilai);
  $('#nilai-txt').html(nilai);
}

</script>

@endsection