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

@section Style {
    <style type="text/css">
        .cards tbody tr {
            float: left;
            width: 19rem;
            margin: 0.5rem;
            border: 0.0625rem solid rgba(0, 0, 0, .125);
            border-radius: .25rem;
            box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
        }

        .cards tbody td {
            display: block;
        }

        .cards thead {
            display: none;
        }

        .cards td:before {
            content: attr(data-label);
            position: relative;
            float: left;
            color: #808080;
            min-width: 4rem;
            margin-left: 0;
            margin-right: 1rem;
            text-align: left;
        }

        tr.selected td:before {
            color: #CCC;
        }

        .table .avatar {
            width: 50px;
        }

        .cards .avatar {
            width: 150px;
            height: 150px;
            margin: 15px;
        }
    </style>
}
@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/projectlist.js" asp-append-version="true"></script>
}

<!-- .page-inner -->
<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 -->
    
    <div class="page-section">
        <div class="row">
            <div class="col-lg-12">
                <!-- #accordion2 -->
                <div id="accordion1" class="card-expansion">
                    <!-- .card -->
                    <div class="card card-expansion-item expanded">
                        <div class="card-header border-0" id="headingOne1">
                            <button id="adv-search-btn" class="btn btn-reset d-flex justify-content-between w-100" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1"><span>進階搜尋</span> <span class="collapse-indicator"><i class="fa fa-fw fa-chevron-down"></i></span></button>
                        </div>
                        <div>
                            <div id="collapseOne1" class="collapse" aria-labelledby="headingOne1" data-parent="#accordion1">
                                <div class="card-body pt-0">
                                    
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label" for="dateStart">起</label>
                                                <input id="dateStart" type="text" class="form-control flatpickr-input active" data-toggle="flatpickr" data-date-format="m.y" data-monthselect="true" readonly="readonly">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="control-label" for="dateEnd">迄</label>
                                                <input id="dateEnd" type="text" class="form-control flatpickr-input active" data-toggle="flatpickr" data-date-format="m.y" data-monthselect="true" readonly="readonly">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-group">
                                                <label class="d-block">狀況</label>
                                                <div class="custom-control custom-control-inline custom-radio">
                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd11" value="Y"> <label class="custom-control-label" for="rd11">執行</label>
                                                </div>
                                                <div class="custom-control custom-control-inline custom-radio">
                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd21" value="N"> <label class="custom-control-label" for="rd21">未執行</label>
                                                </div>
                                                <div class="custom-control custom-control-inline custom-radio">
                                                    <input type="radio" class="custom-control-input" name="rdGroup1[]" id="rd31" value="A" checked=""> <label class="custom-control-label" for="rd31">全部</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <button type="button" id="filiterBtn" class="btn btn-primary">篩選</button>
                                        <button type="button" id="resetBtn" class="btn btn-danger">重設</button>
                                    </div>
                                </div>
                            </div>

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

    <!-- .page-section -->
    <div class="page-section">
        <button type="button" id="projectNewModal" class="btn btn-primary btn-floated" 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" class="table dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th> 年度 </th>
                            <th> 案號 </th>
                            <th> 專案名稱 </th>
                            <th> 狀態 </th>
                            <th> 合作對象 </th>
                            <th> 資料異動時間 </th>
                            <th>  </th>
                        </tr>
                    </thead>

                </table><!-- /.table -->
            </div><!-- /.card-body -->
        </div><!-- /.card -->
    </div><!-- /.page-section -->
</div><!-- /.page-inner -->
<!-- Keep in mind that modals should be placed outsite of page sidebar -->
<!-- .modal -->
<form id="clientNewForm" name="clientNewForm">
    <div class="modal fade" id="clientNewModal" tabindex="-1" role="dialog" aria-labelledby="clientNewModalLabel" 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">Client name</span> <input id="modelTitle" 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="method" />
                    <input type="hidden" id="project_uid" />
                    <!-- .form-row -->
                    <div class="form-row">

                        <div class="col-md-12" id="user_name_div">
                            <div class="form-group">
                                <label class="d-block">狀態</label>
                                <div class="custom-control custom-control-inline custom-radio">
                                    <input type="radio" class="custom-control-input" name="project_isExec[]" id="rd1" value="yes"> <label class="custom-control-label" for="rd1"> 已執行</label>
                                </div>
                                <div class="custom-control custom-control-inline custom-radio">
                                    <input type="radio" class="custom-control-input" name="project_isExec[]" id="rd2" value="no"> <label class="custom-control-label" for="rd2"> 僅提案</label>
                                </div>
                               
                            </div>
                        </div>
                        <div class="col-md-12" id="prm_project_serial">
                            <!-- .form-group -->
                            <div class="form-group">
                                <label class="control-label" for="select2-data-remote">PRM專案名稱</label> <select id="select2-data-remote" class="form-control">
                                </select>
                            </div><!-- /.form-group -->
                            <div class="form-group" id="file_div">
                                <label for="project_file">報價單下載 </label>
                                <a href="#" class="btn btn-danger" target="_blank" id="fileUrl">Go somewhere</a>
                            </div>
                        </div>
                      
                        <div class="col-md-12" id="project_year_month_div">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="project_year">年度</label>
                                        <select class="custom-select" id="project_year" required="">
                                            
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="project_month">月份</label>
                                        <select class="custom-select" id="project_month" required="">
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12" id="project_name_div">
                            <div class="form-group">
                                <label for="project_name">專案名稱</label> <input type="text" id="project_name" class="form-control">
                            </div>
                        </div>
                        

                    </div><!-- /.form-row -->

                    
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="projectSaveBtn" 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="clientPreivewForm" name="clientPreviewForm">
    <div class="modal fade" id="clientPreviewModal" tabindex="-1" role="dialog" aria-labelledby="clientPreviewModalLabel" data-backdrop="static" 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="socialModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">合作列表</span> <input id="previewKol_name1" 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">
                    
                    <div class="col-md-12">
                        <!-- .card-body -->
                        <div class="card-body">
                            <h4 class="card-title"> 合作對象與評價 </h4><!-- .table-responsive -->
                            <div class="table-responsive">
                                <table class="table table-hover" style="min-width: 578px" id="preview_kol_table">
                                    <thead>
                                        <tr>
                                            <th> 合作對象 </th>
                                            
                                            <th> 執行 </th>
                                            <th> 評價 </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>            
                                            <td class="align-middle"> 754000 </td>
                                            <td class="align-middle"> 754000 </td>
                                            <td class="align-middle"> 754000 </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div><!-- /.table-responsive -->
                        </div><!-- /.card-body -->

                    </div>
                    
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientPreviewModal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->


                        <!-- .modal -->
