@extends('layout')

@section('pageTitle', "訂購統計｜".config('globals.app_name'))


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

    .row.order-body {
        margin: 0;
    }
    .order-body .col-4,.order-body .col-8{
        padding:10px;
        border: 1px solid rgb(222,222,222);
    }
    .font-bold{
        font-weight: 600;
    }
    .sum-head .col-3{
        border: 1px solid rgb(222,222,222);
        text-align: center;
    }
    .sum-body .col-3{
        border: 1px solid rgb(222,222,222);
        text-align: center;
    }
    .math-btn{
        font-weight: 900;
        font-size: 22px;
        width: 45px;
        padding: 0;
    }
    .count{
        width: 130px;
        text-align: center;
    }
</style>
<div class="card-box">
    <div class="card-title">
        <h1>訂購系統</h1>
    </div>
    <div class="card-add mb-3">
        {{-- <a href="{{ route('snCreate') }}" class="btn btn-primary">新增訂單</a> --}}
        {{-- <button class="btn btn-info sum-btn">總數統計</button> --}}
    </div>
    <div class="card-filter mb-3 row">
        <div class="col-3">
            <input type="date" class="form-control date" value="{{ (empty($date))?date('Y-m-d'):$date }}">
        </div>
        {{-- <div class="col-3">
            <input type="text" class="form-control phone" placeholder="末三碼">
        </div> --}}
        <div class="col-6">
            <button class="btn btn-info search-btn">查詢</button>
            {{-- <button class="btn btn-info clear-btn">清空</button> --}}
            <button class="btn btn-info only-number">只顯示數字</button>
            <button class="btn btn-info all-show">全顯示</button>
            {{-- <button class="btn btn-info all-btn">全部</button> --}}
        </div>

        <div class="col-12">
            @php
                $sum = 0;
                foreach($items as $item => $row){
                    foreach($row as $item1 => $row1){
                        $sum+= $row1;
                    }
                }
            @endphp
            總數量:<span class="ml-2">{{ number_format($sum,2) }}</span>
            {{-- 總金額: <span class="ml-2">{{ number_format($sums->total_sumprice,2) }}</span>
            , 總叫貨量:<span class="ml-2">{{ $sums->total_count }}</span> --}}
        </div>
    </div>
    <div class="card-table">
        <table  class="table table-hover">
            <thead>
                <tr>
                    <th class="w-25">品項</th>
                    <th class="w-25 text-center">大</th>
                    <th class="w-25 text-center">中</th>
                    <th class="w-25 text-center">小</th>
                </tr>
            </thead>
            <tbody class="tbody">
                <style>
                    .zero{
                        color:rgb(222,222,222);
                        font-size: 10px;
                    }
                    .hasNumber{
                        font-weight: 900;
                        /* font-size: 20px; */
                    }
                </style>
                @foreach ($items as $item => $row)
                <tr>
                    <td>{{ $item }}</td>
                    <td class="text-center">
                        {!! empty($row['大'])?'<span class="zero">0</span>':'<span class="hasNumber">'.$row['大'].'</span>' !!}
                        <span class="hasCount">({{ (empty($productCount[$item]['大']))?0:$productCount[$item]['大']  }})</span>
                        <button class="btn btn-info set-btn" data-name="{{ $item }}" data-type="大">編輯</button>
                    </td>
                    <td class="text-center">
                        {!! empty($row['中'])?'<span class="zero">0</span>':'<span class="hasNumber">'.$row['中'].'</span>' !!}
                        {{-- {{ empty($row['中'])?0:$row['中'] }} --}}
                        <span class="hasCount">({{ (empty($productCount[$item]['中']))?0:$productCount[$item]['中']  }})</span>
                        <button class="btn btn-info set-btn" data-name="{{ $item }}" data-type="中">編輯</button>
                    </td>
                    <td class="text-center">
                        {!! empty($row['小'])?'<span class="zero">0</span>':'<span class="hasNumber">'.$row['小'].'</span>' !!}
                        {{-- {{ empty($row['小'])?0:$row['小'] }} --}}
                        <span class="hasCount">({{ (empty($productCount[$item]['小']))?0:$productCount[$item]['小']  }})</span>
                        <button class="btn btn-info set-btn" data-name="{{ $item }}" data-type="小">編輯</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="setCount" tabindex="-1" aria-labelledby="setCountLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="setCountLabel" style="font-size: 22px;font-weight: 600;">訂單詳情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row order-body " style="justify-content: center">
                    <div class="input-box d-flex">
                        <button class="btn btn-info math-btn" data-number="-1" >-</button>
                        <input type="number" class="form-control count" value="0">
                        <button class="btn btn-info math-btn" data-number="1">+</button>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="row" style="width:100%">
                    <div class="col-6">
                        <button type="button" class="btn btn-secondary" style="width:100%" data-dismiss="modal">關閉</button>
                    </div>
                    <div class="col-6">
                        <button type="button" class="btn btn-primary sub-btn" style="width:100%" >儲存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@csrf

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

        $.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': token
            }
        });

        $('.only-number').click(function(){
            $('.set-btn').hide();
            $('.hasCount').hide();
        });

        $('.all-show').click(function(){
            $('.set-btn').show();
            $('.hasCount').show();
        });

        $('body').delegate('.get-order','click',function(){
            var sn = $(this).data('sn');

            if($(this).hasClass('btn-info')){
                $('.sub-btn').show();
            }
            else{
                $('.sub-btn').hide ();
            }

            $.post('/sn/process/getOrderInfo',{sn:sn},function(result){
                result = JSON.parse(result);
                console.log(result);

                $('.orderSN').html(result['訂單編號']);
                $('.orderDate').html(result['取貨日期']);
                $('.orderName').html(result['訂購人姓']);
                $('.orderPhone').html(result['訂購人電話']);
                $('.orderDeposit').html(result['訂金']);
                $('.orderStatus').html(result['取貨狀態']);
                $('.orderProductInfo').html(result['訂單詳情']);

                $('.sub-btn').data('sn',sn);
                $('.stockUp-btn').data('sn',sn);

                $('#orderInfo').modal('show');
            });

        });

        $('.set-btn').click(function(){
            var name = $(this).data('name');
            var type = $(this).data('type');
            var date = $('.date').val();

            $('#setCountLabel').text(name+"備貨量");
            $('.sub-btn').data('name',name).data('type',type);

            var sendData = {
                name:name,
                type:type,
                date:date,
            }

            $.post('/sn/process/getCount',sendData,function(result){
                $('.count').val(result);
                $('#setCount').modal('show');
            });

        });

        $('.math-btn').click(function(){
            var count = parseFloat($('.count').val()) ;
            var math_btn = parseFloat($(this).data('number'));
            count += math_btn;
            $('.count').val(count);
        })

        $('.sub-btn').click(function(){
            var name = $(this).data('name');
            var type = $(this).data('type');
            var date = $('.date').val();
            var count = $('.count').val();

            var sendData = {
                name:name,
                type:type,
                date:date,
                count:count
            }

            // console.log(name,type,date,count);

            $.post('/sn/process/saveCount',sendData,function(result){
                alert('Success');
                location.reload();
            });
        });

        $('.stockUp-btn').click(function(){
            var sn = $(this).data('sn');
            var orderDate = $('.orderDate').text();

            $.post('/sn/process/orderStockUp',{sn:sn,orderDate:orderDate},function(result){
                alert('Success');
                location.reload();
            });
        });

        $('.clear-btn').click(function(){
            location.href = "{{ route('orderSum') }}";
        });

        $('.all-btn').click(function(){
            location.href = "{{ route('orderSum') }}?type=all";
        });

        $('.sum-btn').click(function(){
            var date = $('.date').val();

            $.post('/sn/process/sumSearch',{date:date},function(result){

                $('#sumInfo').modal('show');
            });

        })

        $('.search-btn').click(function(){

            var date = $('.date').val();
            location.href = "{{ route('orderSum') }}?date="+date;

            // var phone = $('.phone').val();
            // var sendData = {
            //     date:date,
            //     phone:phone
            // }

            // $.post('/sn/process/indexSearch',sendData,function(result){
            //     console.log(result);
            //     $('.tbody').html(result);
            // });
        });
    });
</script>
@endsection