@extends('.frontend.default')

@section('content')
    <div class="search_service_sec">
        <div class="search_service_text text-right">
{{--            <h2>搜尋及訂制服務</h2>--}}
            <img src="{{ asset('images/system/event_search_bg.png') }}" />
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="search_service_tab">
{{--                        <h2>搜尋及訂制服務</h2>--}}
                        <ul id="tabs" class="nav nav-tabs" role="tablist">
                            <li class="nav-item nav-item-a">
                                <a id="tab-A" href="#pane-A" class="nav-link active" data-toggle="tab" role="tab">現有服務</a>
                            </li>
                            <li class="nav-item nav-item-b">
                                <a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">訂制服務</a>
                            </li>
                        </ul>

                        <div id="content" class="tab-content" role="tablist">
                            <div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
                                <div class="card-body">
                                    <div class="search_event_options">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <input type="text" placeholder="輸入服務關鍵字" name="event_keyword"
                                                    class="event_keyword border-primary text-size-l" required />
                                            </div>
                                            <div class="col-12" style="margin-bottom: 15px">
                                                <div class="row">
                                                    <div class="col-12 col-sm-6 col-xl-3 pr-lg-0">
                                                        <div class="object_select select_box">
                                                            @include('frontend.template.event.options.target',[
                                                            'class'=>'event_target_id'
                                                            ])
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-xl-3 pr-lg-0">
                                                        <div class="service_select select_box">
                                                            @include('frontend.template.event.options.method',[
                                                            'class'=>'event_method_id'
                                                            ])
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-xl-3 pr-lg-0">
                                                        <div class="nature_service_select select_box">
                                                            @include('frontend.template.event.options.class',[
                                                            'class'=>'event_class_id'
                                                            ])
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 col-xl-3">
                                                        <div class="nature_service_select select_box">
                                                            @include('frontend.template.event.options.is_personal_service',[
                                                            'class'=>'is_personal'
                                                            ])
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="col-md-12">
                                                <div class="custom-select-form">
                                                    @include('frontend.template.unit.list',[
                                                    'id'=>'single',
                                                    'class'=>'unit_id',
                                                    ])
                                                </div>
                                            </div>

                                            <div class="col-12 mb-0 mb-sm-3">
                                                <div class="row">
                                                    <div class="col-12 col-sm-6">
                                                        <div class="radio_btn" style="padding: 0">
                                                            <label class="checkcontainer">
                                                                <input type="checkbox" name="radio" class="is_free_event"
                                                                       id="is_free_event" />
                                                                <span class="radiobtn" style="top:1px;"></span>
                                                                <span class="text-color-base-2 text-size-l">我想搜尋免費服務</span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 col-sm-6 text-right d-none d-sm-block">
                                                        <button class="reset" style="background: transparent;cursor: pointer;">
                                                            <i class="far fa-times-circle"></i><span class="clear_filter_button text-a-color-base-2 text-size-s">清除搜尋條件</span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 text-center mb-3 mb-sm-0">
                                                <button class="btn btn-large submit_search_event_form Submit btn-primary" style="padding-right: 15px">
                                                    <img style="width: 16px;" src="{{ url('images/icon/search.svg') }}"
                                                         alt="search"> 搜尋服務
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    {{--                                            <div class="col-12 col-sm-6 text-left d-block d-sm-none">--}}
                                    <div class="text-left d-block d-sm-none">
                                        <button class="reset" style="background: transparent;cursor: pointer;">
                                            <i class="far fa-times-circle"></i><span class="clear_filter_button text-a-color-base-2 text-size-s">清除搜尋條件</span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
                                <div class="card-body">
                                    <div class="customized_service">
                                        <form>
                                            <div class="row">
                                                <div class="col-lg-4" style="margin-bottom: 15px">
                                                    <div class="object_select select_box">
                                                        @include('frontend.template.event.options.target',[
                                                        'class'=>'quotation_inquiry_event_target_id'
                                                        ])
                                                    </div>
                                                </div>
                                                <div class="col-lg-4" style="margin-bottom: 15px">
                                                    <div class="service_select select_box">
                                                        @include('frontend.template.event.options.method',[
                                                        'class'=>'quotation_inquiry_event_method_id'
                                                        ])
                                                    </div>
                                                </div>
                                                <div class="col-lg-4" style="margin-bottom: 15px">
                                                    <div class="nature_service_select select_box">
                                                        @include('frontend.template.event.options.class',[
                                                        'class'=>'quotation_inquiry_event_class_id'
                                                        ])
                                                    </div>
                                                </div>
                                                <div class="col-md-12" style="margin-bottom: 15px">
                                                    <div class="date_range" style="margin-bottom: 0">
                                                        <label>服務日期範圍</label>
                                                        <ul>
                                                            <li>
                                                                <span>
                                                                    <i class="fas fa-calendar-alt text-primary" style="font-size: 20px"></i>
                                                                </span>
                                                                <input type="date"
                                                                    name="quotation_inquiry_start_date"
                                                                    class="form-control_01 quotation_inquiry_start_date"
                                                                    min="{{\Carbon\Carbon::now()->format('Y-m-d')}}"
                                                                    value="" required /></li>
                                                            <li><span>至</span><input type="date"
                                                                    name="quotation_inquiry_end_date"
                                                                    class="form-control_01 quotation_inquiry_end_date"
                                                                    min="{{\Carbon\Carbon::now()->format('Y-m-d')}}"
                                                                    value="" required /></li>
                                                            <li><input type="number" placeholder="參與人數"
                                                                    name="quotation_inquiry_refer_member"
                                                                    class="form-control_01 quotation_inquiry_refer_member"
                                                                    value="" required />
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-md-12" style="margin-bottom: 15px">
                                                    <textarea placeholder="輸入服務內容" name="quotation_inquiry_content"
                                                        class="form-control_01 quotation_inquiry_content col-md-12 border-input-2-base-2 border-radius-15 h-100"
                                                        required></textarea>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="custom-select-form inquiry">
                                                        @include('frontend.template.unit.list',[
                                                            'id'=>'single-two',
                                                            'class'=>'quotation_inquiry_unit_id unit_id',
                                                            'label' => '查詢任何單位的服務'
                                                            ])
                                                        <div class="tooltip_main">
                                                            <div class="tooltip">
                                                                <img src="{{ url('images/icon/question-circle.png') }}"
                                                                    alt="">
                                                                <span
                                                                    class="tooltiptext">如您沒有選取指定查詢單位，系統將會把報價查詢指派到已和您配對的學校聯絡專員，更有效為你配對合適的校本服務。</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 text-center">
                                                    <div class="quotation_popup">
                                                        <button type="button"
                                                            class="btn Submit quotation_inquiry_submit btn-primary">送出報價查詢
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('.frontend.template.event.base_owl_event', $base_owl_event = [
    'class' => 'featured_recommendations_sec',
    //'title_before_img' => '<img src="'.asset('/images/home/star.png').'" style="margin-bottom: 5px;" alt="" />',
    'title' => '精選推介',
    'title_after_img' => '',
    'events' => $data['featured_recommendations_sec'],
    'event_name_icon' => asset('/images/home/star.png'),
    ])

    <div>
        <div class='titel'>
            <h1 class="text-center title-base" style="margin:70px 0 35px 0">最新上架</h1>
        </div>
        <div class="container">
            <div id="new_recommendation" class="row justify-content-between" style="margin:auto">

            </div>
        </div>
        <div class="text-center" style="margin-bottom: 80px">
            <div class="more_btn">
                <a class="text-color-base-5" id="new_recommendation_more">更多</a>
            </div>
            <i id="new_recommendation_more_spanner" class="fa fa-spinner fa-pulse fa-2x laoading-icon"
                style="display:none"></i>
            {{-- <img src="" alt=""> --}}
        </div>
    </div>
