@extends('.frontend.default')
@section('content')
    <!---------Service-record-start---------->
    <section class="service-record-main form-tabs">
        <div class="container">
            <div class="row">
                <div class="col-12 col-sm-6 col-md-7">
                    <h3><img src="{{ url('images/nav/material-folder-open.svg') }}" style="margin-top:-7px"> 報價紀錄</h3>
                </div>
                <div class="col-12 col-sm-6 col-md-5">
                    <div class="search-type row">
                        <div class="col-12 my-2 col-lg-9 my-lg-0 p-lg-0">
                            <input type="text" placeholder="輸入關鍵字 / 編號" name="keywords" class="keywords text-size-l" style="line-height:2" id='keywords'>
                        </div>
                        <div class="col-12 my-2 col-lg-3 my-lg-0 p-lg-0">
                            <button class="search-btns p-1 w-100" id="search-btns">
                                <img src="{{ url('images/icon/search.svg') }}" alt="">
                                <span>搜尋</span>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <ul class="nav nav-tabs">
                        <li style="border-radius: 15px;"><a data-toggle="tab" href="#inquiry_in_progress_tab" class="active">進行中</a></li>
                        <li style="border-radius: 15px;"><a data-toggle="tab" href="#inquiry_completed_tab">已完成/取消</a></li>
                    </ul>
                    <div class="tab-content">
                        @foreach([ ['id'=>'inquiry_in_progress_tab','tbody_class'=>'in_progress_quotation_inquiries_tbody','is_show'=>1], ['id'=>'inquiry_completed_tab','tbody_class'=>'completed_quotation_inquiries_tbody','is_show'=>0] ] as $tab)
                            <div id="{{$tab['id']}}" class="tab-pane fade in {{$tab['is_show'] ? 'active show' : ''}}">
                                <div class="table-drop">
                                    <div class="main-table-drop">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <th scope="col">報價日期</th>
                                                <th scope="col">報價工作編號</th>
                                                <th scope="col">服務名稱</th>
{{--                                                <th scope="col">服務日期範圍</th>--}}
                                                <th scope="col">報價狀態</th>
                                                <th scope="col">報價單</th>
                                                <th scope="col">發票</th>
                                                <th scope="col">收據</th>

                                            </tr>
                                            </thead>
                                            <tbody class="{{$tab['tbody_class']}}">
                                            <!--
                                                            get by qpi
                                                            print by jquery
                                                            -->
                                            </tbody>
                                        </table>
                                        <div class="message text-center">
                                            <!-- table empty message -->
                                        </div>
                                    </div>
                                    <div class="PaginateButtons row justify-content-around my-3">

                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!---------Service-record-end------------>
