@extends('common.layout')

@section('content')
    <form name="sch_form" action="{{url()->current()}}">
        <input type="hidden" name="sort" value="">
        <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 class="d-flex">
                                {{ csrf_field() }}
                                <div class="input-group">
                                    {{--                                    <select id="id_sch_location" name="sch_location" class="form-select form-control-light"--}}
                                    <select id="id_sch_location" name="location" class="form-select form-control-light"
                                            aria-label="Festival Index">
                                        <option value="" selected>{{ trans('booth_list.필터링 할 지역 박람회 선택') }}</option>
                                    </select>
                                </div>
                                {{-- 부스 검색 기능은 개선이 더 필요해서 우선 검색창과 검색 버튼은 주석 처리 --}}
                                <div class="input-group">
                                    <input type="hidden" id="scroll_value" value="con_hide">
                                    <input class="form-control mr-sm-2 w-40 mx-2" type="search" name="keyword_values"
                                           placeholder="{{ trans('booth_list.검색어를 입력해주세요.') }}"
                                           aria-label="Search"
                                           value="@if(!empty(request('keyword_values'))){{request('keyword_values')}}@endif">
                                    <button class="btn btn-primary my-2 my-sm-0" type="submit">{{ trans('booth_list.부스명 검색') }}</button>
                                </div>
                                <a href="{{route('booth.index')}}" class="btn btn-primary ms-2">
                                    <i class="mdi mdi-autorenew"></i>
                                </a>
                            </div>
                        </div>
                        <h4 class="page-title">부스</h4>
                    </div>
                </div>
            </div>
            <!-- end page title -->

            <!-- 상세검색 -->
            <!-- end 상세검색 -->
        </div>
    </form>

    <div class="row justify-content-center">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="row mb-2">
                            <div class="col-sm-4">
                                <h4 class="header-title mt-2 mb-3">List</h4>
                            </div>

                            <div class="col-sm-8">
                                <div class="text-sm-end">
                                    <button class="btn btn-success mb-2" type="button" onclick="excelmodal()"><i class="dripicons-document"></i> {{ trans('booth_list.일괄업로드') }}</button>
                                    <button type="button" class="btn btn-primary mb-2" title="인쇄소에 넘길 배너PDF파일 묶음을 다운로드 받습니다." onclick="schoolbannerpopup()">{{ trans('booth_list.배너내려받기') }}</button>
                                    <button type="button" class="btn btn-primary mb-2" data-bs-toggle="modal" data-bs-target="#standard-modal">{{ trans('booth_list.이전 박람회에서 부스목록 복사') }}</button>
                                    <a href="{{route('booth.create')}}?set={{request()->input('set')}}&page={{request()->input('page')}}" class="btn btn-danger mb-2"><i class="mdi mdi-plus-circle me-2"></i>Add </a>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <div class="dataTables_wrapper dt-bootstrap4 no-footer">
                                <!-- S: Table Data -->
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table class="table table-centered w-100 dt-responsive nowrap dataTable no-footer dtr-inline collapsed">
                                            <thead>
                                                <th style="width:10%">No.</th>
                                                <th class="sorting{{ !empty(request()->input('sort')) ? '_'.request()->input('sort') : '' }}" style="width:10%">{{ trans('booth_list.부스번호') }}</th>
                                                <th style="width:10%">{{ trans('booth_list.유학종류') }}</th>
                                                <th style="width:30%">{{ trans('booth_list.부스이름 (검색시 영문 대소문자 구분)') }}</th>
                                                <th style="width:10%">{{ trans('booth_list.학교배너명') }}</th>
                                                <th style="width:10%">{{ trans('booth_list.학교 담당자') }}</th>
                                                <th style="width:10%">{{ trans('booth_list.부스 담당 EC') }}</th>
                                                <th style="width:10%">{{ trans('booth_list.인트라넷 상담 EC') }}</th>
                                                <th style="width:10%">{{ trans('booth_list.운영일') }}</th>
                                                <th style="width:5%"></th>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- E: Table Data -->

                                <!-- S: Pagination -->
                                <div class="row">
                                    <div class="col-sm-12 col-md-5">
                                        <div class="dataTables_info"></div>
                                    </div>
                                    <div class="col-sm-12 col-md-7">
                                        <div class="dataTables_paginate paging_simple_numbers">
                                            <ul class="pagination pagination-rounded" id="pagination-area"></ul>
                                        </div>
                                    </div>
                                </div>
                                <!-- E: Pagination -->
                            </div>
                        </div> <!-- end table-responsive-->
                    </div> <!-- end card-body-->
                </div> <!-- end card-->
            </div> <!-- end col-->
        </div>
    </div>

    {{-- 부스목록복사팝업 --}}
    <div id="standard-modal" class="modal fade" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="text-align:left" id="standard-modalLabel">{{ trans('booth_list.이전 박람회에서 부스목록 복사') }}<br/><span class="text-danger fs-6">※ {{ trans('booth_list.복사하기 전 부스목록을 반드시 확인해주세요.') }}</span></h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                </div>
                <div class="modal-body position-sticky" style="height:500px;overflow-y:scroll">  
                    <table id="basic-datatable" class="table dt-responsive nowrap w-100">
                        <thead class="sticky-top">
                            <tr>
                                <th colspan="4" class="p-0 pb-1">
                                    <div class="input-group sticky-top">
                                        <select class="form-select" id="location_sel" aria-label="Example select with button addon">
                                            <option value="">1. {{ trans('booth_list.복사할 박람회 선택') }}</option>
                                        </select>
                                        <button class="btn btn-primary" type="button" id="addition_origin_btn">추가</button>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th colspan="4" class="p-0 pb-1">
                                    <div class="input-group sticky-top">
                                        <select class="form-select" id="location_sel2" aria-label="Example select with button addon">
                                            <option value="">2. {{ trans('booth_list.복사받을 박람회 선택') }}</option>
                                        </select>
                                        {{-- <button class="btn btn-primary" type="button" id="addition_target_btn">추가</button> --}}
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th style="width:10%"><a href="javascript:all_booth_del();" title="일괄제거" class="action-icon"><i class="mdi mdi-close-box text-danger"></i></a></th>
                                {{-- <th style="width:30%" class="text-center align-middle">부스번호</th> --}}
                                <th style="width:35%" class="text-center align-middle">{{ trans('booth_list.유학종류') }}</th>
                                <th style="width:55%" class="text-center align-middle">{{ trans('booth_list.부스이름') }}</th>
                            </tr>
                        </thead>
                        <tbody id="booth-list"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <strong class="me-2">{{ trans('booth_list.총') }}총 <nobr class="text-danger" id="reciever_cnt">0</nobr>{{ trans('booth_list.부스') }}</strong>
                    <button type="button" id="sms-send-btn" class="btn btn-success">{{ trans('booth_list.복사하기') }}</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ trans('booth_list.닫기') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div id="banner-modal" class="modal fade" role="dialog" aria-labelledby="standard-modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" style="text-align:left" id="standard-modalLabel">배너 디자인 PDF 일괄 내려받기</h4>
                </div>
                <div class="modal-body position-sticky p-0" style="height:500px;overflow-y:scroll">  
                    <table id="basic-datatable" class="table table-bordered dt-responsive nowrap w-100">
                        <thead class="sticky-top">
                            <tr>
                                <th colspan="4" class="p-0 pb-1">
                                    <div class="input-group sticky-top">
                                        <select class="form-select" id="fair_sel" aria-label="Example select with button addon"></select>
                                    </div>
                                </th>
                            </tr>
                            <tr class="primary-bg">
                                <th style="width:6%;"><input type="checkbox" id="all_check" title="일괄체크" onclick="booth_all_chk()"></th>
                                <th style="width:44%">부스명</th>
                                <th style="width:44%">배너명</th>
                                <th style="width:6%"></th>
                            </tr>
                        </thead>
                        <tbody id="schoolbanner-list"></tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <strong class="me-2" id="banner-tot-txt"></strong>
                    <button onclick="download_zip()" type="button" id="banner-tot-download" class="btn btn-success">일괄다운로드(<nobr></nobr>)</button>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">닫기</button>
                </div>
            </div>
        </div>
    </div>

    @include('booth.modal')

