@extends('layout.admin')

@section('content')

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">DATA NAMA NASABAH</h1>
                </div><!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">DATA NAMA NASABAH</li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form action="{{ route('export-excel-nasabah') }}" method="POST">
                                @csrf
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td><label for="pilihpen">Pilih Kategori Pencarian : &nbsp; </label></td>
                                            <td>
                                                <select id="pilihpen" name="pilihpen">
                                                    <option class="text-center" value=""> - Pilih - </option>
                                                    <option value="Nama_Nasabah"> Nama Nasabah </option>
                                                    <option value="KTP"> KTP </option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td><label for="search">Search:</label></td>
                                            <td><input type="text" class="form-control" id="search" name="search"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="display: flex; justify-content: space-between;">
                                </div>
                                <button type="submit" class="btn btn-dark">Download Excel</button>
                            </form>
                            <br>
                            <br>

                            <div class="d-flex justify-content-center">
                                <div class="spinner-grow text-success loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-border text-danger loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-grow text-warning loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                                <div class="spinner-border text-info loading-spinner" role="status" style="width: 2;height: 2">
                                    <span class="visually-hidden">Loading...</span>
                                </div>
                            </div>

                            <table class="table table-hover nasabah nowrap display bg-cyan" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Nama Nasabah</th>
                                        <th>Alamat</th>
                                        <th>KTP</th>
                                        <th>Tempat Lahir</th>
                                        <th>Tanggal Lahir</th>
                                        <th>Nopolis</th>
                                        <th>Noklaim</th>
                                        <th>commence_dt</th>
                                        <th>expired_dt</th>
                                        <th>TSI</th>
                                        <th>PREMI</th>
                                        <th>KURS</th>
                                        <th>Tgl Trans</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('js')
<script>
$(document).ready(function () {
    var nasabah = $(".nasabah").DataTable({
        select: true,
        bFilter: false,
        autoWidth: true,
        scrollY: '310px',
        scrollX: true,
        scroller: {
            loadingIndicator: false,
        },
        searching: false,
        cache: true,
        destroy: true,
        processing: true,
        serverSide: true,
        ajax: {
            type: 'GET',
            url: "{{ route('nasabah') }}",
            beforeSend: function () {
                $(".loading-spinner").show();
            },
            complete: function () {
                $(".loading-spinner").hide();
            },
            data: function (d) {
                d.pilihpen = $('#pilihpen').val();
                d.search = $('#search').val();
            }
        },
        deferRender: true,
        pageLength: -1,
        ordering: false,
        paging: true,
        dataType: "json",
        columns: [
            { "data": "Nama_Nasabah" },
            { "data": "Alamat" },
            { "data": "KTP" },
            { "data": "Tempat_lahir" },
            { "data": "Tgl_lahir" },
            { "data": "Nopolis" },
            { "data": "Noklaim" },
            { "data": "commence_dt", render: $.fn.dataTable.render.datetime('YYYY-MM-DD') },
            { "data": "expired_dt", render: $.fn.dataTable.render.datetime('YYYY-MM-DD') },
            { "data": "TSI", render: $.fn.dataTable.render.number(',', '.', 2) },
            { "data": "PREMI", render: $.fn.dataTable.render.number(',', '.', 2) },
            { "data": "KURS" },
            { "data": "Tgl_trans", render: $.fn.dataTable.render.datetime('YYYY-MM-DD') }
        ]
    });

    $('#pilihpen, #search').on('input', function () {
        nasabah.ajax.reload();
    });
});
</script>
@endpush

@endsection