@extends('layouts.app')

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

@section('content')
    <div class="p-8">
        <h1>Mapping Types</h1>
        <div
            class="flex flex-col w-full overflow-scroll text-gray-700 bg-white shadow-md rounded-lg 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
                        </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">
                            Period
                        </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">
                            Description
                        </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">
                            Company
                        </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_types as $mapping_type)
                    <tr class="hover:bg-slate-50">
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_type->mapping->NAME }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_type->period->PERIOD_NAME }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_type->DESCRIPTION }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_type->company->COMPANY }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_type->CREATED }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <p class="block text-sm text-slate-800">
                                {{ $mapping_type->UPDATED }}
                            </p>
                        </td>
                        <td class="p-4 border-b border-slate-200">
                            <a href={{ route('mappings.edit', $mapping_type->MOBILE_MAPPING_TYPE_ID) }} class="block text-sm font-semibold text-slate-800">
                            Edit
                            </a>
                        </td>
                    </tr>
                @empty
                    <div class="alert alert-danger">
                        Data Customer belum tersedia.
                    </div>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="my-4">
            {{ $mapping_types->links() }}
        </div>
    </div>
@endsection