@extends('layouts.master')

@section('title')
    LT-168 :: จัดการโพย
@endsection

@section('sub_title')
    จัดการโพย
@endsection

@section('content')
<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>
    </div>
    <div class="card-body table-responsive py-3">
        <table class="table table-sm table-bordered 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>
                @php
                    $i = 0;
                @endphp
                @foreach ($billRecords as $bill)
                @php
                    $i++;
                @endphp
                <tr>
                    <td class="align-middle text-center font-weight-bold">{{ $i }}</td>
                    <td class="align-middle text-center font-weight-bold text-default">{{ $bill['bill_id'] }}</td>
                    <td class="align-middle text-center font-weight-bold">{{ number_format($bill['amount'],2) }} THB</td>
                    <td class="align-middle text-center font-weight-bold">{{ number_format($bill['discount'], 2) }} THB</td>
                    <td class="align-middle text-center font-weight-bold">{{ number_format($bill['payment'], 2) }} THB</td>
                    <td class="align-middle text-center font-weight-bold">
                        <button class="btn btn-outline-default btn-sm" viewBillDetail="{{ $bill['id'] }}">
                            <i class="fas fa-eye"></i>
                            รายการแทง
                        </button>
                        <button class="btn btn-outline-danger btn-sm" disabled>
                            <i class="fas fa-trash"></i>
                            ยกเลิกโพย
                        </button>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
<div class="modal fade" id="BillDetailModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-secondary">
            <div class="modal-header">
                <h3 class="modal-title">รายการแทง</h3>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="table-responsive">
                <table class="table table-sm table-bordered 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>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
    <script>
        $(function(){

            let modal = $('#BillDetailModal');
            

            $('[viewBillDetail]').on('click', function(){
                var billId = $(this).attr('viewBillDetail');
                var billFirstId = $(this).closest('tr').find('td:eq(1)').text();
                modal.find('.modal-title').text(`รายการแทง: ${billFirstId}`);
                modal.find('tbody').html('');
                $.ajax({
                    url: `{{ url("/store/bill") }}/${billId}`,
                    method: 'GET',
                    dataType: 'JSON',
                    success: function(response){
                        var tr;
                        var sum = discount = payment = 0;
                        $(response).each(function(i, n){
                            sum += +n.amount;
                            discount += +n.discount;
                            payment += +n.payment;
                            tr += `<tr>
                            <td class="align-middle text-center font-weight-bold">${n.number}</td>
                            <td class="align-middle text-center font-weight-bold">${n.type}</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(n.amount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(n.discount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(n.payment, 2)} THB</td>
                        </tr>`
                        });
                        tr += `<tr>
                            <td class="align-middle text-center font-weight-bold" colspan="2">รวมยอด</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(sum, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(discount, 2)} THB</td>
                            <td class="align-middle text-center font-weight-bold">${$.number(payment, 2)} THB</td>
                        </tr>`;
                        modal.find('tbody').html(tr);
                    }
                });
                modal.modal('show');
            });
            
        });
    </script>
@endsection