@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 class="page-title-right"></div>
                <h4 class="page-title"></h4>
            </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="createfrm" style="max-width:850px" method="post">
                                    @csrf
                                    <input type="hidden" name="title_max_size" value="80">
                                    <div class="mb-3 position-relative">
                                        <label for="input_banner_name" class="form-label">학교배너명</label>
                                        <input type="text" maxlength="255" name="name" class="form-control" placeholder="" data-required="true" autocomplete="off" value="{{ old('name', $schoolbanner->name ?? '') }}">
                                        <div id="autocomplete-list" class="autocomplete-items"></div>
                                    </div>
                                        
                                    <div class="mb-3">
                                        <label for="input_country" class="form-label">국가</label>
                                        <div class="d-flex flex-wrap">
                                            @php
                                                $selectedCountries = isset($schoolbanner->country) ? explode(',', $schoolbanner->country) : [];
                                            @endphp
                                            @foreach($countries as $code => $country)
                                            <div class="form-check form-check-inline country-chk">
                                                <input class="form-check-input" type="checkbox" id="country_{{ $country }}" name="country[]" data-required="true" value="{{ $code }}" {{ in_array($code, old('countries', $selectedCountries ?? [])) ? 'checked' : '' }} autocomplete="off">
                                                <label class="form-check-label" for="country_{{ $country }}">{{ $country }}</label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label for="input_small_title_3" class="form-label">작은 타이틀 (영문명)</label>
                                        @for ($i = 1; $i <= 3; $i++)
                                        <div class="form-row d-flex align-items-center mb-3">
                                            <div class="col d-flex align-items-center">
                                                <input type="text" name="st{{ $i }}_title" class="form-control" placeholder="문구{{ $i }}" value="{{ old('st'.$i.'_title', $schoolbanner->{'st'.$i.'_title'} ?? '') }}" autocomplete="off">
                                                <span class="ms-1 char-count"></span>
                                            </div>
                                            <div class="col-auto d-flex align-items-center ms-4">
                                                <input type="text" maxlength="2" name="st{{ $i }}_size" class="form-control" placeholder="폰트크기" value="{{ old('st'.$i.'_size', $schoolbanner->{'st'.$i.'_size'} ?? $st_default_size) }}" autocomplete="off">
                                                <span class="ms-1">px</span>
                                            </div>
                                            <div class="col-auto d-flex align-items-center ms-4" style="position:relative">
                                                <span class="me-1">#</span>
                                                <input type="text" maxlength="6" name="st{{ $i }}_color" class="form-control" placeholder="폰트색상" value="{{ old('st'.$i.'_color', $schoolbanner->{'st'.$i.'_color'} ?? $st_default_color) }}" autocomplete="off">
                                                <p class="color-preview"></p>
                                            </div>
                                        </div>
                                        @endfor
                                    </div>

                                    <div class="mb-3">
                                        <label for="input_big_title_1" class="form-label">큰 타이틀 (국문명)</label>
                                        @for ($i = 1; $i <= 3; $i++)
                                        <div class="form-row d-flex align-items-center mb-3">
                                            <div class="col d-flex align-items-center">
                                                <input type="text" name="bt{{ $i }}_title" class="form-control" placeholder="문구{{ $i }}" value="{{ old('bt'.$i.'_title', $schoolbanner->{'bt'.$i.'_title'} ?? '') }}" autocomplete="off">
                                                <span class="ms-1 char-count"></span>
                                            </div>
                                            <div class="col-auto d-flex align-items-center ms-4">
                                                <input type="text" maxlength="2" name="bt{{ $i }}_size" class="form-control" placeholder="폰트크기" value="{{ old('bt'.$i.'_size', $schoolbanner->{'bt'.$i.'_size'} ?? $bt_default_size) }}" autocomplete="off">
                                                <span class="ms-1">px</span>
                                            </div>
                                            <div class="col-auto d-flex align-items-center ms-4" style="position:relative">
                                                <span class="me-1">#</span>
                                                <input type="text" maxlength="6" name="bt{{ $i }}_color" class="form-control" placeholder="폰트색상" value="{{ old('bt'.$i.'_color', $schoolbanner->{'bt'.$i.'_color'} ?? $bt_default_color) }}" autocomplete="off">
                                                <p class="color-preview"></p>
                                            </div>
                                        </div>
                                        @endfor
                                    </div>

                                    <div class="mb-3">
                                        <label for="input_background_content_1" class="form-label">백월 내용</label>
                                        @for ($i = 1; $i <= 5; $i++)
                                        <div class="form-row d-flex align-items-center mb-3">
                                            <div class="col d-flex align-items-center">
                                                <input type="text" name="bc{{ $i }}_title" class="form-control" placeholder="문구{{ $i }}" value="{{ old('bc'.$i.'_title', $schoolbanner->{'bc'.$i.'_title'} ?? '') }}" autocomplete="off">
                                                <span class="ms-1 char-count"></span>
                                            </div>
                                            <div class="col-auto d-flex align-items-center ms-4">
                                                <input type="text" maxlength="2" name="bc{{ $i }}_size" class="form-control" placeholder="폰트크기" value="{{ old('bc'.$i.'_size', $schoolbanner->{'bc'.$i.'_size'} ?? $bc_default_size) }}" autocomplete="off">
                                                <span class="ms-1">px</span>
                                            </div>
                                            <div class="col-auto d-flex align-items-center ms-4" style="position:relative">
                                                <span class="me-1">#</span>
                                                <input type="text" maxlength="6" name="bc{{ $i }}_color" class="form-control" placeholder="폰트색상" value="{{ old('bc'.$i.'_color', $schoolbanner->{'bc'.$i.'_color'} ?? $bc_default_color) }}" autocomplete="off">
                                                <p class="color-preview"></p>
                                            </div>
                                        </div>
                                        @endfor
                                    </div>

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

                                </form>
                            </div>
                            <!-- end row-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(!empty($id))
    @include('schoolbanner.modal')
