<?=$this->extend('templates/front_example.php');?>

<?=$this->section('title');?>
    ZENITH - 기타 광고관리
<?=$this->endSection();?>

<?=$this->section('content');?>
<div class="sub-contents-wrap">
    <div class="title-area">
        <h2 class="page-title">기타 광고관리</h2>
        <p class="title-disc">여라 매체의 광고를 확인 하세요~</p>
    </div>

    <div class="search-wrap">
        <form class="search d-flex justify-content-center">
            <div class="term d-flex align-items-center">
                <input type="text">
                <button type="button"><i class="bi bi-calendar2-week"></i></button>
                <span> ~ </span>
                <input type="text">
                <button type="button"><i class="bi bi-calendar2-week"></i></button>
            </div>
            <div class="input">
                <input class="" type="text" placeholder="검색어를 입력하세요">
                <button class="btn-primary" type="submit">조회</button>
            </div>
        </form>
        <div class="detail row d-flex justify-content-center">
            <dl class="col">
                <dt>노출수</dt>
                <dd>34,456</dd>
            </dl>
            <dl class="col">
                <dt>클릭수</dt>
                <dd>809</dd>
            </dl>
            <dl class="col">
                <dt>클릭율</dt>
                <dd>1.09</dd>
            </dl>
            <dl class="col">
                <dt>지출액</dt>
                <dd>1,234,123</dd>
            </dl>
            <dl class="col">
                <dt>DB수</dt>
                <dd>61</dd>
            </dl>
            <dl class="col">
                <dt>DB당 단가</dt>
                <dd>45,234</dd>
            </dl>
            <dl class="col">
                <dt>전환율</dt>
                <dd>7.34</dd>
            </dl>
            <dl class="col">
                <dt>매출</dt>
                <dd>23,456,900</dd>
            </dl>
        </div>
    </div>

    <div class="section client-list biz">
        <h3 class="content-title toggle"><i class="bi bi-chevron-up"></i> 매체</h3>
        <div class="row">
            <div class="col">
                <div class="inner">
                    <button type="button">열혈 패밀리</button>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">케어랩스5</button>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">케어랩스7</button>
                </div>
            </div>
        </div>
    </div>
    <div class="section client-list advertiser">
        <h3 class="content-title toggle"><i class="bi bi-chevron-up"></i> 광고주</h3>
        <div class="row">
            <div class="col">
                <div class="inner">
                    <button type="button" class="active alert">[대전]상상의원_가나다라마마다먀라</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button" class="alert">플란치과_임플○</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button" class="active">비결뷰티센터</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">[대전]상상의원_가나다라마마다먀라</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">플란치과_임플○</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">비결뷰티센터</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">거무타</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">마디척병원○</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">[전국]상상의원_주름보톡스2*</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">[대전]상상의원_가나다라마마다먀라</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">플란치과_임플○</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">비결뷰티센터</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">[대전]상상의원_가나다라마마다먀라</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">플란치과_임플○</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="inner">
                    <button type="button">비결뷰티센터</button>
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" style="width:calc(14 / 170 * 100%)"></div>
                        <div class="txt">14/170</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="section">
        <h3 class="content-title toggle"><i class="bi bi-chevron-up"></i> 이벤트 번호</h3>
        <div>

        </div>
    </div>
    <div class="section event-list">
        <h3 class="content-title toggle"><i class="bi bi-chevron-up"></i> 이벤트 구분</h3>
        <div class="table-responsive">
            <table class="table table-striped table-hover table-event">
                <colgroup>
                    <col style="width:2%;">
                    <col style="width:7%;">
                    <col style="width:7%;">
                    <col style="width:5%">
                    <col>
                    <col style="width:5%">
                    <col>
                    <col style="width:5%;">
                    <col style="width:5%;">
                    <col style="width:5%;">
                    <col style="width:6%;">
                    <col style="width:5.5%;">
                    <col style="width:5%;">
                    <col style="width:5.5%;">
                    <col style="width:5.5%;">
                    <col style="width:5%;">
                    <col style="width:3%;">
                </colgroup>
                <thead class="table-dark">
                    <tr>
                        <th scope="col" rowspan="2"></th>
                        <th scope="col" rowspan="2">날짜</th>
                        <th scope="col" rowspan="2">이벤트 번호</th>
                        <th scope="col" rowspan="2">site</th>
                        <th scope="col" rowspan="2">광고주</th>
                        <th scope="col" rowspan="2">목표수량</th>
                        <th scope="col" rowspan="2">이벤트 구분</th>
                        <th scope="col" colspan="3">DB 수량</th>
                        <th scope="col" rowspan="2">정산DB단가</th>
                        <th scope="col" rowspan="2">소진금액(vat포함)</th>
                        <th scope="col" rowspan="2">vat별도</th>
                        <th scope="col" rowspan="2">현재DB단가</th>
                        <th scope="col" rowspan="2">수익</th>
                        <th scope="col" rowspan="2">수익률</th>
                        <th scope="col" rowspan="2">확인</th>
                    </tr>
                    <tr>
                        <th scope="col">총 DB</th>
                        <th scope="col">유효 DB</th>
                        <th scope="col" class="r-border">무효 DB</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-center"></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-center"></td>
                        <td class="text-center"></td>
                        <td class="text-center" class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0%</td>
                        <td class="text-center"></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input class="form-check-input" type="checkbox"></td>
                        <td><input type="text" class="form-control" value="20230314" disabled></td>
                        <td><input type="text" class="form-control" value="evt_3498" disabled></td>
                        <td><input type="text" class="form-control" value="2" disabled></td>
                        <td><input type="text" class="form-control" value="강남그랜드안과의원" disabled></td>
                        <td><input type="text" class="form-control"></td>
                        <td>라식라섹 의료법 최대 할인</td>
                        <td class="text-center">2</td>
                        <td class="text-center">2</td>
                        <td class="text-center" class="text-center">0</td>
                        <td><input type="text" class="form-control"></td>
                        <td><input type="text" class="form-control"></td>
                        <td>0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0%</td>
                        <td class="text-center"><input class="form-check-input" type="checkbox"></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input class="form-check-input" type="checkbox"></td>
                        <td><input type="text" class="form-control" value="20230314" disabled></td>
                        <td><input type="text" class="form-control" value="evt_3498" disabled></td>
                        <td><input type="text" class="form-control" value="2" disabled></td>
                        <td><input type="text" class="form-control" value="강남그랜드안과의원" disabled></td>
                        <td><input type="text" class="form-control"></td>
                        <td>라식라섹 의료법 최대 할인</td>
                        <td class="text-center">2</td>
                        <td class="text-center">2</td>
                        <td class="text-center" class="text-center">0</td>
                        <td><input type="text" class="form-control"></td>
                        <td><input type="text" class="form-control"></td>
                        <td>0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0%</td>
                        <td class="text-center"><input class="form-check-input" type="checkbox"></td>
                    </tr>
                    <tr>
                        <td class="text-center"><input class="form-check-input" type="checkbox"></td>
                        <td><input type="text" class="form-control" value="20230314" disabled></td>
                        <td><input type="text" class="form-control" value="evt_3498" disabled></td>
                        <td><input type="text" class="form-control" value="2" disabled></td>
                        <td><input type="text" class="form-control" value="강남그랜드안과의원" disabled></td>
                        <td><input type="text" class="form-control"></td>
                        <td>라식라섹 의료법 최대 할인</td>
                        <td class="text-center">2</td>
                        <td class="text-center">2</td>
                        <td class="text-center" class="text-center">0</td>
                        <td><input type="text" class="form-control"></td>
                        <td><input type="text" class="form-control"></td>
                        <td>0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0</td>
                        <td class="text-center">0%</td>
                        <td class="text-center"><input class="form-check-input" type="checkbox"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<?=$this->endSection();?>
