@extends('layouts.user')
@section('content')
<div class="container">

    <div class="mt-5 mb-3 d-md-flex justify-content-between align-items-center">
        <div>
            <h2 class="m-0">Your Dashboard</h2>
            <p class="text-muted" style="font-size:1.1rem">Overview of your tax intelligence and subscriptions.</p>
        </div>
        <a style="background-color:#024c53" class="btn-cta text-white" href="{{url('resources')}}">Browse Resources</a>
    </div>
    @php
    $isActive = $payment && $payment->subscription && $payment->subscription->status === 'active';
    @endphp
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card rounded-full p-4 p-md-5 {{ $isActive ? 'bg-dark text-white' : 'bg-light text-dark' }} h-100 position-relative overflow-hidden">
                <div class="position-relative z-1">

                    <div class="d-flex justify-content-between align-items-center mb-4">
                        @if($isActive)
                        <span class="badge bg-primary rounded-pill px-3 py-2 fw-bold">PRO PLAN ACTIVE</span>
                        <i class="bi bi-shield-check fs-2 text-info"></i>
                        @else
                        <span class="badge bg-danger rounded-pill px-3 py-2 fw-bold">SUBSCRIPTION INACTIVE</span>
                        <i class="bi bi-exclamation-triangle fs-2 text-danger"></i>
                        @endif
                    </div>

                    <p class="opacity-75 small text-uppercase fw-bold mb-1">Access Status</p>

                    @if($isActive)
                    <h1 class="fw-black mb-3">Everything is Looking Good.</h1>
                    <p class="lead opacity-75 mb-3 mb-md-5">You have full access to all VAT, Income Tax, and PAYE modules for this financial year.</p>

                    @else
                    <h1 class="fw-black mb-3 text-dark">Access Restricted.</h1>
                    <p class="lead text-muted mb-5">Your subscription has expired or hasn't been activated yet. Renew now to continue accessing your tax analytics.</p>

                    <div class="mt-auto pt-4">
                        <a href="{{ route('payment.checkout', ['plan' => 'premium-uuid']) }}" class="">
                            Renew Subscription
                        </a>
                    </div>
                    @endif

                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card p-2 p-md-4 shadow-sm h-100 border text-center d-flex flex-column align-items-center justify-content-center">
                <div class="bg-firu-soft p-3 rounded-circle mb-3">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
                        <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9" />
                        <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z" />
                    </svg>
                </div>
                <h6 class="text-muted small text-uppercase fw-bold mb-1">Next Renewal</h6>
                <h3 class="fw-black"></h3>
                <hr class="w-25 my-3 opacity-25">
                <p class="text-success small mb-0 fw-bold">
                    <i class="bi bi-credit-card-2-front-fill me-1"></i> M-Pesa Auto-pay Enabled
                </p>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border shadow-sm h-100 p-2 p-md-4">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h5>Recent Activity</h5>
                    <span class="badge bg-firu-soft text-primary-firu fw-bold">Live</span>
                </div>

                <div class="vstack gap-4">
                    <div class="d-flex align-items-center gap-3">
                        <div class="bg-success-subtle p-2 rounded-3 text-success">
                            <i class="bi bi-file-earmark-check-fill fs-5"></i>
                        </div>
                        <div>
                            <p class="mb-0 small fw-bold">KRA Return Drafted</p>
                            <span class="text-muted smaller">Today, 10:45 AM</span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center gap-3">
                        <div class="bg-info-subtle p-2 rounded-3 text-info">
                            <i class="bi bi-envelope-open-fill fs-5"></i>
                        </div>
                        <div>
                            <p class="mb-0 small fw-bold">Tax Compliance Email Sent</p>
                            <span class="text-muted smaller">Yesterday</span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center gap-3">
                        <div class="bg-warning-subtle p-2 rounded-3 text-warning">
                            <i class="bi bi-clock-history fs-5"></i>
                        </div>
                        <div>
                            <p class="mb-0 small fw-bold">M-Pesa Payment Received</p>
                            <span class="text-muted smaller">3 days ago</span>
                        </div>
                    </div>
                </div>

                <a href="#" class="small mx-auto mt-3">VIEW ACTIVITY LOG <i class="bi bi-arrow-right"></i></a>
            </div>
        </div>

        <div class="col-lg-8">
            <div class="card border shadow-sm h-100 p-2 p-md-4">
                <h5 class="card-title">Recent Payments</h5>
                @if($payments->isEmpty())
                <p class="text-muted small mb-0">No payments found.</p>
                @else
                <div class="table-responsive">
                    <table class="table table-hover table-striped table-borderless align-middle mb-0">
                        <thead>
                            <tr>
                                <th>{{'Reference'}}</th>
                                <th>{{'Amount'}}</th>
                                <th>{{'Date'}}</th>
                                <th>{{'Mode'}}</th>
                                <th>{{'Status'}}</th>
                                <th class="text-center">{{'Action'}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($payments as $payment)
                            <tr>
                                <td>
                                    <h6 class="m-0">{{ $payment->reference }}</h6>
                                </td>
                                <td><span>{{ number_format($payment->amount) }}</span></td>
                                <td>{{ $payment->created_at->format('M d, Y') }}</td>
                                <td><button class="small bg-info">{{'M-Pesa'}}</button></td>
                                <td>
                                    @if($payment->status == 'success')
                                    <span class="status success fw-normal">{{'Success'}}</span>
                                    @elseif($payment->status == 'pending')
                                    <span class="status warning text-dark fw-normal">{{'Pending'}}</span>
                                    @elseif($payment->status == 'failed')
                                    <span class="status danger fw-normal">{{'Failed'}}</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="red" class="bi bi-file-pdf" viewBox="0 0 16 16">
                                        <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
                                        <path d="M4.603 12.087a.8.8 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.7 7.7 0 0 1 1.482-.645 20 20 0 0 0 1.062-2.227 7.3 7.3 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.187-.012.395-.047.614-.084.51-.27 1.134-.52 1.794a11 11 0 0 0 .98 1.686 5.8 5.8 0 0 1 1.334.05c.364.065.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.86.86 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.7 5.7 0 0 1-.911-.95 11.6 11.6 0 0 0-1.997.406 11.3 11.3 0 0 1-1.021 1.51c-.29.35-.608.655-.926.787a.8.8 0 0 1-.58.029m1.379-1.901q-.25.115-.459.238c-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361q.016.032.026.044l.035-.012c.137-.056.355-.235.635-.572a8 8 0 0 0 .45-.606m1.64-1.33a13 13 0 0 1 1.01-.193 12 12 0 0 1-.51-.858 21 21 0 0 1-.5 1.05zm2.446.45q.226.244.435.41c.24.19.407.253.498.256a.1.1 0 0 0 .07-.015.3.3 0 0 0 .094-.125.44.44 0 0 0 .059-.2.1.1 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a4 4 0 0 0-.612-.053zM8.078 5.8a7 7 0 0 0 .2-.828q.046-.282.038-.465a.6.6 0 0 0-.032-.198.5.5 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822q.036.167.09.346z" />
                                    </svg>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection