@extends('layouts.app')

@section('contents')
    <div class="card">
        <div class="card-body border-bottom">
            {{ MyNotify::get() }}
            <form action="{{ url()->current() }}" method="get">
                <div class="form-group">
                    <label for="bank_id">บัญชี :</label>
                    <select name="bank_id">
                        <option value="">ทั้งหมด</option>
                        @foreach ($banksys as $value)
                            <option value="{{ $value->id }}" {{ (int) $bank_id === (int) $value->id ? 'selected' : '' }}>
                                {{ $value->bankList->bank_abbrev_en . ' : ' . $value->bankList->bank_abbrev_th . ' - ' . $value->account_number . ' - ' . $value->name }}
                            </option>
                        @endforeach
                    </select>
                    <label for="date1">จาก : </label>
                    <input type="date" name="date1" value="{{ $date1 }}">
                    <label for="date1">ถึง : </label>
                    <input type="date" name="date2" value="{{ $date2 }}">
                    <input type="submit" value="ค้นหา">
                </div>
            </form>
        </div>
        <div class="card-datatable table-responsive pt-0 container-fluid">
            <table id="dtable" class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>วันที่/เวลา</th>
                        <th>ธนาคาร</th>
                        <th>ยอดเงิน</th>
                        <th>รายละเอียด</th>
                        <th>ช่องทาง</th>
                        <th>สถานะ</th>
                    </tr>
                </thead>
                <tbody>
                    @php($i = 1)
                    @foreach ($transactions as $value)
                        <tr>
                            <td>{{ $i++ }}</td>
                            <td>{{ $value->date }}</td>
                            <td>
                                <img src="{{ asset('assets/css/th/' . strtolower($value->bankSys->bankList->bank_abbrev_en) . '.png') }}"
                                    width="20px" />
                                <small>
                                    {{ $value->bankSys->bankList->bank_abbrev_en . ' : ' . $value->bankSys->bankList->bank_abbrev_th }}
                                    - {{ $value->bankSys->account_number }} - {{ $value->bankSys->name }}
                                </small>
                            </td>
                            <td>
                                @if ($value->type_id === 1)
                                    <span class="text-success">{{ number_format($value->amount, 2) }}</span>
                                @else
                                    <span class="text-danger">-{{ number_format($value->amount, 2) }}</span>
                                @endif
                                ({{ number_format($value->fee, 2) }})
                            </td>
                            <td>{{ $value->remark }}</td>
                            <td>{{ $value->channel }}</td>
                            <td>
                                @if ($value->status_id === 1)
                                    <span class="badge rounded-pill badge-light-success me-1">ทำรายการแล้ว</span>
                                @else
                                    <span class="badge rounded-pill badge-light-danger me-1">ยังไม่ทำรายการ</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th>#</th>
                        <th>วันที่/เวลา</th>
                        <th>ธนาคาร</th>
                        <th>ยอดเงิน</th>
                        <th>รายละเอียด</th>
                        <th>ช่องทาง</th>
                        <th>สถานะ</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endsection

@section('head.vendor.css')
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
@endsection

@section('page.js')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#dtable').DataTable();
        });
    </script>
@endsection