@extends('layouts.demo10.base')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/custom.css') }}">
@endsection

@section('content')
<div class="packages-screen">
    <div class="packages-topbar">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-[30px] leading-none text-mono">
                Pricing Packages
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Packages</span>
            </div>
        </div>

        <div class="packages-toolbar">
            <div class="packages-search">
                <i class="ki-filled ki-magnifier"></i>
                <input data-kt-datatable-search="#kt_datatable_packages" placeholder="Search Packages" type="text" />
            </div>

            <a class="kt-btn common-secondary-btn packages-add-btn" href="{{ route('packages.create') }}">
                <i class="ki-filled ki-plus"></i>
                Create Package
            </a>
        </div>
    </div>

    <div class="packages-panel">
        <div class="kt-card-table">
            <div id="packages_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto">
                    <table class="kt-table packages-table w-full" id="kt_datatable_packages">
                        <thead>
                            <tr>
                                <th class="min-w-[220px]">Name</th>
                                <th class="min-w-[120px]">Price</th>
                                <th class="min-w-[140px]">Billing Type</th>
                                <th class="min-w-[120px]">Status</th>
                                <th class="w-[84px] text-right"></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($packages as $package)
                                @php
                                    $billingLabel = ucfirst(str_replace('_', ' ', (string) $package->billing_cycle));
                                    $displayPrice = number_format((float) ($package->monthly_price ?? $package->price ?? 0), 0);
                                    $iconUrl = ! blank($package->icon_path) ? asset('storage/' . ltrim($package->icon_path, '/')) : null;
                                @endphp
                            <tr>
                                <td>
                                    <span class="package-namecell">
                                        <span class="package-icon">
                                            @if($iconUrl)
                                                <img alt="" src="{{ $iconUrl }}" style="width:100%;height:100%;object-fit:cover;border-radius:inherit;" />
                                            @else
                                                <i class="ki-filled ki-rocket text-base"></i>
                                            @endif
                                        </span>
                                        <span class="package-name">{{ $package->name }}</span>
                                    </span>
                                </td>
                                <td>
                                    <span class="text-sm text-foreground font-semibold">$ {{ $displayPrice }}</span>
                                </td>
                                <td>
                                    <span class="package-chip billing">{{ $billingLabel }}</span>
                                </td>
                                <td>
                                    <span class="package-chip {{ $package->is_active ? 'active' : 'inactive' }}">{{ $package->is_active ? 'Active' : 'Inactive' }}</span>
                                </td>
                                <td class="text-right">
                                    <div class="package-action-links">
                                        <a class="package-action-link" href="{{ route('packages.edit', ['package' => $package->id]) }}" aria-label="Edit package">
                                            <i class="ki-filled ki-notepad-edit text-base"></i>
                                        </a>
                                        <form action="{{ route('packages.destroy', ['package' => $package->id]) }}" method="post" class="inline-block" onsubmit="return confirm('Delete this package?')">
                                            @csrf
                                            @method('DELETE')
                                            <button class="package-action-link delete" type="submit" aria-label="Delete package">
                                                <i class="ki-filled ki-trash text-base"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="py-8 text-center text-sm text-secondary-foreground">
                                        No packages found.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@vite('resources/js/pages/packages.js')
<script>
    @if (session('success'))
        toastr.success(@json(session('success')));
    @endif

    @if (session('error'))
        toastr.error(@json(session('error')));
    @endif
</script>
@endsection