@extends('common.layout')

@section('content')
<div class="container-fluid">
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div>
                    <h4 class="page-title"></h4>
                    @if(session('school_uid'))
                    <span class="page-subtitle alert alert-danger p-0">{{ $school_name }}</span>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- start table -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane show active" id="input-types-preview">
                            <div class="row">
                                <form name="residencefrm" style="max-width:850px" method="post" enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="school_uid" value="{{ session('school_uid') ?? $residence->school_uid ?? '' }}">
                                    
                                    <div class="mb-3 position-relative">
                                        <label for="name" class="form-label">숙소이름(Name)</label>
                                        <input type="text" maxlength="120" id="name" name="name" class="form-control" placeholder="Casa Residence" data-required="true" autocomplete="off" value="{{ old('name', $residence->name ?? '') }}">
                                    </div>

                                    <div class="mb-3 position-relative" style="max-width:300px">
                                        <label for="name" class="form-label">국가(Nation)</label>
                                        <select id="country" name="country" data-required="true" class="form-select">
                                            <option value="">선택하세요</option>
                                            @foreach($countrys as $k => $v)
                                            <option value="{{ $k }}"{{ (old('type', $residence->country ?? '')==$k) ? ' selected' : '' }}>{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3 position-relative" style="max-width:300px">
                                        <label for="name" class="form-label">도시(City)</label>
                                        <select id="city" name="city" class="form-select" data-required="true" disabled>
                                            <option value="">선택하세요</option>
                                            @foreach($citys as $v)
                                            <option value="{{ $v[1] }}"{{ (old('type', $residence->city ?? '')==$v[1]) ? ' selected' : '' }} data-country="{{ $v[0] }}">{{ $v[1] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                        
                                    <div class="mb-3 position-relative" style="max-width:300px">
                                        <label for="type" class="form-label">숙소형태(Type)</label>
                                        <select id="type" name="type" class="form-select">
                                            <option value="">선택하세요</option>
                                            @foreach($residence_list as $k => $v)
                                            <option value="{{ $k }}"{{ (old('type', $residence->type ?? '')==$v) ? ' selected' : '' }}>{{ $v }}</option>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="input_banner_name" class="form-label">사진(Photo)</label>
                                        <p class="text-danger">
                                            가로사이즈 {{ $min_width }}px 이상으로 업로드<br/>
                                            최소 4~6개의 사진 업로드 필수<br/>
                                            방사진(여러형태의 룸보유시 샘플 룸들의 사진), 공용공간(부엌,화장실, 거실등)
                                        </p>
                                        <div id="photos" class="dropzone"></div>
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="address" class="form-label">주소(Address)</label>
                                        <p class="text-danger">
                                            기숙사의 주소를 영어로 정확히 기입
                                        </p>
                                        <input type="text" maxlength="150" id="address" name="address" class="form-control" placeholder="101 Lawton Blvd, Toronto, ON M4V 1Z6" autocomplete="off" value="{{ old('address', $residence->address ?? '') }}">
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="distance" class="form-label">학원까지 소요시간(Distance)</label>
                                        <p class="text-danger">
                                            대중교통(버스, 또는 지하철)로 ~분 소요 / 걸어서 ~분 소요 (단, 걸어서 갈수 있는 거리가 아니면 대중교통만)
                                        </p>
                                        <input type="text" maxlength="300" id="distance" name="distance" class="form-control" placeholder="대중교통(지하철) 25분 소요 (숙소에서 St. Clair 역까지 도보 5분 거리)" autocomplete="off" value="{{ old('distance', $residence->distance ?? '') }}">
                                    </div>

                                    <div class="mb-3 position-relative" style="max-width:680px">
                                        <label for="room_type" class="form-label">
                                            룸 선택옵션(Room Type)
                                            <button id="add-room-type" type="button" class="btn btn-sm btn-primary" style="margin-left:5px;">추가</button>
                                        </label>
                                        <div id="room-type-container">
                                            <div class="room-type-item mb-2">
                                                <div class="d-flex align-items-center mb-2">
                                                    <span class="drag-handle" style="cursor:move; margin-right:10px;">&#9776;</span>
                                                    <input type="text" maxlength="300" name="room_type_option[]" style="max-width:576px;" class="form-control" placeholder="Single Room (1인실) - 식사(포함/불포함), 욕실(개인/공용), 주방(개인/공용)" autocomplete="off">
                                                    <button class="btn btn-sm btn-danger remove-room-type" style="margin-left:5px;">삭제</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3 position-relative">
                                        <label for="room_type" class="form-label">룸 선택옵션(Room Type) - 설명</label>
                                        <textarea class="form-control" id="room_type" name="room_type" rows="5" placeholder="제공하는 방의 옵션을 아래의 형식에 맞춰 기입하고, 욕실과 주방 사용이 공용인지, 개인인지 구별해서 넣어주세요
◎ Single Room (1인실) - 식사불포함, 욕실(공용,개인), 주방(공용,개인)
◎ Twin Room (2인실) - 식사불포함, 욕실(공용,개인), 주방(공용,개인) , 같이 등록하는 학생이 있을경우만 선택 가능
◎ Studio (원룸) - 식사불포함, 욕실(개인), 주방(개인)

추가 참고해야 할 사항 있으면 자세히 넣어주세요
▶ 한 유닛에 3개의 방이 있고, 욕실, 주방을 공유합니다. 
▶ 공용공간은 남녀공용(Mixed Gender)로 운영됩니다.
▶ 주방에 냉장고, 가스(전기)레인지, 오븐, 식기, 접시, 전자레인지 등이 비치되어있고, 최대 4명의 학생이 공유합니다">{{ old('name', $residence->room_type ?? '') }}</textarea>
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="room_facilities" class="form-label">룸 시설(Room Facilities)</label>
                                        <p class="text-danger">
                                            방에 있는 모든 시설에 대해 입력
                                        </p>
                                        <input type="text" maxlength="" id="room_facilities" name="room_facilities" class="form-control" placeholder="침대, 침구류, 책상, 의자, 옷장, 에어컨, 난방기, TV" autocomplete="off" value="{{ old('room_facilities', $residence->room_facilities ?? '') }}">
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="booking_conditions" class="form-label">예약조건(Bookings)</label>
                                        <p class="text-danger">
                                            입실 가능 나이 / 연중예약 ? 여름만 가능? / 최소 등록 조건 /입퇴실 요일 및 시간 / 공과금,무선인터넷 포함여부 / 기타 주의사항 기입
                                        </p>
                                        <textarea class="form-control" id="booking_conditions" name="booking_conditions" rows="5" placeholder="▶만 18세 이상
▶연중 예약 가능 (방 예약확정을 위해서는 온라인 CAD $250 납부 필수)                                                                                                                                                                           
▶최소 4주 이상 등록 
▶입실일 : 토요일(4pm~9pm) / 퇴실일 : 토요일(11am 이전)
▶공과금(전기세, 수도세등), 무선인터넷 비용 포함">{{ old('booking_conditions', $residence->booking_conditions ?? '') }}</textarea>
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="" class="form-label">불포함내역(Not provided)</label>
                                        <p class="text-danger">
                                            자주 있는지 물어보는 항목 위주로 입력
                                        </p>
                                        <input type="text" maxlength="300" id="not_provided" name="not_provided" class="form-control" placeholder="수건, 샴푸, 치약, 휴지등의 개인 욕실용품, 세탁세제등" autocomplete="off" value="{{ old('name', $residence->not_provided ?? '') }}">
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="other_details" class="form-label">기타사항(Other details)</label>
                                        <p class="text-danger">
                                            청소서비스 / 세탁관련 / 건물안에 사용할 수 있는 시설 등 고객이 알면 좋을 내용 기입
                                        </p>
                                        <textarea class="form-control" id="other_details" name="other_details" rows="5" placeholder="▶청소 서비스 : 주 1회 공용공간 청소만 진행되고, 개인방은 직접 청소 진행 
▶세탁 : 건물 1층 Laundry room에 세탁기 13개, 건조기 13개 있어 비용 내고 가능 (세탁 $3.25 / 건조 $2) 
▶건물 내부에 유료 헬스장, 시네마 등 있어 이용 가능">{{ old('other_details', $residence->other_details ?? '') }}</textarea>
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="fact_sheet" class="form-label">학원자체(Fact Sheet)</label>
                                        <p class="text-danger">
                                            학원 자체적으로 보유한 해당 기숙사의 자료가 있다면 구글링크로 만들어 입력
                                        </p>
                                        <input type="text" maxlength="300" id="fact_sheet" name="fact_sheet" class="form-control" placeholder="https://drive.google.com/file/d/1hRdWNbHb5JTSxqEklp02WzC68S545oKj/view?usp=sharing" autocomplete="off" value="{{ old('fact_sheet', $residence->fact_sheet ?? '') }}">
                                    </div>

                                    <div class="mb-3 position-relative">
                                        <label for="other_accommodations" class="form-label">다른 기숙사 보기</label>
                                        <p class="text-danger">
                                            해당 기숙사를 포함한 기숙사들의 사이트가 제공된다면 링크로 입력
                                        </p>
                                        <input type="text" maxlength="300" id="other_accommodations" name="other_accommodations" class="form-control" placeholder="https://www.bayswater.ac/en/destination/toronto" autocomplete="off" value="{{ old('other_accommodations', $residence->other_accommodations ?? '') }}">
                                    </div>

                                    <div class="d-flex justify-content-end button-wrap">
                                        <button class="btn btn-primary mt-2 py-2" type="submit" name="action">{{ !empty($id) ? '수정' : '저장' }}</button>
                                        @if(!empty($id))
                                        <button class="btn btn-danger mt-2 py-2" type="button" onclick="delitem({{ $id }})">삭제</button>
                                        @endif
                                        <a class="btn btn-light mt-2 py-2" type="button" href="/residence/?{{ $param }}">목록</a>
                                    </div>  
                                </form>
                            </div>
                            <!-- end row-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!empty($id))
<form name="delfrm" action="{{ route('residence.destroy') }}" method="POST" style="display:none">
    @csrf
    <input type="hidden" name="id" value="{{ $id }}">
</form>
@endif

@endsection

@section('script')
<link rel="stylesheet" href="https://s3.ap-northeast-2.amazonaws.com/lib.edmeducation.com/dropzone/dropzone.min.css">
<script src="https://s3.ap-northeast-2.amazonaws.com/lib.edmeducation.com/dropzone/dropzone.min.js"></script>
<script src="https://s3.ap-northeast-2.amazonaws.com/lib.edmeducation.com/sortable/Sortable.min.js"></script>
<script>
// 서버에서 이미 등록된 이미지 목록 가져오기
var mockFiles = [];

@if(!empty($id) && !empty($residencefiles))

@php
    $mockFiles = [];
@endphp

@foreach($residencefiles as $image)
    @php
        $fileName = $image->file_name;
        $filePath = $image->file_path . '/' . $fileName;
        if (!Storage::disk('s3_uhak')->exists($filePath)) {
            continue;
        }
        $fileSize = Storage::disk('s3_uhak')->size($filePath);
        $fileUrl = Storage::disk('s3_uhak')->url($image->file_path.'/'.$image->file_name);
        $fileUrl = str_replace(env('AWS_BUCKET_UHAK').'//', env('AWS_BUCKET_UHAK').'/', $fileUrl);

        if(!$fileUrl || !$fileName){
            continue;
        }

        $mockFiles[] = [
            'fileId' => $image->residence_file_uid,
            'fileName' => $fileName,
            'fileUrl' => $fileUrl,
            'fileSize' => (int)$fileSize,
            'fileTxt' => $image->file_txt,
            'fileOrd' => $image->file_ord
        ];
    @endphp
@endforeach

mockFiles = {!! json_encode($mockFiles) !!};
 
@endif

$('[data-required=true]').each(function(){ 
    var obj = $(this).closest('.mb-3').find('> label');
    if(obj.html().indexOf('"필수"') == -1) obj.append('<nobr class="text-danger" title="필수">*</nobr>'); 
});

var uploadInProgress = false;

Dropzone.autoDiscover = false;  // Dropzone 자동 초기화 비활성화

var myDropzone = new Dropzone("#photos", {
    url: '/residence/image-upload',
    autoProcessQueue: false,  // 자동 업로드 비활성화
    addRemoveLinks: true,
    dictDefaultMessage: "여기에 이미지를 드래그",
    acceptedFiles: "image/*",
    dictRemoveFile: "삭제",
    maxFiles: {{ $max_img_length }},
    paramName: "photos",
    chunking: false,
    forceChunking: false,
    parallelUploads: {{ $max_img_length }},
    init: function() {
        var dzInstance = this;

        this.on("addedfile", function(file) {
            // 모의 파일(mockFile)은 처리하지 않음
            if (file.isMock) {
                return;
            }

            if (dzInstance.files.length > 10) {
                dzInstance.removeFile(file);
                alert("최대 {{ $max_img_length }}개의 파일만 업로드할 수 있습니다.");
                return;
            } else if (!file.type.match(/^image\//)) {
                dzInstance.removeFile(file);
                alert("이미지 파일만 업로드할 수 있습니다.");
                return;
            }

            // 이미지 크기 확인
            var reader = new FileReader();
            var minWidth = parseInt("{{ (int)$min_width }}", 10);
            reader.onload = function(event) {
                var img = new Image();
                img.onload = function() {
                    if (img.width < minWidth) {
                        alert("이미지 가로 사이즈는 " + minWidth + "px 이상이어야 합니다.");
                        dzInstance.removeFile(file);
                    }
                };
                img.src = event.target.result;
            };
            reader.readAsDataURL(file);

            // 프로그레스바 요소 제거
            var progressBar = file.previewElement.querySelector('.dz-progress');
            if (progressBar) {
                progressBar.parentNode.removeChild(progressBar);
            }

            // 설명 입력 필드 추가
            if (file.previewElement) {
                var descriptionInput = document.createElement("input");
                descriptionInput.setAttribute("type", "text");
                descriptionInput.setAttribute("class", "form-control mt-2");
                descriptionInput.setAttribute("name", "file_txt[]");
                descriptionInput.setAttribute("max-length", "150");
                descriptionInput.setAttribute("placeholder", "사진설명");
                descriptionInput.setAttribute("autocomplete", "off");

                var orderInput = document.createElement("input");
                orderInput.setAttribute("type", "hidden");
                orderInput.setAttribute("name", "file_ord[]");
                orderInput.setAttribute("value", ($('input[name*="file_ord"]').length + 1));

                file.descriptionInput = descriptionInput;
                file.orderInput = orderInput;

                file.previewElement.appendChild(descriptionInput);
                file.previewElement.appendChild(orderInput);
            }
        });

        this.on("sending", function (file, xhr, formData) {
            if (file.descriptionInput) {
                formData.append("file_txt", file.descriptionInput.value);
            }
            if (file.orderInput) {
                formData.append("file_ord", file.orderInput.value);
            }
        });

        this.on("removedfile", function(file) {
            if($('input[name*="file_ord"]').length > 0){
                $('.dz-message').hide();
            }else{
                $('.dz-message').show();
            }
            rearrangeOrder();
        });

        // Dropzone에 미리 등록된 파일 추가
        if(mockFiles){
            mockFiles.forEach(function(file) {
                var mockFile = { name: file.fileName, size: file.fileSize, isMock: true };

                // Dropzone에 mockFile 추가
                dzInstance.emit("addedfile", mockFile);
                dzInstance.emit("thumbnail", mockFile, file.fileUrl);
                dzInstance.emit("complete", mockFile);

                if (mockFile.previewElement) {
                    var descriptionInput = document.createElement("input");
                    descriptionInput.setAttribute("type", "text");
                    descriptionInput.setAttribute("class", "form-control mt-2");
                    descriptionInput.setAttribute("name", "file_txt_"+file.fileId);
                    descriptionInput.setAttribute("value", file.fileTxt);
                    mockFile.previewElement.appendChild(descriptionInput);

                    var orderInput = document.createElement("input");
                    orderInput.setAttribute("type", "hidden");
                    orderInput.setAttribute("name", "file_ord_"+file.fileId);
                    orderInput.setAttribute("value", file.fileOrd);
                    mockFile.previewElement.appendChild(orderInput);

                    var orderInput = document.createElement("input");
                    orderInput.setAttribute("type", "hidden");
                    orderInput.setAttribute("name", "file_id[]");
                    orderInput.setAttribute("value", file.fileId);
                    mockFile.previewElement.appendChild(orderInput);
                }
            });
        }

        rearrangeOrder();
    }
});

var sortable = new Sortable(document.getElementById('photos'), {
    animation: 150,
    onEnd: function(evt) {
        rearrangeOrder();
    }
});

function rearrangeOrder(){
    // 모든 파일 미리보기 요소를 가져와서 순차적으로 file_ord 값을 재정렬
    $('input[name*="file_ord"]').each(function(index) {
        $(this).val(index + 1); // 순서를 1부터 시작하도록 설정
    });
}

$("form[name=residencefrm]").on("submit", function(e) {
    e.preventDefault(); // 폼 제출 기본 동작 방지

    var invalid = false;
    var firstInvalidInput = null;
    
    // 이미지 설명 필드가 모두 채워졌는지 확인
    $('input[name="file_txt[]"]').each(function() {
        if (!$.trim($(this).val())) {
            if (!firstInvalidInput) {
                firstInvalidInput = $(this);
            }
            invalid = true;
        }
    });

    if (invalid) {
        alert("모든 이미지에 대한 설명을 입력해주세요.");
        if (firstInvalidInput) {
            firstInvalidInput.focus();
        }
    } else {
        var formData = new FormData(this);

        // 중복 제출 방지
        if (uploadInProgress) {
            return;
        }
        uploadInProgress = true;

        $.ajax({
            url: '/{{ request()->path() }}',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false, 
            success: function(response) {
                var residence_uid = response.residence_uid;

                uploadInProgress = false;

                if (residence_uid && myDropzone.getQueuedFiles().length > 0) {
                    myDropzone.options.params = {
                        residence_uid: residence_uid
                    };
                    myDropzone.on("queuecomplete", function() {
                        location.href = '/residence/?{{ $param }}';
                    });
                    myDropzone.processQueue();
                } else {
                    location.href = '/residence/?{{ $param }}';
                }
            },
            error: function(xhr, status, error) {
                uploadInProgress = false;
                var response = JSON.parse(xhr.responseText);
                if (response.errors) {
                    var errorMessages = [];
                    for (var key in response.errors) {
                        if (response.errors.hasOwnProperty(key)) {
                            errorMessages.push(response.errors[key][0]);
                        }
                    }
                    alert(errorMessages.join('\n'));
                }
            }
        });
    }
});

function country_change(contry_value, city_value){
    var v = contry_value;
    $('#city').val('');
    if(v == ''){
        $('#city').prop('disabled', true);
    }else{
        $('#city').prop('disabled', false);
        $('#city option').each(function(){
            if($(this).val() == ''){
                $(this).show();
            }else if($(this).data('country') == v){
                $(this).show();
            } else {
                $(this).hide();
            }

            if(city_value != ''){
                $('#city').val(city_value);
            }
        });
    }
}

$(document).ready(function(){
    $('#country').change(function(){
        country_change($(this).val(), '');
    });

    Sortable.create(document.getElementById('room-type-container'), {
        handle: '.drag-handle',
        animation: 150
    });

    // 추가 버튼 클릭 시 첫 번째 요소 복사하여 추가
    $('#add-room-type').on('click', function(e) {
        e.preventDefault();
        let newRoomType = $('#room-type-container .room-type-item:first').clone();
        newRoomType.find('input[type="text"]').val('');
        $('#room-type-container').append(newRoomType);
    });

    $('#room-type-container').on('click', '.remove-room-type', function(e) {
        e.preventDefault();        
        if ($('.room-type-item').length > 1) {
            $(this).closest('.room-type-item').remove();
        } else {
            alert("최소 하나의 옵션은 남겨야 합니다.");
        }
    });

    @if(!empty($id))
    if($('#country').val() != ''){
        $('#city').prop('disabled', false);
        country_change($('#country').val(), $('#city').val());
    }

    let residenceRoomTypes = @json($residenceroomtypes);
    residenceRoomTypes.forEach((type, index) => {
        if (index > 0) {
            $('#add-room-type').trigger('click');
        }
        let lastAdded = $('#room-type-container .room-type-item:last');
        lastAdded.find('input[type="text"]').val(type.room_type);
        lastAdded.find('textarea').val(type.room_memo);
    });
    @endif
});

@if(!empty($id))
function delitem(id){
    if(confirm('삭제 하시겠습니까?\n삭제 후에는 복구가 불가능합니다.')){
        $('form[name="delfrm"] input[name="id"]').val(id);
        delfrm.submit();
    }
}
@endif
</script>
@endsection