@extends('layouts.master')

@section('title')
    LT-168 :: บิลยกเลิกรายการ
@endsection

@section('sub_title')
    บิลยกเลิกรายการ
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0">รายการบิล</h3>
                        </div>
                        {{-- <div class="col text-right">
                            <a href="#AddSalesCycle" data-toggle="modal" class="btn btn-sm btn-warning"><i class="fas fa-plus text-white-50 mr-1"></i> ตาราง</a>
                        </div> --}}
                    </div>
                </div>
                <div class="card-body table-responsive py-3">
                    <table id="cancel-bill-table" class="table table-hover table-bordered">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">วันที่</th>
                                <th class="align-middle text-center font-weight-bold">เลขบิล</th>
                                <th class="align-middle text-center font-weight-bold">ยอดแทง</th>
                                <th class="align-middle text-center font-weight-bold">ส่วนลด</th>
                                <th class="align-middle text-center font-weight-bold">สุทธิ</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($bills as $bill)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">{{ $bill['th_datetime'] }}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <a href="javascript:void(0);" onclick="viewBet(this)" data-bet='{{ $bill['betJson'] }}'>{{ $bill['bill_id'] }}</a>
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ nf($bill['amount'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-success">{{ nf(-$bill['discount'], true) }}</td>
                                <td class="align-middle text-center font-weight-bold text-primary">{{ nf($bill['payment'], true) }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="betModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="table-responsive">
                    <table class="modal-body table table-hover">
                        <thead>
                            <tr>
                                <th class="align-middle text-center font-weight-bold">ประเภท</th>
                                <th class="align-middle text-center font-weight-bold">หมายเลข</th>
                                <th class="align-middle text-center font-weight-bold">สถานะ</th>
                                <th class="align-middle text-center font-weight-bold">ยอดแทง</th>
                                <th class="align-middle text-center font-weight-bold">ส่วนลด</th>
                                <th class="align-middle text-center font-weight-bold">สุทธิ</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>    
@endsection

@section('scripts')
    <script>
        const table = $('#cancel-bill-table');
        const DTInstance = table.DataTable();

        const viewBet = function (el) 
        {
            const self = $(el);
            const bet = self.data('bet');
            const modal = $('#betModal');
            modal.find('h5').html(self.text());
            let tr = ``;
            for(const i in bet){
                let data = bet[i];
                let status = {
                    table: '',
                    text: 'ปกติ',
                    class: 'success'
                };
                if (data.status == 2) {
                    status.text = 'ยกเลิก'; status.class = 'danger'; status.table = 'class="table-danger"';
                }
                tr += `<tr ${status.table}>
                            <td class="align-middle text-center font-weight-bold">${data.type}</td>
                            <td class="align-middle text-center font-weight-bold">${data.number}</td>
                            <td class="align-middle text-center font-weight-bold text-${status.class}">${status.text}</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(data.amount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold text-success">${$.number(-data.discount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold text-primary">${$.number(data.payment, 2)} THB</td>
                        </tr>`;
            }
            modal.find('tbody').html(tr); modal.modal('show');
        }
    </script>
@endsection