@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = "_LooperLayout";
}
@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/kollist.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>KOL清單</a>
                </li>
            </ol>
        </nav><!-- /.breadcrumb -->
        <!-- title -->
        <h1 class="page-title"> KOL清單 </h1>
        <p class="text-muted">  </p><!-- /title -->
    </header><!-- /.page-title-bar -->
    <!-- .page-section -->
    <div class="page-section">
        <button type="button" id="kolNewModal" 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" class="table dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th> 相片 </th>
                            <th> 名稱 </th>
                            <th> 組成類型 </th>
                            <th> 聯絡方式1 </th> 
                            <th> 聯絡方式2 </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="KOL 資料維護" 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="kol_uid" />
                    <!-- .form-row -->
                    <div class="form-row">
                        

                        <div class="col-md-12" id="user_name_div">
                            <div class="form-group">
                                <label for="user_name">KOL頻道名稱</label> <input type="text" id="kol_name" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12" id="user_id_div">
                            <div class="form-group">
                                <label for="tf6">KOL介紹</label>
                                <textarea class="form-control" id="kol_descript" rows="5"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="kol_contact1">聯繫方式1</label> <input type="text" id="kol_contact1" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="kol_contact2">聯繫方式2</label> <input type="text" id="kol_contact2" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12" id="kolMakeup_div">
                            <div class="form-group">
                               
                            </div>
                        </div>
                        <div class="col-md-12" id="kolStyle_div">
                            <div class="form-group">
                            </div>
                        </div>
                        <div class="col-md-12" id="kolFansType_div">
                            <div class="form-group"></div>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="control-label" for="kol_men_ratio">男女比</label> <input type="text" value="50" id="kol_men_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-prefix="男" data-postfix="%" data-verticalbuttons="false">              
                                </div>

                                <div class="col-md-6">
                                    <label class="control-label" for="kol_women_ratio">　</label> <input type="text" value="50" id="kol_women_ratio" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-prefix="女" data-postfix="%" data-verticalbuttons="false">
                                </div>
                            </div>
                            <div class="form-group"></div>    
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_13_17">13-17歲占比</label>
                                <input type="text" value="0" id="kol_13_17" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_18_24">18-24歲占比</label>
                                <input type="text" value="0" id="kol_18_24" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_25_34">25-34歲占比</label>
                                <input type="text" value="0" id="kol_25_34" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_35_44">35-44歲占比</label>
                                <input type="text" value="0" id="kol_35_44" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_45_54">45-54歲占比</label>
                                <input type="text" value="0" id="kol_45_54" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_55_64">55-64歲占比</label>
                                <input type="text" value="0" id="kol_55_64" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label" for="kol_65">65歲以上占比</label>
                                <input type="text" value="0" id="kol_65" data-toggle="touchspin" data-min="0" data-max="100" data-step="0.1" data-decimals="1" data-boostat="5" data-maxboostedstep="10" data-postfix="%" data-verticalbuttons="false">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="card-body">
                                <!-- .media -->
                                <div class="media">
                                    <div class="user-avatar user-avatar-xxl fileinput-button">
                                        <div class="fileinput-button-label"> Change photo </div><img src="~/assets/images/avatars/unknown-profile.jpg" alt=""> <input id="fileupload-avatar" type="file" name="avatar">
                                    </div>
                                    <div class="media-body pl-3">
                                        <h3 class="card-title"> KOL 照片 </h3>
                                        <p class="card-text"> 點擊頭像可更換照片. </p>
                                        <p class="card-text text-muted"> 最大容許檔案大小為 5MB. </p>
                                    </div>
                                </div><!-- /.media -->
                            </div>
                        </div>
                        <div class="col-md-12">
                            <!-- .card-body -->
                            <div class="card-body">
                                <h2 class="card-title"> 社群平台 </h2><!-- .table-responsive -->
                                <div class="table-responsive">
                                    <table class="table table-hover" style="min-width: 678px" id="media_table">
                                        <thead>
                                            <tr>
                                                <th style="width: 10%;"> 平台 </th>
                                                <th style="width: 25%;"> 網址 </th>
                                                <th style="width: 12%;"> 帳號 </th>
                                                <th style="width: 12%;"> 名稱 </th>
                                                <th> 粉絲數</th>
                                                <th style="width: 18%;"></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>
                                                <td class="align-middle text-right">
                                                    <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div><!-- /.table-responsive -->
                            </div><!-- /.card-body -->
                            <!-- .card-footer -->
                            <div class="card-footer">
                                <a href="javascript: void();" id="socialNewBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增社群平台資料</a>
                            </div><!-- /.card-footer -->
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="kol_tags">合作過產品類型</label> <select type="text" id="kol_tags" class="form-control"></select>
                            </div>
                        </div>
                    </div><!-- /.form-row -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="kolSaveBtn" 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="clientSocialEditForm" name="clientSocialEditForm">
    <div class="modal fade" id="socialItemModal" tabindex="-1" role="dialog" aria-labelledby="socialModalLabel" data-backdrop="static" 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="socialModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">項目名稱</span> <input id="option_name" 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="media_method" />
                    <input type="hidden" id="option_uid" />
                    <input type="hidden" id="optionItem_uid" />
                    <input type="hidden" id="kolMedia_uid" />
                    <div class="form-group">
                        <label for="cnCountry"> 社群平台 </label> <select id="media_select" class="custom-select d-block w-100">
                            <option value=""> Choose... </option>

                        </select>
                    </div>

                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="kolMedia_url" class="form-control" value="" placeholder="網址" maxlength="50" required=""> <label for="kolMedia_url">網址</label>
                        </div>
                    </div><!-- /.form-group -->

                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="kolMedia_accountName" class="form-control" value="" placeholder="社群帳號" maxlength="20" required=""> <label for="kolMedia_accountName">社群帳號</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="kolMedia_displayName" class="form-control" value="" placeholder="社群名稱" maxlength="20" required=""> <label for="kolMedia_displayName">社群名稱</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="kolMedia_fansNum" class="form-control" value="0" placeholder="粉絲數" maxlength="20" required=""> <label for="kolMedia_fansNum">粉絲數</label>
                        </div>
                    </div><!-- /.form-group -->

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


