@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;
        }
    </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">
                            {{ $booth_title }} 특별대기 관리
                            <button class="btn btn-primary ms-2" onclick="location.reload()">
                                <i class="mdi mdi-autorenew"></i>
                            </button>
                        </h5>
                        {{-- <div class="d-flex"> --}}
                            <button class="btn btn-primary my-2 mr-sm-2" type="button" onclick="openIntervalPopup()">현황판 갱신 설정</button>
                            <button class="btn btn-secondary my-2 mr-sm-2" type="button" onclick="openSmsLogPopup()">문자발송 내역</button>
                            <button class="btn btn-primary my-2 mr-sm-2" type="button" onclick="openNoticePopup()">안내등록</button>
                        {{-- </div> --}}
                    </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="col-sm-8">
                                    <div class="d-flex justify-content-start align-items-center tab-status">
                                        <a href="{{ route('waiting_special.waiting', ['booth_idx' => $booth_idx]) }}" 
                                        class="@if(Route::is('waiting_special.waiting')) font-weight-bold text-dark border-bottom border-dark @else text-muted @endif"
                                        style="text-decoration: none;">
                                        대기 ({{ $waitingCount }})
                                        </a>
                                        
                                        <a href="{{ route('waiting_special.absent', ['booth_idx' => $booth_idx]) }}" 
                                        class="@if(Route::is('waiting_special.absent')) font-weight-bold text-dark border-bottom border-dark @else text-muted @endif"
                                        style="text-decoration: none;">
                                        부재 ({{ $absentCount }})
                                        </a>
                                        
                                        <a href="{{ route('waiting_special.finished', ['booth_idx' => $booth_idx]) }}" 
                                        class="@if(Route::is('waiting_special.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 row-tbl">
                                    <input type="hidden" id="uhak_type" name="uhak_type" value="{{ $type }}">
                                    <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: 60px;" />
                                                <col style="width: 320px;" />
                                                <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($absentLists 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>
                                                            <a href="{{ route('waiting.type.waiting', ['type' => 'language']) }}" class="btn btn-primary ms-2">
                                                                <i class="mdi mdi-autorenew"></i>
                                                            </a>
                                                        </form>
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            @if(!empty($absentLists) && count($absentLists) > 0)
                                                @php
                                                    $index = 1; // 번호를 1부터 시작
                                                @endphp
                                                @foreach($absentLists as $list)
                                                <tr>
                                                    <td>{{ $index++ }}</td>
                                                    <td>
                                                        {{ $list->waiting_booth_num }}
                                                        @if($list->booth_info && $list->booth_info->booth_type == 'AS')
                                                            ({{ explode(' ', $list->booth_info->booth_title)[0] }})
                                                        @endif
                                                    </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) }} --}}
                                                            {{ preg_replace('/(\d{3})(\d{4})(\d{4})/', '$1-$2-$3', $list->participant->ptc_phone) }}
                                                        </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_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 }}', '부재복귀')">
                                                                부재복귀
                                                        </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 }}', '대기취소')">
                                                                대기취소
                                                        </button>
                                                    </td>
                                                    <td>
                                                        <div class="flex">
                                                            <input type="text" class="form-control waiting-memo" id="memo_{{ $list->waiting_idx }}" value="{{ $list->waiting_memo }}">
                                                            <div class="memo">
                                                                <button type="button" class="btn btn-primary my-2 mr-sm-2" onclick="updateMemo({{ $list->waiting_idx }})">메모 수정</button>
                                                            </div>
                                                            <span class="txt-red">
                                                                {{ date('H:i:s', strtotime($list->waiting_insert_time)) }}
                                                            </span>
                                                        </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>
    /** 현황판 갱신 설정 팝업 열기 **/
    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 openSmsLogPopup() {
        const url = "{{ route('waiting_special.smsLog') }}";
        const popupOptions = "width=800,height=500,resizable=yes,scrollbars=yes";
        window.open(url, '문자발송 내역', popupOptions);
    }

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

    /** 콜카운트 증가 **/
    function incrementCount(waitingIdx, ptcFairNo, ptcName) {
        // 버튼의 현재 값을 가져옴
        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,
            ptcFairNo: ptcFairNo,
            ptcName: ptcName,
            waitingCallCount: newCount
        })
        .then(function(response) {
            if (response.data.success) {
                console.log('콜카운트 업데이트 성공');
            } else {
                console.log('콜카운트 업데이트 실패');
            }
        })
        .catch(function(error) {
                console.log('콜카운트 업데이트 실패');
        });
    }

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

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

        axios.post(`/waiting/${uhakType}/status`, {
            waitingIdx: waitingIdx,
            ptcFairNo: ptcFairNo,
            ptcName: ptcName,
            waitingStatus: status // 배정, 부재중, 대기취소
        })
        .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 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