<form id="clientCasePreivewForm" name="clientCasePreviewForm">
    <div class="modal fade" id="clientCasePreviewModal" tabindex="-1" role="dialog" aria-labelledby="clientCasePreviewModalLabel" data-backdrop="static" 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="socialModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">合作狀況</span> <input id="previewKol_name1" 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">
                    <div class="form-row">
                        <!-- form column -->
                        <label for="input02" class="col-md-3">案件名稱</label> <!-- /form column -->
                        <!-- form column -->
                        <div class="col-md-9 mb-3">
                            <input type="text" class="form-control" id="previewProject_name" value="" readonly="readonly">
                        </div><!-- /form column -->
                    </div>

                    <div class="form-row">
                        <!-- form column -->
                        <label for="input03" class="col-md-3">合作形式</label> <!-- /form column -->
                        <!-- form column -->
                        <div class="col-md-9 mb-3">
                            <input type="text" class="form-control" id="previewProject_Cooper" readonly="readonly"></input>
                        </div><!-- /form column -->
                    </div>

                    <div class="col-md-12">
                        <h2 class="card-title"> 報價 </h2><!-- .table-responsive -->
                        <div class="table-responsive">
                            <table class="table table-hover" style="min-width: 678px" id="previewPrice_table">
                                <thead>
                                    <tr>
                                        <th style="width: 10%;"> 合作平台 </th>
                                        <th style="width: 30%;"> 規格 </th>
                                        <th style="width: 10%; text-align: right;"> 數量 </th>
                                        <th style="width: 10%; text-align: right;"> 報價 </th>
                                        <th> 報價日期</th>
                      
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="align-middle">  Instagram </td>
                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                        <td class="align-middle"> zamy_ding </td>
                                        <td class="align-middle"> 奎丁 </td>
                                        <td class="align-middle"> 754000 </td>
                                        
                                    </tr>
                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                        
                    </div>
                    <div class="col-md-12">
                        <!-- .form-group -->
                        <div class="form-group">
                            <h2 class="card-title">確認合作</h2>
                            <div class="col-md-9 mb-3">
                                <input type="text" class="form-control" id="previewProject_isCooper" readonly="readonly"></input>
                            </div><!-- /form column -->
                        </div><!-- /.form-group -->
                        <div class="card-footer">&nbsp;</div>
                    </div>
                    <div class="col-md-12" id="fileDiv" style="display: none;">
                        <h2 class="card-title"> 合約 </h2><!-- .table-responsive -->
                        <div class="table-responsive">
                            <table class="table table-hover" style="min-width: 678px" id="previewFile_table">
                                <thead>
                                    <tr>
                                        <th> 檔名 </th>
                                 
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                    
                                        
                                    </tr>
                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                        
                    </div>
                    <div class="col-md-12" id="isCooperate_div">
                        <div class="form-group">
                            <h2 class="card-title">評價</h2>
                            <!-- form column -->
                            <div class="col-md-9 mb-3">
                                <input type="text" class="form-control" id="previewProject_Quality" readonly="readonly"></input>
                            </div><!-- /form column -->
                        </div><!-- /.form-group -->
                        <div class="card-footer">&nbsp;</div>
                    </div>
                    <div class="col-md-12" id="isCooperate2_div">
                        <h2 class="card-title"> 上刊連結 </h2><!-- .table-responsive -->
                        <div class="table-responsive">
                            <table class="table table-hover" style="min-width: 678px" id="previewLink_table">
                                <thead>
                                    <tr>

                                        <th> 連結 </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                       
                                    </tr>
                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                        
                    </div>
                    <div class="col-md-12" id="isCooperate3_div">
                        <h2 class="card-title"> 截圖 </h2><!-- .table-responsive -->
                        <div class="table-responsive">
                            <table class="table table-hover" style="min-width: 678px" id="previewCut_table">
                                <thead>
                                    <tr>

                                        <th style="width: 30%;"> 截圖 </th>
                                        <th> 說明文字</th>
                             
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                        <td class="align-middle ">
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div><!-- /.table-responsive -->
                        
                    </div>
                    <div class="col-md-12" >
                        <!-- .form-group -->
                        <div class="form-group">
                                    <h2 for="lbl3" class="card-title">附註 <span class="badge badge-secondary"><em>選填</em></span></h2>
                            <textarea class="form-control" id="previewkolProject_memo" rows="4" placeholder=""></textarea>
                        </div><!-- /.form-group -->
                    </div>
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-toggle="modal" data-target="#clientCasePreviewModal">Close</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->