@extends('layouts.admin')

@section('title', 'Admin Dashboard - Pamtech')

@section('content')
<div class="min-h-screen bg-zinc-50">
    <!-- Header -->
    <div class="admin-header">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-5">
            <div class="flex justify-between items-center">
                <div class="flex items-center gap-4">
                    <img src="{{ asset('logo.png') }}" alt="Pamtech" class="h-7 w-auto brightness-0 invert hidden sm:block">
                    <div>
                        <h1 class="text-xl font-bold text-white">Operations Console</h1>
                        <p class="text-xs text-zinc-500 font-mono mt-0.5">Battery verification & inventory management</p>
                    </div>
                </div>
                <div class="flex items-center space-x-4">
                    @auth
                        <span class="text-xs text-zinc-400 font-mono hidden sm:inline">{{ Auth::user()->name ?? 'Admin' }}</span>
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-white bg-zinc-800 border border-zinc-700 hover:bg-zinc-700 transition-colors">
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                </svg>
                                Logout
                            </button>
                        </form>
                    @else
                        <a href="{{ route('login') }}" class="text-sm text-zinc-400 hover:text-white transition-colors">Login</a>
                    @endauth
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
            <!-- Total Batteries -->
            <div class="admin-stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label-tech text-zinc-400">Total Units</p>
                        <p class="text-3xl font-bold text-zinc-900 mt-2 stat-number">{{ number_format($stats['total']) }}</p>
                    </div>
                    <div class="w-10 h-10 bg-zinc-100 rounded-md flex items-center justify-center">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Valid Batteries -->
            <div class="admin-stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label-tech text-zinc-400">Valid</p>
                        <p class="text-3xl font-bold text-green-600 mt-2 stat-number">{{ number_format($stats['valid']) }}</p>
                    </div>
                    <div class="w-10 h-10 bg-green-50 rounded-md flex items-center justify-center">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Used Batteries -->
            <div class="admin-stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label-tech text-zinc-400">Used</p>
                        <p class="text-3xl font-bold text-yellow-600 mt-2 stat-number">{{ number_format($stats['used']) }}</p>
                    </div>
                    <div class="w-10 h-10 bg-yellow-50 rounded-md flex items-center justify-center">
                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Fake Batteries -->
            <div class="admin-stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label-tech text-zinc-400">Fake</p>
                        <p class="text-3xl font-bold text-red-600 mt-2 stat-number">{{ number_format($stats['fake']) }}</p>
                    </div>
                    <div class="w-10 h-10 bg-red-50 rounded-md flex items-center justify-center">
                        <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- Total Scans -->
            <div class="admin-stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label-tech text-zinc-400">Total Scans</p>
                        <p class="text-3xl font-bold text-zinc-900 mt-2 stat-number">{{ number_format($stats['total_scans']) }}</p>
                    </div>
                    <div class="w-10 h-10 bg-zinc-100 rounded-md flex items-center justify-center">
                        <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- Success/Error Messages -->
        @if(session('success'))
            <div class="mb-6 bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="mb-6 bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center">
                <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                </svg>
                {{ session('error') }}
            </div>
        @endif

        <!-- Tabs Navigation -->
        <div class="hardware-card mb-6 overflow-hidden">
            <div class="border-b border-zinc-200">
                <nav class="flex -mb-px" aria-label="Tabs">
                    <button 
                        onclick="switchTab('batteries')" 
                        id="tab-batteries"
                        class="tab-button px-6 py-4 text-sm font-medium border-b-2 border-pamtech-red text-pamtech-red transition-colors"
                    >
                        <span class="flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                            </svg>
                            All Batteries
                        </span>
                    </button>
                    <button 
                        onclick="switchTab('types')" 
                        id="tab-types"
                        class="tab-button px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors"
                    >
                        <span class="flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
                            </svg>
                            Battery Types
                        </span>
                    </button>
                    <button 
                        onclick="switchTab('warranty')" 
                        id="tab-warranty"
                        class="tab-button px-6 py-4 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 transition-colors"
                    >
                        <span class="flex items-center">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                            </svg>
                            Warranty Claims
                        </span>
                    </button>
                </nav>
            </div>
        </div>

        <!-- Tab Content: All Batteries -->
        <div id="content-batteries" class="tab-content">
            <div class="flex justify-end mb-4">
                <a href="{{ route('admin.batteries.create') }}" class="btn-primary py-2 px-5 text-sm inline-flex items-center gap-2">
                    <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="M12 4v16m8-8H4"></path></svg>
                    Add Battery
                </a>
            </div>
            <!-- Filters and Search -->
            <div class="hardware-card p-6 mb-6">
                <form method="GET" action="{{ route('admin.dashboard') }}" class="flex flex-col md:flex-row gap-4">
                    <!-- Search -->
                    <div class="flex-1">
                        <input 
                            type="text" 
                            name="search" 
                            value="{{ request('search') }}"
                            placeholder="Search by serial code, type, or status..." 
                            class="form-input"
                        >
                    </div>

                    <!-- Status Filter -->
                    <div>
                        <select 
                            name="status" 
                            class="form-input"
                        >
                            <option value="">All Status</option>
                            <option value="valid" {{ request('status') == 'valid' ? 'selected' : '' }}>Valid</option>
                            <option value="used" {{ request('status') == 'used' ? 'selected' : '' }}>Used</option>
                            <option value="fake" {{ request('status') == 'fake' ? 'selected' : '' }}>Fake</option>
                        </select>
                    </div>

                    <!-- Sort By -->
                    <div>
                        <select 
                            name="sort_by" 
                            class="form-input"
                        >
                            <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Date</option>
                            <option value="serial_code" {{ request('sort_by') == 'serial_code' ? 'selected' : '' }}>Serial Code</option>
                            <option value="scan_count" {{ request('sort_by') == 'scan_count' ? 'selected' : '' }}>Scan Count</option>
                            <option value="status" {{ request('sort_by') == 'status' ? 'selected' : '' }}>Status</option>
                        </select>
                    </div>

                    <!-- Sort Order -->
                    <div>
                        <select 
                            name="sort_order" 
                            class="form-input"
                        >
                            <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                            <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                        </select>
                    </div>

                    <!-- Buttons -->
                    <div class="flex gap-2">
                        <button 
                            type="submit" 
                            class="btn-primary py-2 px-6"
                        >
                            Filter
                        </button>
                        <a 
                            href="{{ route('admin.dashboard') }}" 
                            class="btn-secondary-light py-2 px-6 rounded-lg font-medium"
                        >
                            Reset
                        </a>
                    </div>
                </form>
            </div>

            <!-- Batteries Table -->
            <div class="hardware-card overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="admin-table">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Serial Code</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Specifications</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scan Count</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            @forelse($batteries as $battery)
                                <tr class="transition-colors">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-mono font-semibold text-gray-900">{{ $battery->serial_code }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ $battery->type }}</div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-600">
                                            <div>{{ $battery->volts }}V • {{ $battery->amhs }}Ah</div>
                                            <div class="text-xs text-gray-500">CCA: {{ $battery->cca }} • Class: {{ $battery->class }}</div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
                                            @if($battery->status === 'valid') bg-green-100 text-green-800
                                            @elseif($battery->status === 'used') bg-yellow-100 text-yellow-800
                                            @else bg-red-100 text-red-800
                                            @endif">
                                            {{ ucfirst($battery->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900 font-medium">{{ $battery->scan_count }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <a href="{{ route('verify', $battery->serial_code) }}" target="_blank" class="text-pamtech-blue hover:text-pamtech-red transition-colors">
                                            View
                                        </a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12 text-center">
                                        <div class="text-gray-500">
                                            <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
                                            </svg>
                                            <p class="text-lg font-medium">No batteries found</p>
                                            <p class="text-sm mt-1">Try adjusting your search or filters</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($batteries->hasPages())
                    <div class="bg-zinc-50 px-6 py-4 border-t border-zinc-200">
                        {{ $batteries->links() }}
                    </div>
                @endif
            </div>
        </div>

        <!-- Tab Content: Battery Types -->
        <div id="content-types" class="tab-content hidden">
            <div class="hardware-card overflow-hidden">
                <div class="px-6 py-4 border-b border-zinc-200">
                    <h2 class="text-lg font-semibold text-zinc-900">Battery Types</h2>
                    <p class="text-sm text-zinc-500 mt-1">Manage type specifications</p>
                </div>
                <div class="p-6">
                    <div class="overflow-x-auto">
                        <table class="admin-table">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Voltage</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capacity</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CCA</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Class</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @php
                                    // Ensure batteryTypes is always a collection
                                    $batteryTypes = $batteryTypes ?? collect();
                                @endphp
                                @forelse($batteryTypes as $batteryType)
                                    <tr class="transition-colors">
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm font-semibold text-gray-900">{{ $batteryType->type }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $batteryType->volts }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $batteryType->amhs }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $batteryType->cca }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $batteryType->class }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap text-sm font-medium">
                                            <a href="{{ route('admin.battery-types.edit', $batteryType->type) }}" 
                                               class="inline-flex items-center px-3 py-1.5 bg-pamtech-blue text-white rounded-lg hover:bg-blue-700 transition-colors text-xs">
                                                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                                                </svg>
                                                Edit
                                            </a>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-4 py-8 text-center text-gray-500">
                                            No battery types found.
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab Content: Warranty Claims -->
        <div id="content-warranty" class="tab-content hidden">
            <div class="hardware-card overflow-hidden">
                <div class="px-6 py-4 border-b border-zinc-200">
                    <h2 class="text-lg font-semibold text-zinc-900">Warranty Claims</h2>
                    <p class="text-sm text-zinc-500 mt-1">View and manage warranty claims</p>
                </div>
                <div class="p-6">
                    <div class="overflow-x-auto">
                        <table class="admin-table">
                            <thead>
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Serial Code</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Full Name</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @forelse($warrantyClaims ?? [] as $claim)
                                    <tr class="transition-colors">
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm font-mono font-semibold text-gray-900">{{ $claim->serial_code }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm font-medium text-gray-900">{{ $claim->fullname }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $claim->phone_number }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $claim->email }}</div>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
                                                @if($claim->status === 'approved') bg-green-100 text-green-800
                                                @elseif($claim->status === 'rejected') bg-red-100 text-red-800
                                                @else bg-yellow-100 text-yellow-800
                                                @endif">
                                                {{ ucfirst($claim->status) }}
                                            </span>
                                        </td>
                                        <td class="px-4 py-4 whitespace-nowrap">
                                            <div class="text-sm text-gray-600">{{ $claim->created_at->format('M d, Y') }}</div>
                                            <div class="text-xs text-gray-500">{{ $claim->created_at->format('h:i A') }}</div>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-4 py-12 text-center text-gray-500">
                                            <div class="flex flex-col items-center">
                                                <svg class="w-12 h-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                                                </svg>
                                                <p class="text-lg font-medium">No warranty claims found</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if(isset($warrantyClaims) && $warrantyClaims->hasPages())
                        <div class="bg-zinc-50 px-6 py-4 border-t border-zinc-200">
                            {{ $warrantyClaims->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Tab switching functionality
    function switchTab(tabName) {
        // Hide all tab contents
        document.querySelectorAll('.tab-content').forEach(content => {
            content.classList.add('hidden');
        });
        
        // Remove active state from all tabs
        document.querySelectorAll('.tab-button').forEach(button => {
            button.classList.remove('border-pamtech-red', 'text-pamtech-red');
            button.classList.add('border-transparent', 'text-gray-500');
        });
        
        // Show selected tab content
        document.getElementById('content-' + tabName).classList.remove('hidden');
        
        // Add active state to selected tab
        const activeTab = document.getElementById('tab-' + tabName);
        activeTab.classList.remove('border-transparent', 'text-gray-500');
        activeTab.classList.add('border-pamtech-red', 'text-pamtech-red');
        
        // Update URL hash
        window.location.hash = tabName;
    }
    
    // Initialize tab based on URL hash or default to 'batteries'
    document.addEventListener('DOMContentLoaded', function() {
        const hash = window.location.hash.substring(1);
        const defaultTab = hash === 'types' ? 'types' : 'batteries';
        switchTab(defaultTab);
    });
</script>
@endpush
@endsection