@endif

<form name="delfrm" action="{{ route('schoolbanner.destroy') }}" method="POST" style="display:none">
    @csrf
    <input type="hidden" name="id" value="">
</form>
@endsection

@section('script')
<script> 

    @if(!empty($id) && $action == 'preview')
    $(document).ready(function(){
        openmodal({{ $id }});
    });
    @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>'); 
    });

    $('input[name*="_title"]').on('keyup', function() {
        wlchk(this)
    }).each(function(){
        wlchk(this)
    });

    function wlchk(obj){
        var charCount = $(obj).val().length;
        var maxlength = $('input[name="title_max_size"]').val();
        $(obj).attr('maxlength', maxlength);
        $(obj).siblings('.char-count').text(charCount + '/' + maxlength);
    }

    $('input[name*="_color"]').each(function(){ 
        colorview(this)
    });

    $('input[name*="_color"]').on('keyup', function() {
        colorview(this)
    });

    function colorview(obj){
        var colorValue = $(obj).val();
        if (/^[0-9A-Fa-f]{6}$/.test(colorValue)) {
            $(obj).parent().find('.color-preview').css('background-color', '#' + colorValue);
        } else {
            $(obj).parent().find('.color-preview').css('background-color', '');
        }
    }

    $('input[name*="_size"]').on('input', function() {
        this.value = this.value.replace(/[^0-9]/g, '');
    });

    $('input[name*="_color"]').on('input', function() {
        this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
    });

    $('input').on('focus', function() {
        $(this).addClass('focus-border-color');
    }).on('blur', function() {
        $(this).removeClass('focus-border-color');
    }); 

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

    function openmodal(id){
        $('#pdf-preview-modal iframe').attr('src', '/schoolbanner/preview/'+id);
        $('#pdf-preview-modal').modal('show');
    }

    @if($errors->any())
    $(document).ready(function(){
        let errorMessages = '';
        @foreach ($errors->all() as $error)
            errorMessages += '{{ $error }}\n';
        @endforeach
        alert(errorMessages);

        @php
            $firstErrorField = array_key_first($errors->getMessages());
        @endphp

        var firstErrorField = $('input[name="{{ $firstErrorField }}"]');
        if(firstErrorField.length == 0) firstErrorField = $('input[name="{{ $firstErrorField }}[]"]');
        if (firstErrorField.length) {
            let parentMb3 = firstErrorField.closest('.mb-3');
            if (parentMb3.length) {
                let nextLabel = parentMb3.find('> label');
                if (nextLabel.length) {
                    nextLabel.addClass('danger-txt');
                    nextLabel.prepend('<i class="uil-check"></i> ');
                    setTimeout(function(){ firstErrorField.focus() }, 100);
                }
            }
        }
    });
    @endif

    $(document).ready(function() {
        $('input[name="name"]').on('input', function() {
            var q = $(this).val();
            if (q.length > 0) {
                $.ajax({
                    url: '/api/v1/schools/search',
                    type: 'GET',
                    data: { q: q },
                    success: function(data) {
                        $('#autocomplete-list').empty().show();
                        if (data.length === 0) {
                            $('#autocomplete-list').hide();
                        } else {
                            data.forEach(function(item) {
                                var highlightedKor = item.sm_name_kor.replace(new RegExp(q, 'gi'), (match) => `<span class="highlight">${match}</span>`);
                                var highlightedEng = item.sm_name_eng.replace(new RegExp(q, 'gi'), (match) => `<span class="highlight">${match}</span>`);
                                $('#autocomplete-list').append('<div class="autocomplete-item" data-name="' + item.sm_name_kor + '">' + highlightedKor + ' (' + highlightedEng + ')</div>');
                            });
                        }
                    }
                });
            } else {
                $('#autocomplete-list').empty().hide();
            }
        });
    
        $(document).on('click', '.autocomplete-item', function() {
            $('input[name="name"]').val($(this).text());
            $('#autocomplete-list').empty().hide();
        });
    
        // Hide autocomplete list when clicking outside
        $(document).click(function(e) {
            if (!$(e.target).closest('.autocomplete-items, input[name="name"]').length) {
                $('#autocomplete-list').empty().hide();
            }
        });
    });
</script>
@endsection