@extends('layout.admin')

@section('content')

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Data PMK OJK</h1>
                </div>
                <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 PMK OJK</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <div id="notification" class="alert alert-dark" style="display: none; position: absolute; top: 150px; left: 50%; transform: translateX(-50%); z-index: 1000; padding: 10px; background-color: #17a2b8; color: white; border-radius: 5px;">
                                Anda sedang mendownload Excel, harap menunggu...
                            </div>

                            <form id="export-form" action="{{ route('export-excel-pmk') }}" method="POST">
                                @csrf
                                <input type="hidden" name="selectedYearExport" id="selectedYeartHidden">
                                <input type="hidden" name="procedureExport" id="procedureExportHidden">
                                <input type="hidden" name="filteredData" id="filteredDataHidden">
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <label for="procedure">Pilih Stored Procedure:</label>
                                            </td>
                                            <td>
                                                <select id="procedure" class="form-control" name="procedure" required>
                                                    <option value="" disabled selected>Pilih Stored Procedure</option>
                                                    <option value="generate_ojk_pmk_fire_premi_konven">Data Produksi KONVEN</option>
                                                    <option value="generate_ojk_pmk_fire_premi_syh">Data Produksi SYARIAH</option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Pilih Tahun:</td>
                                            <td><input type="text" class="yearpicker" id="selectedYear" name="selectedYear"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="display: flex; justify-content: space-between;"></div>
                                <button type="button" id="export-button" 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 pmk nowrap display bg-cyan" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>br_id</th>
                                        <th>cob_id</th>
                                        <th>pol_num</th>
                                        <th>renew_num</th>
                                        <th>updt_num</th>
                                        <th>risk_num</th>
                                        <th>nopolis</th>
                                        <th>risk_adrs</th>
                                        <th>bld_area_cd</th>
                                        <th>pos_num</th>
                                        <th>city</th>
                                        <th>geog_area_descr</th>
                                        <th>insrd_pr_nm</th>
                                        <th>bank_pr_nm</th>
                                        <th>brk_pr_nm</th>
                                        <th>coi_pr_nm</th>
                                        <th>commence_dt</th>
                                        <th>expired_dt</th>
                                        <th>coi_st</th>
                                        <th>close_dt</th>
                                        <th>crc_id</th>
                                        <th>crc_rate</th>
                                        <th>prm_amt_100</th>
                                        <th>prm_amt_sjp</th>
                                        <th>cvrg_descr</th>
                                        <th>prm_rate</th>
                                        <th>obj_num</th>
                                        <th>obj_descr</th>
                                        <th>tol_pct</th>
                                        <th>si_amt_100</th>
                                        <th>si_amt_sjp</th>
                                        <th>OWN_pct</th>
                                        <th>COI_pct</th>
                                        <th>CED_pct</th>
                                        <th>FAC_pct</th>
                                        <th>FOB_pct</th>
                                        <th>ST1_pct</th>
                                        <th>ST2_pct</th>
                                        <th>SPC_pct</th>
                                        <th>QS_pct</th>
                                        <th>CON_pct</th>
                                        <th>BPP_pct</th>
                                        <th>PEQ_pct</th>
                                        <th>prodn_center_descr</th>
                                        <th>prodr_type_descr</th>
                                        <th>occp_id</th>
                                        <th>occp_descr</th>
                                        <th>akuisisi</th>
                                        <th>stat_os</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

@push('js')
<script>
    $(document).ready(function () {
        $('.yearpicker').datepicker({
            autoclose: true,
            clearBtn: true,
            format: 'yyyy',
            minViewMode: 2, 
            startView: 2,  
        });

        var pmk = $(".pmk").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('pmk') }}",
                data: function (d) {
                    d.year = $('#selectedYear').val();
                    d.procedure = $('#procedure').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": "br_id" },
                { "data": "cob_id" },
                { "data": "pol_num" },
                { "data": "renew_num" },
                { "data": "updt_num" },
                { "data": "risk_num" },
                { "data": "nopolis" },
                { "data": "risk_adrs" },
                { "data": "bld_area_cd" },
                { "data": "pos_num" },
                { "data": "city" },
                { "data": "geog_area_descr" },
                { "data": "insrd_pr_nm" },
                { "data": "bank_pr_nm" },
                { "data": "brk_pr_nm" },
                { "data": "coi_pr_nm" },
                { "data": "commence_dt" },
                { "data": "expired_dt" },
                { "data": "coi_st" },
                { "data": "close_dt" },
                { "data": "crc_id" },
                { "data": "crc_rate" },
                { "data": "prm_amt_100" },
                { "data": "prm_amt_sjp" },
                { "data": "cvrg_descr" },
                { "data": "prm_rate" },
                { "data": "obj_num" },
                { "data": "obj_descr" },
                { "data": "tol_pct" },
                { "data": "si_amt_100" },
                { "data": "si_amt_sjp" },
                { "data": "OWN_pct" },
                { "data": "COI_pct" },
                { "data": "CED_pct" },
                { "data": "FAC_pct" },
                { "data": "FOB_pct" },
                { "data": "ST1_pct" },
                { "data": "ST2_pct" },
                { "data": "SPC_pct" },
                { "data": "QS_pct" },
                { "data": "CON_pct" },
                { "data": "BPP_pct" },
                { "data": "PEQ_pct" },
                { "data": "prodn_center_descr" },
                { "data": "prodr_type_descr" },
                { "data": "occp_id" },
                { "data": "occp_descr" },
                { "data": "akuisisi" },
                { "data": "stat_os" }
            ],
        });

        $('.yearpicker').on('change', function () {
            var selectedYear = $("#selectedYear").val();
            if (selectedYear) {
                pmk.draw();
            }
        });

        $('#export-button').on('click', function () {
            var year = $("#selectedYear").val();
            var procedure = $('#procedure').val();

            $('#selectedYearHidden').val(year);
            $('#procedureExportHidden').val(procedure);
            $('#notification').show();

            $.ajax({
                type: 'GET',
                url: "{{ route('pmk') }}",
                data: {
                    year: year,
                    procedure: procedure
                },
                success: function (response) {
                    $('#filteredDataHidden').val(JSON.stringify(response.data));
                    $('#export-form').submit();
                    $('#notification').hide();
                },
                error: function () {
                    $('#notification').hide();
                }
            });
        });
    });
</script>
@endpush

@endsection