@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>
                </div>
                <div class="card-body table-responsive py-3">
                    <table class="table 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" width="20%">รูปภาพอัตราจ่าย</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 ($lotteries as $lotterie)
                            <tr>
                                <td class="align-middle text-center font-weight-bold">{{ ++$i }}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    @if ($lotterie->image_payment)
                                    <img alt="Image placeholder" class="img-thumbnail" src="{{ asset("storage/{$lotterie->image_payment->picture}") }}">
                                    @else
                                    <span class="text-danger">ยังไม่ได้ตั้งค่า</span>
                                    @endif
                                </td>
                                <td class="align-middle text-center font-weight-bold">{{ lotteryName($lotterie->country) }}</td>
                                <td class="align-middle text-center font-weight-bold">
                                    <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">
                                            @if ($lotterie->image_payment)
                                            <a class="dropdown-item text-danger" href="javascript:;" onclick="removeItem(this)" data-id="{{ $lotterie->image_payment->id }}"><i class="fas fa-trash-alt fa-fw"></i> ลบรูปภาพ</a>
                                            @else
                                            <a class="dropdown-item" href="javascript:;"
                                            onclick="addItem(this)" data-lottery-id="{{ $lotterie->id }}">
                                                <i class="fas fa-plus fa-fw"></i> เพิ่มรูปภาพอัตราจ่าย
                                            </a>
                                            @endif
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addItemModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <form onsubmit="formSubmitHandler(event, this)" 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="modal-body">
                    <div class="form-group">
                        <label for="lotteryName">ประเภทหวย</label>
                        <input type="text" id="lotteryName" class="form-control" readonly />
                    </div>
                    <div class="form-group">
                        <label for="articleImage">รูปภาพ</label>
                        <input type="file" class="form-control-file" name="image" id="articleImage" />
                    </div>          
                </div>
                <input type="hidden" name="lottery_id">
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">ปิด</button>
                    <button type="submit" class="btn btn-primary">บันทึก</button>
                </div>
            </form>
        </div>
    </div>  
@endsection

@section('scripts')
    <script>
        function addItem(el)
        {
            const self = $(el);
            const target = $('#addItemModal');
            const lotteryName = self.closest('tr').find('td:eq(2)').text();
            
            target.find('#lotteryName').val(lotteryName);
            target.find('input[name="lottery_id"]').val(self.data('lottery-id'));
            target.modal('show');
        }

        async function formSubmitHandler(e, el)
        {
            e.preventDefault();
            const self = $(el);
            const formData = new FormData(el);
            const url = `{{ route('manage.payment.index') }}`;

            const fetch = await fetchApi(url, 'post', formData);
            const result = await fetch.json();
            if (result.success) {
                self[0].reset();
                swalSuccess();
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                swalError();
            }
        }

        async function removeItem(el)
        {
            const self = $(el);
            const url = `{{ route('manage.payment.index') }}/${self.data('id')}`;
            const fetch = await fetchApi(url, 'delete', {});
            const result = await fetch.json();
            if (result.success) {
                swalSuccess();
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                swalError();
            }
        }
    </script>
@endsection