@extends("common.layout")

@section('page-title', "수강 연장 요청")

@section("header")
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
{!! resource('js/common/tomSelectAllCheck.js') !!}
<script src="/js/autosize/dist/autosize.min.js"></script>
@endsection

@section("content")
<h1><a href="{{ route('enrollment.extensions') }}">수강 연장 요청</a></h1>

<section class="mb-3">
    <main>
        <form action="{{ route('enrollment.extensions') }}" class="search-form" method="GET">

            <div class="search-input-wrap">
                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="register_start_date">등록일</label>
                    <input class="form-control" type="date" id="register_start_date" name="register_start_date" @if (Request::get("register_start_date"))value="{{ Request::get("register_start_date") }}"@endif>
                    <input class="form-control" type="date" name="register_end_date" @if (Request::get("register_end_date"))value="{{ Request::get("register_end_date") }}"@endif>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="service">서비스</label>
                    <select class="form-select" name="service" id="service">
                        <option value="" >전체</option>
                        <option value="ielts" @selected(Request::get("service") == 'ielts')>인강</option>
                        <option value="academy" @selected(Request::get("service") == 'academy')>어학원</option>
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="categories">카테고리</label>
                    <select class="form-select" name="categories[]" id="categories" disabled>
                    </select>
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="product_name">상품명</label>
                    <input class="form-control" type="text" name="product_name" id="product_name" autocomplete='on' value="{{ Request::get("product_name") }}">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="student_name">수강생</label>
                    <input class="form-control" type="text" name="student_name" id="student_name" autocomplete='on' value="{{ Request::get("student_name") }}">
                </div>

                <div class="input-group input-group-sm">
                    <label class="input-group-text" for="status">연장 상태</label>
                    <select class="form-select" name="status" id="status">
                        <option value="" >전체</option>
                        @foreach (config('system.extension_status') as $k => $v)
                            <option value="{{ $k }}" @selected($k == Request::get("status"))>{{ $v }}</option>
                        @endforeach
                    </select>
                </div>

                <input type="hidden" name="paginate" value="{{ Request::has("paginate") ? Request::get("paginate"):'' }}">
                <input type="hidden" name="page" value="{{ Request::has("page") ? Request::get("page"):'' }}">
                <input type="hidden" name="order_by" value="{{ Request::has("order_by") ? Request::get("order_by"):'id' }}">
                <input type="hidden" name="sort" value="{{ Request::has("sort") ? Request::get("sort"):'desc' }}">
            </div>

            <button type="submit" class="btn btn-sm btn-outline-dark search-button"><i class="bi bi-search"></i> 조회</button>
        </form>
    </main>
</section>

