<?php
    const STATUS_PENDING = '<span style="color:red">PENDING</span>';
    const STATUS_PAID = '<span style="color:green">PAID</span>';
    
    function convertPaymentStatus($paymentStatus){
        switch($paymentStatus){
            case 1: return STATUS_PENDING;
                break;
            case 2: return STATUS_PAID;
                break;
            case 3: return 'EXPIRED';
        }
    }
    
    function convertPaymentType($paymentType){
        switch($paymentType){
            case 1: return 'COD';
                break;
            case 2: return 'NON TUNAI';
                break;
        }
    }

    function convertDeliveryStatus($statusId){
    	switch($statusId){
    		case 0: return '<span style="color:red">PENDING</span>';
    		    break;
    		case 'SCHEDULED':
    		case '101': return('<span style="color:orange">PROSES</span>');
    		case '102': return('<span style="color:green">SUKSES</span>');
    		case '103': return('<span style="color:red">RETUR</span>');
    		case '104': return("BATAL");
    		default : return($statusId);
    	}
    }
    
    function convertOrderCategory($orderId){
        switch($orderId){
            case 1: return 'AR-FASHION';
                break;
            case 2: return 'AR-CARE';
                break;
        }
    }
    
    function convertOrderStatus($status){
        switch($status){
            case 0: return '<span style="color:red">PENDING</span>';
                break;
            case 1: return '<span style="color:orange">PROSES</span>';
                break;
            case 2: return '<span style="color:green">SELESAI</span>';
                break;
        }
    }

?>

