@extends(AdminBaseDashboard::AdminBaseLayout())

@section('title', trans('plugin::plugin.Plugin_title'))


@section('content')
    <section id="system-plugin-management">
        <div class="container-fluid breadcrumb-wraper">
            <ul class="breadcrumb">
                <li><a href="{{ route('dashboard')}}" class="active bread-link">
                        <span class="me-1"><i class="fa-solid fa-house"></i></span>{{ __('plugin::plugin.home')}}</a></li>
                <li><a href="{{ route('pluginManager') }}" class="bread-link">{{ __('plugin::plugin.plugin')}}</a></li>
                <li>{{ __('plugin::plugin.add new')}}</li>
            </ul>
        </div>
        <div class="header-wrapper">
            <ul class="plugin-header-buttons">
                <li class="item">
                    <a href="{{ route('add-new-plugin') }}" class="item-link">
                        {{ __('plugin::plugin.all')}} ({{ count($plugins) }})
                    </a></li>
                <li class="item">
                    <a href="{{ route('all-trashed-plugin') }}" class="item-link">
                        {{ __('plugin::plugin.trashed')}} ({{ count($trashed) }})
                    </a></li>
            </ul>
        </div>
        <div class="plugin-content-container">
            <div class="wrapper-grid">
                @forelse($plugins as $data)
                    @php $detail = json_decode($data->plugin->plugin) @endphp
                    <card class="card plugin-card">
                        <div class="card-header">
                            @if(isset($detail))
                                <img src="{{ asset('/Plugin/'.$detail->icon)}}" alt="{{ $detail->icon }}"  class="img-fluid">
                            @else
                                <img src="{{ asset('/Images/image-preview.png') }}" alt="" class="img-fluid">
                            @endif
                        </div>
                        <div class="card-body">
                            <h1 class="card-title">{{ $detail->name }}</h1>
                            <div class="content">
                                @if(isset($detail->description))
                                    <p class="usage">{{ $detail->description }} </p>
                                @endif
                                <p class="developer"><strong></strong>{{ __('plugin::plugin.by')}} : {{ $detail->developer }}</p>
                                <p class="version"><strong></strong>{{ __('plugin::plugin.version')}} : {{ $detail->version }}</p>
                            </div>
                            <div class="action">
                                <button class="btn install-btn" id="install-plugin-btn" data-url="{{ route('install-plugin',[ 'id' => $data->id]) }}">
                                       <span class="btn-text">
                                            <span class="icon me-1"><i class="fa-solid fa-download"></i>
                                        </span>
                                       </span>
                                    <span class="loading-spinner"><i class="fa-solid fa-spinner"></i></span>
                                    {{ __('plugin::plugin.install now')}}
                                </button>

                                <button class="btn btn-danger" id="uninstall-btn" value="{{ $data->id }}">
                                        <span class="icon me-1"><i class="fa-solid fa-star-of-life"></i>
                                        </span> {{ __('plugin::plugin.details')}}</button>
                            </div>
                        </div>
                    </card>
                @empty
                    <div class="no-content-wrapper">
                        <div class="img-wrapper">
                            <img src="{{ asset('/Images/plugin.png') }}" alt="plugin" class="img-fluid">
                            <p class="text">{{ __('plugin::plugin.No_content_text')}}</p>
                        </div>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection