@extends('layouts.master')

@section('title')
    LT-168 :: ออกรางวัลหวย
@endsection

@section('sub_title')
    ออกรางวัลหวย
@endsection

@section('content')
    <style>
        .bg-ผลการออกรางวัล {
            background-color: #FADBD8 !important;
        }
        .bg-เลขท้าย-2-ตัว,
        .bg-2-ตัวล่าง {
            background-color: #D5F5E3 !important;
        }
        .bg-เลขหน้า-3-ตัว,
        .bg-3-ต้วบน {
            background-color: #D6EAF8 !important;
        }
        .bg-เลขท้าย-3-ตัว {
            background-color: #EBF5FB !important;
        }
        
        th.bg-ผลการออกรางวัล {
            background-color: #FADBD880 !important;
        }
        th.bg-เลขท้าย-2-ตัว,
        th.bg-2-ตัวล่าง {
            background-color: #D5F5E380 !important;
        }
        th.bg-เลขหน้า-3-ตัว,
        th.bg-3-ต้วบน {
            background-color: #D6EAF880 !important;
        }
        th.bg-เลขท้าย-3-ตัว {
            background-color: #EBF5FB80 !important;
        }
        .overflow-auto {
            overflow: auto;
        }
    </style>
    <div class="form-row justify-content-center">
        @if ($lottery->many_rounds)
            <div class="col-md-3 col-lg-2 overflow-auto" style="min-height: 50vh;">
                <div class="card position-absolute" style="
                    height: calc(100% - 30px);
                    overflow: auto;
                    width: calc(100% - 10px);
                ">
                    <div class="card-header sticky-top">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">เลือกงวดออกรางวัล</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            @foreach ($openingRounds as $round)
                                <a href="{{ route('lotteryResult.index', ['id' => $round->id]) }}" 
                                    class="list-group-item small py-2 list-group-item-action {{ $openingRound && $openingRound->id === $round->id ? 'active' : '' }}"
                                >{{ THdatetime($round->display_date, 'date') . ' ' . $round->round_name }}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        @endif
        <div class="@if($lottery->many_rounds) col-md-9 @else col-12 col-lg-11 @endif">
            <form id="result-form" 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 pt-0">
                    <fieldset class="row text-center" 
                        {{ !$openingRound || $openingRound->lotteryResult ? 'disabled data-toggle=tooltip' : '' }} 
                        {{ !$openingRound ? 'title=ไม่มีหวยงวดที่เปิดอยู่' : ($openingRound->lotteryResult ? 'title=มีการออกผลรางวัลของหวยงวดนี้แล้ว' : '') }}>
                        @if (!$openingRound || $openingRound->lotteryResult)
                            <div class="position-fixed" style="top:50%; left:50%; transform:translate(-50%,-50%); z-index:9999;">
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {{-- <span class="alert-icon"><i class="fas fa-times"></i></span> --}}
                                    <span class="alert-text">{{ !$openingRound ? 'ไม่มีหวยงวดที่เปิดอยู่' : ($openingRound->lotteryResult ? 'มีการออกผลรางวัลของหวยงวดนี้แล้ว' : '') }}</span>
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            </div>
                        @endif
                        <div class="form-group text-center col-12">
                            <label>งวดวันที่</label>
                            <input class="form-control text-body text-center mx-auto mw-100 text-lg bg-white" value="{{ $openingRound ? (THdatetime($openingRound->display_date, 'date') . ' ' . $openingRound->round_name) : null }}" readonly style="width: 300px;">
                            <input id="round_date" value="{{ $openingRound->display_date ?? null }}" hidden>
                            <input name="lottery_round_id" type="hidden" value="{{ $openingRound ? $openingRound->id : null }}">
                        </div>
                        @if ($lottery->many_rounds === false)
                            <div class="form-group text-center col-12">
                                <label for="input-file">รูปภาพผลรางวัล</label>
                                <div class="d-flex">
                                    <div class="custom-file mx-auto">
                                        <input type="file" name="file" id="input-file" class="custom-file-input mx-auto mw-100" style="width: 400px;" accept="image/*" lang="en" onchange="this.nextElementSibling.textContent = !this.files.length ? `เลือกไฟล์` : this.files[0].name;">
                                        <label class="custom-file-label text-left mx-auto mw-100" style="width: 400px;" for="customFileLang">เลือกไฟล์</label>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @foreach ($lotteryResultFormat as $resultFormat)
                            @for ($i = 0; $i < $resultFormat->amount; $i++)
                                <div class="mx-auto col-md-{{ floor(12 / $resultFormat->amount > 4 ? 12 / $resultFormat->amount : 4) }} py-4 border-top">
                                    <label class="label d-block" data-i="{{ $i }}">{{ $resultFormat->result_type }}</label>
                                    @if ($manualResult)
                                        @php $results = str_split($manualResult[$resultFormat->result_type] ?? '') @endphp
                                    @endif
                                    @for ($n = 0; $n < $resultFormat->length; $n++)
                                        <input type="text" maxlength="1" name="result[{{ $resultFormat->result_type }}][{{ $i }}][{{ $n }}]"
                                            class="text-center text-body mb-1"
                                            style="width: 50px; font-size: 25px;" value="{{ $results[$n] ?? '' }}"
                                            oninput="this.value=this.value.replace(/\D/g, '')"
                                            onkeyup="(this.value && $(this).next().focus()) || ((event.key === 'Backspace') && $(this).prev().focus())" pattern="\d*" required>
                                    @endfor
                                </div>
                            @endfor
                        @endforeach
                    </fieldset>
                </div>
                @if ($openingRound && !$openingRound->lotteryResult)
                    <div class="modal-footer">
                        <div class="w-100">
                            @if (in_array(session('lottery'), ['LT', 'TH']))
                                <button class="btn btn-primary btn-block" type="button" onclick="getLotteryResult(this)">
                                    <i class="fas fa-file-import mr-2"></i>ดึงผลรางวัลล็อตเตอรี่
                                </button>
                            @endif
                            <button id="submit" type="submit" class="btn btn-danger btn-block setting_winner mt-3">
                                <i class="fas fa-check"></i> ออกรางวัล
                            </button>
                        </div>
                    </div>
                @endif
            </form>
        </div>

        <div class="col-12 col-lg-11">
            <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="table-responsive [px-0] py-3">
                    <table class="table table-hover w-100">
                        <thead class="thead-light">
                            <tr>
                                @if ($lotteryResults->count())
                                    <tr>
                                        <th class="text-center" width="1%">#</th>
                                        <th class="text-center text-nowrap" width="1%">งวดวันที่</th>
                                        <th class="text-center text-nowrap" width="1%">รูปภาพ</th>
                                        <th class="text-center text-nowrap" width="1%">ยกเลิกผล</th>
                                        @foreach ($lotteryResults[0]->resultDetail as $item)
                                            <th class="text-center bg-{{ str_replace(' ', '-', $item->lottery_result_type) }}">{{ $item->lottery_result_type }}</th>
                                        @endforeach
                                    </tr>
                                @else
                                    <tr>
                                        <th class="text-center">ไม่พบรายการ</th>
                                    </tr>
                                @endif
                            </tr>
                        </thead>
                        <tbody>
                            @if ($lotteryResults->count())
                                @foreach ($lotteryResults as $key => $result)
                                    <tr>
                                        <td class="text-center align-middle" width="1%">1</td>
                                        <td class="text-center align-middle text-nowrap" width="1%">
                                            <h3 class="font-weight-normal mb-0">
                                                <span>{{ THdatetime($result->lotteryRound->display_date) }}</span>
                                                @if ($result->lotteryRound->round_name)
                                                    <span class="badge badge-primary">{{ $result->lotteryRound->round_name }}</span>
                                                @endif
                                            </h3>
                                        </td>
                                        <td class="text-center align-middle text-nowrap" width="1%">
                                            @if ($result->result_image)
                                                <a href="{{ asset("storage/{$result->result_image}") }}" data-lity class="btn btn-icon-only btn-primary">
                                                    <i class="fas fa-search"></i>
                                                </a>
                                            @else
                                            <button class="btn btn-secondary btn-sm" data-id="{{ $result->id }}" onclick="uploadResultImage(this)">
                                                <i class="fas fa-upload text-black-50 mr-2"></i>อัพโหลดรูป
                                            </button>
                                            @endif
                                        </td>
                                        <td class="text-center align-middle text-nowrap" width="1%">
                                            @if ($key == 1 && !isset($openingRound->status))
                                            <button class="btn btn-danger btn-sm" data-id="{{ $result->id }}" onclick="swal('ยกเลิกผลรางวัลเรียบร้อย', ' ', 'success')">
                                                <i class="fas fa-times mr-2"></i>ยกเลิกผลรางวัล
                                            </button>
                                            @else
                                                -
                                            @endif
                                        </td>
                                        @foreach ($result->resultDetail as $item)
                                            <td class="text-center border bg-{{ str_replace(' ', '-', $item->lottery_result_type) }}">
                                                <h3 class="font-weight-normal num-block text-monospace mb-0" style="letter-spacing: 3px;">{{ $item->value }}</h3>
                                            </td>
                                        @endforeach
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        const resultForm = document.forms['result-form'];

        function fResult()
        {
            swal('ยืนยันการออกผลรางวัลใหม่', ' ', 'info', {
                buttons: ['ยกเลิก', 'ยืนยัน'],
                dangerMode: true,
            }).then((res) => {
                if (res) {
                    swal('ยกเลิกผลรางวัลเรียบร้อย', ' ', 'success');
                }
            });
        }

        function uploadResultImage(btn) {
            const buttons = {
                cancel: 'ยกเลิก',
                confirm: {
                    text: 'ยืนยัน',
                    closeModal: false,
                }
            }
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'image/*';
            return tryCatchSwal(async () => {
                const confirm = await swal({
                    title: 'อัพโหลดรูปภาพ',
                    text: 'โปรดอัพโหลดรูปภาพผลรางวัล แล้วกดปุ่มยืนยัน',
                    icon: 'info',
                    content: fileInput,
                    buttons
                });
                if (!confirm) return;
                if (!fileInput.files.length) {
                    return swal({
                        title: 'ไม่พบไฟล์',
                        text: 'โปรดเลือกไฟล์ที่ต้องการอัพโหลด',
                        icon: 'warning',
                        button: {
                            text: 'ตกลง',
                            closeModal: false,
                        }
                    }).then(() => uploadResultImage(btn));
                }

                const id = btn.dataset.id;
                const formData = new FormData();
                formData.append('id', id);
                formData.append('file', fileInput.files[0]);

                const result = await fetchJson(`{{ route('lotteryResult.uploadResultImage') }}`, 'POST', formData);
                if (!result) return false;

                return swal('สำเร็จ', 'อัพโหลดรูปภาพผลรางวัลเรียบร้อย', 'success').then(() => location.reload());
            });
        }

        async function getLotteryResult (btn) {
            return tryCatchSwal(async () => {
                switchSubmitBtnState(btn)
                const resultLabels = document.querySelectorAll('label.label');
                const date = DateTime.fromISO(resultForm.round_date.value).toFormat('yyyyMMdd');
    
                const result = await load(`{{ route('lotteryResult.fetchResult') }}/${date}`, '.splot');
                if (!result) return swal('ดำเนินการไม่สำเร็จ', 'ไม่พบผลการออกรางวัล', 'error');

                if (!result.querySelector('.xres b').textContent.trim()) {
                    return swal('ดำเนินการไม่สำเร็จ', 'เนื่องจากผลรางวัลยังออกไม่ครบ', 'error');
                }
                const targetLabels = result.querySelectorAll('.xtitle');
                const lotteryResult = {
                    'รางวัลที่ 1': Array.from(targetLabels).find(el => el.textContent === 'รางวัลที่ 1').nextElementSibling.querySelectorAll('b'),
                    'เลขหน้า 3 ตัว': Array.from(targetLabels).find(el => el.textContent === 'เลขหน้า 3 ตัว').nextElementSibling.querySelectorAll('b'),
                    'เลขท้าย 3 ตัว': Array.from(targetLabels).find(el => el.textContent === 'เลขท้าย 3 ตัว').nextElementSibling.querySelectorAll('b'),
                    'เลขท้าย 2 ตัว': Array.from(targetLabels).find(el => el.textContent === 'เลขท้าย 2 ตัว').nextElementSibling.querySelectorAll('b'),
                    'รางวัลข้างเคียงรางวัลที่ 1': Array.from(targetLabels).find(el => el.textContent === 'รางวัลข้างเคียงรางวัลที่ 1').nextElementSibling.querySelectorAll('b'),
                    'รางวัลที่ 2': Array.from(targetLabels).find(el => el.textContent === 'รางวัลที่ 2').nextElementSibling.querySelectorAll('b'),
                    'รางวัลที่ 3': Array.from(targetLabels).find(el => el.textContent === 'รางวัลที่ 3').nextElementSibling.querySelectorAll('b'),
                    'รางวัลที่ 4': Array.from(targetLabels).find(el => el.textContent === 'รางวัลที่ 4').nextElementSibling.querySelectorAll('b'),
                    'รางวัลที่ 5': Array.from(targetLabels).find(el => el.textContent === 'รางวัลที่ 5').nextElementSibling.querySelectorAll('b'),
                };
                const splitted = lotteryResult['รางวัลที่ 1'][0].textContent.substr(3, 3).split('');
                const lastThreeTod = [
                    splitted[0] + splitted[1] + splitted[2],
                    splitted[0] + splitted[2] + splitted[1],
                    splitted[1] + splitted[0] + splitted[2],
                    splitted[1] + splitted[2] + splitted[0],
                    splitted[2] + splitted[0] + splitted[1],
                    splitted[2] + splitted[1] + splitted[0],
                ].filter((value, index, arr) => arr.indexOf(value) === index);

                const $lastThree = [document.createElement('b')];
                $lastThree[0].textContent = splitted.join('');

                const $lastThreeTod = [];
                for (const key in lastThreeTod) {
                    const num = lastThreeTod[key];
                    const b = document.createElement('b');
                    b.textContent = num;
                    $lastThreeTod.push(b);
                }

                const $lastTwo = [document.createElement('b')];
                $lastTwo[0].textContent = splitted.join('').substr(1, 2);

                lotteryResult['ผลการออกรางวัล'] = lotteryResult['รางวัลที่ 1'];
                lotteryResult['3 ตัวท้าย รางวัลที่ 1'] = $lastThree;
                lotteryResult['3 ตัวท้าย โต๊ด รางวัลที่ 1'] = $lastThreeTod;
                lotteryResult['2 ตัวท้าย รางวัลที่ 1'] = $lastTwo;
    
                let prevLabel;
                for (const $label of resultLabels) {
                    const i = $label.dataset.i;
                    const label = $label.textContent;
                    const inputs = $label.parentElement.querySelectorAll('input');
                    if (!lotteryResult[label][i]) {
                        for (const input of inputs) {
                            input.value = '';
                            input.disabled = true;
                        }
                        continue;
                    }
                    const result = lotteryResult[label][i].textContent;
                    const resultArr = result.split('');
                    // console.log(label, resultArr);
    
                    for (const index in resultArr) {
                        const num = resultArr[index];
                        inputs[index].disabled = false;
                        inputs[index].value = num;
                    }
                }
            }, () => switchSubmitBtnState(btn));
        }
        const dtNewData = async (datatable, data) => {
            datatable.clear();
            datatable.rows.add(data);
            datatable.draw();
        }

        $('button[data-toggle="tooltip"]').tooltip();

        resultForm.addEventListener('submit', async e => {
            e.preventDefault();
            const confirm = await swal('ยืนยันการทำรายการ?', ' ', 'warning', {
                buttons: {
                    cancel: 'ยกเลิก',
                    confirm: {
                        text: 'ยืนยัน',
                        closeModal: false,
                    }
                },
            });
            if (!confirm) return;

            const formData = new FormData(resultForm);
            tryCatchSwal(async () => {
                switchSubmitBtnState(resultForm);
                const result = await fetchJson(`{{ route('lotteryResult.index') }}`, 'POST', formData);
                if (!result) return false;
                resultForm.elements['submit'].remove();
                resultForm.reset();
                resultForm.disabled = true;
                await swal('สำเร็จ', 'ดำเนินการเรียบร้อย', 'success');
                return location.reload();
            }, () => switchSubmitBtnState(resultForm));
        })

        document.addEventListener("DOMContentLoaded", () => {
            // const table = $('table').DataTable();
        });

        function load_table() {
            $.post('NiSK.php?ACT=loadWalletTable', {}, function(data) {
                $('.ins_data').html(data).find('table').DataTable({
                    keys: !0,
                    select: {
                        style: "multi"
                    },
                    language: {
                        paginate: {
                            previous: "<i class='fas fa-angle-left'>",
                            next: "<i class='fas fa-angle-right'>"
                        }
                    }
                });
                $('[data-toggle=tooltip]').tooltip();
            });
        }

    </script>
@endsection