@extends('layout.admin.main')
@section('title','契約詳細（解約の申し込み）')
@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
    <link rel="stylesheet" href="/_assets/commons/css/list.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/breadcrumbs.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/pagination.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/commons/css/lme_custom.css?v={{config("sns-line.version")}}" type="text/css">
    <link rel="stylesheet" href="/_assets/modules/bill/css/confirm_cancel.css?v={{config("sns-line.version")}}"
          type="text/css">
@endpush
@section('content')
    <div id="loading-clarity"></div>
    <section id="confirm-cancel-page" v-cloak>
        <div id="header-page">
            <nav class="breadcrumb breadcrumb01">
                <ul>
                    <li><button @click="redirectPage('list_contract')">契約情報・領収書</button></li>
                    <li><button @click="redirectPage('detail_contract')">契約詳細</button></li>
                    <li>解約の申し込み</li>
                </ul>
            </nav>
            <div class="flex-align-items" style="margin-top: 17px;">
                <div class="title">解約の申し込み</div>
            </div>
        </div>
        <div class="main-container">
            <div class="steps">
                <div class="step" :class="step_active == 1 ? 'active' : (step_active > 1 ? 'confirmed' : null)">
                    <span class="circle">
                        <div class="checked" v-if="step_active > 1">
                            <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.625 4.22709e-06H11.533C11.4575 0.000168864 11.383 0.0174395 11.3151 0.0505197C11.2472 0.0835998 11.1877 0.13163 11.141 0.191004L4.7 8.352L1.61 4.438C1.56333 4.37863 1.50381 4.3306 1.43592 4.29752C1.36803 4.26444 1.29352 4.24717 1.218 4.247H0.125C0.101786 4.247 0.0790307 4.25347 0.0592837 4.26567C0.0395367 4.27788 0.0235783 4.29534 0.0131967 4.3161C0.00281505 4.33687 -0.0015796 4.36011 0.000505145 4.38323C0.00258989 4.40635 0.0110717 4.42843 0.0250001 4.447L4.307 9.87C4.35379 9.92949 4.41347 9.97758 4.48155 10.0106C4.54962 10.0437 4.62432 10.0609 4.7 10.0609C4.77568 10.0609 4.85038 10.0437 4.91845 10.0106C4.98653 9.97758 5.04621 9.92949 5.093 9.87L12.724 0.200004C12.7383 0.181605 12.7471 0.159558 12.7494 0.136388C12.7517 0.113217 12.7475 0.0898603 12.7372 0.0689905C12.7268 0.0481206 12.7108 0.0305815 12.691 0.0183811C12.6712 0.00618064 12.6483 -0.000188017 12.625 4.22709e-06Z" fill="white"/>
                            </svg>
                        </div>
                        <div v-else>1</div>
                    </span>
                    <span class="label">解約理由の選択</span>
                </div>
                <div class="line"></div>
                <div class="step" :class="step_active == 2 ? 'active' : (step_active > 2 ? 'confirmed' : null)">
                    <span class="circle">
                        <div class="checked" v-if="step_active > 2">
                            <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.625 4.22709e-06H11.533C11.4575 0.000168864 11.383 0.0174395 11.3151 0.0505197C11.2472 0.0835998 11.1877 0.13163 11.141 0.191004L4.7 8.352L1.61 4.438C1.56333 4.37863 1.50381 4.3306 1.43592 4.29752C1.36803 4.26444 1.29352 4.24717 1.218 4.247H0.125C0.101786 4.247 0.0790307 4.25347 0.0592837 4.26567C0.0395367 4.27788 0.0235783 4.29534 0.0131967 4.3161C0.00281505 4.33687 -0.0015796 4.36011 0.000505145 4.38323C0.00258989 4.40635 0.0110717 4.42843 0.0250001 4.447L4.307 9.87C4.35379 9.92949 4.41347 9.97758 4.48155 10.0106C4.54962 10.0437 4.62432 10.0609 4.7 10.0609C4.77568 10.0609 4.85038 10.0437 4.91845 10.0106C4.98653 9.97758 5.04621 9.92949 5.093 9.87L12.724 0.200004C12.7383 0.181605 12.7471 0.159558 12.7494 0.136388C12.7517 0.113217 12.7475 0.0898603 12.7372 0.0689905C12.7268 0.0481206 12.7108 0.0305815 12.691 0.0183811C12.6712 0.00618064 12.6483 -0.000188017 12.625 4.22709e-06Z" fill="white"/>
                            </svg>
                        </div>
                        <div v-else>2</div>
                    </span>
                    <span class="label">解約内容確認</span>
                </div>
                <div class="line"></div>
                <div class="step" :class="step_active == 3 ? 'confirmed' : null">
                    <span class="circle">
                        <div class="checked" v-if="step_active >= 3">
                            <svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12.625 4.22709e-06H11.533C11.4575 0.000168864 11.383 0.0174395 11.3151 0.0505197C11.2472 0.0835998 11.1877 0.13163 11.141 0.191004L4.7 8.352L1.61 4.438C1.56333 4.37863 1.50381 4.3306 1.43592 4.29752C1.36803 4.26444 1.29352 4.24717 1.218 4.247H0.125C0.101786 4.247 0.0790307 4.25347 0.0592837 4.26567C0.0395367 4.27788 0.0235783 4.29534 0.0131967 4.3161C0.00281505 4.33687 -0.0015796 4.36011 0.000505145 4.38323C0.00258989 4.40635 0.0110717 4.42843 0.0250001 4.447L4.307 9.87C4.35379 9.92949 4.41347 9.97758 4.48155 10.0106C4.54962 10.0437 4.62432 10.0609 4.7 10.0609C4.77568 10.0609 4.85038 10.0437 4.91845 10.0106C4.98653 9.97758 5.04621 9.92949 5.093 9.87L12.724 0.200004C12.7383 0.181605 12.7471 0.159558 12.7494 0.136388C12.7517 0.113217 12.7475 0.0898603 12.7372 0.0689905C12.7268 0.0481206 12.7108 0.0305815 12.691 0.0183811C12.6712 0.00618064 12.6483 -0.000188017 12.625 4.22709e-06Z" fill="white"/>
                            </svg>
                        </div>
                        <div v-else>3</div>
                    </span>
                    <span class="label">完了</span>
                </div>
            </div>

            <div class="content-section">
                @include('basic.bill.components.confirm_cancel.step1')
                @include('basic.bill.components.confirm_cancel.step2')
                @include('basic.bill.components.confirm_cancel.step3')
            </div>
        </div>
    </section>
@endsection

@push('script')
    <script src="/js/media/vue.min.js"></script>
    <script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{config("sns-line.version")}}"></script>
    <script src="/js/moment.min.js"></script>
    <script src="/js/moment-with-locales.js"></script>
    <script>
        let bot = @json($bot);
        let contract_detail_id = {{ $contract_detail_id }};
    </script>

    <script src="/js/tailwindcss.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
    <script src="/_assets/commons/js/lme.js?v={{config("sns-line.version")}}"></script>

    <script src="/_assets/modules/bill/js/confirm_cancel.js?v={{config("sns-line.version")}}"></script>
@endpush