@extends('common.layout')
@section("header")
    <link href="/template/css/custom/fair.css" rel="stylesheet" type="text/css" />
    <style>
        /* 토스트 알림 스타일 */
        .toast {
            visibility: hidden;
            min-width: 250px;
            margin-left: -125px;
            background-color: #333;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            padding: 16px;
            position: fixed;
            z-index: 9999;
            top: 150px; /* 화면 상단에서 100px 아래에 위치 */
            left: 50%;
            font-size: 17px;
            opacity: 0;
            transition: opacity 0.5s, visibility 0s 0.5s;
        }

        .toast.show {
            visibility: visible;
            opacity: 1;
            transition: opacity 0.5s;
        }

        .toast.error {
            background-color: #e74c3c;
        }

        .toast.success {
            background-color: #2ecc71;
        }

        /* Time Picker */
        .time-picker {
            display: inline-block;
            position: relative;
        }

        .time-input {
            width: 120px;
            padding: 8px;
            font-size: 16px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 5px;
            cursor: pointer;
        }

        /* Modal */
        .time-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            border-radius: 8px;
            width: 300px;
        }

        .time-modal-content {
            padding: 16px;
        }

        .time-modal-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }

        .time-scroll-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
        }

        .time-scroll-container select {
            font-size: 16px;
            padding: 4px;
            width: 60px;
            text-align: center;
        }
    </style>
@endsection 