@endsection

@section('pagescript')
    @include("frontend.includes.google_recaptcha")
    <script>
        $(document).ready(function() {
            if(location.hash == '#custom_inquiry'){
                $('#tab-B').click();
            }

            $('input:disabled').css('background-color', '#D5D5D5');
            $('input:disabled').css('border', 'none');

            getNewRecommendation();
            $('#new_recommendation_more').click(function() {
                getNewRecommendation();
            });

            $("#single, #single-two").select2({
                placeholder: "搜尋任何單位的服務",
                allowClear: true
            });

            // $('.select_box').find('.select-styled').css('font-size','12px');
        });

        $('.search_service_sec #content .reset').click(function() {
            let search_part = $("#pane-A");
            search_part.find('.event_keyword').val('');

            search_part.find('.checkcontainer .radiobtn:after').css('display', 'none');
            search_part.find('.is_free_event').removeAttr('checked');
            search_part.find('.unit_id').val('');

            search_part.find('.select2-selection__rendered').text('');

            $("<span />", {
                class: 'select2-selection__placeholder',
                text: '搜尋任何單位的服務'
            }).appendTo(search_part.find('.select2-selection__rendered'));

            search_part.find(".select-item").each(function(index, selector) {
                var $styledSelect = $(selector).next("div.select-styled");
                $styledSelect.text($(selector).children("option").eq(0).text());

                $(selector).val('');
            });
        });

        $('.normal_login,.close').click(function() {
            $('#custom_with_login').hide();
            $('#register_then_submit').hide();

            $('.modal-body.login_main').show();
            $('#login_submit').show();
            $('#base_register').show();
        });

        $('#password,#email').keypress(function(e) {
            if (e.which == 13 && $('#login_submit:visible').length == 0) {
                $('#custom_with_login').click();
                return false; //<---- Add this line
            }
        });

        var new_recommendations_page = 1;

        function getNewRecommendation() {
            $('#new_recommendation_more').hide();
            $('#new_recommendation_more_spanner').show();

            $.get("{{ route('.api.event.new_recommendation') }}" + '/?page=' + new_recommendations_page, function(
                html_event_cards) {
                    let old_new_recommendation = $('#new_recommendation').html();

                    $('#new_recommendation').html('');
                    $('#new_recommendation').html(old_new_recommendation + html_event_cards);

                    $('#new_recommendation_more').show();
                    $('#new_recommendation_more_spanner').hide();
            });
            new_recommendations_page = new_recommendations_page + 1;
        }

        $('.quotation_inquiry_submit').click(function() {
            let option = getQuotationInquiry();

            if (option.quotation_inquiry_start_date < 1 || option.quotation_inquiry_end_date.length < 1) {
                failMessage('請輸入服務日期範圍');
                return;
            }

            $('#loginPopupModal').click();
            $('#register_then_submit').show();
            $('#custom_with_login').show();
            $('#login_submit').hide();
            $('#base_register').hide();

            @if (!App\Models\School\Teacher\Teacher::auth()->check())
                failMessage('請登入後再查詢');
                return;
            @endif

            confirmSubmitQuotationInquiryPopup(this);
        });

        function confirmSubmitQuotationInquiryPopup(self){
            let option = getQuotationInquiry();

            let message = '';
            message = "<p>以下是您的訂制服務報價資訊：</p>";

            let start_date = new Date(option['quotation_inquiry_start_date']);
            let end_date = new Date(option['quotation_inquiry_end_date']);
            let date_range = String(start_date.getDate()).padStart(2,0) + '/' + String(start_date.getMonth() + 1).padStart(2,0) + '/' + start_date.getFullYear();
            date_range += ' 至 ' + String(end_date.getDate()).padStart(2,0) + '/' + String(end_date.getMonth() + 1).padStart(2,0) + '/' + end_date.getFullYear();
            message += "<p>" + "服務日期：由" +  date_range + "</p>";
            message += "<p>" + "服務人數：" + (option['quotation_inquiry_refer_member'] ?  (option['quotation_inquiry_refer_member'] + '人') : '-') + "</p>";
            message += "<p>" + '服務對象：' + ($('.quotation_inquiry_event_target_id option:selected').val() ? $('.quotation_inquiry_event_target_id option:selected').text() :  '-' ) + "</p>";
            message += "<p>" + '服務形式：' + ($('.quotation_inquiry_event_method_id option:selected').val() ? $('.quotation_inquiry_event_method_id option:selected').text() :  '-' ) + "</p>";
            message += "<p>" + '服務性質：' + ($('.quotation_inquiry_event_class_id option:selected').val() ? $('.quotation_inquiry_event_class_id option:selected').text() :  '-' ) + "</p>";
            message += "<p style='word-break:break-all'>" + "服務內容：" + (option['quotation_inquiry_content'] ?? '-') + "</p>";

            let unit_name = $('.quotation_inquiry_unit_id option:selected').val() == 'null' ? '分派到已配對的單位' : $('.quotation_inquiry_unit_id option:selected').text();
            message += "<p>" + "查詢服務單位：" + unit_name + "</p>";

            bootbox.confirm({
                size: 'large',
                title: '<h1>訂制服務</h1>',
                message: message,
                closeButton: false,
                buttons: {
                    cancel: {
                        label: '修改報價要求',
                        className: 'btn-inquiry-custom-cancel'
                    },
                    confirm: {
                        label: '確認送出報價要求',
                        className: 'btn-inquiry-custom-confirm'
                    },
                },
                callback: function (result) {
                    if(result){
                        submitQuotationInquiry(self, "{{ route('.api.quotation.inquiry.custom') }}", option);
                    }
                }
            });
        }

        function submitQuotationInquiry(self, url, option, is_new_teacher) {
            callAjax(self,
                {
                    url: url,
                    method: "post",
                    data: option,
                },
                function(result) {
                if(!result['status'] || result['status'] !== 'success'){
                    failMessage("{{ __('teacher/teacher.authentication_confirm.miss_file')  }}")
                    return ;
                }
                    let message = '';
                    message += "<p class='pt-2'>" + "您的報價查詢已經成功遞交到 " + result['unit_name'] + " 單位，以下是您的報價資料：" + "</p>";
                    message += "<p class='pt-2'>" + "報價工作編號：" + result['quotation_inquiry_custom_code'] + "</p>";
                    message += "<p class='pt-2'>" + "遞交報價日期：" + result['created_at'] + "</p>";
                    message += "<p class='pt-2'>" + "我們將會在 " + "{{ config('school_portal.quotation_inquiry.frontend.working_day',5) }}" + " 工作天內以電郵通知您有關報價詳情。" + "</p>";
                    @if (!empty(App\Models\School\Teacher\Teacher::anyUser()))
                        message += "<p>您可以隨時按 <a class='btn btn-primary border-radius-20' href='" + result['quotation_inquiry_url'] + "'>「報價紀錄」</a> 查看報價進度</p>";
                    @endif

                    bootbox.hideAll();
                    bootbox.dialog({
                        size: 'large',
                        title: '<h1>成功送出訂制服務報價要求</h1>',
                        message: message,
                        closeButton: false,
                        buttons:{
                            confirm:{
                                label: '確定',
                                className: 'btn-inquiry-custom-confirm',
                                callback: function () {
                                    @if (empty(App\Models\School\Teacher\Teacher::anyUser()))
                                        if(is_new_teacher){
                                            location.href = "{{ route('registered.verify_message') }}"
                                        }else{
                                            loginAjax(self,option['email'],option['password'])
                                        }
                                    @else
                                        location.reload()
                                    @endif
                                }
                            }
                        }
                    });
                }
            );
        }

        function showCreateTeacherMessage(){
            let message = '';
            message += "<p class='pt-2'>" + "歡迎，您已成功建立帳戶!" + "</p>";
            message += "<p class='pt-2'>" + "請立即上傳您的教師證明文件以開通報價管理功能。" + "</p>";
            message += "<a href='{{route('login')}}' class='pt-2'>" + "立即上傳" + "</a>";

            bootbox.dialog({
                size: 'large',
                title: '<h1>成功建立帳戶</h1>',
                message: message,
                closeButton: false,
                buttons: {
                    confirm: {
                        label: '確定',
                        className: 'btn-inquiry-custom-confirm',
                        callback: function () {
                            location.href = "{{route('registered.verify_message')}}"
                        }
                    }
                }
            });
        }

        function getQuotationInquiry() {
            let quotation_inquiry_content = $('.quotation_inquiry_content').val();
            return {
                'event_target_id': $('.quotation_inquiry_event_target_id option:selected').val(),
                'event_method_id': $('.quotation_inquiry_event_method_id option:selected').val(),
                'event_class_id': $('.quotation_inquiry_event_class_id option:selected').val(),
                'quotation_inquiry_content': quotation_inquiry_content,
                'quotation_inquiry_start_date': $('.quotation_inquiry_start_date').val(),
                'quotation_inquiry_end_date': $('.quotation_inquiry_end_date').val(),
                'quotation_inquiry_refer_member': $('.quotation_inquiry_refer_member').val(),
                'quotation_inquiry_unit_id': $('.quotation_inquiry_unit_id option:selected').val() === 'null' ? '' : $('.quotation_inquiry_unit_id option:selected').val(),
                'school_id': $('#school_selector option:selected').val(),
                'quotation_inquiry_login_password': $('#quotation_inquiry_login_password').val(),
                'quotation_inquiry_login_password_confirmed': $('#quotation_inquiry_login_password_confirmed').val(),
                'surname': $('#quotation_inquiry_teacher_surname').val(),
                'given_name': $('#quotation_inquiry_teacher_given_name').val(),
                'phone': $('#quotation_inquiry_contact_number').val(),
            };
        }
    </script>
@endsection