kbgolf/pro/resources/views/page/sise.blade.php

@extends('views.layouts.master')
@section('content')

@php $today = date('Y-m-d'); @endphp

<div class="sub golf">
	<div class="container">
		<div class="navi">
			<a href="/"><i class="fa-solid fa-house"></i> 홈</a> > {{ $title_dir }} > {{ $title }}
		</div>
		<div class="title">
			<h2> {{ $title }} </h2>
		</div>
	</div>

	<!-- 회원권 검색 시작 -->
	<div class="search_ticket">
		<div class="container">
			<label>회원권 검색</label>
			<input type="text" id="membership-name" placeholder="회원권명">
            <!-- <input type="date" id="date" value="{{$today}}"> -->
			<button type="button" class="btn" onclick="searchMemberShip()">검색</button>
		</div>
	</div>
	<!--// 회원권 검색 끝 -->

	<!-- 시세 시작 -->
	<div class="quote">
		<div class="container">
			<ul class="tabs nav nav-tabs">
                <li class="{{ request('area', 'all') === 'all' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, 'all']) }}">전체</a></li>
                @if($siseType === 'golf')
                    <li class="{{ request('area', 'all') === '100' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '100']) }}">수도권/강원/충청권</a></li>
                    <li class="{{ request('area', 'all') === '200' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '200']) }}">영남/제주권</a></li>
                    <li class="{{ request('area', 'all') === '300' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '300']) }}">호남권</a></li>
                @elseif($siseType === 'condo')
                    <li class="{{ request('area', 'all') === '400' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '400']) }}">체인형콘도</a></li>
                    <li class="{{ request('area', 'all') === '500' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '500']) }}">스키장콘도</a></li>
                @else
                    <li class="{{ request('area', 'all') === '600' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '600']) }}">강남권</a></li>
                    <li class="{{ request('area', 'all') === '700' ? 'active' : '' }}"><a href="{{ route('sise', [$siseType, '700']) }}">강북권</a></li>
                @endif
			</ul>

            <div class="tabs today">
                <input type="date" id="search_date" value="{{$today}}" autocomplete="off">
            </div>

			<div class="tab-content">
				<div class="tab-pane fade in active show">
					<div class="tb_res tb_vertical">
						<table cellspacing="0" cellpadding="0">
							<caption>단위: 만원</caption>
							<thead>
								<tr>
									<th>회원권명</th>
									<th>금일시세</th>
									<th>전일시세</th>
									<th>등락</th>
									<th>상담</th>
								</tr>
							</thead>
							<tbody id="sise-list">
                                @forelse($siseItems['Page'] ?? [] as $sise)
                                    <tr>
                                        <td scope="row "data-label="{{ $sise['PostTitle'] }}"> {{ $sise['PostTitle'] }} </td>
                                        <td data-label="{{$sise['Pc3']}}"> {{ number_format($sise['Pc3']) }} </td>
                                        <td data-label="{{$sise['Pc4']}}"> {{ number_format($sise['Pc4']) }} </td>
                                        <td data-label="등락" class="{{ isset($sise['fluctuation']) && $sise['fluctuation'] > 0 ? 'up' : (isset($sise['fluctuation']) && $sise['fluctuation'] < 0 ? 'down' : '') }}">
                                            @if (isset($sise['fluctuation']) && $sise['fluctuation'] != 0)
                                                <i class="fa-solid {{ $sise['fluctuation'] > 0 ? 'fa-sort-up' : 'fa-sort-down' }}"></i>
                                                {{ number_format(abs($sise['fluctuation'])) }}
                                            @else
                                                {{ number_format(abs($sise['fluctuation'])) }}
                                            @endif
                                        </td>
                                        <td data-label="상담신청">
                                            <button type="button" class="btn consult-btn"
                                                    onclick="window.location.href = '{{ route('contactus-custom', [$sise['Pc5'], $sise['PostTitle']]) }}'">상담신청
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                <tr>
                                    <td colspan="5">회원권이 존재하지 않습니다</td>
                                </tr>
                                @endforelse
							</tbody>
						</table>
					</div>
				</div>

			</div>
		</div>

        <!-- 페이지네이션 -->
        <div class="row">
            <div class="col-lg-12">
                <div class="bottom-paginate">
                    {{ $siseItems['Page']->appends(['limit' => request('limit'), 'sort' => request('sort')])->links() }}
                </div>
            </div>
        </div>
        <!--// 페이지네이션 끝 -->
	</div>
    <!--// 시세 끝 -->

