@extends('frontend.layouts_finance.master')

<link href="{{ asset('/assets/plugins/plugin.css') }}" rel="stylesheet">
<style>
    th {
        background-color: #148AFB;
        color: white;
    } 
    .bg-blue { background: blue;color:white; }
    .bg-red { background: red; color:white; }
    .bg-yellow { background: yellow;color:black; }
    .bg-green { background: green; color:white; }
</style>
<link href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.css" integrity="sha512-DIW4FkYTOxjCqRt7oS9BFO+nVOwDL4bzukDyDtMO7crjUZhwpyrWBFroq+IqRe6VnJkTpRAS6nhDvf0w+wHmxg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css" integrity="sha512-O03ntXoVqaGUTAeAmvQ2YSzkCvclZEcPQu1eqloPaHfJ5RuNGiS4l+3duaidD801P50J28EHyonCV06CUlTSag==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js" integrity="sha512-Zq9o+E00xhhR/7vJ49mxFNJ0KQw1E1TMWkPTxrWcnpfEFDEXgUiwJHIKit93EW/XxE31HSI5GEOW06G6BF1AtA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.js" integrity="sha512-OmBbzhZ6lgh87tQFDVBHtwfi6MS9raGmNvUNTjDIBb/cgv707v9OuBVpsN6tVVTLOehRFns+o14Nd0/If0lE/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    
    <link href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>



