@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">Perhitungan Surplus Underwriting Seluruh Cabang</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">Perhitungan Surplus Underwriting Seluruh Cabang</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-su') }}" method="POST">
                                @csrf
                                <table class="table">
                                <tbody>
                                    <tr class="row">
                                        <td class="col-md-auto"><label for="startDate">Minimum date:</label></td>
                                        <td class="col-md-3">
                                            <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>
                                    </tr>
                                    <tr class="row">
                                        <td class="col-md-auto"><label for="endDate">Maximum date:</label></td>
                                        <td class="col-md-3">
                                            <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> -->
                                <button type="button" class="btn btn-warning" id="download-pdf">Tampilkan PDF</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>

                              <div class="card-body" style="max-height: 250px; overflow-y: auto;">
                                <table class="table table-hover su nowrap display bg-cyan" style="width:100%; height: 50px;">
                                    <thead>
                                        <tr>
                                        <th>prm_brt_n</th>
                                        <th>prm_brt_c</th>
                                        <th>prm_brt_b</th>
                                        <th>prm_brt_m</th>
                                        <th>prm_brt_e</th>
                                        <th>prm_brt_l</th>
                                        <th>prm_brt_sb</th>
                                        <th>prm_brt_cr</th>
                                        <th>prm_brt_d</th>
                                        <th>prm_brt_pr</th>
                                        <th>prm_ra_n</th>
                                        <th>prm_ra_c</th>
                                        <th>prm_ra_b</th>
                                        <th>prm_ra_m</th>
                                        <th>prm_ra_e</th>
                                        <th>prm_ra_l</th>
                                        <th>prm_ra_sb</th>
                                        <th>prm_ra_cr</th>
                                        <th>prm_ra_d</th>
                                        <th>prm_ra_pr</th>
                                        <th>prm_net_n</th>
                                        <th>prm_net_c</th>
                                        <th>prm_net_b</th>
                                        <th>prm_net_m</th>
                                        <th>prm_net_e</th>
                                        <th>prm_net_l</th>
                                        <th>prm_net_sb</th>
                                        <th>prm_net_cr</th>
                                        <th>prm_net_d</th>
                                        <th>prm_net_pr</th>
                                        <th>cad_prm_bb_n</th>
                                        <th>cad_prm_bb_c</th>
                                        <th>cad_prm_bb_b</th>
                                        <th>cad_prm_bb_m</th>
                                        <th>cad_prm_bb_e</th>
                                        <th>cad_prm_bb_l</th>
                                        <th>cad_prm_bb_sb</th>
                                        <th>cad_prm_bb_cr</th>
                                        <th>cad_prm_bb_d</th>
                                        <th>cad_prm_bb_pr</th>
                                        <th>cad_prm_ll_n</th>
                                        <th>cad_prm_ll_c</th>
                                        <th>cad_prm_ll_b</th>
                                        <th>cad_prm_ll_m</th>
                                        <th>cad_prm_ll_e</th>
                                        <th>cad_prm_ll_l</th>
                                        <th>cad_prm_ll_sb</th>
                                        <th>cad_prm_ll_cr</th>
                                        <th>cad_prm_ll_d</th>
                                        <th>cad_prm_ll_pr</th>
                                        <th>capybmp_bb_n</th>
                                        <th>capybmp_bb_c</th>
                                        <th>capybmp_bb_b</th>
                                        <th>capybmp_bb_m</th>
                                        <th>capybmp_bb_e</th>
                                        <th>capybmp_bb_l</th>
                                        <th>capybmp_bb_sb</th>
                                        <th>capybmp_bb_cr</th>
                                        <th>capybmp_bb_d</th>
                                        <th>capybmp_bb_pr</th>
                                        <th>capybmp_ll_n</th>
                                        <th>capybmp_ll_c</th>
                                        <th>capybmp_ll_b</th>
                                        <th>capybmp_ll_m</th>
                                        <th>capybmp_ll_e</th>
                                        <th>capybmp_ll_l</th>
                                        <th>capybmp_ll_sb</th>
                                        <th>capybmp_ll_cr</th>
                                        <th>capybmp_ll_d</th>
                                        <th>capybmp_ll_pr</th>
                                        <th>clm_sjp_n</th>
                                        <th>clm_sjp_c</th>
                                        <th>clm_sjp_b</th>
                                        <th>clm_sjp_m</th>
                                        <th>clm_sjp_e</th>
                                        <th>clm_sjp_l</th>
                                        <th>clm_sjp_sb</th>
                                        <th>clm_sjp_cr</th>
                                        <th>clm_sjp_d</th>
                                        <th>clm_sjp_pr</th>
                                        <th>clm_net_n</th>
                                        <th>clm_net_c</th>
                                        <th>clm_net_b</th>
                                        <th>clm_net_m</th>
                                        <th>clm_net_e</th>
                                        <th>clm_net_l</th>
                                        <th>clm_net_sb</th>
                                        <th>clm_net_cr</th>
                                        <th>clm_net_d</th>
                                        <th>clm_net_pr</th>
                                        <th>clm_ri_n</th>
                                        <th>clm_ri_c</th>
                                        <th>clm_ri_b</th>
                                        <th>clm_ri_m</th>
                                        <th>clm_ri_e</th>
                                        <th>clm_ri_l</th>
                                        <th>clm_ri_sb</th>
                                        <th>clm_ri_cr</th>
                                        <th>clm_ri_d</th>
                                        <th>clm_ri_pr</th>
                                        <th>cad_clm_bb_n</th>
                                        <th>cad_clm_bb_c</th>
                                        <th>cad_clm_bb_b</th>
                                        <th>cad_clm_bb_m</th>
                                        <th>cad_clm_bb_e</th>
                                        <th>cad_clm_bb_l</th>
                                        <th>cad_clm_bb_sb</th>
                                        <th>cad_clm_bb_cr</th>
                                        <th>cad_clm_bb_d</th>
                                        <th>cad_clm_bb_pr</th>
                                        <th>cad_clm_ll_n</th>
                                        <th>cad_clm_ll_c</th>
                                        <th>cad_clm_ll_b</th>
                                        <th>cad_clm_ll_m</th>
                                        <th>cad_clm_ll_e</th>
                                        <th>cad_clm_ll_l</th>
                                        <th>cad_clm_ll_sb</th>
                                        <th>cad_clm_ll_cr</th>
                                        <th>cad_clm_ll_d</th>
                                        <th>cad_clm_ll_pr</th>
                                        <th>comm_by_n</th>
                                        <th>comm_by_c</th>
                                        <th>comm_by_b</th>
                                        <th>comm_by_m</th>
                                        <th>comm_by_e</th>
                                        <th>comm_by_l</th>
                                        <th>comm_by_sb</th>
                                        <th>comm_by_cr</th>
                                        <th>comm_by_d</th>
                                        <th>comm_by_pr</th>
                                        <th>comm_ra_n</th>
                                        <th>comm_ra_c</th>
                                        <th>comm_ra_b</th>
                                        <th>comm_ra_m</th>
                                        <th>comm_ra_e</th>
                                        <th>comm_ra_l</th>
                                        <th>comm_ra_sb</th>
                                        <th>comm_ra_cr</th>
                                        <th>comm_ra_d</th>
                                        <th>comm_ra_pr</th>
                                        <th>comm_net_n</th>
                                        <th>comm_net_c</th>
                                        <th>comm_net_b</th>
                                        <th>comm_net_m</th>
                                        <th>comm_net_e</th>
                                        <th>comm_net_l</th>
                                        <th>comm_net_sb</th>
                                        <th>comm_net_cr</th>
                                        <th>comm_net_d</th>
                                        <th>comm_net_pr</th>
                                        <th>Ket</th>
                                        <th>tgl_fr</th>
                                        <th>tgl_to</th>
                                        <th>br_nm</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                                <div id="pdf-container">
                                    <iframe id="pdf-viewer" style="width: 100%; height: 300px;"></iframe>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>





