@extends('layout')

@section('pageTitle', "商品｜".config('globals.app_name'))


@section('content')
<style>
    .card-box{
        padding:24px;
    }
    .card-title h1{
        font-size: 30px;
    }

    .card-head{
        background: rgb(222,222,222);
        padding: 4px 0;
    }

    .card-body{
        border:1px solid rgb(222,222,222);
    }
    .red{
        color: #ff6666 !important;
    }

    .green{
        color:rgb(18, 179, 18) !important;
    }
</style>

<div class="card-box">
    <div class="card-title">
        <h1>商品</h1>
    </div>
    <div class="card-add mb-3">
        {{-- <a href="create" class="btn btn-primary">新增商品</a> --}}
    </div>
    <div class="card-filter mb-3 row">
        <div class="col-3">
            <input type="text" class="form-control " placeholder="商品名稱">
        </div>
        <div class="col-3">
            <button class="btn btn-info">查詢</button>
        </div>

    </div>
    @php
       $status = array(-1 => '取消訂單', 1 => '未付款', 2 => '已付款' , 3 => '已配送' , 4 => '訂單已完成');
       $status_color = array(-1 => '', 1 => 'red', 2 => 'green' , 3 => 'green' , 4 => 'green');
    @endphp
    @foreach ($Order as $item => $row)
    <div class="card-table mb-3">
        <div class="col-12 card-head d-flex">
            <div class="col-3">訂單編號：{{ $row->orderSn }}</div>
            <div class="col-3">訂單狀態：<span class="{{ $status_color[$row->status] }}">{{ $status[$row->status] }}</span></div>
            <div class="col-3">訂購日： {{ date('Y-m-d',strtotime($row->created_at)) }}</div>
            <div class="col-3">出貨日：{{ ($row->status == 1)?"":date('Y-m-d',strtotime($row->updated_at_at)) }}</div>
        </div>
        <div class="col-12 card-body d-flex">
            <div class="col-3">
                {{-- {{dd($orderProductView)}} --}}
                @foreach ($orderProductView[$row->orderSn] as $key => $val)
                    {!! $val."<br>" !!}
                @endforeach
                {{-- 雞心 x 2 --}}

            </div>
            <div class="col-2">
                {{ $row->name }}<br>
                {{ $row->phone }}
            </div>
            <div class="col-2">
                ${{ $row->totalMoney }}<br>
                {{ $row->deliveryType }}<br>
                {{ $row->payType }}
            </div>
            <div class="col-3">
                備註:{{ $row->ps }}
            </div>
            <div class="col-2">
                {{-- $status = array(-1 => '取消訂單', 1 => '未付款', 2 => '已付款' , 3 => '已配送' , 4 => '訂單已完成'); --}}
                <select name="" id="">
                    <option value="1" {{ $row->status == 1 ? 'selected' : '' }} >未付款</option>
                    <option value="2" {{ $row->status == 2 ? 'selected' : '' }}>已付款</option>
                    <option value="3" {{ $row->status == 3 ? 'selected' : '' }}>已寄送</option>
                    <option value="4" {{ $row->status == 4 ? 'selected' : '' }}>訂單已完成</option>
                    <option value="-1" {{ $row->status == -1 ? 'selected' : '' }}>取消訂單</option>
                </select>
            </div>
        </div>
    </div>
    @endforeach

</div>
@csrf

<script>
    $(document).ready(function(){
        var token = $('input[name=_token]').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': token
            }
        });
        $('.custom-control-input').change(function(){
            var id = $(this).data('oid');
            var status = $(this).prop('checked');
            if(status == true){
                status = 1;
            }
            else{
                status = 2;
            }
            var sendData = {
                id:id,
                open_status:status
            };


            $.post('/products/process/changeStatus',sendData,function(result){
                result = JSON.parse(result);
                if(result['code'] == '00'){
                    console.log('success');
                    $('#alert-modal').modal('show').find('.modal-text').text(result['msg']);
                }
            });

        });

        $('.btn-delete').click(function(){
            var id = $(this).data('oid');
            var status = -1;

            var sendData = {
                id:id,
                open_status:status
            };

            $.post('/products/process/changeStatus',sendData,function(result){
                result = JSON.parse(result);
                if(result['code'] == '00'){
                    // console.log('success');
                    $('#alert-modal').modal('show').find('.modal-text').text(result['msg']);
                    location.reload();
                }
            });
        });
    });
</script>

@endsection


@push('modal')
    @component('components.modal.notice', ['name' => 'alert','title' => 'Notice'])
        <p class="modal-text"></p>
    @endcomponent
@endpush