@extends('layouts.master')

@section('title')
    LT-168 :: ตั้งค่าเวลาเปิดปิดงวดหวย
@endsection

@section('sub_title')
    ตั้งค่าเวลาเปิดปิดงวดหวย
@endsection

@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.standalone.min.css" integrity="sha512-p4vIrJ1mDmOVghNMM4YsWxm0ELMJ/T0IkdEvrkNHIcgFsSzDi/fV7YxzTzb3mnMvFPawuIyIrHcpxClauEfpQg==" crossorigin="anonymous" />
    <div class="row">
        <div class="col-md-6 col-xl-5 mb-4">
            <div class="card mb-0">
                <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">
                    <form id="setting-form">
                        <fieldset {!! $lottery->many_rounds === false && $openingRounds->count() ? 'disabled title="มีงวดที่เปิดอยู่ ยังไม่สามารถเพิ่มงวดใหม่ได้" data-toggle="tooltip"' : '' !!}>
                        <fieldset>
                            @csrf
                            <input type="hidden" name="lottery_id" value="{{ $lottery->id }}" required>
                            <div class="form-group">
                                <label>งวดวันที่</label>
                                <input type="text" class="form-control form-control" data-today-highlight="true" data-provide="datepicker" data-date-format="yyyy-mm-dd" name="display_date" value="2025-12-10" min="2025-12-10" required>
                            </div>
                            <div class="form-group">
                                <label>ชื่อรอบ</label>
                                <input type="text" class="form-control"  name="round_name" placeholder="ไม่จำเป็น">
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label>วันที่เปิด <small class="text-danger">*</small></label>
                                    <input type="text" data-today-highlight="true" data-provide="datepicker" data-date-format="yyyy-mm-dd" class="form-control" value="2025-12-10" name="open_date" required>
                                </div>
                                <div class="form-group col-6">
                                    <label>เวลา <small class="text-danger">*</small></label>
                                    <div class="input-group">
                                        <select name="open_time[hour]" class="custom-select" required>
                                            <option value>ชม.</option>
                                            @for ($i = 0; $i <= 23; $i++)
                                                <option {{ $i === date('H') ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                        <select name="open_time[min]" class="custom-select" required>
                                            <option>น.</option>
                                            @for ($i = 0; $i <= 59; $i++)
                                                <option {{ $i === 0 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                <input type="hidden" name="isMatchHanoi" value="{{ ($isMatchHanoi ? 1:0) }}">
                                @if ($isMatchHanoi)
                                    @foreach ($hanoiSet as $item)
                                    <div class="form-group col-6">
                                        <label>วันที่ปิด ({{ lotteryName($item) }}) <small class="text-danger">*</small></label>
                                        <input type="text" data-today-highlight="true" data-provide="datepicker" data-date-format="yyyy-mm-dd" class="form-control" value="2025-12-10" min="2025-12-10" name="close_date[{{ $item }}]" required>
                                    </div>
                                    <div class="form-group col-6">
                                        <label>เวลา <small class="text-danger">*</small></label>
                                        <div class="input-group">
                                            <select name="close_time[{{ $item }}][hour]" class="custom-select" required>
                                                <option value>ชม.</option>
                                                @for ($i = 0; $i <= 23; $i++)
                                                    <option {{ $i === 20 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                                @endfor
                                            </select>
                                            <select name="close_time[{{ $item }}][min]" class="custom-select" required>
                                                <option>น.</option>
                                                @for ($i = 0; $i <= 59; $i++)
                                                    <option {{ $i === 0 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                                @endfor
                                            </select>
                                        </div>
                                    </div>
                                    @endforeach
                                @else
                                <div class="form-group col-6">
                                    <label>วันที่ปิด <small class="text-danger">*</small></label>
                                    <input type="text" data-today-highlight="true" data-provide="datepicker" data-date-format="yyyy-mm-dd" class="form-control" value="2025-12-10" min="2025-12-10" name="close_date" required>
                                </div>
                                <div class="form-group col-6">
                                    <label>เวลา <small class="text-danger">*</small></label>
                                    <div class="input-group">
                                        <select name="close_time[hour]" class="custom-select" required>
                                            <option value>ชม.</option>
                                            @for ($i = 0; $i <= 23; $i++)
                                                <option {{ $i === 15 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                        <select name="close_time[min]" class="custom-select" required>
                                            <option>น.</option>
                                            @for ($i = 0; $i <= 59; $i++)
                                                <option {{ $i === 0 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                            @endfor
                                        </select>
                                    </div>
                                </div>
                                @endif
                            </div>
                            <div class="text-center">
                                <button type="submit" class="btn btn-danger w-100" style="border-radius: 25px;">
                                    <i class="fas fa-save"></i> บันทึก
                                </button>
                            </div>
                        </fieldset>
                    </form>

                </div>
            </div>
        </div>

        <div class="col-md-6 col-xl-7 d-flex">
            {{-- <div class="row h-100"> --}}
                <div class="card mb-4 w-100">
                    <div class="card-header border mb-0">
                        <div class="row align-items-center">
                            <div class="col">
                                <h3 class="mb-0">หวยงวดที่เปิดอยู่</h3>
                            </div>
                        </div>
                    </div>
                    @if ($openingRounds->count())
                        <div class="table-responsive pb-3" style="max-height: 500px;">
                            <table class="table table-sm table-hover">
                                <thead class="thead-light">
                                    <tr>
                                        <th class="align-middle text-center border-top-0">หวย</th>
                                        <th class="align-middle text-center border-top-0">งวดวันที่</th>
                                        <th class="align-middle text-center border-top-0">เวลาเปิด-ปิดงวด</th>
                                        <th class="align-middle text-center border-top-0">เวลาคงเหลือ</th>
                                        <th class="align-middle text-center border-top-0">ดำเนินการ</th>
                                    </tr>
                                </thead>
                                <tbody class="table_first">
                                    @foreach ($openingRounds as $openingRound)
                                        <tr>
                                            <td class="align-middle text-center">{{ $openingRound->lottery->name }} <span class="badge badge-primary">{{ $openingRound->round_name }}</span></td>
                                            <td class="align-middle text-center">{{ $openingRound->display_date }}</td>
                                            <td class="align-middle text-center">
                                                <div class="font-weight-bold text-success" title="เวลาเปิดงวด">{{ $openingRound->open }}</div>
                                                <div class="font-weight-bold text-danger" title="เวลาปิดงวด">{{ $openingRound->close }}</div>
                                            </td>
                                            <td class="align-middle text-center">
                                                <span data-format="{{ $openingRound->lottery->counter_format }}" data-countdown="{{ $openingRound->close }}">-</span>
                                            </td>
                                            <td class="align-middle text-center">
                                                @if ($openingRound->status === \App\LotteryRound::STATUS_ENABLED)
                                                    <a href="#edit" onclick="fetchLotteryRound({{ $openingRound->id }})" data-toggle="modal" class="btn btn-warning btn-sm"><i class="fas fa-edit mr-1"></i>แก้ไข</a>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="card-body d-flex pt-0">
                            <h3 class="text-center text-black-50 m-auto">ไม่มีหวยงวดที่เปิดอยู่ในขณะนี้</h3>
                        </div>
                    @endif
                </div>
                {{-- @if ($openingRound)
                    <div class="h-100 mb-4">
                        <h2 class="text-center">หมดเวลาแทงในอีก</h2>
                        <div class="d-flex">
                            <div id="remain-time" class="d-flex flex-wrap justify-content-center m-auto text-center" data-format='<div><span class="days">%-D</span><div class="small">วัน</div></div><div><span class="hours">%H</span><div class="small">ชั่วโมง</div></div><div><span class="minutes">%M</span><div class="small">นาที</div></div><div><span class="seconds">%S</span><div class="small">วินาที</div></div>'>
                                <div>
                                    <span class="days">0</span>
                                    <div class="small">วัน</div>
                                </div>
                                <div>
                                    <span class="hours">00</span>
                                    <div class="small">ชั่วโมง</div>
                                </div>
                                <div>
                                    <span class="minutes">00</span>
                                    <div class="small">นาที</div>
                                </div>
                                <div>
                                    <span class="seconds">00</span>
                                    <div class="small">วินาที</div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif --}}
            {{-- </div> --}}
        </div>
    </div>

    <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 pb-3">
            <table class="table table-sm table-hover">
                <thead class="thead-light">
                    <tr>
                        <th class="align-middle text-center">หวย</th>
                        <th class="align-middle text-center">งวดวันที่</th>
                        <th class="align-middle text-center">วัน/เวลาที่เปิดงวด</th>
                        <th class="align-middle text-center">วัน/เวลาที่ปิดแทง</th>
                        <th class="align-middle text-center">สถานะ</th>
                    </tr>
                </thead>
                <tbody class="table_2">
                    @foreach ($lotteryRounds as $lotteryRound)
                        <tr>
                            <td class="align-middle text-center font-weight-bold">{{ $lotteryRound->lottery->name }} <span class="badge badge-primary">{{ $lotteryRound->round_name }}</span></td>
                            <td class="align-middle text-center font-weight-bold">{{ $lotteryRound->display_date }}</td>
                            <td class="align-middle text-center text-primary font-weight-bold">{{ $lotteryRound->open }}</td>
                            <td class="align-middle text-center text-danger font-weight-bold">{{ $lotteryRound->close }}</td>
                            <td class="align-middle text-center font-weight-bold">
                                <span class="badge badge-pill badge-{{ $lotteryRound->status ? 'success' : 'danger' }} text-xs">{{ $lotteryRound->status ? 'เ' : '' }}ปิดงวด</span>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="modal fade" id="edit" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <form id="edit-form" action class="modal-content bg-secondary">
                @csrf
                @method('PUT')
                <div class="modal-header bg-white">
                    <h3 class="modal-title">แก้ไขเวลา เปิด / ปิดงวด</h3>
                    <button class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body bg-secondary p-4">
                    <div class="form-group">
                        <input type="hidden" name="id" id="id">
                        <label class="form-control-label">งวดวันที่ <small class="text-danger">*</small></label>
                        <input type="text" class="form-control" id="edit-display-date" name="display_date" required>
                    </div>
                    <div class="form-group">
                        <input type="hidden" name="id" id="id">
                        <label class="form-control-label">ชื่อรอบ</label>
                        <input type="text" class="form-control" id="edit-round-name" name="round_name" placeholder="ไม่จำเป็น"
                            >
                    </div>
                    <div class="form-row">
                        <div class="form-group col-6">
                            <label class="form-control-label">วันที่เปิด <small class="text-danger">*</small></label>
                            <input type="text" data-today-highlight="true" data-provide="datepicker" data-date-format="yyyy-mm-dd" id="edit-open-date" class="form-control"  name="open_date" id="open_date" required>
                        </div>
                        <div class="form-group col-6">
                            <label class="form-control-label">เวลา <small class="text-danger">*</small></label>
                            <div class="input-group">
                                <select name="open_time[hour]" class="custom-select" required>
                                    <option value>ชม.</option>
                                    @for ($i = 0; $i <= 23; $i++)
                                        <option {{ $i === 6 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                    @endfor
                                </select>
                                <select name="open_time[min]" class="custom-select" required>
                                    <option>น.</option>
                                    @for ($i = 0; $i <= 59; $i++)
                                        <option {{ $i === 0 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-6">
                            <label class="form-control-label">วันที่ปิด <small class="text-danger">*</small></label>
                            <input type="text" data-today-highlight="true" data-provide="datepicker" data-date-format="yyyy-mm-dd" id="edit-close-date" class="form-control"  name="close_date" id="close_date">
                        </div>
                        <div class="form-group col-6">
                            <label class="form-control-label">เวลา <small class="text-danger">*</small></label>
                            <div class="input-group">
                                <select name="close_time[hour]" class="custom-select" required>
                                    <option value>ชม.</option>
                                    @for ($i = 0; $i <= 23; $i++)
                                        <option {{ $i === 15 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                    @endfor
                                </select>
                                <select name="close_time[min]" class="custom-select" required>
                                    <option>น.</option>
                                    @for ($i = 0; $i <= 59; $i++)
                                        <option {{ $i === 0 ? 'selected' : '' }}>{{ str_pad($i, 2, 0, STR_PAD_LEFT) }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-white">
                    <button class="btn btn-danger" type="submit"><i class="fas fa-save mr-1"></i> ยืนยันการแก้ไข</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" integrity="sha512-T/tUfKSV1bihCnd+MxKD0Hm1uBBroVYBOYSk1knyvQ9VyZJpc/ALb4P0r6ubwVPSGB2GvjeoMAJJImBG12TiaQ==" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.th.min.js" integrity="sha512-cp+S0Bkyv7xKBSbmjJR0K7va0cor7vHYhETzm2Jy//ZTQDUvugH/byC4eWuTii9o5HN9msulx2zqhEXWau20Dg==" crossorigin="anonymous"></script>
    <script>
        'use strict';

        const settingForm = document.forms['setting-form'];
        const editForm = document.forms['edit-form'];

        const openingRoundTimers = document.querySelectorAll('span[data-countdown]');

        function fetchLotteryRound (id) {
            tryCatchSwal(async () => {
                const result = await fetchJson(`{{ route('lotteryRound.index') }}/${id}`);

                const editDisplayDate = editForm.elements['display_date'];
                const editOpenDate = editForm.elements['open_date'];
                const editRoundName = editForm.elements['round_name'];
                const editOpenTimeHour = editForm.elements['open_time[hour]'];
                const editOpenTimeMin = editForm.elements['open_time[min]'];
                const editCloseDate = editForm.elements['close_date'];
                const editCloseTimeHour = editForm.elements['close_time[hour]'];
                const editCloseTimeMin = editForm.elements['close_time[min]'];

                const openArr = result.open.split(' ');
                const openDate = openArr[0];
                
                const openTimeArr = openArr[1].split(':');
                const openTimeHour = openTimeArr[0];
                const openTimeMin = openTimeArr[1];
                
                const closeArr = result.close.split(' ');
                const closeDate = closeArr[0];

                const closeTimeArr = closeArr[1].split(':');
                const closeTimeHour = closeTimeArr[0];
                const closeTimeMin = closeTimeArr[1];

                editDisplayDate.value = result.display_date;
                editOpenDate.value = openDate;
                editRoundName.value = result.round_name;
                editOpenTimeHour.value = openTimeHour;
                editOpenTimeMin.value = openTimeMin;
                editCloseDate.value = closeDate;
                editCloseTimeHour.value = closeTimeHour;
                editCloseTimeMin.value = closeTimeMin;

                editForm.action = `{{ route('lotteryRound.index') }}/${id}`;
            })
        }

        document.addEventListener('DOMContentLoaded', () => {
            if (openingRoundTimers.length) {
                for (const $countdown of openingRoundTimers) {
                    countDown(
                        $countdown.dataset.countdown,
                        $countdown,
                        () => {
                            $countdown.textContent = `หมดเวลา`;
                        }
                    )
                }
            }

            settingForm.addEventListener('submit', async e => {
                e.preventDefault();

                const confirm = await swal('โปรดยืนยัน', 'หากคุณได้ตรวจสอบข้อมูลทั้งหมดถูกต้องครบถ้วนแล้ว โปรดยืนยันเพื่อทำรายการต่อ', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                });
                if (!confirm) return;

                const formData = new FormData(settingForm);
                formData.append('open_time', `${formData.get('open_time[hour]')}:${formData.get('open_time[min]')}`);
                // formData.append('close_time', `${formData.get('close_time[hour]')}:${formData.get('close_time[min]')}`);
                tryCatchSwal(async () => {
                    switchSubmitBtnState(settingForm);
                    const result = await fetchJson(`{{ route('lotteryRound.index') }}`, 'POST', formData);
                    if (!result) return;
                    swal('สำเร็จ', 'เพิ่มข้อมูลงวดใหม่เรียบร้อย', 'success').then(() => location.reload());
                }, () => switchSubmitBtnState(settingForm));
            });

            editForm.addEventListener('submit', async e => {
                e.preventDefault();

                const confirm = await swal('โปรดยืนยัน', 'หากคุณได้ตรวจสอบข้อมูลทั้งหมดถูกต้องครบถ้วนแล้ว โปรดยืนยันเพื่อทำรายการต่อ', 'warning', {
                    buttons: ['ยกเลิก', 'ยืนยัน'],
                });
                if (!confirm) return;

                const formData = new FormData(editForm);
                formData.append('open_time', `${formData.get('open_time[hour]')}:${formData.get('open_time[min]')}`);
                formData.append('close_time', `${formData.get('close_time[hour]')}:${formData.get('close_time[min]')}`);
                tryCatchSwal(async () => {
                    switchSubmitBtnState(editForm);
                    const result = await fetchJson(editForm.action, 'POST', formData);
                    if (!result) return;
                    swal('สำเร็จ', 'แก้ไขข้อมูลงวดเรียบร้อย', 'success').then(() => location.reload());
                }, () => switchSubmitBtnState(editForm));
            });
        });
    </script>
@endsection