@extends('layouts.app')

@section('title', $display['title'] . ' - SIPHLN')

@section('content')
<div class="space-y-6">

    <!-- Header Bar -->
    <div class="flex justify-between items-center bg-white p-5 rounded-lg shadow border border-gray-200">
        <div>
            <h1 class="text-xl font-bold text-gray-800">Master Data: {{ $display['title'] }}</h1>
            <p class="text-gray-500 text-sm">Manage master data for {{ strtolower($display['title']) }}</p>
        </div>
        <a href="{{ route('master-data.create', $type) }}" class="bg-teal-700 hover:bg-teal-800 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition flex items-center gap-1">
            <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 {{ $display['title'] }}
        </a>
    </div>

    @isset($display['filter'])
    @php
        $filterKey = $display['filter']['key'];
        $baseUrl = route('master-data.index', $type);
        $filterUrl = fn($val) => $baseUrl . '?' . http_build_query([$filterKey => $val]);
    @endphp
    <!-- Filter Bar -->
    <div class="bg-white p-4 rounded-lg shadow border border-gray-200 flex flex-wrap items-center gap-3">
        <label class="text-sm font-medium text-gray-700">Filter {{ $display['filter']['options'][$filterKey] ?? $filterKey }}:</label>
        <select
            id="master-filter"
            onchange="window.location.href = this.value ? this.value : '{{ $baseUrl }}'"
            class="w-48 border-gray-300 rounded-lg p-2 border focus:ring-teal-500 focus:border-teal-500 bg-white"
        >
            <option value="">-- All --</option>
            @foreach($display['filter']['options'] as $val => $label)
                <option value="{{ $filterUrl($val) }}" {{ ($selectedFilter ?? null) == $val ? 'selected' : '' }}>
                    {{ $label }}
                </option>
            @endforeach
        </select>
        @if($selectedFilter)
            <a href="{{ $baseUrl }}" class="text-sm text-teal-700 hover:text-teal-900 font-medium">Reset</a>
        @endif
    </div>
    @endisset

    <!-- Alert Success -->
    @if(session('success'))
        <div class="bg-emerald-100 border border-emerald-400 text-emerald-700 px-4 py-3 rounded relative" role="alert">
            <span class="block sm:inline">{{ session('success') }}</span>
        </div>
    @endif

    <!-- Tabel Card -->
    <div class="bg-white rounded-lg shadow border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left text-sm text-gray-600">
                <thead class="bg-teal-900 text-white text-xs font-semibold uppercase tracking-wider">
                    <tr>
                        <th class="px-5 py-3 text-center w-12">#</th>
                        @foreach($display['columns'] as $col)
                            <th class="px-5 py-3">{{ $col['l'] }}</th>
                        @endforeach
                        <th class="px-5 py-3 text-center">ACTIONS</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($records as $index => $record)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-5 py-4 text-center font-medium text-gray-500">{{ $records->firstItem() + $index }}</td>
                            @foreach($display['columns'] as $col)
                                <td class="px-5 py-4 {{ $loop->first ? 'font-semibold text-teal-800' : 'text-gray-700' }}">
                                    @php
                                        $val = $record->{$col['k']} ?? null;
                                        $labelMap = $col['label_map'] ?? null;
                                        $displayVal = $labelMap ? ($labelMap[$val] ?? $val) : $val;
                                    @endphp
                                    @if($labelMap)
                                        <span class="bg-teal-100 text-teal-800 text-xs px-2.5 py-1 rounded-full font-medium inline-block">{{ $displayVal }}</span>
                                    @else
                                        {{ $displayVal ?? '-' }}
                                    @endif
                                </td>
                            @endforeach
                            <td class="px-5 py-4 text-center">
                                <div class="flex justify-center items-center space-x-3">
                                    <a href="{{ route('master-data.edit', [$type, $record->id]) }}" class="text-blue-600 hover:text-blue-800 transition" title="Edit">
                                        <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="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>
                                    </a>
                                    <form id="delete-master-{{ $record->id }}" action="{{ route('master-data.destroy', [$type, $record->id]) }}" method="POST" class="inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="button" onclick="confirmDelete('delete-master-{{ $record->id }}', '{{ $display['title'] }}')" class="text-red-500 hover:text-red-700 transition" title="Delete">
                                            <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ count($display['columns']) + 2 }}" class="text-center py-8 text-gray-400">
                                No {{ strtolower($display['title']) }} found.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    @if($records->hasPages())
        <div class="px-4 py-3 border-t border-gray-200">
            {{ $records->links() }}
        </div>
    @endif

</div>
@endsection