<x-layout>
    @section('title', $title.' - ')
    @section('page_title', $title)
    @include('admin/ar-css')
    @include('admin/ar-php-script')
    @include('admin/header_admin')

    <section class="ar-dashboard-height">
        <div class="ar-dashboard-row" style="height:100%">
            <div id="ar-left-nav">
                @include('admin/left_nav')
            </div>

            <div id="ar-dashboard-content">

                <div style="overflow:scroll;margin:3px">
                    @if(isset($orders))
                    <table id="ar-table">
                        <tr>
                            <th>ID</th>
                            <th>Order Number</th>
                            <th style="white-space:nowrap">Order Date</th>
                            <th>Category</th>
                            <th>Customer</th>
                            <th>Phone</th>
                            <th>Address</th>
                            <th>Kota / Kecamatan</th>
                            <th>Referrer ID</th>
                            <th>Jumlah (Rp.)</th>
                            <th>Biaya Kirim (Rp.)</th>
                            <th>Payment Type</th>
                            <th>Payment Status</th>
                            <th>Delivery Status</th>
                            <th>Order Status</th>
                            <th></th>
                        </tr>
                        
                        <tbody id="ar-table-body">
                            @foreach($orders as $item)
                                <tr id="<?='index_'.$item->id?>">
                                    <td>{{ $item->id }}</td>
                                    <td>{{ $item->number }}</td>
                                    <td>{!! date('d-m-Y H:i:s',strtotime($item->created_at)) !!}</td>
                                    <td style="white-space:nowrap">{!! convertOrderCategory($item->category) !!}</td>
                                    <td style="white-space:nowrap">{{ $item->customer }}</td>
                                    <td>{{ $item->phone }}</td>
                                    <td style="min-width:200px">{{ $item->address }}</td>
                                    <td>{{ $item->wilayah }}</td>
                                    <td>{{ $item->referral_id }}</td>
                                    <td>{{ rupiahBasic($item->total_price) }}</td>
                                    <td>{{ rupiahBasic($item->shipping_cost) }}</td>
                                    <td>{!! convertPaymentType($item->payment_type) !!}</td>
                                    <td>{!! convertPaymentStatus($item->payment_status) !!}</td>
                                    <td>{!! convertDeliveryStatus($item->delivery_status) !!}</td>
                                    <td>{!! convertOrderStatus($item->completed) !!}</td>
                                    <td>
                                        <div class="dropdown" style="white-space:nowrap">
                                            <button class="dropdown-ar1_exp" style="outline:none;border:none;padding:5px;border-radius:50%" data-toggle="dropdown">
                                                <i class="fa fa-ellipsis-v"></i>
                                            </button>
                                            <div class="dropdown-menu dropdown-menu-right dropdown-content1">
                                                <a href="javascript:void(0)" id="order-edit" data-id="{{ $item->id }}">Update Status</a>
                                            </div>
                                            
                                            <a href="/order-items?order_number={{$item->number}}&category={{$item->category}}" style="cursor:pointer;margin-left:10px;color:#000000">
                                                <i class="fa fa-arrow-right"></i>
                                            </a>
                                            <!--| <span class="btn-shipping" style="cursor:pointer;white-space:nowrap" data-item="{{ $item }}"> Send to Shipper</span>-->
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    {!! createPageNavigator($orders) !!}
                    @endif
                </div>
                
            </div>
        </div>
        
    </section>

    
    <div id="modal-message" class="modal">
        <div class="ar-view-modal">
            Mohon tunggu. Sedang proses...
        </div>
    </div>

    <div id="modal-order" class="modal">
        <div class="form-popup ar-view-modal" style="max-height:80%;background-color:#f8f8f8">
            <div style="text-align:center"><h5>Manage Order Status</h5></div>

            <form id="myFormStatus" style="overflow-y:scroll">
                <input type="hidden" id="id" name="id">
                <input type="hidden" id="number" name="number">
                <input type="hidden" id="category" name="category">

                <div class="form-group">
                    <label>Order Number :</label> 
                    <label class="form-control" id="order-number" name="order-number"></label>
                </div>

                <div class="form-group">
                    <label>Customer :</label> 
                    <label class="form-control" id="name" name="name"></label>
                </div>

                <!--
                <div class="form-group">
                    <label>Shipping Cost (Rp.):</label> 
                    <input class="form-control" id="shipping-cost" name="shipping-cost" type="text">
                </div>-->

                <div class="form-group">
                    <label>Payment Status :</label> 
                    <select id="payment_status" name="payment_status">
                        <option value="1">PENDING</option>
                        <option value="2">PAID</option>
                        <option value="3">EXPIRED</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Delivery Status :</label> 
                    <select id="delivery_status" name="delivery_status">
                        <option value="0">PENDING</option>
                        <option value="101">PROCESS</option>
                        <option value="102">SUKSES</option>
                        <option value="103">RETURE</option>
                        <option value="104">BATAL</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>Order Status :</label> 
                    <select id="order_status" name="order_status">
                        <option value="0">PENDING</option>
                        <option value="1">PROSES</option>
                        <option value="2">SELESAI</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <button id="btn-store" class="btn btn-primary">Simpan</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </form>
        </div>        
    </div>
    
    <div id="modal-item-show" class="modal">
        <div class="ar-view-modal">
            Kirim Order: <span id="order-number"></span> ke Agen kurir.
            
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">TUTUP</button>
                <button type="button" class="btn btn-primary" id="update">UPDATE</button>
            </div>
        </div>
    </div>

    @include('admin/ar-script')
    
    <script>
        $('body').on('click','#order-edit',function(e){
            $('#modal-message').modal('show');
            let id = $(this).data('id');

            $.ajax({
                url: `order/${id}`,
                type: 'GET',
                cache: false,
                success:function(response){
                    $('#id').val(response.data.id);
                    $('#number').val(response.data.number);
                    $('#category').val(response.data.category);
                    
                    $('#order-number').html(response.data.number);
                    $('#name').html(response.data.customer);
                    //$('#shipping-cost').val(response.data.shipping_cost);
                    
                    $('#payment_status').val(response.data.payment_status);
                    $('#delivery_status').val(response.data.delivery_status);
                    $('#order_status').val(response.data.completed);
                    
                    $('#modal-order').modal('show');
                    $('#modal-message').modal('hide');
                }
            });
        });
        
        $('body').on('click','#btn-store',function(e)
        {
            e.preventDefault();
            $('#modal-message').modal('show');
            
            let formData = new FormData($('#myFormStatus')[0]);
            let id = $('#id').val();
            if(id != ''){
                formData.append('_method','PUT');
            }

            $.ajax({
                headers: {
                    'X-CSRF-Token': "{{ csrf_token() }}" 
                },
                url: `/order`,
                type: "POST",
                cache: false,
                contentType: false,
                processData: false,
                data:formData,
                success:function(response){
                    document.location.reload();
                }
            });
        });

        const pad = n => `${Math.floor(Math.abs(n))}`.padStart(2, '0');
        function formatDate(mydate){
            const date = new Date(mydate);
            return pad(date.getDate()) + "-" + 
                    pad(date.getMonth() + 1) + "-" + 
                    pad(date.getFullYear()) + " " + 
                    pad(date.getHours()) + ":" + 
                    pad(date.getMinutes()) + ":" + 
                    pad(date.getSeconds())
                    ;
        }
        
        //konversi ke rupiah
        const rupiah = (number) => {
          return new Intl.NumberFormat("id-ID", {
            style: "currency",
            currency: "IDR",
            minimumFractionDigits: 0,
          }).format(number) + ",-";
        };

        function convertPaymentStatus(paymentStatus){
            switch(paymentStatus){
                case "0": return "";
                    break;
                    
                case "1": return '<span style="color:red">PENDING</span>';
                    break;
                case "2": return '<span style="color:green">PAID</span>';
                    break;
                case "3": return "EXPIRED";
                    break;
            }
        }
        
        function convertPaymentType(paymentType){
            switch(paymentType){
                case "0": return "";
                    break;
                case "1": return "COD";
                    break;
                case "2": return "NON TUNAI";
                    break;
            }
        }

        function convertDeliveryStatus(statusId){
        	switch(statusId){
        		case '0': return('<span style="color:red">PENDING</span>');
        		    break;
        		case 'SCHEDULED':
        		case '101': return('<span style="color:orange">PROSES</span>');
        		case '102': return('<span style="color:green">SUKSES</span>');
        		case '103': return('<span style="color:red">RETUR</span>');
        		case '104': return("BATAL");
        		default : return(statusId);
        	}
        }
    
        function convertOrderCategory($orderId){
            switch($orderId){
                case '1': return 'AR-FASHION';
                    break;
                case '2': return 'AR-CARE';
                    break;
            }
        }
        
        function convertOrderStatus($status){
            switch($status){
                case '0': return '<span style="color:red">PENDING</span>';
                    break;
                case '1': return '<span style="color:orang">PROSES</span>';
                    break;
                case '2': return '<span style="color:green">SELESAI</span>';
                    break;
            }
        }

    </script>
</x-layout>