@extends('layout.default')

@section('styles')
    <!--begin::Page Vendors Styles(used by this page)-->
    <link href="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.css?v=7.0.8" rel="stylesheet" type="text/css" />
    <!--end::Page Vendors Styles-->

    <style>
        /*To nowrap text*/
        .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default, .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-default{
            white-space: nowrap;
        }
    </style>
@endsection

@section('content')
    <div style="margin-bottom: 2%">
        <a class="btn btn-primary" href="{{url('report/disburse/list/'.$status)}}"><i class="fa fa-arrow-left"></i> List Settlement</a>
    </div>

    @if(!empty($data_disburse))
        <div class="card card-custom">
            <div class="card-body">
                <table style="width: 100%;">
                    <tr>
                        <td width="30%">Tanggal</td>
                        <td>: {{ \MyHelper::dateFormatInd($data_disburse['created_at']) }}</td>
                    </tr>
                    <tr>
                        <td width="30%">Outlet</td>
                        <td>: {{$data_disburse['outlet_code']}} - {{$data_disburse['outlet_name']}}</td>
                    </tr>
                    <tr>
                        <td width="30%">Status</td>
                        @if($data_disburse['disburse_status'] == 'Fail' || $data_disburse['disburse_status'] == 'Failed Create Payouts')
                            <td>: <b  style="color: red">{{ $data_disburse['disburse_status'] }}</b></td>
                        @else
                            <td>: <b style="color: green">{{ $data_disburse['disburse_status'] }}</b></td>
                        @endif
                    </tr>
                    <tr>
                        <td width="30%">Nama Bank</td>
                        <td>: {{$data_disburse['bank_name']}}</td>
                    </tr>
                    <tr>
                        <td width="30%">No Rekening</td>
                        <td>: {{$data_disburse['beneficiary_account_number']}}</td>
                    </tr>
                    <tr>
                        <td width="30%">Nama Penerima</td>
                        <td>: {{$data_disburse['beneficiary_name']}}</td>
                    </tr>
                    <tr>
                        <td width="30%" style="font-size: 22px"><b>Nominal</b></td>
                        <td style="font-size: 22px"><b>: {{number_format($data_disburse['disburse_nominal']??0,2,",",".")}}</b></td>
                    </tr>
                </table>
            </div>
        </div>
        <br>
        <br>
    @endif
    <div class="card card-custom">
        <div class="card-body">
            @if(!empty($trx))
                <div class="row" style="text-align: right;margin-bottom: 2%;">
                    <div class="col-md-12">
                        @if(session('level') != 'Super Admin')
                            <a class="btn btn-primary" href="{{url()->current()}}?export=1"><i class="fa fa-file-export"></i> Download</a>
                        @endif
                    </div>
                </div>
            @endif
            <table class="table table-bordered table-hover" id="kt_datatable">
                <thead>
                <tr>
                    <th class="text-nowrap">Nomor Nota</th>
                    <th class="text-nowrap">Tanggal</th>
                    <th class="text-nowrap">Pendapatan Outlet</th>
                    <th class="text-nowrap">Total Biaya Jasa</th>
                    <th class="text-nowrap">Total MDR</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($trx))
                    @foreach($trx as $val)
                        <tr>
                            <td><a href="{{ url('transaction/detail/'.$val['id_transaction']) }}">{{$val['transaction_receipt_number']}}</a></td>
                            <td>{{\MyHelper::dateFormatInd($val['transaction_date'])}}</td>
                            <td>{{number_format($val['income_outlet']??0,2,",",".")}}</td>
                            <td>{{number_format($val['fee_item']??0,2,",",".")}}</td>
                            <td>{{number_format($val['payment_charge']??0,2,",",".")}}</td>
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="10" style="text-align: center">Data Tidak Tersedia</td>
                    </tr>
                @endif
                </tbody>
            </table>
            <div class="row">
                <div class="col-md-12">
                    @if (!empty($trxPaginator))
                        {{ $trxPaginator->links() }}
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script src="{{env('STORAGE_URL_VIEW')}}plugins/custom/datatables/datatables.bundle.js?v=7.0.8"></script>
    <script src="{{env('STORAGE_URL_VIEW')}}js/pages/form-repeater.js?v=7.0.8"></script>
    <script src="{{env('STORAGE_URL_VIEW')}}plugins/global/jquery-repeater/jquery.repeater.js?v=7.0.8"></script>
    <script>
        var table;
        $(document).ready(function() {
            $('.repeater').repeater({
                show: function () {
                    $(this).slideDown();
                    $('.select2-container').remove();
                    $('.select2').select2({
                        placeholder: "Search"
                    });
                    $('.select2-container').css('width','100%');
                }
            });
            $('.select2').select2();
            $('#date_start').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd/M/yyyy',
                endDate: new Date(new Date().setDate(new Date().getDate()))
            });
            $('#date_end').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd/M/yyyy',
                endDate: new Date(new Date().setDate(new Date().getDate()))
            });
        });
    </script>
@endsection