@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 Posisi Tertanggung</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 Posisi Tertanggung</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-dataposisitertanggung') }}" method="POST">
                                @csrf
                                <table class="table">
                                    <tbody>
                                        <tr>
                                        <td><label for="cabang">Pilih Cabang : </label></td>
                                        <td>
                                            <select id="cabang" class="form-control" name="cabang">
                                                <option class="text-center" value="" disabled selected>- Pilih -</option>
                                                <option value="Konvensional">Konvensional</option>
                                                <option value="Syariah">Syariah</option>
                                            </select>
                                        </td>
                                        </tr>
                                        <tr>
                                        </tr>
                                        <tr>
                                            <td><label for="startDate">Minimum date:</label></td>
                                            <td>
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                                    <input type="text" class="form-control datepicker" id="startDate" name="startDate">
                                                </div>
                                            </td>
                                            <td><label for="endDate">Maximum date:</label></td>
                                            <td>
                                                <div class="input-group">
                                                    <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
                                                    <input type="text" class="form-control datepicker" id="endDate" name="endDate">
                                                </div>
                                            </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-dataposisitertanggungger 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 dataposisitertanggung nowrap display bg-cyan" style="width:100%">
                                <thead>
                                    <tr>
                                    <th>Nomor_Polis</th>
                                    <th>Nama_Pemegang_Polis</th>
                                    <th>Jenis_Polis</th>
                                    <th>Tanggal_Mulai_Polis</th>
                                    <th>Tanggal_Berakhir_Polis</th>
                                    <th>NPWP</th>
                                    <th>Tanggal_Lahir_Pemegang_ Polis</th>
                                    <th>Jenis_Kelamin</th>
                                    <th>Lokasi</th>
                                    <th>Lini_Usaha</th>
                                    <th>Cara_Bayar</th>
                                    <th>Jumlah_Premi</th>
                                    <th>Uang_Pertanggungan </th>
                                    <th>Cadangan_Premi</th>
                                    <th>CAPYBMP</th>
                                    <th>Jumlah_Tertanggung</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('js')
<script>
    $(document).ready(function () {
        $('.datepicker').datepicker({
            autoclose: true,
            clearBtn: true,
            format: 'yyyy-mm-dd'
        });

        var dataposisitertanggung = $(".dataposisitertanggung").DataTable({
            bFilter: false,
            autoWidth: true,
            scrollX: true,
            scrollY: '310px',
            scroller: {
                loadingIndicator: false,
            },
            searching: false,
            select: true,
            cache: true,
            destroy: true,
            processing: true,
            serverSide: true,
            ajax: {
                type: 'GET',
                url: "{{ route('dataposisitertanggung') }}",
                data: function (d) {
                    d.from = $('#startDate').val();
                    d.to = $('#endDate').val();
                    d.cabang = $('#cabang').val();
                },
                beforeSend: function () {
                    $(".loading-spinner").show();
                },
                complete: function () {
                    $(".loading-spinner").hide();
                },
                dataSrc: function (json) {
                    return json.data;
                },
            },
            deferRender: true,
            paging: true,
            pageLength: -1,
            ordering: false,
            columns: [
                {'data': 'Nomor_Polis' },
                {'data': 'Nama_Pemegang_Polis' },
                {'data': 'Jenis_Polis' },
                {'data': 'Tanggal_Mulai_Polis' },
                {'data': 'Tanggal_Berakhir_Polis' },
                {'data': 'NPWP' },
                {'data': 'Tanggal_Lahir_Pemegang_ Polis' },
                {'data': 'Jenis_Kelamin' },
                {'data': 'Lokasi' },
                {'data': 'Lini_Usaha' },
                {'data': 'Cara_Bayar' },
                {'data': 'Jumlah_Premi' },
                {'data': 'Uang_Pertanggungan ' },
                {'data': 'Cadangan_Premi' },
                {'data': 'CAPYBMP' },
                {'data': 'Jumlah_Tertanggung' }
            ],
        });

        $('.datepicker').on('change', function () {
            var from = $("#startDate").val();
            var to = $("#endDate").val();
            if (from && to) {
                dataposisitertanggung.draw();
            }
        });

        $('#cabang').on('change', function () {
            dataposisitertanggung.draw();
        });
    });
</script>
@endpush

@endsection