@extends('frontend.template.popup.base_popup',[
    'custom_open_popup_button' => true,
    'popup_id' => 'instructor_details_inquiry_popup',
    'popup_title' => '取得此導師的服務報價',
    'is_lg_model' => true
])
@section('popup_body')
    <div class="mentor-quote-content">
        <h3>導師報價內容</h3>
        <form>
            <div class="row">
                <div class="col-lg-3">
                    <div class="object_select">
                        <select class="form-select" style="padding: 5px 15px">
                            <option selected="">對象</option>
                            <option value="1">Action</option>
                            <option value="2">Another action</option>
                            <option value="3">Something else here</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="object_select">
                        <select class="form-select" style="padding: 5px 15px">
                            <option selected="">服務形式</option>
                            <option value="1">Action</option>
                            <option value="2">Another action</option>
                            <option value="3">Something else here</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="object_select">
                        <select class="form-select" style="padding: 5px 15px">
                            <option selected="">服務性質</option>
                            <option value="1">Action</option>
                            <option value="2">Another action</option>
                            <option value="3">Something else here</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-3">
                    <div class="object_select">
                        <select class="form-select" style="padding: 5px 15px">
                            <option selected="">教學語言</option>
                            <option value="1">Action</option>
                            <option value="2">Another action</option>
                            <option value="3">Something else here</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-12">
                    <input type="text" placeholder="服務內容" maxlength="100" class="service-cont text-size-l" style="height: 30px;" required/>
                </div>
                <div class="col-lg-12">
                    <label>服務日期範圍</label>
                    <div class="row">
                        <div class="col-12 col-sm-6 service_date mb-2">
                            <ul>
                                <li>
                                    <i class="far fa-calendar-alt" style="font-size:20px"></i>
                                    <input type="date" placeholder="DD/MM/YYYY" class="form-control_01" required=""/>
                                </li>
                                <li><span>至</span><input type="date" placeholder="DD/MM/YYYY" class="form-control_01" required=""/></li>
                            </ul>
                        </div>
                        <div class="col-12 col-sm-6 service_time d-flex align-items-center">
                            <span style="width:65px">時間</span>
                            <span style="padding-left:5px;border-radius: 8%;"><input type="time" class="form-control_01" placeholder="11:00"
                                                                                     required/></span>
                            <span style="padding-left:5px;border-radius: 8%;"><input type="time" class="form-control_01" placeholder="16:30"
                                                                                     required/></span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <ul class="ch-box">
                        @foreach ([
                            '逢星期一',
                            '逢星期二',
                            '逢星期三',
                            '逢星期四',
                            '逢星期五',
                            '逢星期六',
                            '逢星期日',
                            '一次性',
                        ] as $label)
                            <li>
                                <label class="custom-checkbox">
                                    {{$label}}
                                    <input type="checkbox"/>
                                    <span class="checkmark" style="border-radius:100%"></span>
                                </label>
                            </li>
                        @endforeach
                    </ul>
                </div>
                <div class="col-lg-12">
                    <div class="teaching-location">
                        <div class="row">
                            <div class="col-12 col-sm-8 text-left">
                                <i class="fas fa-location-arrow" style="font-size: 20px"></i>
                                <div class="row">
                                    <div class="col-12">
                                        <input type="text" name="event_address" class="form-control_01 w-100 text-size-l" style="border-bottom: 1px solid #333333;" maxlength="100" placeholder="教學地點"/>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-4 text-left">
                                <i class="fas fa-user-alt" style="font-size: 20px;"></i>
                                <div class="row">
                                    <div class="col-12">
                                        <input type="number" name="member_number" class="form-control_01 w-100 text-size-l" style="border-bottom: 1px solid #333333;" placeholder="服務人數" required/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('popup_buttons')
    <div class="col-12 text-center">
        <div class="quotation_popup">
            <button type="button" class="btn btn-primary quote-button"
                    data-toggle="modal" data-target="#exampleModalCenter2">立即報價
            </button>
        </div>
    </div>
@endsection

<div class="modal quotation" id="exampleModalCenter2" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" style="padding-right: 17px;">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <div class="quotation_inner text-center">
                    <img src="{{asset('images/system/material-done.png')}}" alt="">
                    <h3>訂制服務查詢已經遞交</h3>
                    <p><span>報價工作編號為：</span>C30605</p>
                    <p>我們會根據您提供的訂制服務資料整合最合適您的服務，我們儘快聯絡您</p>
                </div>
            </div>
        </div>
    </div>
</div>