@extends('layouts.master')

@section('title')
    LT-168 :: รายการฝากเงิน
@endsection

@section('sub_title')
    รายการฝากเงิน
@endsection

@section('content')
    
<div class="card">
    <!-- Card header -->
    <div class="card-header border-0">
        <h3 class="mb-0">ยอดฝากรวม</h3>
    </div>
    <div class="table-responsive">
        <table class="table align-items-center table-sm not-datatable">
            <thead class="thead-light">
                <tr>
                    <th>ธนาคาร</th>
                    <th>ชื่อบัญชี</th>
                    <th>เลขบัญชี</th>
                    <th class="text-center">ยอดฝาก</th>
                </tr>
            </thead>
            <tbody class="list">
                @foreach ($agentBank as $item)
                <tr>
                    <th scope="row">
                        <div class="media align-items-center">
                            <a href="#" class="avatar rounded-circle mr-3">
                                <img alt="Image placeholder" src="{{ bankImg($item->bank_code) }}" />
                            </a>
                            <div class="media-body">
                                <span class="name mb-0 text-sm">{{ bankName($item->bank_code) }}</span>
                            </div>
                        </div>
                    </th>
                    <td class="budget">
                        {{ $item->bank_owner_name}}
                    </td>
                    <td>
                        {{ $item->bank_number }}
                    </td>
                    <td class="text-center">
                        {{ nf($item->sum_deposit_amount, true) }}
                    </td>
                    {{-- <td class="text-right">
                        <div class="dropdown">
                            <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-ellipsis-v"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow" style="">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                        </div>
                    </td> --}}
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

    <div class="card">
        <div class="card-header border-0">
            <div class="row align-items-center border-0">
                <div class="col">
                    <h3 class="mb-0">รายการฝากเงิน</h3>
                </div>
                <div class="col text-right form-inline justify-content-end">
                    <form onsubmit="filterHandler(event, this)">
                        <select class="form-control mr-2" name="status">
                            <option value="0" {{ $request->status == '0' ? 'selected':'' }}>รอดำเนินการ</option>
                            <option value="1" {{ $request->status == '1' ? 'selected':'' }}>อนุมัติ</option>
                            <option value="2" {{ $request->status == '2' ? 'selected':'' }}>ไม่อนุมัติ</option>
                        </select>
                        <input type="date" class="form-control mr-2" name="filter_date" />
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search"></i> ค้นหา
                        </button>
                    </form>
                </div>
            </div>
        </div>
        <div class="table-responsive pb-2">
            <table class="table table-sm table-hover" data-order='[[0, "desc"]]'>
                <thead class="thead-light">
                    <tr>
                        <th class="align-middle text-center text-sm">#</th>
                        <th class="align-middle text-center text-sm"></th>
                        <th class="align-middle text-center text-sm"></th>
                        <th class="align-middle text-center text-sm">จำนวนเงิน</th>
                        <th class="align-middle text-center text-sm" data-orderable="false">จัดการ</th>
                        <th class="align-middle text-center text-sm">เวลาแจ้งโอน</th>
                        <th class="align-middle text-center text-sm">เวลากดส่ง</th>
                        <th class="align-middle text-center text-sm">เวลาดำเนินการ</th>
                        <th class="align-middle text-center text-sm">บัญชีที่ฝาก</th>
                        <th class="align-middle text-center text-sm">บัญชีที่โอน</th>
                        <th class="align-middle text-center text-sm">สถานะ</th>
                        <th class="align-middle text-center text-sm" data-orderable="false"></th>
                    </tr>
                </thead>
                <thead>
                    <tr class="table-success">
                        <th class="align-middle text-center" colspan="2">ยอดฝากรวม: </th>
                        <th class="align-middle text-center">{{ nf($depositRequest->sum('amount'), true) }}</th>
                        <th class="align-middle text-center" colspan="9"></th>
                    </tr>
                </thead>
                <tbody class="table_three">
                    @if ($depositRequest->count() === 0)
                        <tr>
                            <td colspan="8" class="text-center py-3">
                                <h3 class="font-weight-light text-muted mb-0">ไม่มีรายการ</h3>
                            </td>
                        </tr>
                    @else
                    @php
                        $i = 0;
                    @endphp
                        @foreach ($depositRequest as $key => $item)
                            @php $status = depositStatus($item) @endphp
                            <tr class="{{ ($item->status === 0 ? ($item->action_status ? 'table-warning':''):'') }}">
                                <td class="align-middle text-center" data-sort="{{ $item->id }}">
                                    {{ ++$i }}
                                </td>
                                <td class="align-middle text-center">
                                    @if ($item->status === 0)
                                    <div class="form-check">
                                        <input id="defaultCheck{{ $i }}" class="form-check-input" type="checkbox" value="" onchange="toggleActionRow(event, this)" data-id="{{ $item->id }}" {{ ($item->action_status ? 'checked':null) }}>
                                        <label class="form-check-label" for="defaultCheck{{ $i }}">
                                            รอดำเนินการ
                                        </label>
                                    </div>
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    <span class="badge badge-primary text-sm mb-1">{{ $item->user->username }}</span><br/>
                                    {{ $item->user->name }}<br/>
                                    ภายใต้: {{ $item->user->upline->username }}<br/>
                                    Reference: {{ $item->user->reference_name }}
                                </td>
                                <td class="align-middle text-center text-lg">{{ number_format($item->amount, 2) }}</td>
                                <td class="align-middle text-center">
                                    @if ($item->status === 0)
                                        <button class="btn btn-success btn-sm btn-icon-only rounded-circle" data-id="{{ $item->id }}" onclick="proceedRequest(true, this)" title="อนุมัติ">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm btn-icon-only rounded-circle" data-id="{{ $item->id }}" onclick="proceedRequest(false, this)" title="ไม่อนุมัติ">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    @endif
                                </td>
                                <td class="align-middle text-center text-primary font-weight-bold">{!! str_replace(', ', '<br>', THdatetime($item->datetime ?? '')) !!}</td>
                                <td class="align-middle text-center text-danger font-weight-bold">{!! str_replace(', ', '<br>', THdatetime($item->created_at)) !!}</td>
                                <td class="align-middle text-center text-success font-weight-bold">{!! str_replace(', ', '<br>', THdatetime($item->created_at == $item->updated_at ? '' : $item->updated_at)) !!}</td>
                                <td class="align-middle text-center">
                                    @if (!is_null($item->deposit_account_info))
                                        {{ $item->deposit_account_info['agent_bank_name'] }}<br/>
                                        ชื่อบัญชี: {{ $item->deposit_account_info['agent_bank_owner_name'] }}<br/>
                                        เลขบัญชี: {{ $item->deposit_account_info['agent_bank_nubmer'] }}
                                    @else
                                    -
                                    @endif
                                </td>
                                <td class="align-middle text-center">
                                    @if (!is_null($item->deposit_account_info))
                                    <span class="badge badge-warning text-sm" style="line-height: 1.5;">
                                        {{ $item->deposit_account_info['bank_name'] }}<br/>
                                        ชื่อบัญชี: {{ $item->deposit_account_info['bank_owner_name'] }}<br/>
                                        เลขบัญชี: {{ $item->deposit_account_info['bank_nubmer'] }}
                                    </span>
                                    @else
                                    -
                                    @endif
                                    <br/>โทร: {{ $item->user->phone }}
                                </td>
                                <td class="align-middle text-center">
                                    <span class="text-sm status badge badge-{{ $status['color'] }}">{{ $status['text'] }}</span>
                                    @if ($status['code'] === 2 && !empty($status['note']))
                                        <br/><small>*หมายเหตุ: {{ $status['note'] }}</small>
                                    @endif
                                    @php
                                        $mee = Auth::user();
                                        if ($mee->isAssist()) {
                                            $displayName = $mee->userame;
                                        }else{
                                            $displayName = $mee->downlines()->where('user_type', 2)->first()->username;
                                        }
                                    @endphp
                                    <br/>*ผู้ทำรายการ: {{ $item->action_username }}
                                </td>
                                <td width="1%" class="align-middle p-0">
                                    <a href="javascript:void(0)" onclick="openSlipModal(this)"
                                        title="คลิกเพื่อดูภาพขยาย"
                                        data-img="{{ asset("storage/{$item->image}") }}">
                                        <img src="{{ asset("storage/{$item->image}") }}" alt="" height="70" width="50" style="object-fit: cover;">
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>
        </div>
    </div>

    <div id="slip-dialog" class="modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="btn btn-outline-danger lh-140 position-fixed px-3 py-2 right-4 rounded-circle text-xl top-3" data-dismiss="modal">
                        <i class="fas fa-times"></i>
                    </button>
                    <img id="modal-slip-img" src class="img-fluid">
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        const dataTable = $('table').not('.not-datatable').DataTable();
        const modalSlipImg = document.getElementById('modal-slip-img');
        
        function openSlipModal(a) {
            const img = a.dataset.img;
            modalSlipImg.src = img;
            $('#slip-dialog').modal('show');
        }

        function proceedRequest(approve, btn) {
            return tryCatchSwal(async () => {
                const depositRequestId = btn.dataset.id;
                const approveText = `${!approve ? 'ไม่' : ''}อนุมัติ`;
                const status = approve ? 1 : 2;
                let swalConfig = {
                    title: approveText,
                    text: `โปรดยืนยันเพื่อดำเนินการ${approveText}รายการแจ้งฝากเงินนี้`,
                    icon: approve ? 'info' : 'warning',
                    dangerMode: !approve,
                    buttons: {
                        cancel: 'ยกเลิก',
                        confirm: {
                            text: 'ยืนยัน',
                            closeModal: false,
                        }
                    }
                };
                if (!approve) swalConfig.content = {element: "input", attributes: { placeholder: "กรุณาระบุหมายเหตุ", type: "text", }};
                const confirm = await swal(swalConfig);
                if (!confirm) return;

                const formData = new FormData();
                formData.append('deposit_request_id', depositRequestId);
                formData.append('status', status);
                formData.append('_method', 'PUT');
                if (!approve) formData.append('note', confirm);
                const result = await fetchJson(`{{ route('agent.deposit-request.index') }}/${depositRequestId}`, 'POST', formData);
                if (!result) return false;

                const now = DateTime.local().setLocale('th');
                const updatedAt = now.toLocaleString(DateTime.DATETIME_MED);
                const tr = btn.closest('tr');
                const statusBadge = tr.querySelector('span.status');
                tr.querySelector('td:nth-child(6)').textContent = updatedAt;
                tr.querySelector('td:nth-child(9)').innerHTML = '';
                statusBadge.className = `badge badge-${approve ? 'success' : 'danger'} text-sm`;
                statusBadge.textContent = approveText;
                return swal('สำเร็จ', `ดำเนินการ${approveText}รายการฝากเรียบร้อย`, 'success');
            }).then(() => {
                fetchWallet();
                location.reload();
            });
        }

        async function fetchWallet()
        {
            const url = `{{ url()->current() }}`;
            const target = $('[user-credit]');
            await $.get(url, {}, function(el){
                let newCredit = $(el).find('[user-credit]').text();
                target.text(newCredit);
            });
            return;
        }

        function filterHandler(e, el)
        {
            e.preventDefault();
            window.location = `{{ url()->current() }}?${$(el).serialize()}`;
        }

        async function toggleActionRow(e, el)
        {
            const self = $(el);
            const fetched = await fetchApi(`{{ route('agent.deposit-request.index') }}/toggle-action-status/${self.data('id')}`, 'put', {});
            const result = await fetched.json();

            if (result.success) {
                self.closest('tr').toggleClass('table-warning');
            } else {
                e.preventDefault();
                swal('ไม่สามารถทำรายการ', result.text, 'error');
                return false;
            }
        }

        $(function () {
            // notifyMe();
        });
    </script>
@endsection