@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">

        <thead class="text-xs text-white uppercase bg-primary">
            <tr>
                <th class="w-4 p-4">
                    <input type="checkbox" id="selectAll"
                        class="w-4 h-4  text-primary bg-secondary border-primary rounded focus:ring-primary focus:ring-2 cursor-pointer">
                </th>
                <th scope="col" class="px-3 py-3">
                    <div class="flex items-center text-white">
                        S.NO
                    </div>
                </th>
                <x-table_thead_data label="SUBSCRIBER ID" />
                <x-table_thead_data label="CUSTOMER NAME" />
                <x-table_thead_data label="DISTRICT" />
                <x-table_thead_data label="BOOK" />
                <x-table_thead_data label="SUBSCRIPTION" />
                <x-table_thead_data label="PLAN" />
                <x-table_thead_data label="QTY" />
                <x-table_thead_data label="PAYMENT TYPE" />
                <x-table_thead_data label="PURCHASE DATE" />
                <x-table_thead_data label="AMOUNT" />
                <x-table_thead_data label="STATUS" />
                <x-table_thead_data label="ACTION" />

            </tr>
        </thead>
        <tbody>
            @foreach ($items as $item)
            <tr class="bg-white border-b  hover:bg-muted">
                <td class="w-4 p-4">
                    <a href="#" onclick="selectPrintRow('{{ $item->id }}');">
                        <div class="flex items-center">
                            <input id="checkbox-table-search-1" type="checkbox"
                                class="checkbox-table-search-1 w-4 h-4 text-primary bg-secondary border-primary rounded focus:ring-primary focus:ring-2 cursor-pointer">

                        </div>
                    </a>
                </td>

                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    {{ $loop->index + $items->firstItem() }}
                </th>
                <x-table_tbody_data value="{{ $item->customer->subscriber_id }}" />

                <td class="px-6 py-4  whitespace-nowrap">
                    <a href="{{ url('customer') }}">
                        <div class="flex flex-col">
                            <span class="font-medium text-gray-900">{{ $item->customer->customer_name }}</span>
                            <span class="font-medium text-gray-400">{{ $item->customer->mobile_no }}</span>
                        </div>
                    </a>
                </td>
                <x-table_tbody_data value="{{ $item->district->district_name }}" />

                <td class="px-6 py-4  whitespace-nowrap">
                    <a href="{{ url('books') }}">
                        <div class="flex flex-col">
                            <span class="font-medium text-gray-900">{{ $item->book->book_name }}</span>
                            <span class="font-medium text-green-400">₹ {{ $item->book->amount }}</span>

                        </div>
                    </a>
                </td>
                <td class="px-6 py-4  whitespace-nowrap">
                    <a href="{{ url('subscription') }}">
                        <div class="flex flex-col">
                            <span
                                class="font-medium text-gray-900">{{ $item->subscription->subscription_name }}</span>
                            <span
                                class="font-medium text-gray-400">{{ $item->subscription->subscription_type->label() }}</span>
                        </div>
                    </a>
                </td>
                <td class="px-6 py-4  whitespace-nowrap">
                    <div class="flex flex-col">
                        @if ($item->subscription->plan == 1)
                        <span class="text-xs text-green-400">1 Month</span>
                        @elseif($item->subscription->plan == 2)
                        <span class="text-xs text-green-400">3 Months</span>
                        @elseif($item->subscription->plan == 3)
                        <span class="text-xs text-green-400">1 Year</span>
                        @elseif($item->subscription->plan == 4)
                        <span class="text-xs text-green-400">2 Year</span>
                        @elseif($item->subscription->plan == 5)
                        <span class="text-xs text-green-400">3 Years</span>
                        @elseif($item->subscription->plan == 6)
                        <span class="text-xs text-green-400">4 Years</span>
                        @else
                        <span class="text-xs text-green-400">5 Years</span>
                        @endif
                    </div>
                </td>
                <x-table_tbody_data value="{{ $item->qty }}" />


                <td class="px-6 py-4  whitespace-nowrap">
                    <div class="flex flex-col">
                        @if ($item->payment_type == 1)
                        <p class="text-blue-500 font-bold">Cash</p>
                        @elseif($item->payment_type == 2)
                        <p class="text-green-500 font-bold">Gpay</p>
                        @elseif($item->payment_type == 3)
                        <p class="text-yellow-500 font-bold">Cheque</p>
                        @else
                        <p class=" font-bold">-</p>
                        @endif
                    </div>
                </td>
                <x-table_tbody_data value="{{ date('d M Y', strtotime(str_replace('/', '-', $item->date))) }}" />
                <x-table_tbody_data value="₹  {{ $item->amount }}" />
                <td class="px-6 py-4  whitespace-nowrap">
                    <div class="flex flex-col">
                        @if ($item->status == 0)
                        <p class="text-green-500 font-bold">Paid</p>
                        @elseif($item->status == 1)
                        <p class="text-red-500 font-bold">Unpaid</p>
                        @endif
                    </div>
                </td>

                <td class=" px-6 py-4 ">
                    <div class="flex flex-row">
                        <a href="{{ url('purchase_books/' . $item->id . '/edit') }}">
                            <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>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
@endsection



<script type="text/javascript">
    $(document).ready(function() {
        $('#selectAll').click(function(e) {
            var table = $(e.target).closest('table');
            $('td input:checkbox', table).prop('checked', this.checked);
            onSelectAll();
        });
    });

    function onSelectAll() {
        $check = $('#selectAll').is(':checked');
        if ($check) {
            var table_data = {
                !!json_encode($items - > toArray(), JSON_HEX_TAG) !!
            };
            $.each(table_data['data'], function(index, value) {
                $val = value['id'].toString();
                var _searchedIndex = $.inArray($val, data);
                if (_searchedIndex >= 0) {
                    justFun();
                } else {
                    data.push($val);
                    justFun();
                }
            });
        } else {
            data = [];
            justFun();
        }
    }
</script>