<!-- .modal -->
<form id="clientProjectForm" name="clientProjectForm">
    <div class="modal fade" id="clientProjectModal" tabindex="-1" role="dialog" aria-labelledby="clientProjectFormLabel" data-backdrop="static"
         data-keyboard="false" 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="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="kol_uid" />
                    <!-- .page-section -->
                    <div class="page-section">
                        <button type="button" id="kolProjectNewBtn" 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" class="table dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>            
                                            <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><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer" style="display: none;">
                    <button type="button" id="kolSaveBtn" 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="clientNewKolProjectForm" name="clientNewKolProjectForm">
    <div class="modal fade" id="clientNewKolProjectModal" tabindex="-1" role="dialog" aria-labelledby="clientNewKolProjectLabel" 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="KOL 資料維護" 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="kolProject_method" />
                    <input type="hidden" id="kolProject_uid" />
                    <!-- .form-row -->
                    <div class="form-row">
                        <div class="col-md-12" id="project_year_month_div">
                            <div class="row">
                                <div class="col-md-2" id="user_name_div">
                                    <div class="form-group">
                                        <label for="project_year">年度</label>
                                        <select class="custom-select" id="project_year" required="">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2" id="user_id_div">
                                    <div class="form-group">
                                        <label for="project_month">月份</label>
                                        <select class="custom-select" id="project_month" required="">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-8">
                                    <div class="form-group">
                                        <label for="project_name">專案名稱</label> 
                                        <select class="custom-select" id="project_select" required="">
                                        </select>
                                    </div>
                                </div>
                            </<div>
                            <div class="card-footer">&nbsp;</div>
                        </div>


                             
                        <div class="col-md-12" id="cooperateType_div">
                            <div class="form-group">
                            </div>
                                    <div class="card-footer">&nbsp;</div>
                        </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="price_table">
                                            <thead>
                                                <tr>
                                                    <th style="width: 10%;"> 合作平台 </th>
                                                    <th style="width: 25%;"> 規格 </th>
                                                    <th style="width: 12%;"> 數量 </th>
                                                    <th style="width: 12%;"> 報價 </th>
                                                    <th> 資料日期</th>
                                                    <th style="width: 18%;"></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>
                                                    <td class="align-middle text-right">
                                                        <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div><!-- /.table-responsive -->
                            <!-- .card-footer -->
                            <div class="card-footer">
                                <a href="javascript: void();" id="addSpecBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增報價資料</a>
                            </div><!-- /.card-footer -->
                        </div>
                        <div class="col-md-12">
                                    <!-- .form-group -->
                                    <div class="form-group">
                                        <h2 class="card-title">確認合作</h2>
                                        <div class="custom-control custom-radio mb-1">
                                            <input type="radio" class="custom-control-input" name="rdGroup3" id="rd7"> <label class="custom-control-label" for="rd7">是</label>
                                            
                                        </div>
                                        <div class="custom-control custom-radio mb-1">
                                            <input type="radio" class="custom-control-input" name="rdGroup3" id="rd8" checked> <label class="custom-control-label" for="rd8">否</label>
                                            <div class="custom-control-hint mt-1">
                                                <input type="text" class="form-control" placeholder="原因(選填)">
                                            </div>
                                        </div>
                                    </div><!-- /.form-group -->
                                    <div class="card-footer">&nbsp;</div>
                        </div>
                        <div class="col-md-12" id="isCooperate_div">
                                    <div class="form-group">
                                        <h2 class="card-title">評價</h2>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb1"> <label class="custom-control-label" for="ckb1">好溝通</label>
                                        </div>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb2"> <label class="custom-control-label" for="ckb2">準時</label>
                                        </div>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb3"> <label class="custom-control-label" for="ckb3">品質好</label>
                                        </div>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb4"> <label class="custom-control-label" for="ckb4">CP質高</label>
                                        </div>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb5"> <label class="custom-control-label" for="ckb5">有雷</label>
                                        </div>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb6"> <label class="custom-control-label" for="ckb6">有大雷</label>
                                        </div>
                                        <div class="custom-control custom-control-inline custom-checkbox">
                                            <input type="checkbox" name="quility[]" class="custom-control-input" id="ckb7"> <label class="custom-control-label" for="ckb7">有遲交狀況</label>
                                        </div>
                                    </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="link_table">
                                            <thead>
                                                <tr>

                                                    <th> 連結 </th>
                                                    <th style="width: 20%;"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                                    <td class="align-middle text-right">
                                                        <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div><!-- /.table-responsive -->
                            <!-- .card-footer -->
                            <div class="card-footer">
                                <a href="javascript: void();" id="addLinkBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增上刊連結</a>
                            </div><!-- /.card-footer -->
                        </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="cut_table">
                                            <thead>
                                                <tr>

                                                    <th> 截圖 </th>
                                                    <th style="width: 20%;"></th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td class="align-middle"> https://www.instagram.com/zamy_ding/ </td>
                                                    <td class="align-middle text-right">
                                                        <button type="button" data-uid="" data-method="" class="btn btn-sm btn-icon btn-secondary" data-toggle="modal" data-target="#clientContactEditModal"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></button> <button type="button" class="btn btn-sm btn-icon btn-secondary"><i class="far fa-trash-alt"></i> <span class="sr-only">Remove</span></button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div><!-- /.table-responsive -->
                            <!-- .card-footer -->
                            <div class="card-footer">
                                <a href="javascript: void();" id="addCutBtn" class="card-footer-item"><i class="fa fa-plus-circle mr-1"></i> 新增截圖</a>
                            </div><!-- /.card-footer -->
                        </div>
                    </div><!-- /.form-row -->

                    <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="kolProject_memo" rows="4" placeholder=""></textarea>
                        </div><!-- /.form-group -->
                    </div>

                    
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="kolSaveBtn" 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="clientKolProjectMediaPriceEditForm" name="clientKolProjectMediaPriceEditForm">
    <div class="modal fade" id="clientKolProjectMediaPriceEditModal" tabindex="-1" role="dialog" aria-labelledby="clientKolProjectMediaPriceEditModalLabel" data-backdrop="static" 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="socialModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">合作形式與報價</span> <input id="option_name" 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="kolProjectPrice_method" />
                    <input type="hidden" id="kolProjectPrice_uid" />
                    <input type="hidden" id="optionItem_uid" />
                    <input type="hidden" id="mediaItem_uid" />
                    <div class="form-group">
                        <label for="cnCountry"> 媒體平台 </label> <select id="kolProjectMedia_select" class="custom-select d-block w-100">
                            

                        </select>
                    </div>
                    <div class="form-group">
                        <label for="cnCountry"> 規格 </label> <select id="kolProjectSpec_select" class="custom-select d-block w-100">
                            

                        </select>
                    </div>
                    <!-- .form-group -->
                    <div class="form-group" id="kolProjectSpec_other">
                        <div class="form-label-group">
                            <input type="text" id="kolProjectPrice_other" class="form-control" value="" placeholder="合作形式說明" maxlength="45" required=""> <label for="olProjectPrice_other">合作形式說明</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="kolProjectPrice_num" class="form-control" value="" placeholder="數量" maxlength="6" required=""> <label for="kolProjectPrice_num">數量</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- .form-group -->
                    <div class="form-group">
                        <div class="form-label-group">
                            <input type="text" id="kolProjectPrice_cost" class="form-control" value="" placeholder="報價" maxlength="12" required=""> <label for="kolProjectPrice_cost">報價</label>
                        </div>
                    </div><!-- /.form-group -->
                    <!-- .form-group -->
                    <div class="form-group">
                        <label class="control-label" for="flatpickr01">報價日期</label> <input id="kolProjectPrice_date" type="text" class="form-control" data-toggle="flatpickr" data-date-format="Y/m/d">
                    </div><!-- /.form-group -->
                    

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