<?= $this->extend('template/layout') ?>

<?= $this->section('title') ?>Data Calon Nasabah - <?= env('app.name') ?><?= $this->endSection() ?>

<!-- main section start-->
<?= $this->section('main') ?>
<?php
    $uri      = current_url(true);
    $segment1 = $uri->setSilent()->getSegment(1);
    $segment2 = $uri->setSilent()->getSegment(2);
    $segment3 = $uri->setSilent()->getSegment(3);
?>
<!-- Breadcumb -->
<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);"><?= env('app.name') ?></a></li>
    <li class="breadcrumb-item"><?= ucfirst($segment1) ?></li>
    <li class="breadcrumb-item">Data Calon Nasabah</li>
    <li class="breadcrumb-item">Proses Closing</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>
<div class="row">
    <div class="col-xl-12">
        <div id="panel-1" class="panel">
            <div class="panel-hdr border-faded border-top-1 border-right-0 border-left-0 shadow-0">
                <h2>Form Closing</h2>
                <div class="panel-toolbar pr-3">
                    <a href="<?= $back ?>" class="btn btn-secondary btn-sm"><i class="fal fa-arrow-left"></i> KEMBALI</a>
                </div>
            </div>

            <div class="panel-container show">
                <div class="panel-content">
                    <div class="row">
                        <div class="col-12 col-sm-6">

                            <?= form_open("", 'id="cnas_form"') ?>
                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Kegiatan:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nama_giat ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Produk:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $uraian ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Tanggal Kegiatan:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= date('d/m/Y', strtotime($tgl_kegiatan)) ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Nama Calon:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nama_calon ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Tanggal Lahir:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= date('d/m/Y', strtotime($tgl_lahir)) ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Alamat:</label>
                                    <div class="col-9 col-sm-9">
                                        <textarea class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" rows="3" disabled><?= $alamat ?></textarea>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">No. WhatsApp:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $no_wa ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">NIK:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $nik ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Referal:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" value="<?= $referal ?>" disabled>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Foto Kegiatan:</label>
                                    <div class="col-9 col-sm-9">
                                        <?php if (!empty($foto_kegiatan) && file_exists(ROOTPATH . 'public/fotokegiatan/' . $foto_kegiatan)) { ?>
                                            <div class="mb-2">
                                                <img src="<?= base_url('fotokegiatan/' . $foto_kegiatan) ?>" alt="Foto Kegiatan" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                                            </div>
                                            <small class="text-muted"><?= $foto_kegiatan ?></small>
                                        <?php } else { ?>
                                            <span class="text-muted">Tidak ada foto</span>
                                        <?php } ?>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <div class="col-12 col-sm-6">
                            <?= form_open_multipart("", 'id="calonasabah_form"', ['id' => $id, 'foto_kegiatan_lama' => $foto_kegiatan]) ?>
                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Tgl. Closing:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="date" id="tgl_closing" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" name="tgl_closing" value="">
                                        <div class="invalid-feedback" id="em_tgl_closing"></div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Email:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="email" id="email" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" name="email" value="" placeholder="Email Nasabah" maxlength="100">
                                        <div class="invalid-feedback" id="em_email"></div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Pekerjaan:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" id="pekerjaan" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" name="pekerjaan" value="" placeholder="Pekerjaan/ Sumber Penghasilan" maxlength="150">
                                        <div class="invalid-feedback" id="em_pekerjaan"></div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Nama Ibu:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" id="maiden_name" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent ginputx" name="maiden_name" value="" placeholder="Nama Gadis Ibu Kandung" maxlength="150">
                                        <div class="invalid-feedback" id="em_maiden_name"></div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Ket.:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="text" id="ket" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" name="ket" value="" placeholder="Keterangan Lainnya (jika ada)" maxlength="200">
                                    </div>
                                </div>



                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Foto KTP:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="file" id="foto_ktp" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" name="foto_ktp" accept="image/*">
                                        <div class="invalid-feedback" id="em_foto_ktp"></div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <label class="col-3 col-sm-3 col-form-label text-right">Foto Closing:</label>
                                    <div class="col-9 col-sm-9">
                                        <input type="file" id="foto_closing" class="form-control rounded-0 border-top-0 border-left-0 border-right-0 px-0 bg-transparent" name="foto_closing" accept="image/*">
                                        <div class="invalid-feedback" id="em_foto_closing"></div>
                                    </div>
                                </div>
   
                                <hr>
                                <div class="invalid-feedback text-center" id="em_message"></div>
                                <div class="clearfix">
                                    
                                    <?= form_submit('btn_calonasabah', $button, 'waves-effect waves-themed float-right') ?>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- end panel 1 -->
    </div><!-- end col-xl-6 -->
</div><!-- end row -->
<?= $this->endSection() ?>
<!-- main section end-->

<!-- pageScripts section start-->
<?= $this->section('pageScripts') ?>
<script type="text/javascript">
    $('.ginputx').inputmask({
        regex: "^[a-zA-Z0-9\\s.,@-]*$"
    });

    $('#no_wa').inputmask({
        regex: "^[0-9]*$"
    });

    $('#nik').inputmask({
        regex: "^[0-9]*$"
    });

    $('.select2').select2({
        dropdownCssClass:'increasezindex'
    });

    

    $("#calonasabah_form").submit(function(e) {
        e.preventDefault();
        var url = '<?= $action ?>';
        var formData = new FormData(this);
        
        $.ajax({
            url: url,
            type: "POST",
            dataType: 'json',
            data: formData,
            processData: false,
            contentType: false,
            beforeSend: function() {
                // Clear previous validation errors
                $(".form-control").removeClass("is-invalid");
                $(".invalid-feedback").html('').hide();
                $("#em_message").html('').hide();
                
                // Show loading button
                BtnLoading($("#btn_calonasabah"));
            },
            error: function(xhr, status, message) {
                try {
                    var res = JSON.parse(xhr.responseText);
                    
                    // Handle validation errors
                    if (res.messages) {
                        $(res.messages).each(function(i, val) {
                            var inputname = Object.keys(val)[0];
                            $.each(val, function(k, v) {
                                $("#" + k).addClass("is-invalid");
                                $("#em_" + k).html(v).fadeIn();
                                $("#" + inputname).focus();
                            });
                        });
                    }
                    
                    // Handle general error message
                    if (res.message) {
                        $("#em_message").html(res.message).fadeIn();
                    }
                    
                } catch (e) {
                    console.error('Error parsing response:', e);
                    $("#em_message").html('Terjadi kesalahan sistem').fadeIn();
                }
            },
            success: function(res) {
                // Show success message
                toastr.success(res.message, 'Berhasil!', {
                    timeOut: 2000,
                    onHidden: function() {
                        // Redirect to list page after toast
                        window.location.href = '<?= $back ?>';
                    }
                });
            },
            complete: function() {
                // Reset button state
                BtnReset($("#btn_calonasabah"));
            }
        });
    });

    // Trigger event jika form sudah ada nilai (mode edit)
    $(document).ready(function() {
        if ($('#id_kegiatan').val()) {
            $('#id_kegiatan').trigger('change');
        }
    });
</script>
<?= $this->endSection() ?>
<!-- pageScripts section end-->
