@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 Claim Selindo</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 Claim Selindo</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-claim') }}" 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="">- Pilih -</option>
                                    <option value="Tgl_DOL">Tgl DOL</option>
                                    <option value="Tgl_Trans">Tgl Transaksi</option>
                                </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="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\DataK::select('br_nm')->distinct()->get() as $item)
                                    <option value="{{ $item->br_nm }}">{{ $item->br_nm }}</option>
                                @endforeach
                                </select>
                            </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="search">Search by Name:</label></td>
                            <td>
                                <input type="text" class="form-control" id="search" name="search" >
                            </td>
                        </tr>
                        <tr>
                            <td><label for="selectedOptionsCOB">Pilih Kategori COB:</label></td>
                            <td>
                                <select class="js-example-basic-multiple-cob form-control" multiple="multiple" style="width: 100%;" name="selectedOptionsCOB[]">
                                    @foreach(\App\Models\DataK::select('Main_product')->distinct()->get() as $portofolio)
                                        <option value="{{ $portofolio->Main_product }}">{{ $portofolio->Main_product }}</option>
                                    @endforeach
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td><label for="selectedOptionsMov">Pilih Movement Type:</label></td>
                            <td>
                                <select class="js-example-basic-multiple-mov form-control" multiple="multiple" style="width: 100%;" name="selectedOptionsMov[]">
                                    @foreach(\App\Models\DataK::select('mov_type')->distinct()->get() as $portofolio)
                                        <option value="{{ $portofolio->mov_type }}">{{ $portofolio->mov_type }}</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 portofolioclaim nowrap display bg-cyan" style="width:100%" >
                  <thead>
                    <tr>
                        <!-- <th>No.</th> -->
                        <th>Cabang</th>
                        <th>No Polis</th>
                        <th>No Klaim</th>
                        <th>Tgl Mulai</th>
                        <th>Tgl Akhir</th>
                        <th>Tgl DOL</th>
                        <th>Main Product</th>
                        <th>Sub Main Product</th>
                        <th>Nama Tertanggung</th>
                        <th>Premium Name</th>
                        <th>Broker name</th>
                        <th>Discount name</th>
                        <th>Other Name</th>
                        <th>Sumber Bisnis</th>
                        <th>Mata Uang</th>
                        <th>Kurs</th>
                        <th>Mov Type</th>
                        <th>Nilai Klaim</th>
                        <th>TSI</th>
                        <th>Klaim Or</th>
                        <th>Klaim ST 1</th>
                        <th>Klaim ST 2</th>
                        <th>Klaim Fac</th>
                        <th>Klaim XL</th>
                        <th>Klaim BPP</th>
                        <th>Klaim QS</th>
                        <th>Klaim CON</th>
                        <th>Klaim PEQ</th>
                        <th>DNCN</th>
                        <th>Tgl Nota</th>
                        <th>Tgl Lapor</th>
                        <th>Tgl Transaksi</th>
                        <th>UW Year</th>
                        <th>Th Kendaraan</th>
                        <th>Merk Kendaraan</th>
                        <th>Detail Kendaraan</th>
                        <th>Jenis Kendaraan</th>
                        <th>Registration Num</th>
                        <th>Your Ref Num</th>
                        <th>Type_of_Loss</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
                </table>
                </div>
            </div>
        </div>
</div>
</div>
</div>


@push('js')
<script>


    $(document).ready(function () {

        $(".js-example-basic-multiple-cob").select2();
        $(".js-example-basic-multiple-mov").select2();
        
        $(".js-example-basic-multiple-cob").on('select2:select select2:unselect', function (e) {
        var selectedOptionsCOB = $(this).val();
        var selectedText = selectedOptionsCOB.join(", ");
        $("#selected-options-cob").text("Selected: " + selectedText);
    });

    $(".js-example-basic-multiple-mov").on('select2:select select2:unselect', function (e) {
        var selectedOptionsMov = $(this).val();
        var selectedText = selectedOptionsMov.join(", ");
        $("#selected-options-mov").text("Selected: " + selectedText);
    });

    $(".btn-clear-all").click(function() {
        $(".js-example-basic-multiple-cob").val(null).trigger("change");
        $(".js-example-basic-multiple-mov").val(null).trigger("change");
        $("#selected-options-cob").text("");
        $("#selected-options-mov").text("");
    });

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


       var portofolioclaim = $(".portofolioclaim").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('portofolioclaim') }}",
        beforeSend: function () {
            $(".loading-spinner").show(); // Show the loading spinner before making the AJAX request
        },
        complete: function () {
            $(".loading-spinner").hide(); // Hide the loading spinner after the AJAX request is complete
        },
        data: function (d) {
        d.from = $('#startDate').val();
        d.to = $('#endDate').val();
        d.kolomtgl = $('#pilihtgl').val();
        d.selectedOptionsCOB = $('.js-example-basic-multiple-cob').val(); 
        d.selectedOptionsMov = $('.js-example-basic-multiple-mov').val();
        d.search = $('#search').val();
        d.cabang = $('#cabang').val();
    },
  },
        deferRender: true,
        pageLength: -1, // Show all records on a single page
        ordering: false, // Disable column sorting
        dataType: "json",
        columns: [
            // { "data": "id" },
            { "data": "br_nm" },
            { "data": "nopolis" },
            { "data": "noklaim" },
            { "data": "Tgl_Mulai", render: DataTable.render.datetime('YYYY-MM-DD')},
            { "data": "Tgl_Akhir", render: DataTable.render.datetime('YYYY-MM-DD')},
            { "data": "Tgl_DOL", render: DataTable.render.datetime('YYYY-MM-DD')},
            { "data": "Main_Product" },
            { "data": "Sub_Main_Product" },
            { "data": "Nama_Tertanggung" },
            { "data": "Premium_Name" },
            { "data": "Broker_Name" },
            { "data": "Discount_Name" },
            { "data": "Other_Name" },
            { "data": "Sumber_Bisnis" },
            { "data": "Mata_Uang" },
            { "data": "Kurs" },
            { "data": "mov_type" },
            { "data": "Nilai_Klaim", render: DataTable.render.number( ',', '.', 2) },
            { "data": "TSI", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_OR", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_ST1", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_ST2", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_FAC", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_XL", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_BPP", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_QS", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_CON", render: DataTable.render.number( ',', '.', 2) },
            { "data": "Klaim_PEQ", render: DataTable.render.number( ',', '.', 2) },
            { "data": "DNCN" },
            { "data": "Tgl_Nota", render: DataTable.render.datetime('YYYY-MM-DD') },
            { "data": "Tgl_Lapor", render: DataTable.render.datetime('YYYY-MM-DD') },
            { "data": "Tgl_Trans", render: DataTable.render.datetime('YYYY-MM-DD') },
            { "data": "uw_yr" },
            { "data": "Th_Kend" },
            { "data": "Merk_Kend" },
            { "data": "Detail_Kend" },
            { "data": "Jenis_Kend" },
            { "data": "Registration_Num" },
            { "data": "Your_Ref_Num" },
            { "data": "type_of_loss"}

        ],
           
    });

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

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

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

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

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



});

</script>

@endpush


@endsection