@extends('admin.layouts.layout')
@section('title', 'Platform settings')
@section('content')
    <style>

    </style>
    <div class=" ">

        <div class="flex gap-3 flex-wrap items-center">



            <img src="{{ asset('newsites/admin/images/doller-yellow.png') }}" alt="images" class="mt-2" />
            <h1 class="text-[14px] lg:text-[15px] xl:text-[16px] 2xl:text-[20px] Poppins-medium
            text-[#133754]">
                System-Wide Pricing Settings
            </h1>
        </div>
        <form action="{{ route('admin.pricing.update') }}" method="post">
            @csrf
            <div>

                <button type="submit"
                    class="float-end cursor-pointer bg-[#133754] text-[#FFFFFF] Poppins-medium sm:text-[16px] text-sm sm:w-50.25 w-[140px] sm:py-3.5 py-2.5 rounded-[5px] ">
                    Update Pricing
                </button>
            </div>
            <br>
            <div class="grid grid-cols-1 md:grid-cols-2 desk:gap-6 gap-2 2xl:max-w-[87%] mt-7">

                <div class=" text-white rounded-lg p-6 shadow-lg"
                    style="background-image: url('{{ asset('newsites/admin/images/setting-bg-blue.png') }}');">
                    <h2 class="text-2xl font-semibold tracking-wide Poppins">MEMBERSHIP PRICING</h2>
                    <p class="xl:text-[15px] lg:text-[14px] text-[15px] Poppins text-[#FFFFFF] mt-1">
                        Monthly subscription fee charged to tutors.
                    </p>

                    <div class="border-t border-white/30 my-2"></div>

                    <div class="flex justify-between items-start">

                        <div>
                            <p class="text-[15px] Poppins text-[#FFFFFF] mb-2">Currently Active</p>
                            <div class="flex gap-2">
                                <div
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] bg-white desk:text-[41.07px] sm:text-[30px] text-[#133754] Poppins flex items-center justify-center rounded font-semibold text-lg">
                                    $</div>
                                @foreach (str_split($pricingValue) as $digit)
                                    <div
                                        class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] bg-white desk:text-[41.07px] sm:text-[30px] text-[#133754] Poppins flex items-center justify-center rounded font-semibold text-lg">
                                        {{ $digit }}</div>
                                @endforeach

                            </div>
                        </div>


                        <div>
                            <p class="text-[15px] Poppins text-[#FFFFFF] mb-2">Update Pricing</p>
                            <div class="flex gap-2">
                                <div
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] bg-white desk:text-[41.07px] sm:text-[30px] text-[#133754] Poppins flex items-center justify-center rounded font-semibold">
                                    $
                                </div>

                                <input type="text" maxlength="1" name="membershiping_pricing[]" placeholder="-"
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] placeholder:text-[#133754]  bg-white desk:sm:text-[41.07px] text-[30px] text-[#133754] Poppins text-center rounded font-semibold outline-none">

                                <input type="text" maxlength="1" name="membershiping_pricing[]" placeholder="-"
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] placeholder:text-[#133754] bg-white desk:sm:text-[41.07px] text-[30px] text-[#133754] Poppins text-center rounded font-semibold outline-none">

                                <input type="text" name="membershiping_pricing[]" maxlength="1" placeholder="-"
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] placeholder:text-[#133754] bg-white desk:sm:text-[41.07px] text-[30px] text-[#133754] Poppins text-center rounded font-semibold outline-none">
                            </div>
                        </div>


                    </div>
                </div>


                <div class=" text-white rounded-lg p-6 shadow-lg"
                    style="background-image: url('{{ asset('newsites/admin/images/setting-bg-green.png') }}');">
                    <h2 class="text-2xl font-semibold tracking-wide Poppins">PLATFORM COMMISSION</h2>
                    <p class="xl:text-[15px] md:text-[14px] text-[15px] Poppins text-[#FFFFFF] mt-1">
                        Commission deducted from each completed session.
                    </p>

                    <div class="border-t border-white/30 my-2"></div>

                    <div class="flex justify-between items-start">


                        <div>
                            <p class="text-[15px] Poppins text-[#FFFFFF] mb-2">Currently Active</p>
                            <div class="flex gap-2">
                                <div
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] bg-white desk:text-[41.07px] sm:text-[30px] text-[#133754] Poppins flex items-center justify-center rounded font-semibold text-lg">
                                    %</div>
                                @foreach (str_split($commissionValue) as $digit)
                                    <div
                                        class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] bg-white desk:text-[41.07px] sm:text-[30px] text-[#133754] Poppins flex items-center justify-center rounded font-semibold text-lg">
                                        {{ $digit }}</div>
                                @endforeach
                            </div>
                        </div>


                        <div>
                            <p class="text-[15px] Poppins text-[#FFFFFF] mb-2">Update Pricing</p>
                            <div class="flex gap-2">
                                <div
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] bg-white desk:text-[41.07px] sm:text-[30px] text-[#133754] Poppins flex items-center justify-center rounded font-semibold">
                                    %
                                </div>

                                <input type="text" maxlength="1" name="platform_commission[]" placeholder="-"
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] placeholder:text-[#133754]  bg-white desk:sm:text-[41.07px] text-[30px] text-[#133754] Poppins text-center rounded font-semibold outline-none">

                                <input type="text" maxlength="1" placeholder="-" name="platform_commission[]"
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] placeholder:text-[#133754] bg-white desk:sm:text-[41.07px] text-[30px] text-[#133754] Poppins text-center rounded font-semibold outline-none">

                                <input type="text" maxlength="1" placeholder="-" name="platform_commission[]"
                                    class="2xl:w-16.5 xl:w-[45px] sm:w-[40px] w-[30px] 2xl:h-21.5 xl:h-[76px] sm:h-[66px] h-[50px] placeholder:text-[#133754] bg-white desk:sm:text-[41.07px] text-[30px] text-[#133754] Poppins text-center rounded font-semibold outline-none">
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </form>
        <div class="flex flex-wrap items-center justify-between gap-4 mb-6 mt-10">
            <div class="flex gap-2 flex-wrap">
                <h1 class="text-[#34495E] Bai font-semibold text-[24px]">
                    Subject List
                </h1>
            </div>
            <div class="flex gap-3">
                <button command="show-modal" commandfor="addsubject"
                    class=" cursor-pointer bg-[#133754] text-[#FFFFFF] Poppins-medium sm:text-[16px] text-sm sm:w-50.25 w-[140px] sm:py-3.5 py-2.5 rounded-[5px] ">
                    Add New Subject
                </button>
            </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 font-semibold text-[#34495E] text-[15px] rounded-bl-[6.79px] rounded-tl-[6.79px] overflow-hidden">
                        Subject Name</th>
                    <th class="py-2 px-3 Poppins font-semibold text-[#34495E]  text-[15px]">Tutor Count</th>
                    <th class="py-2 px-3 Poppins font-semibold text-[#34495E]  text-[15px]">Status</th>
                    <th class="py-2 px-3 Poppins font-semibold text-[#34495E]  text-[15px]">Total Sessions</th>
                    <th
                        class="py-2 px-3 Poppins font-semibold text-[#34495E] text-[15px] rounded-tr-[6.79px] rounded-br-[6.79px] overflow-hidden text-center">
                        Action</th>
                </tr>
            </thead>

            <tbody>
                @foreach ($subjects as $subject)
                    <tr>
                        <td class="py-4 px-3 border-b border-[#E6E6E6] text-[#636363] text-[17px] Poppins-medium">
                            {{ $subject->subject_name }}</td>
                        <td class="py-4 px-3 border-b border-[#E6E6E6] text-[#383838] Poppins-medium text-[17px]">
                            {{ $subject->tutors()->count() }}</td>
                        @if ($subject->status == 1)
                            <td class="py-4 px-3 border-b border-[#E6E6E6] text-[#008E28] text-[15px] font-medium">Enabled
                            </td>
                        @else
                            <td class="py-4 px-3 border-b border-[#E6E6E6] text-[#C80000] text-[15px] font-medium">Disabled
                            </td>
                        @endif
                        <td class="py-4 px-3 border-b border-[#E6E6E6] text-[#383838] Poppins-medium text-[17px]">
                            {{ $subject->sessions()->count() }}</td>
                        <td class="py-4 px-3 border-b border-[#E6E6E6]">
                            <div class="flex justify-center gap-2">
                                @if ($subject->status == 0)
                                    <div class="flex justify-center gap-2">
                                        <button  type="button" command="show-modal" commandfor="status{{ $subject->id }}"
                                            class="border-[#F1F1F5] bg-[#009D2C] text-white border h-11.25 w-11.25 rounded-[5px] cursor-pointer "><i
                                                class="fa-solid fa-check text-lg "></i></button>
                                
                                    </div>
                                @else
                                    <button type="button" command="show-modal" commandfor="status{{ $subject->id }}"
                                        class="border-[#F1F1F5] bg-[#C80000] text-white border h-11.25 w-11.25 rounded-[5px] cursor-pointer "><i
                                            class="fa-solid fa-x text-lg "></i></button>
                                @endif

                                <button type="button"command="show-modal" commandfor="updateSubject{{ $subject->id }}"
                                    class="border-[#F1F1F5] bg-[#F4C701] border h-11.25 w-11.25 rounded-[3px] cursor-pointer "><i
                                        class="fa-solid fa-pencil text-lg "></i></button>
                            </div>
                        </td>
                    </tr>
                @endforeach

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

    <form action="{{ route('admin.platform-setting') }}" method="get">
        <div class="flex flex-wrap items-center justify-between mt-6 gap-4 text-sm text-gray-600">

            <!-- Left Side -->
            <div class="flex items-center gap-3">
                <span class="text-[#4E4F54] text-sm Poppins">Items per page:</span>

                <!-- ✅ Inline submit -->
                <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) == 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">
                    {{ $subjects->firstItem() }}–{{ $subjects->lastItem() }}
                    of {{ $subjects->total() }} Users
                </span>
            </div>

            <!-- Right Side -->
            <div class="flex items-center gap-3">

                <!-- ✅ Inline submit -->
                <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 <= $subjects->lastPage(); $i++)
                        <option value="{{ $i }}" {{ $subjects->currentPage() == $i ? 'selected' : '' }}>
                            {{ $i }}
                        </option>
                    @endfor

                </select>

                <span class="text-[#4E4F54] text-sm Poppins">
                    of {{ $subjects->lastPage() }} pages
                </span>

                <!-- Hidden page input -->
                <input type="hidden" name="page" id="pageInput" value="{{ $subjects->currentPage() }}">

                <!-- Previous Button -->
                <button type="button"
                    onclick="document.getElementById('pageInput').value={{ $subjects->currentPage() - 1 }}; this.form.submit();"
                    {{ $subjects->onFirstPage() ? 'disabled' : '' }}
                    class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer disabled:opacity-50">
                    <i class="fa-solid fa-angle-left"></i>
                </button>

                <!-- Next Button -->
                <button type="button"
                    onclick="document.getElementById('pageInput').value={{ $subjects->currentPage() + 1 }}; this.form.submit();"
                    {{ $subjects->currentPage() == $subjects->lastPage() ? 'disabled' : '' }}
                    class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer disabled:opacity-50">
                    <i class="fa-solid fa-angle-right"></i>
                </button>

            </div>
        </div>
    </form>
    @foreach ($subjects as $subject)
        <el-dialog>
            <dialog id="updateSubject{{ $subject->id }}" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <form action="{{ route('admin.subjects.update', $subject->id) }}" method="post">
                            @csrf

                            <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                                <div class="flex justify-between sm:items-start">
                                    <div>

                                        <h1
                                            class="text-[#181D27] fo-m sm:text-[24.93px] text-[20px] Poppins font-semibold">
                                            Update
                                            Subject</h1>
                                    </div>
                                    <button command="close" commandfor="updateSubject{{ $subject->id }}"
                                        class="cursor-pointer">

                                        <img src="{{ asset('newsites/admin/images/cros-icon.png') }}" />
                                    </button>
                                </div>

                                <div class="mt-3">
                                    <p class="Poppins-medium text-lg text-[#414651] font-medium">Subject Name</p>
                                    <div class="relative flex gap-5 w-full mt-2">
                                        <div class="field w-full">
                                            <input name="subject_name" value="{{ $subject->subject_name }}"
                                                class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[16px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                                placeholder="Enter Subject Name">
                                        </div>
                                        

                                    </div>
                                </div>







                                <div class="mt-3">
                                    <button
                                        class="bg-[#133754] cursor-pointer px-3  border rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Save
                                    </button>
                                </div>


                            </div>
                        </form>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>


        <el-dialog>
            <dialog id="status{{ $subject->id }}" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-2 pb-4 sm:p-7 sm:pb-4">
                            <div class="flex justify-between sm:items-center">

                                <h1
                                    class="text-[#181D27] flex-1 text-center fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                                    Confirmation Modal</h1>

                                <button command="close" commandfor="status{{ $subject->id }}" class="cursor-pointer ">

                                    <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <p class="text-[#414651] Poppins-medium text-[17px] text-center mt-4">Are you sure you
                                want to Change status?</p>









                            <form action="{{ route('admin.subjects.status.update', $subject->id) }}" method="post">

                                <div class="mt-3 flex w-full gap-3">
                                    <button command="close" commandfor="status{{ $subject->id }}"
                                        class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        No
                                    </button>
                                    @csrf
                                    <button type="submit"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Yes
                                    </button>
                                </div>
                            </form>


                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>
    @endforeach

    <el-dialog>
        <dialog id="addsubject" aria-labelledby="dialog-title"
            class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
            <el-dialog-backdrop
                class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

            <div tabindex="0"
                class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                <el-dialog-panel
                    class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                    <form action="{{ route('admin.subjects.add') }}" method="post">
                        @csrf

                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                            <div class="flex justify-between sm:items-start">
                                <div>

                                    <h1 class="text-[#181D27] fo-m sm:text-[24.93px] text-[20px] Poppins font-semibold">Add
                                        New
                                        Subject</h1>
                                </div>
                                <button command="close" commandfor="addsubject" class="cursor-pointer">

                                    <img src="{{ asset('newsites/admin/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <div class="mt-3">
                                <p class="Poppins-medium text-lg text-[#414651] font-medium">Subject Name</p>
                                <div class="relative flex gap-5 w-full mt-2">
                                    <div class="field w-full">
                                        <input name="subject_name" value="{{ old('subject_name') }}"
                                            class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[16px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                            placeholder="Enter Subject Name">
                                    </div>
                                
                                </div>
                            </div>







                            <div class="mt-3">
                                <button
                                    class="bg-[#133754] cursor-pointer px-3  border rounded-sm w-full sm:py-4 py-3 text-[#FFFFFF] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                    Save
                                </button>
                            </div>


                        </div>
                    </form>

                </el-dialog-panel>
            </div>
        </dialog>
    </el-dialog>

    </div>
@endsection
