@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = "_LooperLayout";
}

@section Style {
    <link rel="stylesheet" href="~/assets/vendor/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
}
@section Script {
    <script src="~/assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="~/assets/vendor/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
    <script src="~/assets/javascript/pages/dataTables.bootstrap.js"></script>
    <script src="~/assets/javascript/custom/modallist.js" asp-append-version="true"></script>
}

<div class="page-inner">
    <!-- .page-title-bar -->
    <header class="page-title-bar">
        <!-- .breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    <a href="#"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>主項目清單</a>
                </li>
            </ol>
        </nav><!-- /.breadcrumb -->
        <!-- title -->
        <h1 class="page-title"> 主項目清單 </h1>
        <p class="text-muted">  </p><!-- /title -->
    </header><!-- /.page-title-bar -->
    <!-- .page-section -->
    <div class="page-section">
        <button type="button" id="modelProjNewBtn" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
        <!-- .card -->
        <div class="card card-fluid">
            <!-- .card-body -->
            <div class="card-body">
                <div class="form-row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="dept_select">單位</label>
                            <select class="custom-select custom-select-sm" id="dept_select" name="dept_select" required="">
                            </select>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="form-group">
                            <label for="search_btn" style="display: block;">&nbsp; &nbsp;</label>
                            <button type="button" class="btn btn-info btn-sm" id="search_btn">切換單位</button>
                        </div>
                    </div>
                </div>

            </div><!-- /.card-body -->
        </div><!-- /.card -->
        <!-- .card -->
        <div class="card card-fluid">
            <!-- .card-body -->
            <div class="card-body">
                <!-- .table -->
                <table id="dt-responsive" class="table dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th> 專案類型 </th>
                            <th> 建立時間 </th>
                            <th> 功能 </th>
                        </tr>
                    </thead>

                </table><!-- /.table -->
            </div><!-- /.card-body -->
        </div><!-- /.card -->
    </div><!-- /.page-section -->
</div>

<!-- .modal -->
<form id="clientModelProjForm" name="clientModelProjForm">
    <div class="modal fade" id="modelProjModal" tabindex="-1" role="dialog" aria-labelledby="modelProjModalLabel" data-backdrop="static"
         data-keyboard="false" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="modelProjModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">專案類型</span> <input id="group_content" type="text" class="form-control form-control-lg" value="" placeholder="專案類型" readonly="readonly " required="">
                    </h6>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="modelProj_method" />
                    <input type="hidden" id="modelProj_uid" />
                    <input type="hidden" id="dept_uid" />
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="modelProj_name" class="form-control" value="" placeholder="專案類型名稱" maxlength="12" required=""> <label for="modelProj_name">專案類型名稱</label>
                        </div>
                    </div><!-- /.form-group -->

                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="modelProjDialogSaveBtn" class="btn btn-primary">Save</button> <button type="button" class="btn btn-light" data-dismiss="modal" data-target="#modelProjModal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->

<!-- .modal -->
<form id="clientModelQuotationForm" name="clientModelQuotationForm">
    <div class="modal fade" id="clientModelQuotationListModal" tabindex="-1" role="dialog" aria-labelledby="clientModelQuotationListModalLabel" data-backdrop="static"
         data-keyboard="false" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog modal-lg" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="clientNewModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">範本列表</span> <input id="modelQuotationTitle" type="text" class="form-control form-control-lg" placeholder="範本列表" required="">
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="modelQuotation_method" />
                    <input type="hidden" id="parent_modelProj_uid" />
                    <!-- .page-section -->
                    <div class="page-section">
                        <button type="button" id="modelQuotationListNewBtn" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
                        <!-- .card -->
                        <div class="card card-fluid">
                            <!-- .card-body -->
                            <div class="card-body">
                                <!-- .table -->
                                <table id="dt-responsive-modelQuotation" class="table dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th> 範本名稱 </th>
                                            <th> 建立日期 </th>
                                            <th style="width: 25px;">  </th>
                                        </tr>
                                    </thead>

                                </table><!-- /.table -->
                            </div><!-- /.card-body -->
                        </div><!-- /.card -->
                    </div><!-- /.page-section -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="modelQuotationSaveBtn" style="visibility:hidden;" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->

