@extends('admin.layouts.app')

@section('title', 'Specialties Management')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <!-- Header -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-3xl font-bold text-slate-900">Specialties</h1>
            <p class="text-slate-600 mt-1">Manage nursing specialties taxonomy</p>
        </div>
        <button onclick="document.getElementById('createModal').classList.remove('hidden')" 
                class="admin-btn admin-btn-primary inline-flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
            Add Specialty
        </button>
    </div>

    @if(session('success'))
        <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg">
            {{ session('success') }}
        </div>
    @endif

    <!-- Statistics -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-lg border border-slate-200 p-4">
            <div class="text-sm font-semibold text-slate-600 mb-1">Total</div>
            <div class="text-2xl font-bold text-slate-900">{{ number_format($stats['total']) }}</div>
        </div>
        <div class="bg-white rounded-lg border border-slate-200 p-4">
            <div class="text-sm font-semibold text-slate-600 mb-1">Active</div>
            <div class="text-2xl font-bold text-green-600">{{ number_format($stats['active']) }}</div>
        </div>
        <div class="bg-white rounded-lg border border-slate-200 p-4">
            <div class="text-sm font-semibold text-slate-600 mb-1">Popular</div>
            <div class="text-2xl font-bold text-blue-600">{{ number_format($stats['popular']) }}</div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl border border-slate-200 p-4 mb-6">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search specialties..."
                   class="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500">
            <select name="status" class="px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                <option value="">All Status</option>
                <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
            </select>
            <div class="flex gap-2">
                <button type="submit" class="admin-btn admin-btn-primary flex-1">Filter</button>
                <a href="{{ route('admin.taxonomy.specialties.index') }}" class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200">Clear</a>
            </div>
        </form>
    </div>

    @php
        $headers = [
            ['label' => 'Name', 'class' => ''],
            ['label' => 'Category', 'class' => ''],
            ['label' => 'Jobs', 'class' => 'w-28'],
            ['label' => 'Status', 'class' => 'w-36'],
            ['label' => 'Actions', 'class' => 'text-right w-28'],
        ];

        $rows = [];
        foreach($specialties as $specialty) {
            $cells = [];

            $nameHtml = '<div class="flex items-center gap-2">' .
                        ($specialty->icon ? '<span class="text-xl">' . $specialty->icon . '</span>' : '') .
                        '<div><p class="font-semibold text-slate-900">' . e($specialty->name) . '</p>' .
                        ($specialty->description ? '<p class="text-sm text-slate-500">' . e(Str::limit($specialty->description, 60)) . '</p>' : '') .
                        '</div></div>';
            $cells[] = ['content' => $nameHtml, 'class' => ''];

            $cells[] = ['content' => '<div class="text-sm text-slate-700">' . e($specialty->category ?? 'N/A') . '</div>', 'class' => ''];

            $cells[] = ['content' => '<div class="text-sm font-semibold text-slate-900">' . number_format($specialty->jobs_count) . '</div>', 'class' => ''];

            $status = $specialty->is_active ? 'Active' : 'Inactive';
            $statusClass = $specialty->is_active ? 'bg-green-100 text-green-800' : 'bg-slate-100 text-slate-600';
            $statusHtml = '<span class="px-2 py-1 text-xs font-semibold rounded-full ' . $statusClass . '">' . $status . '</span>' .
                          ($specialty->is_popular ? ' <span class="ml-1 px-2 py-1 text-xs font-semibold bg-blue-100 text-blue-800 rounded-full">Popular</span>' : '');
            $cells[] = ['content' => '<div>' . $statusHtml . '</div>', 'class' => ''];

            $actionHtml = '<div class="flex items-center justify-end gap-2">';
            $actionHtml .= '<form action="' . route('admin.taxonomy.specialties.toggle', $specialty) . '" method="POST">' . csrf_field() . method_field('PATCH') . '<button type="submit" class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg"><i class="fa-solid fa-toggle-on"></i></button></form>';
            $actionHtml .= '<form action="' . route('admin.taxonomy.specialties.destroy', $specialty) . '" method="POST" onsubmit="return confirm(\'Delete this specialty?\')">' . csrf_field() . method_field('DELETE') . '<button type="submit" class="p-2 text-red-600 hover:bg-red-50 rounded-lg"><i class="fa-solid fa-trash"></i></button></form>';
            $actionHtml .= '</div>';
            $cells[] = ['content' => $actionHtml, 'class' => 'text-right'];

            $rows[] = ['cells' => $cells];
        }
    @endphp

    @include('admin.components.table_shell', [
        'headers' => $headers,
        'rows' => $rows,
        'emptyMessage' => 'No specialties found',
        'pagination' => $specialties
    ])
</div>

<!-- Create Modal -->
<div id="createModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
    <div class="bg-white rounded-xl max-w-lg w-full p-6">
        <h2 class="text-xl font-bold text-slate-900 mb-4">Add New Specialty</h2>
        <form action="{{ route('admin.taxonomy.specialties.store') }}" method="POST">
            @csrf
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1">Name *</label>
                    <input type="text" name="name" required class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1">Description</label>
                    <textarea name="description" rows="3" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-1">Icon (emoji)</label>
                        <input type="text" name="icon" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-slate-700 mb-1">Category</label>
                        <input type="text" name="category" class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <label class="flex items-center gap-2">
                        <input type="checkbox" name="is_active" value="1" checked class="rounded">
                        <span class="text-sm text-slate-700">Active</span>
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="checkbox" name="is_popular" value="1" class="rounded">
                        <span class="text-sm text-slate-700">Popular</span>
                    </label>
                </div>
            </div>
            <div class="flex gap-2 mt-6">
                <button type="submit" class="admin-btn admin-btn-primary flex-1">Create</button>
                <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" 
                        class="px-4 py-2 bg-slate-100 text-slate-700 rounded-lg hover:bg-slate-200">Cancel</button>
            </div>
        </form>
    </div>
</div>
@endsection