@extends('views.layouts.master')
@section('content')
@php
    //var_dump($contactUsCustomItems);
@endphp
<div class="sub inquiry_list">
	<div class="container">
		<div class="navi">
			<a href="/"><i class="fa-solid fa-house"></i> 홈</a> > 매매상담 > 상담내역
		</div>
		<div class="title">
			<h2>상담내역</h2>
		</div>
	</div>

	<div class="container">
		<ul class="list card_list">
            @forelse($contactUsCustomItems['Page'] ?? [] as $contactUsCustom)
                @php

                    if($contactUsCustom['Pc7'] === '상담접수'){
                        $statusClass = 'apply';
                        $msg = '상담이 접수되었습니다.';
                    } else {
                        $statusClass = 'done';
                        $msg = '완료';
                    }

                @endphp
                <li>
                    <a href="#" class="open-modal" data-toggle="modal" data-id="{{ $contactUsCustom['Id'] }}">
                        <div class="info">
                            <div class="status {{ $statusClass }}">{{ $contactUsCustom['Pc7'] }}</div>
                            <div class="date">{{ $contactUsCustom['date'] }}</div>
                        </div>
                        <h4 class="ellipsis">{{ $contactUsCustom['maskedName'] }}님 상담내역</h4>
                        @if($contactUsCustom['Pc7'] === '상담접수')
                            <p class="ellipsis">[{{ $contactUsCustom['Pc5'] }}] {{ $contactUsCustom['Pc3'] }} 신청</p>
                            <span>{{ $msg }}</span>
                        @else
                            <p class="ellipsis">[{{ $contactUsCustom['Pc5'] }}] {{ $contactUsCustom['Pc3'] }} 완료</p>
                        @endif
                    </a>
                </li>

            @empty
                <li>
                    <td>등록된 상담내역이 존재하지 않습니다</td>
                </li>
            @endforelse

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

	</div>
</div>

<!-- Modal -->
<div class="modal fade inquiry_view" id="inquiry_view_{{ $contactUsCustom['Id'] }}" tabindex="-1" role="dialog" aria-labelledby="inquiry_view" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="info">
			<div class="status done"></div>
			<div class="date"></div>
		</div>

		<table>
			<tr>
				<th>거래구분</th>
				<td id="transaction_type"></td>
			</tr>
			<tr>
				<th>회원권명</th>
				<td id="membership_name"></td>
			</tr>
			<tr>
				<th>안내</th>
				<td id="message"></td>
			</tr>
		</table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn_dark" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
    $(document).ready(function() {
        const contactUsCustomList = {!! json_encode($contactUsCustomList['Page']) !!};
        console.log(contactUsCustomList);
        $('.open-modal').click(function(e) {
            e.preventDefault();
            var contactUsCustomId = $(this).data('id');
            var contactUsCustom = contactUsCustomList.find(function(item) {
                return item['Id'] === contactUsCustomId;
            });

            //console.log('contactUsCustom : ', contactUsCustom);

            if (contactUsCustom) {
                var status = contactUsCustom['Pc7'] === '상담접수' ? { class: 'apply', text: '상담접수' } : { class: 'done', text: '상담완료' };
                $('.modal-body .info .status').removeClass('done apply').addClass(status.class).text(status.text);
                $('.modal-body .info .date').text(contactUsCustom['date']);
                $('#transaction_type').text(contactUsCustom['Pc3']);
                $('#membership_name').text(contactUsCustom['Pc5']);
                $('#message').text(contactUsCustom['Pc7'] === '상담접수' ? '상담이 접수되었습니다.' : '완료');
            }

            $("#inquiry_view_{{ $contactUsCustom['Id'] }}").modal('show');
        });

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


</script>
@endsection