@extends('layouts.app')

@section('title', 'My Modules & Add-ons')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        My Modules & Add-ons
        <small>{{ $business->name }}</small>
    </h1>
</section>

<section class="content">
    <style>
        .tenant-module-hero {
            background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
            color: #fff;
            border-radius: 18px;
            padding: 26px;
            margin-bottom: 22px;
            box-shadow: 0 14px 35px rgba(29, 78, 216, .22);
        }
        .tenant-module-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 18px;
            margin-bottom: 30px;
        }
        .tenant-module-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            padding: 18px;
            min-height: 210px;
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
            transition: all .18s ease;
        }
        .tenant-module-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 34px rgba(15, 23, 42, .1);
        }
        .tenant-module-card h4 {
            font-weight: 700;
            margin: 0 0 8px;
            color: #111827;
        }
        .tenant-module-card p {
            color: #6b7280;
            flex: 1;
        }
        .tenant-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            margin-bottom: 12px;
        }
        .tenant-badge-enabled { background: #dcfce7; color: #166534; }
        .tenant-badge-available { background: #dbeafe; color: #1d4ed8; }
        .tenant-badge-requested { background: #fef3c7; color: #92400e; }
        .tenant-badge-disabled { background: #f3f4f6; color: #4b5563; }
        .tenant-module-price {
            font-weight: 700;
            color: #111827;
            margin-bottom: 12px;
        }
        .tenant-module-section-title {
            font-weight: 800;
            margin: 20px 0 14px;
        }
    </style>

    <div class="tenant-module-hero">
        <h2 style="margin-top:0;">Your software instance modules</h2>
        <p style="margin-bottom:0; max-width: 850px;">
            See what is active in your POS, what is included but disabled, and which extra add-ons are available for your business. 
            Add-ons may be included in your package or purchased separately. Requests are sent to the software admin for approval and activation.
        </p>
    </div>

    <h3 class="tenant-module-section-title">Core POS Features</h3>
    <div class="tenant-module-grid">
        @foreach($modules['core'] as $module)
            <div class="tenant-module-card">
                <span class="tenant-badge tenant-badge-{{ $module['status'] == 'enabled' ? 'enabled' : 'available' }}">
                    {{ $module['status'] == 'enabled' ? 'Enabled' : 'Available in settings' }}
                </span>
                <h4>{{ $module['name'] }}</h4>
                <p>{{ $module['description'] }}</p>
                <div class="tenant-module-price">{{ $module['price'] }}</div>
                @if($module['status'] == 'enabled')
                    <button class="btn btn-success btn-sm" disabled><i class="fa fa-check"></i> Active</button>
                @else
                    <a href="{{ $module['action_url'] }}" class="btn btn-default btn-sm">Open Business Settings</a>
                @endif
            </div>
        @endforeach
    </div>

    <h3 class="tenant-module-section-title">Available Add-ons</h3>
    <div class="tenant-module-grid">
        @foreach($modules['addons'] as $module)
            @php
                $badgeClass = 'tenant-badge-disabled';
                $badgeText = 'Contact admin';
                if ($module['status'] == 'enabled') {
                    $badgeClass = 'tenant-badge-enabled';
                    $badgeText = 'Enabled';
                } elseif ($module['status'] == 'available') {
                    $badgeClass = 'tenant-badge-available';
                    $badgeText = 'Available add-on';
                } elseif (in_array($module['status'], ['requested', 'approved'])) {
                    $badgeClass = 'tenant-badge-requested';
                    $badgeText = ucfirst($module['status']);
                } elseif ($module['status'] == 'server_not_installed') {
                    $badgeText = 'Not installed on server';
                }
            @endphp
            <div class="tenant-module-card">
                <span class="tenant-badge {{ $badgeClass }}">{{ $badgeText }}</span>
                <h4>{{ $module['name'] }}</h4>
                <p>{{ $module['description'] }}</p>
                <div class="tenant-module-price">{{ $module['price'] }}</div>

                @if($module['status'] == 'enabled')
                    <button class="btn btn-success btn-sm" disabled><i class="fa fa-check"></i> Active</button>
                @elseif(in_array($module['status'], ['requested', 'approved']))
                    <button class="btn btn-warning btn-sm" disabled>{{ ucfirst($module['status']) }}</button>
                @else
                    {!! Form::open(['route' => 'tenant_modules.request', 'method' => 'post']) !!}
                        {!! Form::hidden('module_key', $module['key']) !!}
                        {!! Form::hidden('module_name', $module['name']) !!}
                        {!! Form::hidden('note', 'Tenant requested add-on from My Modules page. Displayed price: '.$module['price']) !!}
                        <button type="submit" class="btn btn-primary btn-sm">
                            Request Add-on
                        </button>
                    {!! Form::close() !!}
                @endif
            </div>
        @endforeach
    </div>
</section>
@endsection