</div>

@push('js')
<script>
    var filteredSiseList = [];
    $(document).ready(function() {
        var date = dateFormat(document.getElementById('search_date').value);
        filteredSiseList = searchDate(date);
        renderSiseList(filteredSiseList);

        if ($('div').hasClass('chatbot') == true) {
            $('.main-footer').addClass('chatbot');
        }
    });

    document.getElementById('search_date').addEventListener('change', function() {
        var date = dateFormat(document.getElementById('search_date').value);
        filteredSiseList = searchDate(date);
        renderSiseList(filteredSiseList);
    });

    // 회원권 검색
    function searchMemberShip() {
        var membershipName = document.getElementById('membership-name').value.toLowerCase();
        var date = dateFormat(document.getElementById('search_date').value);
        // console.log('date : ', date);

        if (!membershipName) {
            alert('회원권명을 입력해주세요.');
            return;
        }

        var filteredSiseList = siseList.filter(function(sise) {
        var postTitleMatch = sise['PostTitle'].toLowerCase().includes(membershipName);
        var dateMatch = date ? (sise['Pc6'] && sise['Pc6'] === date) : true;
        return postTitleMatch && dateMatch;
        });
        // console.log('filteredSiseList : ', filteredSiseList);
        renderSiseList(filteredSiseList);
    }
    // 동적으로 tbody 생ㄱ성
    function renderSiseList(siseList) {
        var tbody = $('#sise-list');
        tbody.empty(); // Clear existing rows
        // console.log('siseList.length : ', siseList.length);

        if (siseList.length === 0) {
            tbody.html('<tr><td colspan="5">회원권이 존재하지 않습니다.</td></tr>');
            return;
        }

        siseList.forEach(function(sise) {
            var fluctuationClass = '';
            var fluctuationIcon = '';

            if (sise['fluctuation'] > 0) {
                fluctuationClass = 'up';
                fluctuationIcon = 'fa-sort-up';
            } else if (sise['fluctuation'] < 0) {
                fluctuationClass = 'down';
                fluctuationIcon = 'fa-sort-down';
            }

            var fluctuationText = sise['fluctuation'] !== 0 ? `
                <i class="fa-solid ${fluctuationIcon}"></i>
                ${number_format(Math.abs(sise['fluctuation']))}
            ` : `${number_format(sise['fluctuation'])}`;

            var tr = $('<tr>');
            tr.html(`
                <td scope="row" data-label="${sise['PostTitle']}">${sise['PostTitle']}</td>
                <td data-label="${sise['Pc3']}">${number_format(sise['Pc3'])}</td>
                <td data-label="${sise['Pc4']}">${number_format(sise['Pc4'])}</td>
                <td data-label="등락" class="${fluctuationClass}">
                    ${fluctuationText}
                </td>
                <td data-label="상담신청">
                    <button type="button" class="btn consult-btn"
                            data-post-title="${sise['PostTitle']}"
                            data-pc5="${sise['Pc5']}"
                            onclick="window.location.href = '/contactus-custom/${sise['Pc5']}/${encodeURIComponent(sise['PostTitle'])}'">상담신청
                    </button>
                </td>
            `);
            tbody.append(tr);
        });
    }

    function searchDate(date){
        return siseList.filter(function(siseFormDate) {
            var dateMatch = date ? (siseFormDate['Pc6'] && siseFormDate['Pc6'] === date) : true;
            return dateMatch;
        });
    }

    function number_format(number) {
        return new Intl.NumberFormat().format(number);
    }

    function dateFormat(date){
        var formattedDate = '';
        if (date) {
            var parts = date.split('-');
            formattedDate = parts.join('');
        }
        return formattedDate;
    }
const siseList = {!! json_encode($siseList['Page']) !!}; // JavaScript에서 PHP 배열을 변환하여 변수에 할당
</script>
@endpush
@endsection