@endsection
@section('pagescript')
    <script>
        let in_progress_url = {
            url: "{{ route('.api.teacher.quotation_inquiry.status.in_progress') }}?page=1",
            tab: '#inquiry_in_progress_tab',
            tbody_class_name: ".in_progress_quotation_inquiries_tbody",
            status: 'in_progress'
        };
        let completed_url = {
            url: "{{ route('.api.teacher.quotation_inquiry.status.completed') }}?page=1",
            tab: '#inquiry_completed_tab',
            tbody_class_name: ".completed_quotation_inquiries_tbody",
            status: 'completed'
        };

        $(document).ready(function() {
            $('#keywords').keypress(function(e) {
                if (e.which == 13) { //Enter key pressed
                    runSearchEvent();
                }
            });

            $('#search-btns').click(function(){
                runSearchEvent();
            });

            function runSearchEvent(){
                in_progress_url.keywords = $('#keywords').val();
                loadData(in_progress_url);

                completed_url.keywords = $('#keywords').val();
                loadData(completed_url);
            }

            loadData(in_progress_url);
            loadData(completed_url);
        });

        function loadData(url_info) {
            let _url = url_info['url'];
            if (url_info['keywords']) {
                _url += "&keywords=" + url_info['keywords'];
            }

            ajaxQuotationInquiryList(_url, url_info['tab'] , url_info['tbody_class_name'])
        }

        function ajaxQuotationInquiryList(_url, tab, tbody_class){
            removePaginateButtons(tab);
            addLoading(tbody_class, '<i class="fas fa-circle-notch fa-spin fa-2x m-3" id="in_progress_quotation_inquiries_tbody_spinner"></i>');

            let success_function = function(data, status) {
                if (data['quotationInquiryList'] && data['quotationInquiryList'].length > 0) {
                    addLoading(tbody_class, '');
                    printInquiriesToTbody(tbody_class, data['quotationInquiryList']);
                    printPaginateButtons(data, tab, tbody_class);
                } else {
                    addLoading(tbody_class, '<p style="text-align:center">未有查詢或進行中服務</p>');
                }
            };

            let error_function = function(xhr, status, error) {
                addLoading(tbody_class, 'Unknown error');
            };

            callAjax(this,{url: _url}, success_function , error_function, false)
        }

        function addLoading(tbody_class, content) {
            $(tbody_class).parents(".main-table-drop").find(".message").html(content);
            $(tbody_class).html("");
        }

        $(document).on('click','.updatePage',function(){
            ajaxQuotationInquiryList($(this).data('page-api'),$(this).data('tab'), $(this).data('tbody-class'));
        });

        function printInquiriesToTbody(tbody_class_name, inquiries) {
            $.each(inquiries, function(key, inquiry) {
                let detail_url = window.location.href + '/' + inquiry['id'];

                let teacher_status_class = '';
                switch(inquiry['raw_status']){
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_PENDING}}":
                        teacher_status_class = 'border-primary background-base-color-5 text-primary hover-text-primary';
                        break;
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_PENDING_CONFIRM}}":
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_CONFIRM}}":
                        teacher_status_class = 'btn-secondary';
                        break;
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_PENDING_PAY}}":
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_PAID}}":
                        teacher_status_class = 'btn-warning';
                        break;
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_COMPLETE}}":
                        teacher_status_class = 'btn-primary';
                        break;
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_VOID}}":
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_EXPIRE}}":
                    case "{{App\Models\Quotation\QuotationInquiry::STATUS_TEACHER_REJECT}}":
                        teacher_status_class = 'btn-disable';
                        break;
                }

                let inquiries_row = '<tr class="tr_link" onclick=\"location.href = \' ' + detail_url +
                    '\'\"><a href="' + detail_url + '">\n' +
                    '<td scope="row">' + inquiry['created_at'] + '</td>\n' +
                    '<td>' + inquiry['custom_code'] + '</td>\n' +
                    '<td>' + inquiry['event_title'] + '</td>\n' +
                    // '<td>' + inquiry['date_range'] + '</td>\n' +
                    '<td><a class="' + teacher_status_class + '" style="white-space:nowrap">' + inquiry['status'] + '</a></td>';
                $.each(['quotations_count', 'invoices_count', 'receipts_count', ], function(key,
                    index) {
                    if (parseInt(inquiry[index]) > 0) {
                        inquiries_row +=
                            '<td style="white-space:nowrap"><i class="fa fa-check-circle" aria-hidden="true"></i> 供下載</td>\n';
                    } else {
                        inquiries_row += '<td> - </td>\n';
                    }
                });

                inquiries_row += '</a></tr>';
                $(tbody_class_name).append(inquiries_row);
            });
        }

        function printPaginateButtons(data, tab, tbody_class){
            if(data['total'] && data['total'] > 10){
                let html = "";
                if (data['previousPageUrl']) {
                    html += "<div class='col-6 text-center'>";
                    html += "<a id='previousPageUrlButton' class='btn btn-primary updatePage' data-tab='" + tab + "' data-tbody-class='" + tbody_class + "'  data-page-api='" + data['previousPageUrl'] + "'>上一頁</a>";
                    html += "</div>";
                }
                if (data['nextPageUrl']) {
                    html += "<div class='col-6 text-center'>";
                    html += "<a id='nextPageUrlButton' class='btn btn-primary updatePage' data-tab='" + tab + "' data-tbody-class='" + tbody_class + "'  data-page-api='" + data['nextPageUrl'] + "'>下一頁</a>";html += "</div";
                    html += "</div>";
                }

                removePaginateButtons(tab);
                $(tab + ' .table-drop .PaginateButtons').append(html);
            }
        }

        function removePaginateButtons(tab){
            $(tab + ' .table-drop .PaginateButtons .col-6').remove();
        }
    </script>
    <style>
      .main-table-drop table tr th {
        word-break: keep-all;
      }

      a.border-primary.background-base-color-5.text-primary.hover-text-primary:hover {
        color: #00cc99 !important;
      }

      .in_progress_quotation_inquiries_tbody td:first-child,
      .in_progress_quotation_inquiries_tbody th:first-child {
        border-radius: 10px 0 0 10px;
      }

      .in_progress_quotation_inquiries_tbody td:last-child,
      .in_progress_quotation_inquiries_tbody th:last-child {
        border-radius: 0 10px 10px 0;
      }
    </style>
@endsection