<!-- .modal -->
<form id="clientModelQuotationPreivewForm" name="clientModelQuotationPreviewForm">
    <div class="modal fade" id="clientModelQuotationPreviewModal" tabindex="-1" role="dialog" aria-labelledby="clientModelQuotationPreviewModalLabel" data-backdrop="static" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog modal-xl" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="socialModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">報價單範本內容</span> <input id="previewQuotationContent_name" type="text" class="form-control form-control-lg" value="" placeholder="報價單內容" readonly="readonly" required="">
                    </h6>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="modelMainItem_uid" />
                    <input type="hidden" id="modelMainItem_method" />
                    <input type="hidden" id="modelQuotation_uid" />
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="modelQuotation_name" class="form-control" value="" placeholder="報價單範本名稱" maxlength="36" required=""> <label for="modelQuotation_name">報價單範本名稱</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- grid row -->
                    <div id="mainItem_div" class="row">
                       


                        <div class="col-lg-12">
                            <!-- .card -->
                            <div class="card card-fluid">
                                <div class="card-header border-bottom-0 btn-group">
                                    Footer Menus
                                    <div class="dd-nodrag btn-group ml-auto">
                                        <button class="btn btn-sm btn-secondary">Edit</button> <button class="btn btn-sm btn-secondary"><i class="far fa-trash-alt"></i></button>
                                    </div>
                                    
                                </div>
                                    <!-- .dd-list -->
                                    <ol class="dd-list">
                                    <li class="dd-item dd-nodrag" data-id="1">
                                        <div class="dd-handle">
                                            <div class="list-group-item">
                                                <div class="list-group-item-figure">
                                                    <span class="drag-indicator"></span>
                                                </div>
                                                <div class="list-group-item-body">
                                                    <div class="team">
                                                        <h4 class="list-group-item-title">
                                                            會員電子報上稿製作
                                                        </h4>
                                                        <p class="list-group-item-text" style="white-space: pre-line; font-size: 12px;">
                                                            協助代為租用多IP發信系統，減少擋信機率
                                                            ．年約優惠方案$961美元，匯率$32
                                                            ．每月最多發送份數共60,000份
                                                            ．超過平台每月6萬封發報限制，則以額外購買額度 0.06元/封 計算
                                                        </p>
                                                        <p class="list-group-item-text" style="white-space: pre-line; font-size: 12px;">
                                                            單價 NT$3,500, 數量 10, 單位 次
                                                            小計 NT$35,000
                                                            AC(N)
                                                        </p>
                                                    </div>
                                                </div>



                                            </div>
                                            <div class="dd-nodrag btn-group ml-auto">
                                                <button class="btn btn-sm btn-secondary">Edit</button> <button class="btn btn-sm btn-secondary"><i class="far fa-trash-alt"></i></button>
                                            </div>
                                        </div>
                                            
                                    </li>

                                    <li class="dd-item dd-nodrag" data-id="1">
                                        <div class="dd-handle">
                                            <div class="list-group-item">
                                                <div class="list-group-item-figure">
                                                    <span class="drag-indicator"></span>
                                                </div>
                                                <div class="list-group-item-body">
                                                    <div class="team">
                                                        <h4 class="list-group-item-title">
                                                            會員電子報上稿製作
                                                        </h4>
                                                        <p class="list-group-item-text" style="white-space: pre-line; font-size: 12px;">
                                                            協助代為租用多IP發信系統，減少擋信機率
                                                            ．年約優惠方案$961美元，匯率$32
                                                            ．每月最多發送份數共60,000份
                                                            ．超過平台每月6萬封發報限制，則以額外購買額度 0.06元/封 計算
                                                        </p>
                                                        <p class="list-group-item-text" style="white-space: pre-line; font-size: 12px;">
                                                            單價 NT$3,500, 數量 10, 單位 次
                                                            小計 NT$35,000
                                                            AC(N)
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="dd-nodrag btn-group ml-auto">
                                                <button class="btn btn-sm btn-secondary">Edit</button> <button class="btn btn-sm btn-secondary"><i class="far fa-trash-alt"></i></button>
                                            </div>
                                        </div>
                                        
                                    </li>
                                    </ol><!-- /.dd-list -->
                             
                                <!-- .card-footer -->
                                <div class="card-footer">
                                    <a href="#" class="card-footer-item justify-content-start"><span><i class="fa fa-plus-circle mr-1"></i> Add Menu Item</span></a>
                                </div><!-- /.card-footer -->
                            </div><!-- /.card -->
                        </div>
                    </div>
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientModelQuotationPreviewModal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->