@extends('layouts.app')
@section('title', '定期契約履歴を見る-契約履歴 | So-Manager')
@section('content')
<main>
    <header class="title-header">契約履歴 &gt; 定期契約履歴を見る</header>
    <section class="container mt30 mb50">
        @if(count($contracts) > 0)
        @foreach($contracts as $i => $contract)
        @if($i % 2 == 0)
        <div class="row">
            @endif
            <article class="col-12 col-lg-6 mb20">
                <div class="card border-success">
                    <table class="table text-center table-no-margin bg-white border-white">
                        <tr>
                            <th>定期契約ID</th>
                            <td>{{ $contract->contract_id }}</td>
                        </tr>
                        <tr>
                            <th>駐輪場名</th>
                            <td>{{ $contract->park_name }}</td>
                        </tr>
                        <tr>
                            <th>利用者区分</th>
                            <td>{{ $contract->usertype_subject1 }}
                                @if($contract->usertype_subject3 !== '該当なし')
                                ・{{ $contract->usertype_subject3 }}
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <th>開始日</th>
                            <td>{{ $contract->formatted_periods }}</td>
                        </tr>
                        <tr>
                            <th>月数</th>
                            <td>{{ $contract->enable_months }}ヶ月</td>
                        </tr>
                        <tr>
                            <th>更新時期</th>
                            <td>{{ $contract->periode_with_grace }}</td>
                        </tr>
                        <tr>
                            <td colspan="2" class="text-center">
                                @if($contract->has_receipt)
                                <a href="{{ route('receipt.download', ['management_code' => $management_code, 'contract_id' => $contract->contract_id]) }}" class="btn btn-outline-secondary badge-pill custom-rounded-btn" style="background: transparent;">領収書再発行</a>
                                @else
                                <a href="{{ route('receipt.input', ['management_code' => $management_code, 'contract_id' => $contract->contract_id]) }}" class="btn btn-outline-secondary badge-pill custom-rounded-btn" style="background: transparent;">領収書発行</a>
                                @endif
                            </td>
                        </tr>
                    </table>
                </div>
            </article>
            @if($i % 2 == 1 || $i == count($contracts) - 1)
        </div>
        @endif
        @endforeach
        <div class="d-flex justify-content-center mt-4">
            {{ $contracts->links('partials.paging') }}
        </div>
        @else
        <div class="col-12 col-lg-12 mb20">
            <p>定期契約情報はありません。</p>
        </div>
        @endif
        <div class="mb-2 mt30" style="text-align:center;">
            <a href="{{ route('mypage', ['management_code' => $management_code]) }}" class="white-btn long-btn" style="max-width:500px; display:inline-block;">マイページへ戻る</a>
        </div>
    </section>
</main>

@endsection
<style>
    .custom-rounded-btn {
        border-radius: 2rem !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        font-weight: 500;
        min-width: 140px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }

    .btn-outline-secondary.badge-pill.custom-rounded-btn:not([disabled]):hover,
    .btn-outline-secondary.badge-pill.custom-rounded-btn:not(.disabled):hover {
        color: #212529 !important;
    }

    .table.text-center {
        border-radius: 1.25rem !important;
        border-collapse: separate !important;
        overflow: hidden;
    }

    .card {
        border-radius: 1.25rem !important;
        overflow: hidden;
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>