<form name="extensions-form" id="extensions-form" action="{{ route('api.enrollment.set-extensions') }}" method="post">
    @csrf
    <section>
        <header>
            <h6>
                총 <strong>{{ $extensions->total() }}</strong>건 /
                신청 <strong>{{ $extensions->where('status', 'REQUESTED')->count() }}</strong>건
            </h6>

            <button type="submit" class="btn btn-sm btn-primary">변경사항적용</button>
        </header>

        <main>
            <table class="table table-hover table-management">
                <colgroup>
                    <col width="40"><!--체크박스-->
                    <col width="60"><!--번호-->
                    <col width="180"><!--등록 일시-->
                    <col width="50"><!--서비스-->
                    <col width="120"><!--카테고리-->
                    <col width="250"><!--상품명-->
                    <col width="60"><!--수강생-->
                    <col><!--요청내용-->
                    <col><!--성적표-->
                    <col width="100"><!--수강종료일-->
                    <col width="50"><!--연장일-->
                    <col width="50"><!--연장옵션-->
                    <col width="120"><!--연장상태-->
                </colgroup>
                <thead>
                    <tr>
                        <th></th>
                        <th class="text-center">번호</th>
                        <th>등록 일시</th>
                        <th>서비스</th>
                        <th>카테고리</th>
                        <th>상품명</th>
                        <th>수강생</th>
                        <th>요청내용</th>
                        <th>성적표 이미지</th>
                        <th class="text-center">수강종료일</th>
                        <th class="text-center">연장일</th>
                        <th>연장옵션</th>
                        <th>연장 상태</th>
                    </tr>

                    <tr>
                        <td><input type="checkbox" class="form-check-input" onclick="checkAll()"></td>

                        <td class="text-center">전체</td>

                        <td colspan="10" class="text-end">
                            일괄 적용할 값을 선택 후 적용할 수강생을 목록에서 체크하여 상단의 적용 버튼 선택 시 일괄 적용 가능합니다. 신청건만 적용 가능합니다.
                        </td>

                        <td>
                            <select class="form-select form-select-sm flex-grow-0" name="status[0]">
                                <option value=""></option>
                                @foreach (config('system.extension_status') as $k => $v)
                                    @if ($k != 'REQUESTED')
                                    <option value="{{ $k }}">{{ $v }}</option>
                                    @endif
                                @endforeach
                            </select>
                        </td>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($extensions as $extension)
                    <tr>
                        <td>
                            @if ($extension->status == 'REQUESTED')
                            <input type="checkbox" class="form-check-input" name="extensionIds[]" value="{{ $extension->id }}" onclick="checkId(this)">
                            @endif
                        </td>

                        <td class="number text-center">
                            {{ $extension->id }}
                        </td>

                        <td>
                            {{ $extension->created_at }}
                        </td>

                        <td>
                            {{ $extension->enrollment->service == 'ielts' ? '인강':'어학원' }}
                        </td>

                        <td>
                            {{ implode(', ', $extension->enrollment->product->productCategories->pluck('name')->toArray()) }}
                        </td>

                        <td class="text-left">
                            <a href="{{ route('product.detail', ['service' => $extension->enrollment->service, 'id' => $extension->enrollment->product->id]) }}" class="popUp">
                                {{ $extension->enrollment->product->name }}
                            </a>
                        </td>

                        <td class="text-left">
                            <a href="{{ route('user.detail', ['id' => $extension->user->id]) }}" class="popUp">
                                {{ $extension->user->name }}
                            </a>
                        </td>

                        <td class="extension-content">
                            <div class="inquiry">{!! nl2br($extension->inquiry) !!}</div>

                            @if ($extension->status == 'REQUESTED')
                                <textarea class="form-control" name="response[{{ $extension->id }}]" placeholder="답변" rows="1">{{ $extension->response }}</textarea>
                            @else
                            <div class="response">{!! nl2br($extension->response) !!}</div>
                            @endif
                        </td>

                        <td>
                            @if (isset($extension->s3_key))
                            <a target="_blank" href="{{ app(\S3Helper::class)->getPublicUrl($extension->s3_key) }}">{{ basename($extension->s3_key) }}</a>
                            @endif
                        </td>

                        <td class="text-center">
                            {{ $extension->original_ended_at ?? $extension->enrollment->ended_at }}
                            @if ($extension->status == 'EXTENDED')
                                {{ $extension->enrollment->ended_at }}
                            @endif
                        </td>

                        <td class="text-center">
                            {{ $extension->period }}
                        </td>

                        <td>
                            {{ preg_replace('/ 신청|승인/', '', $extension->enrollment->product->extension_option) }}
                        </td>

                        <td>
                            @if ($extension->status == 'REQUESTED')
                            <select class="form-select form-select-sm flex-grow-0" name="status[{{ $extension->id }}]">
                                @foreach (config('system.extension_status') as $k => $v)
                                    <option value="{{ $k }}">{{ $v }}</option>
                                @endforeach
                            </select>
                            @else
                            {{ config('system.extension_status')[$extension->status] }}
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>

            <footer>
                <div class="pagination-wrap">
                    {{ $extensions->links() }}
        
                    <select id='paginate-control' class='form-select form-select-sm data-length-select' onchange="copyValue('.data-length-select', 'input[name=paginate]', '.search-form')">
                        <option value="10" @selected(Request::get("paginate") == null || Request::get("paginate") == 10)>10개씩 보기</option>
                        <option value="30" @selected(Request::get("paginate") == 30)>30개씩 보기</option>
                        <option value="50" @selected(Request::get("paginate") == 50)>50개씩 보기</option>
                        <option value="100" @selected(Request::get("paginate") == 100)>100개씩 보기</option>
                    </select>
                </div>
            </footer>
        </main>
    </section>
</form>
@endsection

@push("script")
<script>
    function checkId(obj) {
        const $obj = $(obj);
        const $row = $obj.closest('tr');

        $row.toggleClass('selected');
    }

    function checkAll() {
        $('input[name="extensionIds[]"]').click();
    }

    function loadCategories(service, selectedCategories = []) {
        const $dynamicInput = $('#categories');
        
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/api/products/categories/get-categories/' + service,
            success: function(response) {
                let input = '<option value="">전체</option>';
                
                // 카테고리 목록을 추가
                $.each(response, function(index, cat) {
                    input += '<option value="' + cat.id + '">' + cat.name + '</option>';
                });

                // 카테고리 select 필드 업데이트
                $dynamicInput.prop('disabled', false).prop('multiple', true).removeClass('form-select').empty().append(input);

                // TomSelect 인스턴스 초기화
                const tomSelectInstance = new TomSelect("#categories", {
                    plugins: {
                        "checkbox_options": {},
                        "input_autogrow": {},
                        'dropdown_header': {
                            title: '전체 선택',
                            html: tomSelectAllCheckRender,
                        },
                    },
                    // 서버에서 전달된 selectedCategories 값을 초기 선택값으로 설정
                    items: selectedCategories,  // 이미 선택된 카테고리를 초기값으로 설정
                });
            },
            error: function(xhr, status, error) {
                console.error("Error:", error);
            }
        });
    }

    $(document).ready(function(){
        autosize($("textarea"));

        $('#service').on('change', function() {
            const service = $(this).val();
            const $dynamicInput = $('#categories');
            let tomSelectInstance = $dynamicInput[0].tomselect;

            if (tomSelectInstance) tomSelectInstance.destroy();  // 기존 TomSelect 인스턴스를 제거

            if (service) {
                loadCategories(service);  // 카테고리 로드를 위한 함수 호출
            } else {
                $dynamicInput.prop('disabled', true).prop('multiple', false).addClass('form-select').empty();
            }
        });

        $('a.popUp').each(function(){
            const $obj = $(this);

            $obj.on('click', function(e){
                e.preventDefault();
                const url = $obj.attr('href');

                edmPopupOpen(url);
            });
        });

        @if(Request::has('service'))
            const service = "{{ request('service') }}";
            const selectedCategories = @json(request('categories', []));

            if (service) loadCategories(service, selectedCategories);
        @endif
    });
</script>
@endpush