@extends('layouts.app')
@section('title', __('lang_v1.manage_modules'))

@section('content')

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        @lang('lang_v1.manage_modules')
        <small class="tw-text-sm md:tw-text-base tw-text-gray-700 tw-font-semibold">Only superadmin can access manage modules</small>
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
        <li class="active">Here</li>
    </ol> -->
    <button class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm upload_module_btn tw-mt-4">
        <i class="fas fa-upload"></i>
        @lang('lang_v1.upload_module')
    </button>

    <a class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm pull-right tw-mt-4" href="{{action([\App\Http\Controllers\Install\ModulesController::class, 'regenerate'])}}">
        <i class="fas fa-tools"></i>
        Regenerate @show_tooltip("<br/>1. Regenerate/publish modules css/js to fix not found issue. <br/> 2. Publish api module oauth files")
    </a>
</section>

<!-- Main content -->
<section class="content">
<div class="row">
    <div class="col-md-12 form_col" style="display: none;">
        @component('components.widget')
            {!! Form::open(['url' => action([\App\Http\Controllers\Install\ModulesController::class, 'uploadModule']), 'id' => 'upload_module_form','files' => true, 'style' => 'display:none']) !!}
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            {!! Form::label('module', __('lang_v1.upload_module') . ":*") !!}

                            {!! Form::file('module', ['required', 'accept' => 'application/zip']) !!}
                            <p class="help-block">
                                @lang("lang_v1.pls_upload_valid_zip_file")
                            </p>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <div class="col-sm-4">
                        <button type="submit" class="tw-dw-btn tw-dw-btn-primary tw-text-white tw-dw-btn-sm">
                            @lang('lang_v1.upload')
                        </button>
                        &nbsp;
                        <button type="button" class="tw-dw-btn tw-dw-btn-error tw-text-white tw-dw-btn-sm cancel_upload_btn">
                            @lang('messages.cancel')
                        </button>
                    </div>
                </div>
            {!! Form::close() !!}
        @endcomponent()
    </div>
    <div class="col-md-12">
        @php
            $mods = unserialize($mods);
            $module_icons = [
                'Crm' => 'fa-user-friends',
                'Connector' => 'fa-plug',
                'Woocommerce' => 'fa-store',
                'IndiaMart' => 'fa-handshake',
                'B2BPortal' => 'fa-shopping-basket',
                'WhatsappNotification' => 'fa-comments',
                'Essentials' => 'fa-gem',
                'Superadmin' => 'fa-crown',
                'Manufacturing' => 'fa-industry',
                'Project' => 'fa-project-diagram',
                'Repair' => 'fa-tools',
                'Accounting' => 'fa-calculator',
                'AiAssistance' => 'fa-robot',
                'AssetManagement' => 'fa-boxes',
                'Cms' => 'fa-newspaper',
                'Gym' => 'fa-dumbbell',
                'Hms' => 'fa-hotel',
                'ProductCatalogue' => 'fa-images',
            ];
            $module_gradients = [
                'linear-gradient(135deg, #2563eb, #7c3aed)',
                'linear-gradient(135deg, #059669, #0ea5e9)',
                'linear-gradient(135deg, #f97316, #db2777)',
                'linear-gradient(135deg, #111827, #475569)',
                'linear-gradient(135deg, #0891b2, #4338ca)',
                'linear-gradient(135deg, #16a34a, #65a30d)',
            ];
        @endphp

        <div class="module-market-hero">
            <div>
                <span class="module-market-eyebrow">UltimatePOS module marketplace</span>
                <h3>Manage, install and discover business add-ons</h3>
                <p>Each module is shown as a rich card with status, description, version, pricing/action and quick controls.</p>
            </div>
            <div class="module-market-count">
                <strong>{{ count($modules) }}</strong>
                <span>local modules</span>
            </div>
        </div>

        <div class="module-card-grid">
            @foreach($modules as $module)
                @php
                    $module_name = $module['name'];
                    $icon = $module_icons[$module_name] ?? 'fa-cube';
                    $gradient = $module_gradients[$loop->index % count($module_gradients)];
                    $is_active = !empty($module['active']);
                @endphp

                <div class="module-card">
                    <div class="module-card-media" style="background: {{$gradient}}">
                        <div class="module-card-pattern"></div>
                        <i class="fas {{$icon}}"></i>
                        <span class="module-status-pill {{$module['is_installed'] ? 'installed' : 'not-installed'}}">
                            {{$module['is_installed'] ? 'Installed' : 'Not installed'}}
                        </span>
                    </div>

                    <div class="module-card-body">
                        <div class="module-card-title-row">
                            <div>
                                <h4>{{$module_name}}</h4>
                                <span class="module-subtitle">{{$is_active ? 'Active module' : 'Inactive module'}}</span>
                            </div>
                            <div class="module-price">
                                {{$module['is_installed'] ? 'Included' : 'Free'}}
                            </div>
                        </div>

                        <p class="module-description">{{$module['description']}}</p>

                        <div class="module-meta-row">
                            @isset($module['version'])
                                <span><i class="fas fa-code-branch"></i> @lang('lang_v1.version') {{$module['version']['installed_version']}}</span>
                            @else
                                <span><i class="fas fa-box-open"></i> Ready to install</span>
                            @endisset
                            <span><i class="fas fa-shield-alt"></i> Superadmin</span>
                        </div>

                        @if(!empty($module['version']) && $module['version']['is_update_available'])
                            <div class="alert alert-warning mt-10 module-update-alert">
                                <i class="fas fa-sync"></i> @lang('lang_v1.module_new_version', ['module' => $module_name, 'link' => $module['update_link']])
                            </div>
                        @endif
                    </div>

                    <div class="module-card-actions">
                        @if(!$module['is_installed'])
                            @if(in_array($module_name, ['IndiaMart', 'WhatsappNotification']) && !$is_demo)
                                <form method="get"
                                    action="{{ $module['install_link'] }}"
                                    class="module-install-form">
                                    <button type="submit"
                                        class="tw-dw-btn tw-dw-btn-sm tw-dw-btn-primary tw-text-white module-install-button">
                                        <i class="fas fa-download"></i> @lang('lang_v1.install')
                                    </button>
                                </form>
                            @else
                                <a class="tw-dw-btn tw-dw-btn-sm tw-dw-btn-primary tw-text-white"
                                @if($is_demo)
                                    href="#"
                                    title="@lang('lang_v1.disabled_in_demo')"
                                    aria-disabled="true"
                                @else
                                    href="{{$module['install_link']}}"
                                @endif
                                ><i class="fas fa-download"></i> @lang('lang_v1.install')</a>
                            @endif
                        @else
                            <a class="tw-dw-btn tw-dw-btn-sm tw-dw-btn-outline tw-dw-btn-warning"
                                @if($is_demo)
                                    href="#"
                                    disabled
                                    title="@lang('lang_v1.disabled_in_demo')"
                                @else
                                    href="{{$module['uninstall_link']}}"
                                @endif
                                onclick="return confirm('Do you really want to uninstall the module? Module will be uninstall but the data will not be deleted')"
                            ><i class="fas fa-power-off"></i> @lang('lang_v1.uninstall')</a>
                        @endif

                        <form
                            action="{{action([\App\Http\Controllers\Install\ModulesController::class, 'destroy'], ['module_name' => $module_name])}}"
                            method="post"
                            onsubmit="return confirm('Do you really want to delete the module? Module code will be deleted but the data will not be deleted')"
                        >
                            @method('DELETE')
                            @csrf
                            <button class="tw-dw-btn tw-dw-btn-sm tw-dw-btn-outline tw-dw-btn-error"
                                @if($is_demo)
                                    disabled="disabled"
                                    title="@lang('lang_v1.disabled_in_demo')"
                                @endif
                            >
                                <i class="fas fa-trash"></i> @lang('messages.delete')
                            </button>
                        </form>
                    </div>
                </div>
            @endforeach

            @foreach($mods as $mod)
                @if(!isset($modules[$mod->n]))
                    @php
                        $icon = $module_icons[$mod->n] ?? 'fa-puzzle-piece';
                        $gradient = $module_gradients[($loop->index + count($modules)) % count($module_gradients)];
                    @endphp
                    <div class="module-card module-card-marketplace">
                        <div class="module-card-media" style="background: {{$gradient}}">
                            <div class="module-card-pattern"></div>
                            <i class="fas {{$icon}}"></i>
                            <span class="module-status-pill marketplace">Marketplace</span>
                        </div>
                        <div class="module-card-body">
                            <div class="module-card-title-row">
                                <div>
                                    <h4>{{$mod->dn}}</h4>
                                    <span class="module-subtitle">Premium add-on</span>
                                </div>
                                <div class="module-price">Paid</div>
                            </div>
                            <p class="module-description">{{$mod->d}}</p>
                            <div class="module-meta-row">
                                <span><i class="fas fa-external-link-alt"></i> External purchase</span>
                                <span><i class="fas fa-star"></i> Add-on</span>
                            </div>
                        </div>
                        <div class="module-card-actions">
                            <button onclick="window.open('{{$mod->u}}', '_blank')"
                                class="tw-dw-btn tw-dw-btn-sm tw-dw-btn-primary tw-text-white">
                                <i class="fas fa-money-bill"></i> Buy now
                            </button>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>
