@extends('layout')

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


@section('content')
<style>
    .card-box{
        padding:24px;
    }
    .card-title h1{
        font-size: 30px;
    }
</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>
    <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>
                </tr>
            </thead>
            <tbody>
                @foreach ($items as $item => $row)
                <tr>
                    <td>#{{ $row->id }}</td>
                    <td>{{ $row->pmSid }}</td>
                    <td>{{ $row->Name }}</td>
                    <td>{{ $row->order }}</td>
                    <td>
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="customSwitch{{ $row->id }}" data-oid="{{ $row->id }}" @checked($row->Status)>
                            <label class="custom-control-label" for="customSwitch{{ $row->id }}"></label>
                        </div>
                    </td>
                    <td>
                        <a class="btn btn-secondary" href="/productMethod/edit?id={{ $row->id }}">編輯</a>
                        <button class="btn btn-danger">刪除</button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@csrf

<script>
    $(document).ready(function(){
        $('.custom-control-input').change(function(){
            var id = $(this).data('oid');
            var status = $(this).prop('checked');
            var token = $('input[name=_token]').val();
            if(status == true){
                status = 1;
            }
            else{
                status = 2;
            }
            var sendData = {
                id:id,
                open_status:status
            };

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

            $.post('/productMethod/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']);
                }
            });

        });
    });
</script>

@endsection


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