@extends('layouts.app')

@section('title')
    {{ 'Mapping Code List - Tunas Admin Management' }}
@endsection

@section('content')
    <div class="p-8">
        <h1>Mapping Codes</h1>
        <form action="{{ route('mapping-codes.index') }}" method="GET" class="mb-4">
            <div class="flex items-center space-x-4 row">
                <!-- Search input -->
                <div class="col-md-4">
                    <input type="text" name="search"
                        class="w-full px-3 py-2 text-sm transition duration-300 bg-transparent border rounded-md shadow-sm placeholder:text-slate-400 text-slate-700 border-slate-200 ease focus:outline-none focus:border-slate-400 hover:border-slate-300 focus:shadow"
                        placeholder="Search Mapping Code..." value="{{ request('search') }}">
                </div>
                <div class="col-md-2">
                    <button type="submit" class="p-2 bg-gray-300 rounded-md shadow-md btn w-100">Search</button>
                </div>
            </div>
        </form>
        <div
            class="relative flex flex-col w-full overflow-scroll text-gray-700 bg-white rounded-lg shadow-md bg-clip-border">
            <table class="w-full text-left table-auto min-w-max">
                <thead>
                    <tr>
                        <th class="p-4 border-b border-slate-300 bg-slate-50">
                            <p class="block text-sm font-normal leading-none text-slate-500">
                                Mapping Type
                            </p>
                        </th>
                        <th class="p-4 border-b border-slate-300 bg-slate-50">
                            <p class="block text-sm font-normal leading-none text-slate-500">
                                Nama
                            </p>
                        </th>
                        <th class="p-4 border-b border-slate-300 bg-slate-50">
                            <p class="block text-sm font-normal leading-none text-slate-500">
                                Coding
                            </p>
                        </th>
                        <th class="p-4 border-b border-slate-300 bg-slate-50">
                            <p class="block text-sm font-normal leading-none text-slate-500">
                                Created
                            </p>
                        </th>
                        <th class="p-4 border-b border-slate-300 bg-slate-50">
                            <p class="block text-sm font-normal leading-none text-slate-500">
                                Updated
                            </p>
                        </th>
                        <th class="p-4 border-b border-slate-300 bg-slate-50">
                            <p class="block text-sm font-normal leading-none text-slate-500"></p>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($mapping_codes as $mapping_code)
                        <tr class="hover:bg-slate-50">
                            <td class="p-4 border-b border-slate-200">
                                <p class="block text-sm text-slate-800">
                                    {{ $mapping_code->mapping_type->mapping?->NAME }}
                                </p>
                            </td>
                            <td class="p-4 border-b border-slate-200">
                                <p class="block text-sm text-slate-800">
                                    {{ $mapping_code->coding->user?->NAME }}
                                </p>
                            </td>
                            <td class="p-4 border-b border-slate-200">
                                <p class="block text-sm text-slate-800">
                                    {{ $mapping_code->coding?->NAME }}
                                </p>
                            </td>
                            <td class="p-4 border-b border-slate-200">
                                <p class="block text-sm text-slate-800">
                                    {{ $mapping_code->CREATED }}
                                </p>
                            </td>
                            <td class="p-4 border-b border-slate-200">
                                <p class="block text-sm text-slate-800">
                                    {{ $mapping_code->UPDATED }}
                                </p>
                            </td>
                            <td class="p-4 border-b border-slate-200">
                                <a href={{ route('mapping-codes.edit', $mapping_code->MOBILE_MAPPING_CODE_ID) }}
                                    class="block text-sm font-semibold text-slate-800">
                                    Edit
                                </a>
                            </td>
                        </tr>
                    @empty
                        <div class="alert alert-danger">
                            Data Mapping Code belum tersedia.
                        </div>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">
            {{ $mapping_codes->links() }}
        </div>
    </div>
@endsection