@extends('essential.pagination')

@section('table')
<div class="relative overflow-x-auto shadow-sm sm:rounded-lg">
    <table class="w-full text-sm text-left text-gray-500">
        <x-table_thead />
        <x-table_thead_data label="PLAN NAME" />
        <x-table_thead_data label="PERIOD" />
        <x-table_thead_data label="ACTION" />
        </tr>
        </thead>
        <tbody>
            @foreach ($items as $item)
            <tr class="bg-white border-b  hover:bg-muted">

                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    {{ $loop->index + 1 + $items->count() * $items->currentPage() - $items->count() }}
                </th>
                <x-table_tbody_data value="{{ $item->plan_name }}" />
                @if($item->period == 1 )
                <x-table_tbody_data value="1 Month" />
                @elseif($item->period == 2)
                <x-table_tbody_data value="3 Month" />
                @elseif($item->period == 3)
                <x-table_tbody_data value="1 Year" />
                @elseif($item->period == 4)
                <x-table_tbody_data value="2 Year" />
                @elseif($item->period == 5)
                <x-table_tbody_data value="3 Years" />
                @elseif($item->period == 6)
                <x-table_tbody_data value="4 Years" />
                @else
                <x-table_tbody_data value="5 Years" />
                @endif
                <td class="flex flex-row px-6 py-4">
                    <a href="#" onclick="editPlan('{{ $item->id }}')">
                        <svg class="w-3 h-3 mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path
                                d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z" />
                        </svg>
                    </a>
                    <a href="#" onclick="deleteModal('{{ $item->id }}')">
                        <svg class="w-3 h-3 mx-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                            <path
                                d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" />
                        </svg>
                    </a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
    @endsection