@extends('essential.main_page', [
'breadcum' => 'Customer',
'route' => 'customer',
])

@section('content')
<div class="flex flex-row space-x-2 h-auto bg-primary rounded-lg  p-2" id="view">
    <div class="flex flex-row gap-8 w-1/2 h-48 bg-gray-100 rounded-lg p-4 ">
        <div class="w-1/3 flex flex-col ">
            <div class=" mb-4">
                <label for="name" class="text-sm text-gray-900">Subscriber Id :
                </label>
                <p class="text-sm font-semibold mb-2 text-gray-900 ">{{ $customer->subscriber_id }}</p>
            </div>
            <div class="mb-4">
                <label for="name" class="text-sm text-gray-900">Mobile :
                </label>
                <p class="text-sm font-semibold mb-2 text-gray-900 ">{{ $customer->mobile_no ?? '-' }}</p>
            </div>

        </div>
        <div class="w-1/3 flex flex-col">

            <div class=" mb-4">
                <label for="name" class="text-sm text-gray-900">Name :
                </label>
                <p class="text-sm font-semibold mb-2 text-gray-900 ">{{ $customer->customer_name }}</p>
            </div>

            <div class="mb-4">
                <label for="name" class="text-sm text-gray-900">Watsapp no :
                </label>
                <p class="text-sm font-semibold mb-2 text-gray-900 ">{{ $customer->watsapp_no ?? '-' }}</p>
            </div>
        </div>
        <div class="w-1/3 flex flex-col">
            <div class="mb-4">
                <label for="name" class="text-sm text-gray-900">Customer Type :
                </label>
                <p class="text-sm font-semibold mb-2 text-gray-900 ">{{ $customer->customer_type->label() ?? '' }}</p>
            </div>
            <div class=" mb-4">
                <label for="name" class="text-sm text-gray-900">Email :
                </label>
                <p class="text-sm font-semibold mb-2 text-gray-900 ">{{ $customer->email ?? '-' }}</p>
            </div>

        </div>
    </div>
    <div class="w-1/2 h-48 bg-gray-100  rounded-lg p-4">
        <div class="w-full flex flex-row">
            <div class="w-1/2 flex flex-col mb-1">
                <label for="name" class="text-sm font-semibold  text-primary mb-2">Address Details
                </label>
                <p class="text-sm   text-gray-900 ">Door No : {{ $customer->door_no ?? '-' }}</p>
                <p class="text-sm  text-gray-900 ">Plot No : {{ $customer->plot_no ?? '-' }}</p>
                <p class="text-sm  text-gray-900 ">Area : {{ $customer->area ?? '-' }}</p>
                <p class="text-sm   text-gray-900 ">State : {{ $customer->state->state_name ?? '-' }}</p>
                <p class="text-sm   text-gray-900 ">District : {{ $customer->district->district_name ?? '-' }}</p>
                <p class="text-sm  text-gray-900 ">Pincode : {{ $customer->pin_code ?? '-' }}</p>
            </div>
            <div class="w-1/2 flex flex-col">
                <div class="mb-2 mt-4">
                    <label for="name" class=" text-sm text-gray-900">Total Subscription
                    </label>
                    <p class="text-sm font-semibold  text-gray-900 ">{{ $book->count() ?? '-'}}</p>
                </div>
                <div class="mb-2">
                    <label for="name" class=" text-sm text-gray-900">Latest Subscription
                    </label>
                    <p class="text-sm font-semibold  text-gray-900 ">
                        {{ isset($date->subscription) ? $date->subscription->subscription_name : '-' }}
                    </p>
                </div>
                <div class="mb-2">
                    <label for="name" class="text-sm text-gray-900">Date
                    </label>
                    <p class="text-sm  font-semibold text-gray-900 ">
                        {{ isset($date->created_at) ? $date->created_at->format('d M Y') : '-' }}
                    </p>
                </div>
            </div>

        </div>
    </div>

</div>
<div class="flex flex-row justify-end items-end">


    <div id="downloadexcel" data-tooltip-target="{{ 'tooltip-download' }}" data-tooltip-placement="left">
        <div class="flex items-center px-5 py-2  rounded-sm hover:bg-gray-100  cursor-pointer">
            <svg class="w-6 h-6 fill-slate-600" stroke-width="1" viewBox="0 0 448 512"
                xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <path
                    d="M48 448V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm90.9 233.3c-8.1-10.5-23.2-12.3-33.7-4.2s-12.3 23.2-4.2 33.7L161.6 320l-44.5 57.3c-8.1 10.5-6.3 25.5 4.2 33.7s25.5 6.3 33.7-4.2L192 359.1l37.1 47.6c8.1 10.5 23.2 12.3 33.7 4.2s12.3-23.2 4.2-33.7L222.4 320l44.5-57.3c8.1-10.5 6.3-25.5-4.2-33.7s-25.5-6.3-33.7 4.2L192 280.9l-37.1-47.6z">
                </path>
            </svg>
        </div>
        <div id="{{ 'tooltip-download' }}" role="tooltip"
            class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-primary transition-opacity duration-300 bg-white rounded-lg shadow-sm opacity-0 tooltip">
            Excel Download
            <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
    </div>
</div>

<div class="relative overflow-x-auto shadow-sm sm:rounded-lg mt-2">
    <table class="w-full text-sm text-left text-gray-500">
        <x-table_thead />
        <x-table_thead_data label="BOOK NAME" />
        <x-table_thead_data label="PRICE" />
        <x-table_thead_data label="SUBSCRIPTION TYPE" />
        <x-table_thead_data label="SUBSCRIPTION NAME" />
        <x-table_thead_data label="PLAN" />
        <x-table_thead_data label="QTY" />
        <x-table_thead_data label="PAYMENT TYPE" />
        <x-table_thead_data label="PURCHASED DATE" />
        </tr>
        </thead>
        <tbody>
            @if ($book->isEmpty())
            <tr>
                <td colspan="16" class="px-6 py-4 text-center text-gray-500">
                    No such record found on database
                </td>
            </tr>
            @else
            @foreach ($book as $key => $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">
                    {{ $key + 1 }}
                </th>
                <x-table_tbody_data value="{{ $item->book->book_name }}" />
                <x-table_tbody_data value="₹ {{ $item->book->amount }}" />
                <x-table_tbody_data value="{{ $item->subscription->subscription_type->label() ?? '' }}" />
                <x-table_tbody_data value="{{ $item->subscription->subscription_name }}" />

                @if ($item->subscription->plan == 1)
                <x-table_tbody_data value="1 Month" />
                @elseif($item->subscription->plan == 2)
                <x-table_tbody_data value="3 Month" />
                @elseif($item->subscription->plan == 3)
                <x-table_tbody_data value="1 Year" />
                @elseif($item->subscription->plan == 4)
                <x-table_tbody_data value="2 Year" />
                @elseif($item->subscription->plan == 5)
                <x-table_tbody_data value="3 Year" />
                @elseif($item->subscription->plan == 6)
                <x-table_tbody_data value="4 Year" />
                @else
                <x-table_tbody_data value="5 Year" />
                @endif
                <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))) }}" />

                <input type="text" id="excel_id" name="id" value="{{ $item->customer_id }}"
                    hidden>

            </tr>
            @endforeach
            @endif
        </tbody>
    </table>
</div>
@endsection

@push('scripts')
<script>
    $('#downloadexcel').click(function(e) {
        e.preventDefault();
        $id = $('#id').val();
        var id = $('#excel_id').val();
        return window.location.href = "{{ url('/customer_report_excel?id=') }}" + id;

    });
</script>
@endpush