@extends('layouts.panel.app', ['title' => 'Tambah Konfirmasi'])

@section('content')


<section class="section">
    <div class="section-title">
        <h3>Konfirmasi Pembayaran</h3>
    </div>
    <p class="section-lead">
        Silakan tambah konfirmasi pembayaranmu di sini.
    </p>
    <div class="row">
        <div class="col-md-12">
            <div class="card border-0 shadow rounded">
                <div class="card-header">
                    <h4>Form Konfirmasi Pembayaran</h4>
                    <div class="card-header-action">
                        <a href="{{ route('non-anggota.confirm') }}" class="btn btn-success">Kembali</a>
                    </div>
                </div>
                <div class="alert alert-primary alert-has-icon">
                    <div class="alert-icon"><i class="far fa-lightbulb"></i></div>
                    <div class="alert-body">
                        <div class="alert-title">Informasi</div>
                        Untuk pembayaran melalui VIRTUAL ACCOUNT tidak perlu konfirmasi dan mengunggah bukti pembayaran.
                    </div>
                </div>
                <div class="card-body">
                    <form id="fmconfirm" action="{{ route('non-anggota.confirm.store') }}" method="POST" enctype="multipart/form-data" class="needs-validation" novalidate="" onsubmit="prosesData();">
                        @csrf

                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label class="font-weight-bold">INVOICE</label>
                                <select class="form-control select2" id="invoice_no" name="invoice_no" value="{{ old('invoice_no') }}" placeholder="Pilih invoice" required="">
                                    <option value="">Pilih Invoice</option>
                                    @foreach($invoice as $item)
                                    <option {{ old('invoice_no') == $item->invoice_no ? "selected" : "" }} value="{{ $item->invoice_no }}"><b>{{ $item->invoice_no }}</b> - #APPL000{{$item->application_id}}/{{date('d-m-Y', strtotime($item->application_date))}} <b>{{ $item->code }} {{ $item->name }}</b> ( {{ $item->application_front_degree }} {{ $item->application_name }} {{ $item->application_back_degree }} ) Rp. {{ number_format($item->invoice_total, 0) }}</option>
                                    @endforeach
                                </select>
                                <!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih invoice
                                </div>
                            </div>

                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold">METODE PEMBAYARAN</label>
                                <select class="form-control select2" id="pay_metode" name="pay_metode" value="{{ old('pay_metode') }}" placeholder="Pilih metode" required="">
                                    <option value="">Pilih Metode</option>
                                    <!-- <option {{ old('pay_metode') == "TUNAI" ? "selected" : "" }} value="TUNAI">Pembayaran TUNAI</option> -->
                                    <option {{ old('pay_metode') == "Bank Syariah Indonesia (BSI)" ? "selected" : "" }} value="Bank Syariah Indonesia (BSI)">Bank Syariah Indonesia (BSI)</option>
                                    <option {{ old('pay_metode') == "Bank Rakyat Indonesia (BRI)" ? "selected" : "" }} value="Bank Rakyat Indonesia (BRI)">Bank Rakyat Indonesia (BRI)</option>
                                    <option {{ old('pay_metode') == "Bank Negara Indonesia (BNI)" ? "selected" : "" }} value="Bank Negara Indonesia (BNI)">Bank Negara Indonesia (BNI)</option>
                                    <option {{ old('pay_metode') == "Bank Mandiri" ? "selected" : "" }} value="Bank Mandiri">Bank Mandiri</option>
                                    <option {{ old('pay_metode') == "Bank Central Asia (BCA)" ? "selected" : "" }} value="Bank Central Asia (BCA)"> Bank Central Asia (BCA)</option>
                                    <option {{ old('pay_metode') == "Bank Danamon" ? "selected" : "" }} value="Bank Danamon">Bank Danamon</option>
                                    <option {{ old('pay_metode') == "Bank CIMB Niaga" ? "selected" : "" }} value="Bank CIMB Niaga">Bank CIMB Niaga</option>
                                    <option {{ old('pay_metode') == "Bank Permata" ? "selected" : "" }} value="Bank Permata">Bank Permata</option>
                                    <option {{ old('pay_metode') == "Bank OCBC NISP" ? "selected" : "" }} value="Bank OCBC NISP">Bank OCBC NISP</option>
                                    <option {{ old('pay_metode') == "Bank Maybank Indonesia" ? "selected" : "" }} value="Bank Maybank Indonesia">Bank Maybank Indonesia</option>
                                    <option {{ old('pay_metode') == "Bank Panin" ? "selected" : "" }} value="Bank Panin">Bank Panin</option>
                                    <option {{ old('pay_metode') == "Bank Tabungan Negara (BTN)" ? "selected" : "" }} value="Bank Tabungan Negara (BTN)">Bank Tabungan Negara (BTN)</option>
                                    <option {{ old('pay_metode') == "Bank Mega" ? "selected" : "" }} value="Bank Mega">Bank Mega</option>
                                    <option {{ old('pay_metode') == "Bank Bukopin" ? "selected" : "" }} value="Bank Bukopin">Bank Bukopin</option>
                                    <option {{ old('pay_metode') == "Bank HSBC Indonesia" ? "selected" : "" }} value="Bank HSBC Indonesia">Bank HSBC Indonesia</option>
                                    <option {{ old('pay_metode') == "Bank UOB Indonesia" ? "selected" : "" }} value="Bank UOB Indonesia">Bank UOB Indonesia</option>
                                    <option {{ old('pay_metode') == "Bank DBS Indonesia" ? "selected" : "" }} value="Bank DBS Indonesia">Bank DBS Indonesia</option>
                                    <option {{ old('pay_metode') == "Bank JTrust Indonesia" ? "selected" : "" }} value="Bank JTrust Indonesia">Bank JTrust Indonesia</option>
                                    <option {{ old('pay_metode') == "Bank Maspion Indonesia" ? "selected" : "" }} value="Bank Maspion Indonesia">Bank Maspion Indonesia</option>
                                    <option {{ old('pay_metode') == "Bank Lainnya" ? "selected" : "" }} value="Bank Lainnya">Bank Lainnya</option>
                                </select>
                                <!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih metode
                                </div>
                            </div>

                            <div class="col-md-6 form-group">
                                <label class="font-weight-bold">PILIH TANGGAL BUKTI BAYAR</label>
                                <input type="date" class="form-control" max="2026-11-12" id="pay_date" name="pay_date" value="{{ old('pay_date') }}" placeholder="Pilih tanggal" required>
                                <!-- error message untuk route -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Pilih tanggal
                                </div>
                            </div>

                            <div class="col-md-12 form-group">
                                <label class="font-weight-bold">BUKTI PEMBAYARAN</label>
                                <div class="md-2">
                                    <img id="imgPreview" src="{{asset('assets/images/default-confirm.png')}}" alt="Gambar" style="width: 272px; height: 310px" />
                                </div>
                                <div class="md-2">
                                    <p>
                                </div>
                                <input type="file" class="form-control" id="file" name="file" placeholder="Masukkan bukti" accept=".jpg,.jpeg,.png,.pdf" required>
                                <!-- error message untuk image -->
                                <div class="invalid-feedback alert alert-danger mt-2">
                                    Masukan bukti
                                </div>
                            </div>


                            <div class="col-md-12 form-group">
                                <button id="submit-btn" type="submit" style="width:100px" class="btn btn-primary btn-action" data-toggle="tooltip" title="Simpan"><i class="fas fa-save"></i></button>
                                <button type="reset" onclick="myReset()" class="btn btn-warning btn-action" data-toggle="tooltip" title="Batal"><i class="fas fa-redo-alt"></i></button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="loading" style="display: none;">
        <img src="{{ asset('assets-panel/img/loading-submit.gif') }}" alt="Loading...">
    </div>
</section>

<script>
    function validateForm() {
        const invoice_no = document.getElementById("invoice_no").value.trim();
        const pay_metode = document.getElementById("pay_metode").value.trim();
        const pay_date = document.getElementById("pay_date").value.trim();
        const file = document.getElementById("file").value.trim();


        if (invoice_no === "") {
            // alert("Status wajib dipilih");
            return false;
        }

        if (pay_metode === "") {
            // alert("Keterangan wajib diisi");
            return false;
        }

        if (pay_date === "") {
            // alert("Keterangan wajib diisi");
            return false;
        }

        if (file === "") {
            // alert("Keterangan wajib diisi");
            return false;
        }

        return true;
    }

    function prosesData() {
        const isValid = validateForm();
        if (isValid) {
            showLoading();
            disableButton();
        }
    }

    function showLoading() {
        document.getElementById("loading").style.display = "block";
    }

    function disableButton() {
        document.getElementById("submit-btn").disabled = true;
        document.getElementById("submit-btn").innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Proses...';
    }
</script>

@endsection