@section('content')
    <div class="wrap_custom">
        <div class="row justify-content-center">
            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex justify-content-between align-items-center">
                        <h5 class="page-title">
                            @if($type == 'language')
                                어학대기 관리
                            @elseif($type == 'university')
                                정규대기 관리
                            @elseif($type == 'junior')
                                조기대기 관리
                            @elseif($type == 'art')
                                아트대기 관리
                            @elseif($type == 'busan')
                                부산대기 관리
                            @else
                                대기 관리
                            @endif
                            <button class="btn btn-primary ms-2" onclick="location.reload()">
                                <i class="mdi mdi-autorenew"></i>
                            </button>
                        </h5>
                        <button class="btn btn-primary my-2 mr-sm-2" type="button" onclick="openIntervalPopup()">현황판 갱신 설정</button>
                        <button class="btn btn-primary my-2 mr-sm-2" type="button" onclick="openNoticePopup()">안내등록</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->
        
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <div class="dataTables_wrapper dt-bootstrap4 no-footer">

                                <!-- S: Table Data -->
                                <div class="row">
                                    <div class="col-sm-12 wrap-booth-num">
                                        <table class="table table-centered w-100 dt-responsive nowrap dataTable no-footer dtr-inline collapsed" style="table-layout: fixed;">
                                            <tbody>
                                                @if(!empty($waitingBoothLists) && count($waitingBoothLists) > 0)
                                                    <tr style="display: flex; flex-wrap: wrap;">
                                                        @foreach($waitingBoothLists as $list)
                                                            <td style="text-align: center; color:
                                                                @if($list->booth_status === 'D') 
                                                                    red
                                                                @elseif($list->booth_status === 'A') 
                                                                    skyblue
                                                                @else 
                                                                    black
                                                                @endif
                                                            ">
                                                                {{ $list->booth_num }}
                                                            </td>
                                                        @endforeach
                                                    </tr>
                                                @else
                                                    <tr>
                                                        <td colspan="99" class="text-center" style="height:100px">데이터가 존재하지 않습니다.</td>
                                                    </tr>
                                                @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="d-flex justify-content-start align-items-center tab-status">
                                        <a href="{{ route('waiting.type.waiting', ['type' => $type]) }}" 
                                        class="@if(Route::is('waiting.type.waiting')) font-weight-bold text-dark border-bottom border-dark @else text-muted @endif"
                                        style="text-decoration: none;">
                                        대기 ({{ $waitingCount }})
                                        </a>
                                        
                                        <a href="{{ route('waiting.type.absent', ['type' => $type]) }}" 
                                        class="@if(Route::is('waiting.type.absent')) font-weight-bold text-dark border-bottom border-dark @else text-muted @endif"
                                        style="text-decoration: none;">
                                        부재 ({{ $absentCount }})
                                        </a>
                                        
                                        <a href="{{ route('waiting.type.finished', ['type' => $type]) }}" 
                                        class="@if(Route::is('waiting.type.finished')) font-weight-bold text-dark border-bottom border-dark @else text-muted @endif"
                                        style="text-decoration: none;">
                                        완료 ({{ $finishedCount }})
                                        </a>
                                    </div>
                                </div>

                                <div class="row">
                                    <form name="register_form" id="register_form">
                                        <input type="hidden" id="uhak_type" name="uhak_type" value="{{ $type }}">
                                        <div class="d-flex align-items-center wrap-select">
                                            <select class="form-control form-control-sm me-2" id="ptc_idx" name="ptc_idx" style="width: 100px;" data-toggle="select2">
                                                <option value="">입장번호</option>
                                                @foreach($participantsWithRegister as $participant)
                                                    <option value="{{ $participant->ptc_idx }},{{ $participant->ptc_fair_no }},{{ $participant->ptc_name }}">{{ $participant->ptc_fair_no }} - {{ $participant->ptc_name }}</option>
                                                @endforeach
                                            </select>
                                    
                                            <select class="form-control form-control-sm me-2" id="waiting_booth_num" name="waiting_booth_num" style="width: 80px;"  data-toggle="select2">
                                                <option value="">부스</option>
                                                @foreach($waitingBoothLists as $booth)
                                                    <option value="{{ $booth->booth_num }}">{{ $booth->booth_num }}</option>
                                                @endforeach
                                            </select>
                                    
                                            <input id="waiting_memo" class="form-control form-control-sm" type="text" name="waiting_memo" placeholder="메모" style="width: 300px;" aria-label="" autocomplete="off">
                                            
                                            <button type="submit" class="btn btn-dark btn-sm btn-register" style="width: 60px;">등록</button>
                                            <button type="button" class="btn btn-outline-secondary btn-sm" id="toggleButton" style="width: 40px;">▼</button>
                                        </div>
                                    </form>
                                
                                    <!-- 상용구 버튼들 -->
                                    <div id="presetButtons" style="display:none;"> <!-- 기본적으로 숨김 처리 -->
                                        <div class="d-flex">
                                            <div class="list-preset-btn">
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">미국</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">영국</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">캐나다</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">호주</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">네덜란드</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">초등</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">중등</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">고등</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">캠프</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">파운데이션</button>
                                                <button type="button" class="btn btn-primary me-2 mr-sm-2 preset-btn">동명이인</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="row row-tbl">
                                    <div class="col-sm-12 wrap-tbl-waiting">
                                        <!-- 테이블 HTML -->
                                        <table class="table table-centered w-100 dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
                                            <colgroup>
                                                <col style="width: 6%;" />
                                                <col style="width: 6%;" />
                                                <col style="width: 10%;" />
                                                <col style="width: 10%;" />
                                                <col style="width: 48px;" />
                                                <col style="width: 240px;" />
                                                <col style="" />
                                            </colgroup>  
                                            <thead>
                                                <tr>
                                                    <th>No</th>
                                                    <th>부스</th>
                                                    <th>입장번호</th>
                                                    <th>이름</th>
                                                    
                                                    <!-- 검색창을 추가할 부분 -->
                                                    <th colspan="3" class="text-left">
                                                        <form action="{{url()->current()}}" method="GET" class="d-flex">
                                                            <select class="form-control select2" id="search_keyword" name="search_keyword" data-toggle="select2" data-required="true">
                                                                <option value="" selected>입장번호/이름</option>
                                                                @foreach($waitingLists as $list)
                                                                <option value="{{ $list->waiting_ptc_idx }}">{{ $list->participant->ptc_fair_no }} - {{ $list->participant->ptc_name }}</option>
                                                                @endforeach
                                                            </select>
                                                            <button type="submit" class="btn btn-primary ms-2">검색</button>
                                                            <button class="btn btn-primary ms-2" onclick="location.reload()">
                                                                <i class="mdi mdi-autorenew"></i>
                                                            </button>
                                                        </form>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @if(!empty($waitingLists) && count($waitingLists) > 0)
                                                @php
                                                    $index = 1; // 번호를 1부터 시작
                                                @endphp
                                                @foreach($waitingLists as $list)
                                                <tr>
                                                    <td>{{ $index++ }}</td>
                                                    <td>{{ $list->waiting_booth_num }}</td>
                                                    <td>{{ $list->participant->ptc_fair_no }}</td>
                                                    <td>
                                                        {{ $list->participant->ptc_name }} <span style="color: red;">{{ $list->has_fair_counsel == 'Y' ? '★' : '' }}</span><br>
                                                        <span style="font-size: 0.8em; color: gray;">
                                                            {{ substr($list->participant->ptc_phone, -4) }}
                                                        </span>
                                                    </td>
                                                    <td class="text-left count">
                                                        <!-- 숫자 카운트를 증가시키는 버튼 -->
                                                        <button type="button" class="btn btn-count" id="countButton{{ $list->waiting_idx }}" 
                                                                onclick="incrementCount({{ $list->waiting_idx }}, {{ $list->participant->ptc_fair_no }}, '{{ $list->participant->ptc_name }}', '{{ $list->waiting_booth_num }}', '{{ $type }}'  )">
                                                            {{ $list->waiting_call_count }}
                                                        </button>
                                                    </td>
                                                    <!-- 상태 버튼들 -->
                                                    <td class="text-left status">
                                                        <button type="button" 
                                                                class="btn {{ $list->waiting_status === '배정' ? 'btn-danger' : 'btn-secondary' }}" 
                                                                onclick="updateStatus({{ $list->waiting_idx }}, {{ $list->participant->ptc_fair_no }}, '{{ $list->participant->ptc_name }}', '{{ $list->waiting_status }}', '배정')">
                                                            배정
                                                        </button>
                                                        <button type="button" 
                                                                class="btn {{ $list->waiting_status === '부재중' ? 'btn-danger' : 'btn-secondary' }}" 
                                                                onclick="updateStatus({{ $list->waiting_idx }}, {{ $list->participant->ptc_fair_no }}, '{{ $list->participant->ptc_name }}', '{{ $list->waiting_status }}', '부재중')">
                                                            부재중
                                                        </button>
                                                        <button type="button" 
                                                                class="btn {{ $list->waiting_status === '대기취소' ? 'btn-danger' : 'btn-secondary' }}" 
                                                                onclick="updateStatus({{ $list->waiting_idx }}, {{ $list->participant->ptc_fair_no }}, '{{ $list->participant->ptc_name }}', '{{ $list->waiting_status }}', '대기취소')">
                                                            대기취소
                                                        </button>
                                                    </td>
                                                    <td>
                                                        <div class="flex">
                                                            <span class="txt-green">
                                                                {{ $list->waiting_sub_status }}
                                                            </span>
                                                            <input type="text" class="form-control waiting-memo" id="memo_{{ $list->waiting_idx }}" value="{{ $list->waiting_memo }}">
                                                            <!-- 시간 수정 필드 -->
                                                            <div class="time-picker" id="time-picker-{{ $list->waiting_idx }}">
                                                                <input 
                                                                    type="text" 
                                                                    id="time_input_{{ $list->waiting_idx }}" 
                                                                    class="time-input" 
                                                                    value="{{ date('H:i:s', strtotime($list->waiting_insert_time)) }}" 
                                                                    readonly
                                                                    onclick="openTimePicker({{ $list->waiting_idx }})"
                                                                />
                                                            </div>
                                                            
                                                            <!-- 시간 선택 모달 -->
                                                            <div class="time-modal" id="time-modal-{{ $list->waiting_idx }}" style="display: none;">
                                                                <div class="time-modal-content">
                                                                    <div class="time-modal-header">
                                                                        <span>등록 시간 변경</span>
                                                                    </div>
                                                                    <div class="time-scroll-container">
                                                                        <div>
                                                                            <select id="modal-hour-{{ $list->waiting_idx }}">
                                                                                @for ($h = 0; $h < 24; $h++)
                                                                                    <option value="{{ sprintf('%02d', $h) }}" {{ date('H', strtotime($list->waiting_insert_time)) == sprintf('%02d', $h) ? 'selected' : '' }}>
                                                                                        {{ sprintf('%02d', $h) }}
                                                                                    </option>
                                                                                @endfor
                                                                            </select>
                                                                        </div>
                                                                        <span>:</span>
                                                                        <div>
                                                                            <select id="modal-minute-{{ $list->waiting_idx }}">
                                                                                @for ($m = 0; $m < 60; $m++)
                                                                                    <option value="{{ sprintf('%02d', $m) }}" {{ date('i', strtotime($list->waiting_insert_time)) == sprintf('%02d', $m) ? 'selected' : '' }}>
                                                                                        {{ sprintf('%02d', $m) }}
                                                                                    </option>
                                                                                @endfor
                                                                            </select>
                                                                        </div>
                                                                        <span>:</span>
                                                                        <div>
                                                                            <select id="modal-second-{{ $list->waiting_idx }}">
                                                                                @for ($s = 0; $s < 60; $s++)
                                                                                    <option value="{{ sprintf('%02d', $s) }}" {{ date('s', strtotime($list->waiting_insert_time)) == sprintf('%02d', $s) ? 'selected' : '' }}>
                                                                                        {{ sprintf('%02d', $s) }}
                                                                                    </option>
                                                                                @endfor
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <button type="button" class="btn btn-primary my-2 mr-sm-2" onclick="closeTimePicker({{ $list->waiting_idx }})">닫기</button>
                                                                    <button type="button" class="btn btn-danger my-2 mr-sm-2"onclick="applyTime({{ $list->waiting_idx }})">수정</button>
                                                                </div>
                                                            </div>

                                                            <!-- 메모 수정 버튼 -->
                                                            <div class="memo">
                                                                <button type="button" class="btn btn-primary my-2 mr-sm-2" onclick="updateMemo({{ $list->waiting_idx }})">메모 수정</button>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                @endforeach
                                            @else
                                                <tr>
                                                    <td colspan="99" class="text-center" style="height:100px">데이터가 존재하지 않습니다.</td>
                                                </tr>
                                            @endif
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- E: Table Data -->

                            </div>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
        <!-- end row -->

        <!-- 토스트 알림 요소 -->
        <div id="toast" class="toast"></div>
    </div>
