@extends('layouts.app')

@section('title', 'Subscription & Billing - Tiqkets')

@section('page-title', 'Subscription & Billing')

@push('styles')
<style>
    .subscription-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    .plans-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 24px;
        margin-bottom: 50px;
    }

    .plan-card {
        background: white;
        border-radius: 12px;
        padding: 32px 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        position: relative;
    }

    .plan-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .plan-price {
        font-size: 32px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 8px;
    }

    .plan-price .currency {
        font-size: 24px;
    }

    .plan-period {
        color: #6b7280;
        font-size: 15px;
        margin-left: 4px;
    }

    .plan-name {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
        margin: 16px 0 8px 0;
    }

    .plan-description {
        color: #6b7280;
        font-size: 14px;
        margin-bottom: 24px;
        min-height: 40px;
    }

    .plan-features {
        list-style: none;
        padding: 0;
        margin: 0 0 28px 0;
    }

    .plan-features li {
        display: flex;
        align-items: center;
        padding: 10px 0;
        color: #374151;
        font-size: 14px;
    }

    .plan-features li i {
        color: #10b981;
        margin-right: 12px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .btn-plan {
        width: 100%;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
    }

    .btn-choose {
        background: white;
        border: 2px solid #d1d5db;
        color: #374151;
    }

    .btn-choose:hover {
        border-color: #7c2d5e;
        color: #7c2d5e;
    }

    .btn-current {
        background: #e5e7eb;
        color: #6b7280;
        cursor: not-allowed;
        border: 2px solid transparent;
    }

    .btn-upgrade {
        background: #7c2d5e;
        color: white;
        border: 2px solid transparent;
    }

    .btn-upgrade:hover {
        background: #651f4a;
    }

    .transactions-section {
        background: white;
        border-radius: 12px;
        padding: 28px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .section-title {
        font-size: 20px;
        font-weight: 600;
        color: #111827;
    }

    .search-box {
        position: relative;
        width: 280px;
    }

    .search-box input {
        width: 100%;
        padding: 10px 40px 10px 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        transition: border-color 0.2s;
    }

    .search-box input:focus {
        outline: none;
        border-color: #7c2d5e;
    }

    .search-box i {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }

    .transactions-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .transactions-table thead th {
        background: #f9fafb;
        color: #6b7280;
        font-weight: 600;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 14px 16px;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
    }

    .transactions-table thead th:first-child {
        border-top-left-radius: 8px;
    }

    .transactions-table thead th:last-child {
        border-top-right-radius: 8px;
    }

    .transactions-table tbody td {
        padding: 16px;
        color: #374151;
        font-size: 14px;
        border-bottom: 1px solid #f3f4f6;
    }

    .transactions-table tbody tr:hover {
        background: #f9fafb;
    }

    .status-badge {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 500;
    }

    .status-complete {
        background: #d1fae5;
        color: #065f46;
    }

    .status-failed {
        background: #fee2e2;
        color: #991b1b;
    }

    .btn-invoice {
        background: white;
        border: 1px solid #d1d5db;
        padding: 6px 10px;
        border-radius: 6px;
        color: #6b7280;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-invoice:hover {
        border-color: #7c2d5e;
        color: #7c2d5e;
    }

    @media (max-width: 768px) {
        .plans-grid {
            grid-template-columns: 1fr;
        }

        .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
        }

        .search-box {
            width: 100%;
        }

        .transactions-section {
            padding: 20px 16px;
            overflow-x: auto;
        }

        .transactions-table {
            min-width: 800px;
        }
    }
</style>
@endpush

@section('content')
<div class="subscription-container">
    <!-- Pricing Plans -->
    <div class="plans-grid">
        <!-- Basic Plan -->
        <div class="plan-card">
            <div class="plan-price">
                <span class="currency">₹</span> 999
                <span class="plan-period">/month</span>
            </div>
            <h3 class="plan-name">Basic Plan</h3>
            <p class="plan-description">Basic plan with minimum features</p>
            <ul class="plan-features">
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Up to 2 Branches</span>
                </li>
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Basic Reports</span>
                </li>
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Email Support</span>
                </li>
            </ul>
            <button class="btn-plan btn-choose">Choose Plan</button>
        </div>

        <!-- Standard Plan (Current) -->
        <div class="plan-card">
            <div class="plan-price">
                <span class="currency">₹</span> 4999
                <span class="plan-period">/ 6 months</span>
            </div>
            <h3 class="plan-name">Standard Plan</h3>
            <p class="plan-description">Professional plan for larger businesses</p>
            <ul class="plan-features">
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Up to 5 Branches</span>
                </li>
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Advanced Reports</span>
                </li>
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Priority Email & Chat Support</span>
                </li>
            </ul>
            <button class="btn-plan btn-current">Current Plan</button>
        </div>

        <!-- Premium Plan -->
        <div class="plan-card">
            <div class="plan-price">
                <span class="currency">₹</span> 8999
                <span class="plan-period">/year</span>
            </div>
            <h3 class="plan-name">Premium Plan</h3>
            <p class="plan-description">Enterprise plan with custom solutions</p>
            <ul class="plan-features">
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Unlimited Branches</span>
                </li>
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>Full Analytics Dashboard</span>
                </li>
                <li>
                    <i class="fas fa-check-circle"></i>
                    <span>24/7 Priority Support</span>
                </li>
            </ul>
            <button class="btn-plan btn-upgrade">Upgrade</button>
        </div>
    </div>

    <!-- Past Transactions -->
    <div class="transactions-section">
        <div class="section-header">
            <h2 class="section-title">Past Transactions</h2>
            <div class="search-box">
                <input type="text" placeholder="Search">
                <i class="fas fa-search"></i>
            </div>
        </div>

        <table class="transactions-table">
            <thead>
                <tr>
                    <th>Plan Name</th>
                    <th>Price</th>
                    <th>Payment Date</th>
                    <th>Validity Period</th>
                    <th>Payment Status</th>
                    <th>Invoice</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Free Trial</td>
                    <td>₹ 0</td>
                    <td>23 Jul, 2024 at 3:45 PM</td>
                    <td>23 Jul, 2025</td>
                    <td><span class="status-badge status-complete">Complete</span></td>
                    <td>
                        <button class="btn-invoice">
                            <i class="fas fa-file-invoice"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>Tiqkets Basic</td>
                    <td>₹ 1270</td>
                    <td>5 Aug, 2023 at 9:15 AM</td>
                    <td>5 Aug, 2024</td>
                    <td><span class="status-badge status-failed">Failed</span></td>
                    <td>
                        <button class="btn-invoice">
                            <i class="fas fa-file-invoice"></i>
                        </button>
                    </td>
                </tr>
                <tr>
                    <td>Tiqkets Plus</td>
                    <td>₹ 2541</td>
                    <td>12 Sep, 2022 at 6:30 PM</td>
                    <td>12 Sep, 2023</td>
                    <td><span class="status-badge status-complete">Complete</span></td>
                    <td>
                        <button class="btn-invoice">
                            <i class="fas fa-file-invoice"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
@endsection