{{-- sweet alert --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@section('content')
<div class="container">
    <center>
        <h4>ORDER LIST FINANCE</h4>
    </center>

    {{-- notifikasi form validasi --}}
    @if ($errors->has('file'))
    <span class="invalid-feedback" role="alert">
        <strong>{{ $errors->first('file') }}</strong>
    </span>
    @endif

    {{-- notifikasi sukses --}}
    @if ($sukses = Session::get('sukses'))
    <div class="alert alert-success alert-block">
        <button type="button" class="close" data-dismiss="alert">×</button> 
        <strong>{{ $sukses }}</strong>
    </div>
    @endif

    <div class="card" style="padding: 10px">
        <div class="row" style="paddingLeft:15px">
            <label for="filterMonth" style="paddingRight:10px">Filter by Month:</label>
            <input type="month" id="filterMonth">
        </div>
        
        <table class='table table-bordered table-responsive' id="myTable">
            <thead>
                <tr>
                  <th>Accountnum</th>
                  <th>No.Order</th>
                  <th>Toko</th>
                  <th>Post</th>
                  <th>Invoice</th>
                  <th>Amount</th>
                  <th>Realduedate</th>
                  <th>Status</th>
                  <th style="text-align: center">Act</th>
                </tr>
            </thead>
                <tbody>
                    @php $i=1 @endphp
                    @foreach($data as $s)
                        <tr>
                            <td>{{ $s['accountnum'] }}</td>
                            <td>{{ $s['no_order'] }}</td>
                            <td>{{ $s['toko'] }}</td>
                            <td>{{ $s['created_at'] }}</td>
                            <td>{{ $s['no_invoice']}}</td>
                            <td>Rp {{ number_format(floatval($s['amount'])) }}</td>
                            <td>{{ $s['realduedate']}}</td>
                            <td>
                                <h5>
                                    <span class="{{($s['approval'] == '') ? 'bg-yellow' : ''}} {{($s['approval'] == '0') ? 'bg-green' : ''}} {{($s['approval'] == '1') ? 'bg-red' : ''}}" style="font-size:10px;padding:5px;border-radius:5px;">
                                        @if($s['approval'] != '')
                                            {{ ($s['approval'] == 0) ? 'Approved' : 'Not Approved' }}
                                        @elseif($s['approval'] == '')
                                            Waiting Action
                                        @endif
                                        
                                    </span>
                                </h5>
                            </td>
                 <td style="text-align: center;">
                                @if($s['approval'] == '')
                                     <a class="btn btn-success btn-sm" style="color:white" onclick="doApproval('{{$s['id']}}')" >Ya</a>
                             
                                    <a class="btn btn-primary btn-sm" style="color:white" onclick="doReject('{{$s['id']}}')">Tidak</a>
                                @endif
                                @if($s['approval'] == '1')
                                    <a class="btn btn-dark btn-sm" style="color:white" onclick="doEditApproval('{{ $s['no_order'] }}')">Edit</a>
                                @endif
                                </td>
                        </tr>
                    @endforeach
                    </tbody>
                 </table>
            </div>
        </div>
    </div>
    </div>
@endsection


<script >
    var isAjax = null
             jQuery(document).ready(function($) {
                 isAjax = $
                 console.log($)
                 console.log(isAjax)
             })
             
    function ajaxPOST(url, data){
        return new Promise((resolve) => {
            isAjax.ajax({
                type: "POST", url: `${url}`, data: data, processData: false, contentType: false, dataType: "JSON",
                beforeSend:function(){ },
                success:function(r){ 
                    resolve({ 'code': 200, 'message': 'success', 'data': r })
                }, error:function(){ resolve({ 'code': 400, 'message': 'Periksa koneksi internet kamu dan coba kembali!' }) }
            })
        })
    }
    function isQuestion(title, message){
        return new Promise((resolve) => {
            iziToast.question({ timeout: false, close: true, overlay: true, displayMode: 'once', zIndex: 9999, layout: 2, transitionIn: "bounceInDown", backgroundColor: "#f5f6fa", position: "topCenter",
                title: `${title}`,
                message: `${message}`,
                buttons: [
                    [`<button><b>Yakin</b></button>`, function(i, t){
                        i.hide({ transitionOut: 'fadeOut' }, t, 'button')
                        resolve(true)
                    }, true],
                    [`<button><b>Batal</b></button>`, function(i, t){
                        i.hide({ transitionOut: 'fadeOut' }, t, 'button')
                        resolve(false)
                    }, true]
                ]
            })
        })
    }
    
    function doEditApproval(no_order) {
        const baseUrl = '{{ url('editapproval') }}';
        window.open(`${baseUrl}/${no_order}`);
    }
    function isAlertSuccess(message){ iziToast.success({ title: "OK", message: message, timeout: 2100, position: "topCenter" }) }
    function isAlertError(message){ iziToast.error({ title: "ERROR", message: message, timeout: 2100, position: "topCenter" }) }

        async function doApproval(id){
            let aggree = await isQuestion("Konfirmasi", "Kamu yakin ingin approve order ini ?")
            if(aggree){
                let data = new FormData()
                data.append("id", `${id}`)
                data.append("approval", "0")
                data.append("_token", "{{ csrf_token() }}")
                
                let ajax = await ajaxPOST(`{{url('order_approval')}}`, data)
                if(ajax.code === 200){
                    isAlertSuccess("Approval berhasil")
                    setTimeout(()=>{ location.reload() }, 1200)
                }else{ isAlertError(ajax.message) }
            }
        }
        
        async function doReject(id){
        let aggree = await isQuestion("Konfirmasi", "Kamu yakin ingin reject order ini ?")
        if(aggree){
            let data = new FormData()
            data.append("id", `${id}`)
            data.append("approval", "1")
            data.append("_token", "{{ csrf_token() }}")
            let ajax = await ajaxPOST(`{{url('order_approval')}}`, data)
            if(ajax.code === 200){
                isAlertSuccess("Reject Berhasil")
                setTimeout(()=>{ location.reload() }, 1200)
            }else{ isAlertError(ajax.message) }
        }
    }
</script>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function () {
        var table = $('#myTable').DataTable({
            "responsive": true,
            "width": 15,
            paging: true,
            lengthChange: false,
            pageLength: 10,
            searching: true,
            order: [[3, 'desc']],
        });

        $('#filterMonth').on('change', function () {
            var selectedMonth = this.value;
            table.column(3).search(selectedMonth).draw();
        });
    });
</script>