@extends('admin.layouts.layout')
@section('title', 'Subscriptions')
@section('content')
    <div class="py-2 ">
        <form action="{{ route('admin.subscriptions') }}">

            <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                <div class="flex gap-3 flex-wrap items-center">



                    <div
                        class="bg-[#133754] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/user-icon.png') }}" alt="images" />
                    </div>
                    <h1
                        class="text-[14px] lg:text-[15px] xl:text-[16px] 2xl:text-[17px] Poppins-medium
            text-[#133754]">
                        Subscriptions Information
                    </h1>
                </div>

                <div class="flex gap-3 flex-wrap">
                    <div class="relative  md:w-[248px] w-full">
                        <select name="status"
                            class="appearance-none w-full border border-[#EEEEEE] py-2.75 outline-0 rounded-md Poppins text-[14px] px-4 py-2 pr-10 text-[#4C4C4C] bg-white">

                            <option value="">Subscription Status</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="expired" {{ request('status') == 'expired' ? 'selected' : '' }}>Expired</option>
                        </select>

                        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <img src="{{ asset('newsites/admin/images/select-arrow.png') }}" class=" text-gray-500" />

                        </div>
                    </div>
                    <div class="relative md:w-[288px] w-full">
                        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-magnifying-glass text-[#9CA3AF]"></i>
                        </div>


                        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by Name"
                            class="border border-[#EEEEEE] placeholder:text-[#4C4C4C] rounded-md pl-10 pr-4 py-2.75 text-[#4C4C4C] Poppins text-[14px] w-full focus:outline-none " />
                    </div>
                </div>

            </div>

            <div class="w-full overflow-x-auto">
                <table class="min-w-225 w-full text-left text-[#1F1F1F] text-sm bg-white border-separate border-spacing-0">
                    <thead class="bg-[#F9F9FB] border">
                        <tr>

                            <th
                                class="sm:py-3.25 py-2 px-4 Poppins-medium text-[#44444A] text-[15px] rounded-tl-[6.79px] min-w-[224px]">
                                User</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Email</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Billing Cycle</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Status</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Start Date</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">End Date</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Total Earnings
                            </th>
                            <th
                                class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[200px] rounded-tr-[6.79px]">
                                Subscription Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($subscriptions as $subscription)
                            <tr>

                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    <div class="flex items-center gap-2 text-[#636363] text-[17px] Poppins-medium"><img
                                            src="{{ asset($subscription->user->tutor_default_image) }}"
                                            class="w-11 rounded-[4.62px] h-11 border border-[#D8DADF]" />{{ $subscription->user->name }}
                                    </div>
                                </td>
                                <td class="py-4 px-3 text-[#636363] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ $subscription->user->email }}</td>
                                <td class="py-4 px-3 text-[#121212] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                   Monthly
                                </td>
                                @if ($subscription->status =='active')
                                    
                                <td class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ $subscription->status }}
                                </td>
                                
                                @else
                                <td class="py-4 px-3 text-[#B20000] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ $subscription->status }}
                                </td>
                                
                                @endif
                                <td class="py-4 px-3 text-[#121212] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ dateFormate($subscription->start_date, 'd/m/Y') }}</td>
                                <td class="py-4 px-3 text-[#121212] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ dateFormate($subscription->end_date, 'd/m/Y') }}</td>
                                <td class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    ${{$subscription->user->subscription()->sum('plan_price')}}</td>
                                <td class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    ${{ $subscription->plan_price }}</td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>


            <div class="flex flex-wrap items-center justify-between mt-6 gap-4 text-sm text-gray-600">

                <div class="flex items-center gap-3">
                    <span class="text-[#4E4F54] text-sm Poppins">Items per page:</span>
                    <select name="per_page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-2 py-2">
                        <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        {{ $subscriptions->firstItem() }}–{{ $subscriptions->lastItem() }} of
                        {{ $subscriptions->total() }}
                        Subscriptions
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <select name="page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-4 py-2">
                        @for ($i = 1; $i <= $subscriptions->lastPage(); $i++)
                            <option value="{{ $i }}"
                                {{ $subscriptions->currentPage() == $i ? 'selected' : '' }}>
                                {{ $i }}
                            </option>
                        @endfor
                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">of {{ $subscriptions->lastPage() }} pages</span>
                    <button type="submit" name="page" value="{{ $subscriptions->currentPage() - 1 }}"
                        {{ $subscriptions->onFirstPage() ? 'disabled' : '' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-left"></i>
                    </button>

                    <button type="submit" name="page" value="{{ $subscriptions->currentPage() + 1 }}"
                        {{ $subscriptions->hasMorePages() ? '' : 'disabled' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-right"></i>
                    </button>
                </div>

            </div>
        </form>
    </div>

    @push('script')
        <script>
            $('select').on('change', function() {
                $(this).closest('form').submit();
            });

            $('input[name="search"]').on('keyup', function(e) {
                if (e.key === 'Enter') $(this).closest('form').submit();
            });
        </script>
    @endpush
@endsection
