@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">Portofolio Premi Bekasi</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">Portofolio Premi Bekasi</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-premi-bks') }}" method="POST">
                                @csrf
                                <table class="table">
                                    <tbody>
                                        <tr>
                                            <td><label for="pilihtgl">Pilih Kategori Tanggal:</label></td>
                                            <td>
                                                <select id="pilihtgl" name="kolomtgl" class="form-control">
                                                    <option class="text-center" value="" disabled selected>- Pilih -</option>
                                                    <option value="Tgl_Awal">Tgl Awal</option>
                                                    <option value="Tgl_Trans">Tgl Transaksi</option>
                                                </select>
                                            </td>
                                            <td><label for="alamat">Search Alamat Risiko:</label></td>
                                            <td>
                                                <input type="text" class="form-control" id="alamat" name="alamat" >
                                            </td>
                                        </tr>
                                        <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>
                                                    @foreach(\App\Models\DataP::select('br_nm')->distinct()->get() as $item)
                                                        @if (strpos($item->br_nm, 'BEKASI') !== false)
                                                            <option value="{{ $item->br_nm }}">{{ $item->br_nm }}</option>
                                                        @endif
                                                    @endforeach
                                                </select>
                                            </td>
                                            <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>
                                        </tr>
                                        <tr>
                                            <td><label for="search">Pilih Kategori Sumber Bisnis:</label></td>
                                            <td>
                                                <input type="text" class="form-control" id="search" name="search" >
                                            </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>
                                        <tr>
                                            <td><label for="selectedOptions">Pilih Kategori COB:</label></td>
                                            <td>
                                                <select class="js-example-basic-multiple form-control" multiple="multiple" style="width: 100%;" name="selectedOptions[]">
                                                    @foreach(\App\Models\DataP::select('Main_product')->distinct()->get() as $portofolio)
                                                        <option value="{{ $portofolio->Main_product }}">{{ $portofolio->Main_product }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <div style="display: flex; justify-content: space-between;">
                                    <div style="width: 48%;">
                                        <!-- Isi formulir sebelah kiri di sini -->
                                    </div>
                                    <div style="width: 48%;">
                                        <!-- Isi formulir sebelah kanan di sini -->
                                    </div>
                                </div>
                                <button type="submit" class="btn btn-dark">Download Excel</button>
                            </form>
                            <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 portofoliopremi_bks nowrap display bg-cyan" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Cabang</th>
                                        <th>No Polis</th>
                                        <th>Main Product</th>
                                        <th>Sub Main Product</th>
                                        <th>Nama Tertanggung</th>
                                        <th>Alamat Resiko</th>
                                        <th>Kode_Pos</th>
                                        <th>Premium Name</th>
                                        <th>Broker name</th>
                                        <th>Other Name</th>
                                        <th>Geografi Area</th>
                                        <th>Sumber Bisnis</th>
                                        <th>Pemberi Bisnis</th>
                                        <th>Pembawa Bisnis</th>
                                        <th>UW Year</th>
                                        <th>Mata Uang</th>
                                        <th>Kurs</th>
                                        <th>Tgl Awal</th>
                                        <th>Tgl Akhir</th>
                                        <th>Tgl Transaksi</th>
                                        <th>Status Polis</th>
                                        <th>TSI</th>
                                        <th>TSI 100</th>
                                        <th>Premi</th>
                                        <th>OUTGO</th>
                                        <th>TGA Persen</th>
                                        <th>prm_OWN_pct</th>
                                        <th>prm_OWN_amt</th>
                                        <th>prm_FAC_pct</th>
                                        <th>prm_FAC_amt</th>
                                        <th>prm_ST1_pct</th>
                                        <th>prm_ST1_amt</th>
                                        <th>prm_ST2_pct</th>
                                        <th>prm_ST2_amt</th>
                                        <th>prm_QS_pct</th>
                                        <th>prm_QS_amt</th>
                                        <th>prm_CON_pct</th>
                                        <th>prm_CON_amt</th>
                                        <th>prm_BPP_pct</th>
                                        <th>prm_BPP_amt</th>
                                        <th>prm_PEQ_pct</th>
                                        <th>prm_PEQ_amt</th>
                                        <th>Kode_Okupasi</th>
                                        <th>Object_Descr</th>
                                        <th>pol_ref</th>
                                        <th>Your Ref Num</th>
                                        <th>DNCN</th>
                                        <th>Tgl Nota</th>
                                        <th>No Voucher</th>
                                        <th>Tgl Voucher</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>

@push('js')

<script>

$(document).ready(function () {


        $(".js-example-basic-multiple").select2();
        
        $(".js-example-basic-multiple").on('select2:select select2:unselect', function (e) {
            var selectedOptions = $(this).val();
            var selectedText = selectedOptions.join(", ");
            $("#selected-options").text("Selected: " + selectedText);
        });
        
        $(".btn-clear-all").click(function() {
            $(".js-example-basic-multiple").val(null).trigger("change");
            $("#selected-options").text("");
        });

        $('.datepicker').datepicker({
            autoclose: true,
            clearBtn: true,
            dateFormat: 'YYYY-MM-DD'
        });

        var portofoliopremi_bks = $(".portofoliopremi_bks").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('portofoliopremi_bks') }}",
                beforeSend: function () {
                    $(".loading-spinner").show();

                },
                complete: function () {
                    $(".loading-spinner").hide();

                },
                data: function (d) {
                    d.from = $('#startDate').val();
                    d.to = $('#endDate').val();
                    d.kolomtgl = $('#pilihtgl').val();
                    d.selectedOptions = $('.js-example-basic-multiple').val(); // Added this line
                    d.search = $('#search').val();
                    d.cabang = $('#cabang').val();
                    d.alamat = $('#alamat').val();
                },
            },

            deferRender: true,
            pageLength: -1,
            ordering: false,
            paging: true,
            dataType: "json",
            columns: [
                { "data": "br_nm" },
                { "data": "nopolis" },
                { "data": "Main_Product" },
                { "data": "Sub_Main_Product" },
                { "data": "Nama_Tertanggung" },
                { "data": "Alamat_Risiko" },
                { "data": "Kode_Pos"},
                { "data": "Premium_Name" },
                { "data": "Broker_Name" },
                { "data": "Other_Name" },
                { "data": "Geofgrafi_Area" },
                { "data": "Sumber_Bisnis" },
                { "data": "Pemberi_Bisnis" },
                { "data": "Pembawa_Bisnis" },
                { "data": "uw_yr" },
                { "data": "Mata_uang" },
                { "data": "Kurs" },
                { "data": "Tgl_Awal", render: DataTable.render.datetime('YYYY-MM-DD') },
                { "data": "Tgl_Akhir", render: DataTable.render.datetime('YYYY-MM-DD') },
                { "data": "Tgl_Trans", render: DataTable.render.datetime('YYYY-MM-DD') },
                { "data": "Status_Polis" },
                { "data": "TSI", render: DataTable.render.number(',', '.', 2) },
                { "data": "TSI_100", render: DataTable.render.number(',', '.', 2) },
                { "data": "PREMI", render: DataTable.render.number(',', '.', 2) },
                { "data": "OUTGO", render: DataTable.render.number(',', '.', 2) },
                { "data": "tga_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_OWN_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_OWN_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_FAC_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_FAC_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_ST1_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_ST1_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_ST2_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_ST2_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_QS_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_QS_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_CON_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_CON_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_BPP_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_BPP_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_PEQ_pct", render: DataTable.render.number(',', '.', 2) },
                { "data": "prm_PEQ_amt", render: DataTable.render.number(',', '.', 2) },
                { "data": "Kode_Okupasi" },
                { "data": "Object_Desc" },
                { "data": "pol_ref" },
                { "data": "your_ref_num" },
                { "data": "DNCN" },
                { "data": "Tgl_Nota", render: DataTable.render.datetime('YYYY-MM-DD') },
                { "data": "NoVoucher" },
                { "data": "Tgl_Voucher", render: DataTable.render.datetime('YYYY-MM-DD') }
            ],

        });

        $('#search').on('input', function () {
            portofoliopremi_bks.search(this.value).draw();
        });

        $('#alamat').on('input', function () {
            portofoliopremi_bks.search(this.value).draw();
        });

        $('.js-example-basic-multiple').on('input', function () {
            portofoliopremi_bks.search(this.value).draw();
        });

        $('#cabang').on('input', function () {
            portofoliopremi_bks.search(this.value).draw();
        });

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

        

    });


</script>
@endpush

@endsection