@endsection

@section('script')
<script>
    /** 상용구 사용 **/
    // 1. 접고 펼치는 기능
    document.getElementById('toggleButton').addEventListener('click', function() {
        var presetButtons = document.getElementById('presetButtons');
        if (presetButtons.style.display === 'none') {
            presetButtons.style.display = 'block';
            this.textContent = '▲';
        } else {
            presetButtons.style.display = 'none';
            this.textContent = '▼';
        }
    });

    // 2. 상용구 버튼 클릭 시 메모란에 추가
    document.querySelectorAll('.preset-btn').forEach(function(button) {
        button.addEventListener('click', function() {
            var memoInput = document.getElementById('waiting_memo');
            var currentMemo = memoInput.value;
            var newMemo = currentMemo + (currentMemo ? ', ' : '') + this.textContent; // 현재 메모가 있으면 콤마로 구분
            memoInput.value = newMemo;
        });
    });

    /** 대기자 등록 **/
    document.getElementById('register_form').addEventListener('submit', function(event) {
        event.preventDefault(); // 기본 폼 제출 동작을 막음
    
        // 폼 데이터를 가져옴
        const ptcValue = document.getElementById('ptc_idx').value;

        // ptcValue를 '인덱스번호,신청번호,이름' 형식으로 파싱
        const [ptcIdx, ptcFairNo, ptcName] = ptcValue.split(',');

        const waitingBoothNum = document.getElementById('waiting_booth_num').value;
        const waitingMemo = document.getElementById('waiting_memo').value;
        const uhakType = document.getElementById('uhak_type').value;

        // 입력된 데이터가 없는 경우 처리
        if (!ptcIdx) {
            alert('입장번호를 선택해주세요.');
            return;
        }

        // 메모가 20글자를 초과할 경우 경고 메시지 표시
        if (waitingMemo.length > 20) {
            alert('메모는 최대 20글자까지 입력할 수 있습니다.');
            return;
        }

        // axios를 사용해 서버로 데이터 전송
        axios.post(`/waiting/${uhakType}/register`, {
            ptcIdx: ptcIdx,
            ptcFairNo: ptcFairNo,
            ptcName: ptcName,
            waitingBoothNum: waitingBoothNum,
            waitingMemo: waitingMemo,
            uhakType: uhakType 
        })
        .then(function(response) {
            if (response.data.success) {
                showToast(response.data.message, 'success');
                // 업데이트 성공 시 페이지 새로고침
                setTimeout(() => {
                    window.location.reload();
                }, 1000); // 1초 후 새로고침
            } else {
                showToast(response.data.message, 'error');
            }
        })
        .catch(function(error) {
            showToast('등록에 실패했습니다. 다시 시도해주세요.', 'error'); // 네트워크 오류 알림
        });
    });

    /** 현황판 갱신 설정 팝업 열기 **/
    function openIntervalPopup() {
        const url = "{{ route('waiting.type.createInterval', ['type' => $type]) }}";
        const popupOptions = "width=500,height=350,resizable=yes,scrollbars=yes";
        
        window.open(url, '현황판 갱신 설정', popupOptions);
    }

    /** 안내등록 팝업 열기 **/
    function openNoticePopup() {
        const url = "{{ route('waiting.type.createNotice', ['type' => $type]) }}";
        const popupOptions = "width=500,height=350,resizable=yes,scrollbars=yes";
        
        window.open(url, '안내등록', popupOptions);
    }

    /** 콜카운트 증가 **/
    function incrementCount(waitingIdx, ptcFairNo, ptcName, waitingBoothNum, utype) {

        // 버튼의 현재 값을 가져옴
        const button = document.getElementById('countButton' + waitingIdx);
        let currentCount = parseInt(button.textContent, 10);  // 현재 버튼에 있는 숫자

        // 숫자를 증가시킴
        const newCount = currentCount + 1;

        // 해당 버튼의 숫자를 바로 업데이트
        button.textContent = newCount;
        
        // 폼 데이터를 가져옴
        const uhakType = document.getElementById('uhak_type').value;

        // 서버에 데이터 전송
        axios.post(`/waiting/${uhakType}/callcount`, {
            waitingIdx: waitingIdx,
            ptcName: ptcName,
            ptcFairNo: ptcFairNo,
            waitingBoothNum: waitingBoothNum,
            waitingCallCount: newCount,
            uhakType: utype
        })
        .then(function(response) {
            if (response.data.success) {
                console.log('콜카운트 업데이트 성공');
            } else {
                console.log('콜카운트 업데이트 실패');
            }
        })
        .catch(function(error) {
                console.log('콜카운트 업데이트 실패');
        });
    }

    /** 대기 상태 변경 **/
    function updateStatus(waitingIdx, ptcFairNo, ptcName, nowStatus, newStatus) {

        // 폼 데이터를 가져옴
        const uhakType = document.getElementById('uhak_type').value;

        // 현재 상태를 확인하여 '배정' 상태일 경우 '대기'로 전환
        // const updatedStatus = (nowStatus == newStatus && nowStatus == '배정') ? '대기' : newStatus;

        axios.post(`/waiting/${uhakType}/status`, {
            waitingIdx: waitingIdx,
            ptcFairNo: ptcFairNo,
            ptcName: ptcName,
            waitingStatus: newStatus // 배정, 대기, 부재중, 대기취소
        })
        .then(function(response) {
            if (response.data.success) {
                showToast(response.data.message, 'success');
                // 업데이트 성공 시 페이지 새로고침
                setTimeout(() => {
                    window.location.reload();
                }, 1000); // 1초 후 새로고침
            } else {
                showToast(response.data.message, 'error');
            }
        })
        .catch(function(error) {
            showToast('등록에 실패했습니다. 다시 시도해주세요.', 'error'); // 네트워크 오류 알림
        });
    }

    /** 메모 업데이트 **/
    function updateMemo(waitingIdx) {

        // 폼 데이터를 가져옴
        const uhakType = document.getElementById('uhak_type').value;

        // 메모 입력 필드의 값을 가져옴
        const waitingMemo = document.getElementById(`memo_${waitingIdx}`).value;

        // Axios를 사용해 서버로 요청 전송
        axios.post(`/waiting/${uhakType}/memo`, {
            waiting_idx: waitingIdx,
            waiting_memo: waitingMemo
        })
        .then(function(response) {
            if (response.data.success) {
                showToast('메모가 성공적으로 수정되었습니다.', 'success');
            } else {
                showToast('메모 수정에 실패했습니다. 다시 시도해주세요.', 'error');
            }
        })
        .catch(function(error) {
            showToast('메모 수정에 실패했습니다. 다시 시도해주세요.', 'error');
        });
    }

    function openTimePicker(waitingIdx) {
        const modal = document.getElementById(`time-modal-${waitingIdx}`);
        modal.style.display = 'block';
    }

    function closeTimePicker(waitingIdx) {
        const modal = document.getElementById(`time-modal-${waitingIdx}`);
        modal.style.display = 'none';
    }

    function applyTime(waitingIdx) {
        const hour = document.getElementById(`modal-hour-${waitingIdx}`).value;
        const minute = document.getElementById(`modal-minute-${waitingIdx}`).value;
        const second = document.getElementById(`modal-second-${waitingIdx}`).value;

        const formattedTime = `${hour}:${minute}:${second}`;
        document.getElementById(`time_input_${waitingIdx}`).value = formattedTime;

        closeTimePicker(waitingIdx);

        // 폼 데이터를 가져옴
        const uhakType = document.getElementById('uhak_type').value;

        // Axios를 사용해 서버로 요청 전송
        axios.post(`/waiting/${uhakType}/time`, {
            waiting_idx: waitingIdx,
            waiting_time: formattedTime // 새로운 시간 값
        })
        .then(function(response) {
            if (response.data.success) {
                showToast('대기 등록 시간이 성공적으로 수정되었습니다.', 'success');
                setTimeout(() => {
                    window.location.reload(); // 페이지 새로고침
                }, 1000);
            } else {
                showToast('대기 등록 수정에 실패했습니다. 다시 시도해주세요.', 'error');
            }
        })
        .catch(function(error) {
            showToast('대기 등록 수정에 실패했습니다. 다시 시도해주세요.', 'error');
        });
    }

    /** 토스트 알림 표시 **/
    function showToast(message, type = 'success') {
        const toast = document.getElementById('toast');
        toast.className = `toast ${type}`;
        toast.innerText = message;
        toast.classList.add('show');

        // 일정 시간 후에 자동으로 사라짐
        setTimeout(() => {
            toast.classList.remove('show');
        }, 3000);
    }
</script>
@endsection