@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;
    }


</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>
        <a href="{{ route('orderSum') }}?date={{ $date }}" class="btn btn-info sum-btn">總數統計(跳頁)</a>
        <button class="btn btn-info sum-btn1">總數統計(彈窗)</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 all-btn">全部</button>
        </div>
        <div class="col-12">
            {{-- 總金額: <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 scope="col">取貨日期</th>
                    <th scope="col">訂單編號</th>
                    <th scope="col">訂購人資訊</th>
                    <th scope="col">訂金</th>
                    <th scope="col">訂購內容</th>
                    <th scope="col">備貨代碼/狀態</th>
                    {{-- <th scope="col">打印狀態</th> --}}
                </tr>
            </thead>
            <tbody class="tbody">
                @foreach ($items as $item => $row)
                <tr>
                    <td>{{ $row->pickupAt }}</td>
                    <td>{{ $row->sn }}</td>
                    <td>{{ $row->name }}<br>{{ ($row->phone=="company")?"":$row->phone }}</td>
                    <td>{{ $row->deposit }}</td>
                    <td>{!! join('<br>',$row->product) !!}</td>
                    <td>
                        （{{ $row->number }}）
                        <button class="btn {{ ($row->status == 'y')?"btn-light":"btn-info" }} get-order" data-sn="{{ $row->sn }}">{{ ($row->status == 'y')?"訂單詳情":"取貨" }}</button>
                    </td>
                    {{-- <td><span>N</span></td> --}}
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="orderInfo" tabindex="-1" aria-labelledby="orderInfoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="orderInfoLabel" 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 ">
                    <div class="col-4">訂單編號</div><div class="col-8 orderSN"></div>
                    <div class="col-4">取貨日期</div><div class="col-8 orderDate"></div>
                    <div class="col-4">訂購人姓</div><div class="col-8 orderName"></div>
                    <div class="col-4">訂購人電話</div><div class="col-8 orderPhone"></div>
                    <div class="col-4">訂金</div><div class="col-8 orderDeposit"></div>
                    <div class="col-4">訂單狀態</div><div class="col-8 orderStatus"></div>
                    <div class="col-4">訂單詳情</div><div class="col-8 orderProductInfo"></div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="row" style="width:100%">
                    <div class="col-6">
                        <button type="button" class="btn btn-info stockUp-btn" style="width:100%">已備貨</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>

<div class="modal fade" id="sumInfo" tabindex="-1" aria-labelledby="sumInfoLabel" aria-hidden="true">
    <div class="modal-dialog " style="max-width:60vw">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="sumInfoLabel" 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>
            <div class="modal-footer">
                <div class="row" style="width:100%">
                    <div class="col-12">
                        <button type="button" class="btn btn-secondary" style="width:100%" data-dismiss="modal">關閉</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@csrf

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

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

        $('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');
            });

        });

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

            $.post('/sn/process/orderPickUp',{sn:sn},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('snIndex') }}";
        });

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

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

            $.post('/sn/process/sumSearch',{date:date},function(result){
                $('#sumInfo .modal-body').html(result);

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

        })

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

            var date = $('.date').val();
            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