@extends('layout.basic.main')
@push('css')
<style>
    .fa-chevron-left, .fa-chevron-right {
        width: 25px;
        height: 40px;
        margin-left: 5px;
        margin-right: 5px;
        padding: 5px;
        font-size: 25px;
        color: #FFFFFF ;
        background-color: #F2F2F2 ;
        line-height: 1;
        border-radius: 5px;
   }

    table {
        border-collapse: collapse;
        width: 90%;
    }

    table .th {
        background-color: black !important;
    }

    th {
        height: 50px; 
        font-weight: bold; 
        font-size: 16px;
        color: #51595C;
    }

    tbody {
        font-weight: bold; 
        font-size: 13px;
    }

    tr {
        border-bottom: 2px solid #F8F8F8;
    }

    tr:first-child {
        border-top: none;
    }

    td {
        border: none !important;
        height: 50px;
        overflow: hidden;
    }

    td .message {
        width: 40%;
    } 

    .leftAlaign {
        text-align: left;
    }

    .rightAlaign {
        text-align: right;
    }
</style>

@endpush
@section('content')
<article>
    <section>
        <h2 style="font-size: 25px; color: #51595C; font-weight: bold; margin-top: 20px">
        解約一覧</h2>
        <div style="display: flex; align-items: baseline; justify-content: space-between; margin-top: 25px; width: 90%;">
            <div style="display: flex; align-items: center;">
                <i class="fas fa-chevron-left" ></i>
                    <input  type="month" class="form-control text-center filter-month"
                            style="width: 200px; border: 1px solid #E8E8E8; height: 40px; font-size: 15px">
                <i class="fas fa-chevron-right " ></i>
            </div>
            <div>
                <input type="text" class="form-control" autocomplete="off" style="width: 300px; height: 40px; font-weight: bold;">
            </div>
            <span style="padding-top: 5px;">
                <button type="button" class="btn btn-sns-line btn-sns-line-secondary" 
                style="width: 100px; height:40px; padding: 8px; font-size: 15px;font-weight: bold;">検索
                </button>
            </span>
            <span style="padding-top: 5px;">
                <button type="button" class="btn btn-sns-line btn-sns-line-dark" style="width: 200px; height:40px; padding: 8px; font-size: 15px; font-weight: bold;">解約理由
                </button>
            </span>
            <div style="font-size: 1rem;">表示件数</div>
            <div style="font-size: 1.2rem;">4件</div>
            <form>
            <input list="caseNumbers" name="caseNumber" id="caseNumber" 
                   style="height: 40px; width: 65px; border-radius: 5px; ">
            <datalist id="caseNumbers">
                <option value="100">
                <option value="500">
                <option value="1000">
                <option value="2000">
            </datalist>
            </form>
            <div style="font-size: 15px;">件表示</div>
        </div>
            <div>
                <table>
                    <tbody>
                        <tr >
                            <th class="leftAlaign" style="border-radius: 5px 0px 0px 5px; ">解約日時</th>
                            <th class="leftAlaign" >LOA名称</th>
                            <th >ユーザー名</th>
                            <th class="rightAlaign">決済時アドレス</th>
                            <th class="rightAlaign">金額</th>
                            <th class="rightAlaign">決済方法</th>
                            <th class="rightAlaign" style="border-radius: 0px 5px 5px 0px">継続回数</th>
                        </tr>
                        <tr>
                            <td class="leftAlaign">2023-01-01</td>
                            <td class="leftAlaign">LINE公式アカウント名</td>
                            <td >ユーザー名</td>
                            <td class="rightAlaign">abc@gmail.com</td>
                            <td class="rightAlaign">¥ 10,780</td>
                            <td class="rightAlaign">カード</td>
                            <td class="rightAlaign">1</td>
                        </tr>
                        <tr>
                            <td class="leftAlaign">2023-01-01</td>
                            <td class="leftAlaign">LINE公式アカウント名</td>
                            <td >ユーザー名</td>
                            <td class="rightAlaign">abc@gmail.com</td>
                            <td class="rightAlaign">¥ 10,780</td>
                            <td class="rightAlaign">カード</td>
                            <td class="rightAlaign">2</td>
                        </tr>
                        <tr>
                            <td class="leftAlaign">2023-01-01</td>
                            <td class="leftAlaign">LINE公式アカウント名</td>
                            <td >ユーザー名</td>
                            <td class="rightAlaign">abc@gmail.com</td>
                            <td class="rightAlaign">¥ 10,780</td>
                            <td class="rightAlaign">銀行振込</td>
                            <td class="rightAlaign">1</td>
                        </tr>
                        <tr>
                            <td class="leftAlaign">2023-01-01</td>
                            <td class="leftAlaign">EP20</td>
                            <td >ユーザー名</td>
                            <td class="rightAlaign">abc@gmail.com</td>
                            <td class="rightAlaign">¥ 194,040</td>
                            <td class="rightAlaign">カード</td>
                            <td class="rightAlaign">2</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        <!-- </div> -->
    </section>
</article>
@endsection
@push('script')
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="/js/form_answer/jquery.ui.datepicker-ja.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="/js/vue-paginate.js"></script>
    <script src="/plugins/vuejs/vue-resource@1.3.4.js"></script>
    <script>