</div>
</section>
@endsection

@section('css')
<style>
    .module-market-hero {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 22px;
        padding: 22px;
        border: 1px solid #e5eaf2;
        border-radius: 18px;
        background:
            radial-gradient(circle at top right, rgba(99, 102, 241, .18), transparent 24rem),
            linear-gradient(135deg, #ffffff, #f8fafc);
        box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
    }

    .module-market-eyebrow {
        color: #4f46e5;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .module-market-hero h3 {
        margin: 6px 0;
        color: #111827;
        font-size: 24px;
        font-weight: 900;
    }

    .module-market-hero p {
        max-width: 720px;
        margin: 0;
        color: #667085;
        font-size: 14px;
    }

    .module-market-count {
        min-width: 132px;
        padding: 14px;
        border-radius: 16px;
        background: #111827;
        color: #fff;
        text-align: center;
    }

    .module-market-count strong {
        display: block;
        font-size: 30px;
        line-height: 1;
    }

    .module-market-count span {
        color: #cbd5e1;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .module-card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .module-card {
        display: flex;
        min-height: 420px;
        overflow: hidden;
        flex-direction: column;
        border: 1px solid #e5eaf2;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
        transition: transform .16s ease, box-shadow .16s ease;
    }

    .module-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px rgba(15, 23, 42, .13);
    }

    .module-card-media {
        position: relative;
        display: flex;
        min-height: 150px;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .module-card-pattern {
        position: absolute;
        inset: 0;
        opacity: .22;
        background-image:
            radial-gradient(circle at 20% 20%, #fff 0 2px, transparent 3px),
            radial-gradient(circle at 80% 60%, #fff 0 2px, transparent 3px);
        background-size: 34px 34px;
    }

    .module-card-media > i {
        position: relative;
        z-index: 1;
        font-size: 48px;
        filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .22));
    }

    .module-status-pill {
        position: absolute;
        top: 14px;
        right: 14px;
        z-index: 2;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, .9);
        color: #111827;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .module-status-pill.installed {
        color: #047857;
    }

    .module-status-pill.not-installed {
        color: #b45309;
    }

    .module-status-pill.marketplace {
        color: #4338ca;
    }

    .module-card-body {
        flex: 1;
        padding: 18px;
    }

    .module-card-title-row {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
    }

    .module-card h4 {
        margin: 0;
        color: #111827;
        font-size: 18px;
        font-weight: 900;
    }

    .module-subtitle {
        display: inline-block;
        margin-top: 4px;
        color: #667085;
        font-size: 12px;
        font-weight: 700;
    }

    .module-price {
        white-space: nowrap;
        padding: 7px 10px;
        border-radius: 999px;
        background: #eef2ff;
        color: #4338ca;
        font-size: 12px;
        font-weight: 900;
    }

    .module-description {
        min-height: 72px;
        margin: 14px 0;
        color: #475467;
        font-size: 13px;
        line-height: 1.55;
    }

    .module-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .module-meta-row span {
        padding: 6px 9px;
        border-radius: 999px;
        background: #f8fafc;
        color: #667085;
        font-size: 11px;
        font-weight: 800;
    }

    .module-update-alert {
        border-radius: 12px;
        font-size: 12px;
    }

    .module-card-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 14px 18px;
        border-top: 1px solid #eef2f7;
        background: #fbfcfe;
    }

    .module-card-actions form {
        margin: 0;
    }

    @media (max-width: 767px) {
        .module-market-hero {
            align-items: stretch;
            flex-direction: column;
        }

        .module-card-grid {
            grid-template-columns: 1fr;
        }

        .module-card-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .module-card-actions .tw-dw-btn,
        .module-card-actions button,
        .module-card-actions form {
            width: 100%;
        }
    }
</style>
@endsection
@section('javascript')
<script type="text/javascript">
    //show a hidden form on upload_module_btn click
    $(document).on('click', '.upload_module_btn', function(){
        $(".form_col,form#upload_module_form").fadeToggle();
    });

    //hide form on cancel_upload_btn click
    $(document).on('click', '.cancel_upload_btn', function(){
        $("form#upload_module_form")[0].reset();
        $(".form_col,form#upload_module_form").fadeOut();
    });

</script>
@endsection