@push('js')
<script>
$(document).ready(function () {
    $('.datepicker').datepicker({
            autoclose: true,
            clearBtn: true,
            dateFormat: 'YYYY-MM-DD'
        });

    var su = $(".su").DataTable({
    
    bFilter: false,
    autoWidth: true,
    scrollX: true,
    searching: false,
    select: true,
    cache: true,
    destroy: true,
    processing: true,
    serverSide: true,
    ajax: {
        type: 'GET',
        url: "{{ route('su') }}",
        data: function (d) {
            d.from = $('#startDate').val();
            d.to = $('#endDate').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": "prm_brt_n" },
        { "data": "prm_brt_c" },
        { "data": "prm_brt_b" },
        { "data": "prm_brt_m" },
        { "data": "prm_brt_e" },
        { "data": "prm_brt_l" },
        { "data": "prm_brt_sb" },
        { "data": "prm_brt_cr" },
        { "data": "prm_brt_d" },
        { "data": "prm_brt_pr" },
        { "data": "prm_ra_n" },
        { "data": "prm_ra_c" },
        { "data": "prm_ra_b" },
        { "data": "prm_ra_m" },
        { "data": "prm_ra_e" },
        { "data": "prm_ra_l" },
        { "data": "prm_ra_sb" },
        { "data": "prm_ra_cr" },
        { "data": "prm_ra_d" },
        { "data": "prm_ra_pr" },
        { "data": "prm_net_n" },
        { "data": "prm_net_c" },
        { "data": "prm_net_b" },
        { "data": "prm_net_m" },
        { "data": "prm_net_e" },
        { "data": "prm_net_l" },
        { "data": "prm_net_sb" },
        { "data": "prm_net_cr" },
        { "data": "prm_net_d" },
        { "data": "prm_net_pr" },
        { "data": "cad_prm_bb_n" },
        { "data": "cad_prm_bb_c" },
        { "data": "cad_prm_bb_b" },
        { "data": "cad_prm_bb_m" },
        { "data": "cad_prm_bb_e" },
        { "data": "cad_prm_bb_l" },
        { "data": "cad_prm_bb_sb" },
        { "data": "cad_prm_bb_cr" },
        { "data": "cad_prm_bb_d" },
        { "data": "cad_prm_bb_pr" },
        { "data": "cad_prm_ll_n" },
        { "data": "cad_prm_ll_c" },
        { "data": "cad_prm_ll_b" },
        { "data": "cad_prm_ll_m" },
        { "data": "cad_prm_ll_e" },
        { "data": "cad_prm_ll_l" },
        { "data": "cad_prm_ll_sb" },
        { "data": "cad_prm_ll_cr" },
        { "data": "cad_prm_ll_d" },
        { "data": "cad_prm_ll_pr" },
        { "data": "capybmp_bb_n" },
        { "data": "capybmp_bb_c" },
        { "data": "capybmp_bb_b" },
        { "data": "capybmp_bb_m" },
        { "data": "capybmp_bb_e" },
        { "data": "capybmp_bb_l" },
        { "data": "capybmp_bb_sb" },
        { "data": "capybmp_bb_cr" },
        { "data": "capybmp_bb_d" },
        { "data": "capybmp_bb_pr" },
        { "data": "capybmp_ll_n" },
        { "data": "capybmp_ll_c" },
        { "data": "capybmp_ll_b" },
        { "data": "capybmp_ll_m" },
        { "data": "capybmp_ll_e" },
        { "data": "capybmp_ll_l" },
        { "data": "capybmp_ll_sb" },
        { "data": "capybmp_ll_cr" },
        { "data": "capybmp_ll_d" },
        { "data": "capybmp_ll_pr" },
        { "data": "clm_sjp_n" },
        { "data": "clm_sjp_c" },
        { "data": "clm_sjp_b" },
        { "data": "clm_sjp_m" },
        { "data": "clm_sjp_e" },
        { "data": "clm_sjp_l" },
        { "data": "clm_sjp_sb" },
        { "data": "clm_sjp_cr" },
        { "data": "clm_sjp_d" },
        { "data": "clm_sjp_pr" },
        { "data": "clm_net_n" },
        { "data": "clm_net_c" },
        { "data": "clm_net_b" },
        { "data": "clm_net_m" },
        { "data": "clm_net_e" },
        { "data": "clm_net_l" },
        { "data": "clm_net_sb" },
        { "data": "clm_net_cr" },
        { "data": "clm_net_d" },
        { "data": "clm_net_pr" },
        { "data": "clm_ri_n" },
        { "data": "clm_ri_c" },
        { "data": "clm_ri_b" },
        { "data": "clm_ri_m" },
        { "data": "clm_ri_e" },
        { "data": "clm_ri_l" },
        { "data": "clm_ri_sb" },
        { "data": "clm_ri_cr" },
        { "data": "clm_ri_d" },
        { "data": "clm_ri_pr" },
        { "data": "cad_clm_bb_n" },
        { "data": "cad_clm_bb_c" },
        { "data": "cad_clm_bb_b" },
        { "data": "cad_clm_bb_m" },
        { "data": "cad_clm_bb_e" },
        { "data": "cad_clm_bb_l" },
        { "data": "cad_clm_bb_sb" },
        { "data": "cad_clm_bb_cr" },
        { "data": "cad_clm_bb_d" },
        { "data": "cad_clm_bb_pr" },
        { "data": "cad_clm_ll_n" },
        { "data": "cad_clm_ll_c" },
        { "data": "cad_clm_ll_b" },
        { "data": "cad_clm_ll_m" },
        { "data": "cad_clm_ll_e" },
        { "data": "cad_clm_ll_l" },
        { "data": "cad_clm_ll_sb" },
        { "data": "cad_clm_ll_cr" },
        { "data": "cad_clm_ll_d" },
        { "data": "cad_clm_ll_pr" },
        { "data": "comm_by_n" },
        { "data": "comm_by_c" },
        { "data": "comm_by_b" },
        { "data": "comm_by_m" },
        { "data": "comm_by_e" },
        { "data": "comm_by_l" },
        { "data": "comm_by_sb" },
        { "data": "comm_by_cr" },
        { "data": "comm_by_d" },
        { "data": "comm_by_pr" },
        { "data": "comm_ra_n" },
        { "data": "comm_ra_c" },
        { "data": "comm_ra_b" },
        { "data": "comm_ra_m" },
        { "data": "comm_ra_e" },
        { "data": "comm_ra_l" },
        { "data": "comm_ra_sb" },
        { "data": "comm_ra_cr" },
        { "data": "comm_ra_d" },
        { "data": "comm_ra_pr" },
        { "data": "comm_net_n" },
        { "data": "comm_net_c" },
        { "data": "comm_net_b" },
        { "data": "comm_net_m" },
        { "data": "comm_net_e" },
        { "data": "comm_net_l" },
        { "data": "comm_net_sb" },
        { "data": "comm_net_cr" },
        { "data": "comm_net_d" },
        { "data": "comm_net_pr" },
        { "data": "Ket" },
        { "data": "tgl_fr" },
        { "data": "tgl_to" },
        { "data": "br_nm" }
    ],
    
    });

    $('#download-pdf').on('click', function () {
    $.ajax({
        url: "{{ route('export-pdf-su') }}",
        type: 'GET',
        xhrFields: {
            responseType: 'blob' 
        },
        success: function(response) {
            var blob = new Blob([response], { type: 'application/pdf' });
            var url = URL.createObjectURL(blob);
            $('#pdf-viewer').attr('src', url);
            $('#pdf-container').slideDown();
            
            var windowHeight = $(window).height();
            $('#pdf-viewer').height(windowHeight);
            $('#pdf-viewer').css('overflow-y', 'hidden');
        },
        error: function(xhr) {
            console.error('Error loading PDF:', xhr.statusText);
        }
    });
});



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

});

</script>
@endpush

@endsection