@extends('layouts.app')

@section('title', __('warehouse.warehouses'))

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h1 class="text-2xl font-bold text-gray-900">{{ __('warehouse.warehouses') }}</h1>
        <a href="{{ route('warehouses.create') }}" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
            + {{ __('warehouse.add_warehouse') }}
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <form method="GET" action="{{ route('warehouses.index') }}" class="flex flex-wrap gap-3">
            <input type="text" name="search" value="{{ request('search') }}" 
                   placeholder="{{ __('common.search') }}"
                   class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500 w-48">
            <select name="project_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                <option value="">{{ __('common.all') }} {{ __('expense.project') }}</option>
                @foreach($projects as $project)
                    <option value="{{ $project->id }}" {{ request('project_id') == $project->id ? 'selected' : '' }}>{{ $project->name }}</option>
                @endforeach
            </select>
            <select name="is_active" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                <option value="">{{ __('common.all') }}</option>
                <option value="1" {{ request('is_active') === '1' ? 'selected' : '' }}>{{ __('common.active') }}</option>
                <option value="0" {{ request('is_active') === '0' ? 'selected' : '' }}>{{ __('common.inactive') }}</option>
            </select>
            <button type="submit" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                {{ __('common.filter') }}
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('warehouse.name') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('warehouse.location') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('expense.project') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('common.status') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($warehouses as $wh)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-5 py-3">
                            <a href="{{ route('warehouses.show', $wh) }}" class="text-sm font-medium text-gray-900 hover:text-teal-600">{{ $wh->name }}</a>
                        </td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $wh->location ?? '-' }}</td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $wh->project?->name ?? '-' }}</td>
                        <td class="px-5 py-3">
                            @if($wh->is_active)
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">{{ __('common.active') }}</span>
                            @else
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">{{ __('common.inactive') }}</span>
                            @endif
                        </td>
                        <td class="px-5 py-3">
                            <div class="flex items-center gap-2">
                                <a href="{{ route('warehouses.show', $wh) }}" class="text-teal-600 hover:text-teal-800 text-sm">{{ __('common.view') }}</a>
                                <a href="{{ route('warehouses.edit', $wh) }}" class="text-gray-600 hover:text-gray-800 text-sm">{{ __('common.edit') }}</a>
                                <form method="POST" action="{{ route('warehouses.destroy', $wh) }}" class="inline" onsubmit="return confirm('{{ __('common.confirm_delete') }}')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-sm">{{ __('common.delete') }}</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center py-12 text-gray-500">{{ __('warehouse.no_warehouses') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="flex justify-center">
        {{ $warehouses->withQueryString()->links() }}
    </div>
</div>
@endsection