@extends('.frontend.default')
@section('og_url')
    {{\Request::url()}}
@endsection
@section('og_title')
    {{$data['detail']['title']}}
@endsection
@section('og_description')
    {{$data['detail']['content']}}
@endsection
@section('og_image')
    {{Storage::disk('uploads')->url($data['detail']['image_path_detail']).'?v=1'}}
@endsection
@section('content')
    <div class="service_details_sec details_page">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-10 offset-lg-1">
                    <div class="row">
                        <div class="col-12 mb-5">
                            <a class="back_button" href="#" onclick="history.length > 1 ? history.back() : '{{route('.event.search')}}'"><i
                                        class="fa fa-angle-left" aria-hidden="true"></i>
                                @if(!empty($is_search_result))
                                    返回搜尋結果
                                @else
                                    返回上一頁
                                @endif
                            </a>
                        </div>

                        <div class="col-12">
                            <div class="service_details">
                                <div class="service_details_image">
                                    <img src="{{ Storage::disk('uploads')->url($data['detail']['image_path_detail']).'?v=1' }}" width="100%"
                                         height="auto" alt="">
                                </div>

                                <div class="service_details_inner">

                                    <div class="row">
                                        <h1 class="col-12 col-sm-6 col-md-8">
                                            <p class="title-base">{{ $data['detail']['title'] }}</p>
                                        </h1>

                                        <div class="col-12 col-sm-6 col-md-4 my-2 my-md-0">
                                            @foreach ($data['targets'] as $event_target)
                                                <div class="text-center border-radius-5 ml-md-auto"
                                                     style="width:137px;height: 40px;line-height: 37px; border: 2px solid #e1805c;color: #e1805c; background-color: rgba(251, 143, 103, 0.5);">{{ $event_target['nameLanguage'] }}</div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div id="event_details" class="col-12 col-lg-11 mt-0 mt-sm-2">
                                            <div class="service_details_content">
                                                <div class="row">
                                                    <div class="col-12 col-sm-auto">
                                                        <div class="row">
                                                            @foreach ($data['classes'] as $class)
                                                                <div class="col-auto pr-0">
                                                                    @include('frontend.template.event.tag',['class'=>'mt-2 mt-sm-0 mr-0','id'=>'','href'=>route('.event.results').'?event_class_id='.$data['classes'][0]['id'],'text'=>$class['nameLanguage']])
                                                                </div>
                                                            @endforeach

                                                            @foreach ($data['methods'] as $methods)
                                                                <div class="col-auto pr-0">
                                                                    @include('frontend.template.event.tag',['class'=>'mt-2 mt-sm-0 mr-0','id'=>'','href'=>route('.event.results').'?event_method_id='.$data['methods'][0]['id'],'text'=>$methods['nameLanguage']])
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                    @if ($data['detail']['is_personal'] == App\Models\Event\Event::IS_PERSONAL_NO && $has_service_school_value > 0)
                                                        <div class="col-12 col-sm-auto mt-2 mt-sm-0">
                                                            <span class="text-secondary"
                                                                  style="vertical-align: sub">參與報價學校：{{ $has_service_school_value }}+</span>
                                                        </div>
                                                    @endif
                                                </div>

                                                <ul>
                                                    <li>
                                                <span>
                                                    <i class="fas fa-city"></i>
                                                </span>
                                                        舉辦單位：<a href="{{ route('.event.results').'?unit_id='.$data['unit']['id'] }}"
                                                                style="display: unset;background: unset;color: #364a8e;padding: unset;margin: unset;float: unset;">
                                                            {{ $data['unit']['c_unitname'] }}
                                                        </a>
                                                    </li>
                                                    <li>
                                                <span>
                                                    <i class="fas fa-location-arrow" style="font-size: 20px"></i>
                                                </span>
                                                        服務地點：
                                                        {{ $data['detail']['active_address'] == 'other' ? $data['detail']['other_active_address'] : __('event/active_address.' . $data['detail']['active_address']) }}
                                                    </li>
                                                    <li>
                                                <span>
                                                    <i class="fa fa-user" style="font-size: 20px"></i>
                                                </span>
                                                        服務對象：
                                                        @foreach ($data['targets'] as $index => $event_target)
                                                            {{ $event_target['nameLanguage'] }}
                                                            @if ($index + 1 !== count($data['targets']))
                                                        ,
                                                            @endif
                                                        @endforeach
                                                    </li>
                                                    <li>
                                                <span>
                                                    <i class="far fa-clipboard" style="font-size: 20px"></i>
                                                </span>
                                                        <div class="d-inline-block" style="vertical-align: top">服務內容：</div>
                                                        <div class="d-inline-block w-75">@nl2br($data['detail']['content'])</div>
                                                    </li>
                                                    <li>
                                                <span>
                                                    <i class="fas fa-star" style="font-size: 20px"></i>
                                                </span>
                                                        <div class="d-inline-block" style="vertical-align: top">報名須知：</div>
                                                        <div class="d-inline-block w-75">@nl2br($data['detail']['participation_details'])</div>
                                                    </li>
                                                    <li>
                                                <span>
                                                    <i class="far fa-calendar-alt" style="font-size:20px"></i>
                                                </span>
                                                        @if ($data['detail']['full_year'] == \App\Models\Event\Event::ENUM_YES)
                                                            全年服務
                                                        @else
                                                            截止報名日期：{{ $data['detail']['deadline'] }}
                                                        @endif
                                                    </li>
                                                    @if ($data['detail']['show_cost'] == \App\Models\Event\Event::ENUM_YES)
                                                        <li>
                                                    <span>
                                                        <i class="fas fa-dollar-sign" style="font-size: 20px"></i>
                                                    </span>
                                                            收費：
                                                            @if ($data['detail']['is_cost_free'] == \App\Models\Event\Event::ENUM_YES)
                                                            免費
                                                            @else
                                                            HK${{ number_format($data['detail']['refer_cost']) }} /
                                                                @if ($data['detail']['refer_cost_type'] == \App\Models\Event\Event::REFER_COST_TYPE_BY_MINUTE)
                                                                    {{ number_format($data['detail']['refer_cost_minute']) }}
                                                                @endif
                                                                {{ trans('backpack::event.option.refer_cost_type.' . $data['detail']['refer_cost_type']) }}
                                                            @endif
                                                        </li>
                                                    @endif
                                                </ul>
                                            </div>
                                        </div>
                                        @if ($data['detail']['is_personal'] == App\Models\Event\Event::IS_PERSONAL_NO)
                                            <div id="inquiry_form" class="col-12 col-lg-11 p-2" style="margin-top: 50px;margin-left:20px">
                                                <div class="service_date_range" style="box-shadow:0 3px 8px rgb(0 0 0 / 24%)">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <h1 class="mb-3">
                                                                報價內容 </h1>
                                                            <div class="date_range">
                                                                <label>服務日期範圍</label>
                                                                <ul>
                                                                    <li>
                                                                <span>
                                                                    <i class="fas fa-calendar-alt" style="font-size: 20px;"></i>
                                                                </span>
                                                                        <input type="date" placeholder="05/08/2020" name="event_start_date"
                                                                               class="form-control_01 event_start_date"
                                                                               min="{{\Carbon\Carbon::now()->format('Y-m-d')}}" style="height: 30px"
                                                                               required/>
                                                                    </li>
                                                                    <li><span>至</span><input type="date" placeholder="10/08/2020"
                                                                                             name="event_end_date"
                                                                                             class="form-control_01 event_end_date"
                                                                                             min="{{\Carbon\Carbon::now()->format('Y-m-d')}}"
                                                                                             style="height: 30px" required/></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="date_range">
                                                                <label>參與人數</label>
                                                                <ul>
                                                                    <li>
                                                                <span>
                                                                    <i class="fas fa-user-alt" style="font-size: 20px;"></i>
                                                                </span>
                                                                        <input type="number" name="refer_event_member"
                                                                               class="form-control_01 refer_event_member" style="height: 30px"
                                                                               required/>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="date_range course">
                                                                <label>查詢內容</label>
                                                                <ul>
                                                                    <li>
                                                                        <span><i class="fas fa-pen" style="font-size: 20px;"></i></span>
                                                                        <textarea rows="2" class="form-control_01 event_remake" name="event_remake"
                                                                                  style="max-height: 100px" required></textarea>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-12">
                                                            <div class="quote_btn text-center">
                                                                <button type="button" class="btn Submit quotation_inquiry_submit btn-primary">
                                                                    送出報價查詢
                                                                </button>
                                                                <div class="modal quotation fade show" id="quotation_inquiry_submit_result"
                                                                     tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
                                                                     aria-modal="true" style="display: none;">
                                                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                                                        <div class="modal-content">
                                                                            <div class="modal-body">
                                                                                <button type="button"
                                                                                        class="close quotation_inquiry_submit_result_close"
                                                                                        data-dismiss="modal" aria-label="Close">
                                                                                    <span aria-hidden="true">×</span>
                                                                                </button>
                                                                                <div class="quotation_inner text-left text-sm-center">
                                                                                    <div class="text-center">

                                                                                        <i class="fas fa-check-circle"
                                                                                           style="font-size: 80px;color: white;background: #00cc99;border-radius: 50%;border: 10px solid #00cc99;"></i>
                                                                                        <h3>
                                                                                            您的報價查詢已經成功遞交到
                                                                                            <div id="quotation_inner_unit_name"
                                                                                                 class="text-primary d-inline-block">[]
                                                                                            </div>
                                                                                            ，以下是您的報價要求：
                                                                                        </h3>
                                                                                    </div>
                                                                                    <div class="row w-75 mx-auto text-left">
                                                                                        <div class="col-12">
                                                                                            <p>
                                                                                                <span>報價工作編號：</span>
                                                                                                <span id="quotation_inner_custom_code"></span>
                                                                                            </p>
                                                                                        </div>
                                                                                        <div class="col-12">
                                                                                            <p>
                                                                                                <span>遞交報價日期：</span>
                                                                                                <span id="quotation_inner_created_at"></span>
                                                                                            </p>
                                                                                        </div>
                                                                                        <div class="col-12">
                                                                                            <p>
                                                                                                <span>報價服務名稱：</span>
                                                                                                <span id="quotation_inner_event_name"></span>
                                                                                            </p>
                                                                                        </div>
                                                                                        <div class="col-12">

                                                                                            <p>我們將會在 {{ config('school_portal.quotation_inquiry.frontend.working_day',5) }} 工作天內以電郵通知您有關報價詳情。</p>
                                                                                            <p>您可以隨時按<a id="go_to_teacher_quotation_inquiry"
                                                                                                        class="btn btn-primary">「報價紀錄」</a> 查看報價進度</p>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>

                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        @if ($data['detail']['is_personal'] == App\Models\Event\Event::IS_PERSONAL_YES && !empty($data['detail']['personal_url']))
                                            <div class="col-lg-12 text-center mb-4">
                                                <div class='d-flex flex-column'>
                                                    <div>
                                                        <a href="{{ $data['detail']['personal_url'] }}" target="_black">
                                                            <button class="btn btn-primary Submit border-0 link_button">立即報名</button>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        @else
                                            @if (!empty($data['detail']['event_features']))
                                                <div class="col-lg-12">
                                                    <div class="features_service" style="margin-bottom: 0">
                                                        <label><img src="{{ asset('images/system/metro-info.svg').'?v=1' }}" alt="">服務特色</label>
                                                        <div name="Requirement" class="intro_course_inner">
                                                            @nl2br($data['detail']['event_features'])
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            @if (!empty($data['detail']['instructor_detail']))
                                                <div class="col-lg-12">
                                                    <div class="intro_course" style="margin-top: 30px">
                                                        <label class="introduction"><img
                                                                    src="{{ asset('images/system/chalkboard-teacher.svg').'?v=1' }}"
                                                                    alt="">導師簡介</label>
                                                        <div class="intro_course_inner">
                                                            @nl2br($data['detail']['instructor_detail'])
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            @if (!empty($data['detail']['frontend_remark']))
                                                <div class="col-lg-12">
                                                    <div class="intro_course" style="margin-top: 30px">
                                                        <label class="introduction">
                                                            <label style="width: 30px;text-align: center;"> <i class="fas fa-pencil-alt"
                                                                                                               style="font-size: 25px"></i></label>
                                                            備註</label>
                                                        <div class="intro_course_inner">
                                                            @nl2br($data['detail']['frontend_remark'])
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif

                                            @if (!empty($data['detail']['contact_us']))
                                                <div class="col-lg-12">
                                                    <div class="intro_course" style="margin-top: 30px">
                                                        <label class="introduction">
                                                            <label style="width: 30px;text-align: center;"> <i class="fas fa-user"
                                                                                                               style="font-size: 25px"></i></label>
                                                            查詢聯絡人資料</label>
                                                        <div class="intro_course_inner">
                                                            {!! nl2br($data['detail']->getContactUsWithMailTo($data['detail']['contact_us'])) !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            @endif
                                        @endif

                                    </div>
                                    <div class="row justify-content-end my-2">
                                        <div class="col-12 text-right">
                                            <a class="add_to_wishlist" data-event_id="{{ $data['detail']['id'] }}"
                                               style="cursor: pointer;padding-right: 5px">
                                                @php
                                                    $in_wishlist = !empty(Auth::guard('teacher')->user()) && Auth::guard('teacher')->user()->eventWishList->where('id', $data['detail']['id'])->count() > 0;
                                                @endphp
                                                <i class="{{$in_wishlist ? 'fas' : 'far'}} fa-heart"></i>
                                            </a>
                                            <a class="st-custom-button cursor-pointer" data-network="sharethis"
                                               data-url="{{ route('.event.details', ['event_id' => $data['detail']['id']]) }}">
                                                <i class="fas fa-share-alt" style="font-size: 20px"></i>
                                            </a>
                                        </div>
                                    </div>

                                    <div id="show_inquiry_form"
                                         class="d-none {{ $data['detail']['is_personal'] == App\Models\Event\Event::IS_PERSONAL_NO ? 'd-lg-block' : '' }}">
                                        <div style="writing-mode: vertical-rl;text-orientation: upright;position: relative;top: 35px;left: -10px;"><</div>
                                        <div id="show_inquiry_form_text" class="d-inline-block"
                                             style="writing-mode: vertical-rl;text-orientation: upright;position: relative;top: -5px;left: 10px;">立即報價
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>{{-- content row --}}
            <div class="row justify-content-between" style="margin-top: 30px; margin-bottom: 40px;">
                <div class="col-6 text-center">
                    @if(!empty($previous_event_url))
                        <a class="back_button px-4" href="{{ $previous_event_url }}">
                            <i class="fa fa-angle-left" aria-hidden="true"></i>上一個服務
                        </a>
                    @endif

                </div>
                <div class="col-6 text-center">
                    @if(!empty($next_event_url))
                        <a class="back_button px-4" href="{{ $next_event_url }}">
                            下一個服務<i class="fa fa-angle-right" aria-hidden="true"></i>
                        </a>
                    @endif
                </div>
            </div>{{-- next event row --}}
        </div>{{-- container --}}
    </div>
    @include('frontend.template.event.base_owl_event',[
    'title'=>'您可能感興趣',
    'class'=>'Popular_services_sec popular_service_details',
    'events'=> $you_may_by_like_event,
    ])
@endsection

@section('pagescript')
    <style>
      .link_button {
        width: 200px;
        height: 40px;
        font-size: 20px;
        background-color: rgb(57, 74, 137);
        border-radius: 15px;
        color: #ffffff;
      }

      .link_button:hover {
        background-color: #FFC235;
        color: #ffffff;
      }

      .link_button:focus {
        box-shadow: unset;
      }

      .event_remake {
        border: 1px solid #6e6e6e;
        width: 90%;
        padding: 5px;
      }

      #go_to_teacher_quotation_inquiry {
        max-width: 300px;
        padding: 5px 15px;
        border-radius: 15px;
        font-weight: 400;
        outline: none;
        border: 0 !important;
        box-shadow: none !important;
      }

      .service_details {
        position: relative;
        overflow: hidden;
      }

      #show_inquiry_form {
        transition: none;
        color: white;
        background-color: #00cc99;
        width: 53px;
        height: 125px;
        padding: 15px 10px;
        border-radius: 15px 0% 0% 15px;
        float: right;
        position: absolute;
        top: 500px;
        right: 0px;
        cursor: pointer;
        z-index: 12;
      }

      #inquiry_form, #event_details {
        transition: all 0.6s;
      }

      #inquiry_form {
        left: 100vw;
        position: absolute;
        z-index: 11;
      }

      #inquiry_form .service_date_range {
        background: white;
      }

      #show_inquiry_form:hover {
        background: #00b789;
        transition: all 0.3s;
      }

    </style>
    <script>
        var quotationInquiryCreateWithLoginUrl = "{{ route('.api.quotation.inquiry.createWithLogin') }}";
        var quotationInquiryCreateUrl = "{{ route('.api.quotation.inquiry.create') }}";
        var quotationInquirySubmitUrl = quotationInquiryCreateUrl;

        var show_inquiry_form_text_status = true;
        $('#show_inquiry_form').click(function () {
            if (show_inquiry_form_text_status) {
                $('#show_inquiry_form div:first-child').text('>');
                $('#show_inquiry_form_text').text('服務詳細');

                $('#inquiry_form').css({'left': '0', 'margin-top': '50px', 'opacity': '1'});
            } else {
                $('#show_inquiry_form div:first-child').text('<');
                $('#show_inquiry_form_text').text('立即報價');

                $('#inquiry_form').css({'left': '100vw', 'opacity': '0'});
            }

            show_inquiry_form_text_status = !show_inquiry_form_text_status;
        });

        $('.quotation_inquiry_submit_result_close').click(function () {
            $('#quotation_inquiry_submit_result').css('display', 'none');

            $('#show_inquiry_form').css('z-index', '12');

            location.reload();
        });

        $('.quotation_inquiry_submit').click(function () {

            if (isTeacherLogin()) {
                quotationInquirySubmitUrl = quotationInquiryCreateUrl;

                submitQuotationInquiryByEvent();
            } else {
                quotationInquirySubmitUrl = quotationInquiryCreateWithLoginUrl;

                loginPopup(function (response) {
                    submitQuotationInquiryByEvent();
                    $('.bootbox.modal').modal('hide');

                    return false;
                });
            }
        });

        function submitQuotationInquiryByEvent() {
            let option = {
                email: $('#email').val(),
                password: $('#password').val(),
                event_id: "{{ $data['detail']['id'] }}",
                start_date: $('.event_start_date').val(),
                end_date: $('.event_end_date').val(),
                member: $('.refer_event_member').val(),
                remark: $('.event_remake').val(),
            };

            successMessage('正在提交服務申請', 5000);

            callAjax(
                $('.quotation_inquiry_submit'),
                {
                    url: quotationInquirySubmitUrl,
                    method: "post",
                    data: option,
                },
                function (result) {
                    if (!result['status'] || result['status'] !== 'success') {
                        failMessage("{{ __('teacher/teacher.authentication_confirm.miss_file')  }}")
                        return;
                    }
                    $('#quotation_inquiry_submit_result').css('display', 'block');
                    $('#show_inquiry_form').css('z-index', '0');

                    $('#quotation_inner_custom_code').text(result.custom_code);
                    $('#quotation_inner_created_at').text(result.created_at);
                    $('#quotation_inner_event_name').text(result.event_name);

                    $('#go_to_teacher_quotation_inquiry').attr('href', "{{ route('.teacher.quotationInquiry') }}/" + result.id);

                    let quotation_inner_unit_name_text = $('#quotation_inner_unit_name').text();
                    $('#quotation_inner_unit_name').text(
                        quotation_inner_unit_name_text.replace('[]', result.unit_name)
                    );
                }
            );
        }
    </script>
@endsection