@endsection

@section('script')
    <script>
        let keyword_values = '{{request()->input('keyword_values')}}';
        let sch_location = '{{request()->input('location')}}';
        let sch_page = '{{request()->input('page')}}';
        let booth_type_list = {!! json_encode(config('var.booth_type_list')) !!};
        let sort = '{{ request()->input('sort') }}';
        let fm_team = '{{Auth::user()->fm_team}}';
    </script>
    <script src="/template/js/jquery.number.min.js"></script>
    <script src="/js/booth/list.js?v={{ config('var.js_version') }}"></script>
    <script>
        function excelmodal(){
            $('#excel-upload-modal').modal('show');
        }

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        function schoolbannerpopup(){
            var selectedValue = $('#id_sch_location').val();
            if ($('#fair_sel option[value="' + selectedValue + '"]').length > 0) {
                $('#fair_sel').val(selectedValue).trigger('change');
            } else {
                $('#fair_sel').val('').trigger('change');
            }
            $('#banner-modal').modal('show');
        }

        function booth_all_chk(){
            $('.all_check').prop('checked', $('#all_check').prop('checked'));
            footer_txt();
        }
        
        function booth_sel_chk(){
            if ($('.all_check:checked').length == $('.all_check').length) {
                $('#all_check').prop('checked', true);
            } else {
                $('#all_check').prop('checked', false);
            }
            footer_txt();
        }

        function footer_txt(){
            var totcnt = $('.all_check').length;
            var concnt = $('[data-nocn="Y"]').length;
            var chkcnt = $('input.all_check:checked:not(:disabled)').length;
            
            $('#banner-tot-txt').text('총 '+totcnt+'개의 부스 중 '+chkcnt+'개 등록됨');
            $('#banner-tot-download nobr').text(chkcnt);
            $('#banner-tot-download').prop('disabled', (chkcnt == 0 ? true : false));
        }

        function download_zip(){
            var booth_idxs = $('input.all_check:checked:not(:disabled)').map(function() {
                return $(this).data('val');
            }).get();

            if($('#fair_sel').val() != '' && booth_idxs.length > 0){
                fetch('/schoolbanner/download-zip/' + $('#fair_sel').val(), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({
                        fair_sel: $('#fair_sel').val(),
                        booth_idxs: booth_idxs
                    })
                })
                .then(response => response.blob())
                .then(blob => {
                    var url = window.URL.createObjectURL(blob);
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = 'booths_' + $('#fair_sel').val() + '.zip';
                    document.body.appendChild(a); // 필요한 경우에만 append
                    a.click();
                    a.remove(); // 다운로드 후 삭제
                    window.URL.revokeObjectURL(url);
                })
                .catch(error => console.error('Error:', error));
            }
        }

        $(document).ready(function() {
            $.ajax({
                url: '/api/v1/booths/getofflinelocationinfo',
                method: 'GET',
                success: function(data) {
                    var $fairSel = $('#fair_sel');
                    $fairSel.empty();
                    $fairSel.append($('<option>', {
                        value: '',
                        text: '내려받을 박람회 선택'
                    }));
                    $.each(data.data, function(index, location) {
                        $fairSel.append($('<option>', {
                            value: location.location_idx,
                            text: location.location_title + ' ['+location.booth_cnt+']'
                        }));
                    });
                }
            });

            let banner_list;
            $.ajax({
                url: '/api/v1/booths/getbannerlist',
                method: 'GET',
                success: function(data) {
                    banner_list = data.data;
                }
            });


            $('#fair_sel').change(function(){
                var location_idx = $(this).val();
                $.ajax({
                    url: '/api/v1/booths/getofflineboothlist/'+location_idx,
                    method: 'GET',
                    success: function(data) {
                        var dom = '';
                        if($(data.data).length > 0){
                            $(data.data).each(function(k, v){
                                var rowcolor = v.schoolbanner_id ? '' : ' class="text-danger"';
                                var dnone = v.schoolbanner_id ? '' : ' d-none';
                                var dable = v.schoolbanner_id ? '' : ' disabled';
                                var sbn = v.schoolbanner_name;
                                if(!v.schoolbanner_id){
                                    sbn  = '<select class="form-control select2 bannner-select" data-idx="'+v.booth_idx+'" data-toggle="select2">';
                                    sbn += '<option value="">등록안됨</option>';
                                    $(banner_list).each(function(k2, v2){
                                        sbn += '<option value="'+v2.id+'">'+v2.name+'</option>';
                                    });
                                    sbn += '</select>';
                                }
                                dom += '<tr style="height:50px" data-nocn="'+(!v.schoolbanner_id ? 'Y' : 'N')+'">';
                                dom += '    <td class="pb-1 pt-1 align-middle"><input type="checkbox" onclick="booth_sel_chk()" class="all_check'+dnone+'"'+dable+' data-val="'+v.booth_idx+'"></td>';
                                dom += '    <td class="pb-1 pt-1 align-middle booth-title"><a '+rowcolor+' href="/booth/update?idx='+v.booth_idx+'" target="_blank">'+v.booth_title+' <i class="dripicons-link"></i></a></td>';
                                dom += '    <td class="pb-1 pt-1 align-middle">'+sbn+'</td>';
                                dom += '    <td class="pb-1 pt-1 align-middle"><a href="/schoolbanner/download-pdf/'+v.booth_idx+'" class="dripicons-download'+dnone+'" title="pdf 다운로드"></a></td>';
                                dom += '</tr>';
                            })
                        }else{
                            dom = '<tr style="height:100px"><td colspan="4" class="pb-1 pt-1 align-middle text-center">등록 된 부스가 없습니다.</td></tr>';
                        }
                        $('#schoolbanner-list').html(dom);
                        $('.bannner-select').select2().on('change', function(e) {
                            var banner_id = $(this).val();
                            var booth_id = $(this).data('idx');
                            var banner_txt = $(this).find('option:selected').text();
                            if(banner_id){
                                var obj = $(this);
                                $.ajax({
                                    url: '/api/v1/booths/setbanner/'+booth_id,
                                    method: 'POST',
                                    data: {
                                        banner_id: banner_id
                                    },
                                    success: function() {
                                        obj.parent().parent().attr('data-nocn', 'N');
                                        obj.parent().parent().find('.booth-title a').removeClass('text-danger');
                                        obj.parent().parent().find('.dripicons-download').removeClass('d-none');
                                        obj.parent().parent().find('.all_check').removeClass('d-none');
                                        obj.parent().parent().find('.all_check').prop('disabled', false);
                                        obj.parent().html(banner_txt);
                                        footer_txt();
                                    }
                                });
                            }
                        });
                        if($(data.data).length > 0) $('#all_check').prop('checked', false).trigger('click');
                        footer_txt();
                    }
                });
            });
        });
    </script>
@endsection