@extends('layouts.app')

@section('title', 'Pay Your Taxes - ERAS')

@section('content')
<main class="relative">
    {{-- Hero Section --}}
    <section class="py-16 lg:py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="text-center max-w-3xl mx-auto">
                <h1 class="text-3xl lg:text-4xl font-semibold tracking-tight text-gray-900 mb-4">
                    Revenue Services Hub
                </h1>
                <div class="w-16 h-1 bg-emerald-600 mx-auto mb-6"></div>
                <p class="text-lg text-gray-600">
                    Edo Revenue Administration System - Kindly interact with EIRS on a wide range of revenue administrator services to assist you better.
                </p>
            </div>
        </div>
    </section>

    {{-- Content Section --}}
    <section class="pb-16 lg:pb-24">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
                {{-- Sidebar Navigation --}}
                <div class="lg:col-span-1">
                    <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6 sticky top-24">
                        <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">Revenue Services Hub</h3>
                        <nav class="space-y-2">
                            <a href="{{ route('cbs.pay-taxes') }}" class="flex items-center gap-2 text-sm text-emerald-600 font-medium">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                Pay Your Taxes
                            </a>
                        </nav>
                    </div>
                </div>

                {{-- Main Content --}}
                <div class="lg:col-span-3">
                    {{-- Payment Options Grid --}}
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        {{-- Pay an Assessment Bill --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Pay an Assessment Bill</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                If you have received a notification of assessment or a service bill, please enter the reference number here.
                            </p>
                            <a href="https://tyson.eirs.gov.ng/webpay/" target="_blank" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Pay
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            </a>
                        </div>

                        {{-- Pay on Your Tax Account --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Pay on Your Tax Account</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                You can also deposit money into your ERAS Tax Account which can then be applied to any upcoming taxes you may be liable for.
                            </p>
                            <a href="https://tyson.eirs.gov.ng/webpay/" target="_blank" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Pay
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            </a>
                        </div>

                        {{-- Pay for MDA Services and Taxes --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Pay for MDA Services and Taxes</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                You can make a payment against a named tax or government service. Start by selecting the applicable options below.
                            </p>
                            <a href="https://tyson.eirs.gov.ng/webpay/" target="_blank" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Pay
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            </a>
                        </div>

                        {{-- Pay an MDA Services Bill --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Pay an MDA Services Bill</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                If you have received a notification of assessment or a service bill, please enter the reference number here.
                            </p>
                            <a href="https://tyson.eirs.gov.ng/webpay/" target="_blank" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Pay
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                            </a>
                        </div>

                        {{-- Request Personal eTCC --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Request Personal eTCC</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                Request for your personal tax clearance certificate.
                            </p>
                            <a href="{{ Route::has('request-personal-tcc.search') ? route('request-personal-tcc.search') : '#' }}" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Request
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>

                        {{-- Verify Personal eTCC --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Verify Personal eTCC</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                Verify Personal eTCC.
                            </p>
                            <a href="{{ route('verify-tcc.list') }}" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Verify
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>

                        {{-- Verify Treasury Receipt --}}
                        <div class="bg-white/60 backdrop-blur-md rounded-xl border border-white/30 p-6">
                            <h3 class="text-lg font-semibold text-gray-900 mb-3">Verify Treasury Receipt</h3>
                            <p class="text-sm text-gray-600 mb-6">
                                Verify Treasury Receipt.
                            </p>
                            <a href="{{ route('cbs.verify-treasury-receipt') }}" class="inline-flex items-center justify-center w-full gap-2 bg-emerald-600 text-white px-4 py-3 rounded-lg hover:bg-emerald-700 transition font-medium">
                                Verify
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
@endsection