@inject('roster_helper', 'App\Helpers\RosterHelper')
@extends('organizations.layouts.default')
@section('content')
    <main>
        <div class="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10">
            <div class="text-title-xsm">
                <div class="flex justify-between m-0 p-0">
                    <!-- Breadcrumb Start -->
                    <h2 class="text-title-md2 font-bold text-black dark:text-white">
                        Publish Roster
                    </h2>
                    @include('organizations.layouts.partials.breadcrumb')
                </div>
                <hr class="text-white my-3">
                <div class="my-3">
                </div>
                <div class="rounded-sm border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-boxdark">
                    <div class="bg-white dark:bg-boxdark overflow-hidden rounded-md p-6">
                        <div class="grid grid-cols-1">
                            <div class="py-3">
                                <span class="font-semibold">Title:</span> {{ $model->roster_title }}
                            </div>
                        </div>
                        <div class="grid grid-cols-2">
                            <div class="py-3">
                                <span class="font-semibold">Start Date:</span> {{ $model->start_date->format('Y-m-d') }}
                            </div>
                            <div class="py-3">
                                <span class="font-semibold">End Date:</span> {{ $model->end_date->format('Y-m-d') }}
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <h4 class="text-xl text-center font-bold my-3 text-black dark:text-white">
                        Choose Package
                    </h4>
                </div>
                <div class="flex flex-col justify-center items-center gap-5 md:gap-7 2xl:gap-10">
                    <div class="">
                        {{-- @foreach ($services as $service)
                            <div
                                class="relative rounded-sm border border-stroke bg-white p-6 shadow-default dark:border-strokedark dark:bg-boxdark md:p-9 xl:p-11.5">
                                <span class="absolute -right-1 top-3.5">
                                    <svg width="109" height="34" viewBox="0 0 109 34" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path d="M24 0L106 0C107.657 0 109 1.34315 109 3V30L24 30L24 0Z" fill="#3C50E0">
                                        </path>
                                        <foreignObject x="24" y="0" width="81" height="30">
                                            <div xmlns="http://www.w3.org/1999/xhtml">
                                                <div class="mt-1 text-center font-satoshi text-sm font-medium text-white">
                                                    Best Value
                                                </div>
                                            </div>
                                        </foreignObject>
                                        <path d="M0 0H24V30H0L19 15L0 0Z" fill="#3C50E0"></path>
                                        <path d="M105 34L109 30H105V34Z" fill="#2539C8"></path>
                                    </svg>
                                </span>
                                <span
                                    class="mb-2.5 block text-title-sm2 font-bold text-black dark:text-white">{{ $service->service_name }}</span>
                                <h3>
                                    <span class="text-xl font-medium text-black dark:text-white">Rs.</span>
                                    <span class="text-title-xxl2 font-bold text-black dark:text-white">
                                        {{ number_format($service->service_amount) }}</span>
                                    <span class="font-medium"> Per Notice</span>
                                </h3>

                                <h4 class="mb-5 mt-7.5 text-lg font-medium text-black dark:text-white">
                                    Features
                                </h4>

                                <ul class="flex flex-col gap-3.5">
                                    <li class="font-medium">Get Figma Source File</li>
                                    <li class="font-medium">Use on Unlimited Projects</li>
                                    <li class="font-medium">Personal &amp; Commercial Use</li>
                                    <li class="font-medium">Downloadable Offline Files</li>
                                    <li class="font-medium">Lifetime Free Updates</li>
                                </ul>
                                {!! $service->service_description !!}
                                <form action="{{ route('organization.rosters.publishChooseService', $model->id) }}"
                                    method="post">
                                    @csrf
                                    <input type="hidden" name="service_id" value="{{ $service->id }}">
                                    <button
                                        class="mt-9 flex rounded-md border border-primary px-9 py-3 font-medium text-primary hover:bg-primary hover:text-white">
                                        Publish Now
                                    </button>
                                </form>
                            </div>
                        @endforeach --}}
                        <div
                            class="relative rounded-sm border border-stroke bg-white p-6 shadow-default dark:border-strokedark dark:bg-boxdark md:p-9 xl:p-11.5">
                            <span class="absolute -right-1 top-3.5">
                                <svg width="109" height="34" viewBox="0 0 109 34" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path d="M24 0L106 0C107.657 0 109 1.34315 109 3V30L24 30L24 0Z" fill="#3C50E0">
                                    </path>
                                    <foreignObject x="24" y="0" width="81" height="30">
                                        <div xmlns="http://www.w3.org/1999/xhtml">
                                            <div class="mt-1 text-center font-satoshi text-sm font-medium text-white">
                                                Best Value
                                            </div>
                                        </div>
                                    </foreignObject>
                                    <path d="M0 0H24V30H0L19 15L0 0Z" fill="#3C50E0"></path>
                                    <path d="M105 34L109 30H105V34Z" fill="#2539C8"></path>
                                </svg>
                            </span>
                            <span class="mb-2.5 block text-title-sm2 font-bold text-black dark:text-white">Basic</span>
                            <h3>

                                <span class="text-title-xxl2 font-bold text-black dark:text-white">
                                    FREE</span>
                                {{-- <span class="font-medium"> Per Notice</span> --}}
                            </h3>

                            {{-- <h4 class="mb-5 mt-7.5 text-lg font-medium text-black dark:text-white">
                                Features
                            </h4> --}}
                            <span class="text-xl font-medium text-black dark:text-white"></span>
                            <ul class="flex flex-col gap-3.5">
                                <li class="font-medium">Set your own publishing dates</li>
                                <li class="font-medium">Tailored evaluation services</li>
                                <li class="font-medium">High-quality AI-generated documents</li>
                                <li class="font-medium">Free premium access this year</li>
                                <li class="font-medium">24/7 expert support</li>
                            </ul>
                            {{-- {!! $service->service_description !!} --}}
                            {{-- <form action="{{ route('organization.rosters.publishChooseService', $model->id) }}"
                                method="post">
                                @csrf
                                <input type="hidden" name="service_id" value="1">
                                <button
                                    class="mt-9 flex rounded-md border border-primary px-9 py-3 font-medium text-primary hover:bg-primary hover:text-white">
                                    Publish Now
                                </button>
                            </form> --}}
                            <form action="{{ route('organization.rosters.payRosterPublish', $model->id) }}" method="post">
                                @csrf
                                <div class="grid md:grid-cols-2 gap-4">
                                    <div class="flex items-center">
                                        <input type="hidden" name="payment_method" value="P&PL" required />
                                        <input type="hidden" name="payment_remarks" value="P&PL" required />
                                        <button
                                            class="mt-9 flex rounded-md border border-primary px-9 py-3 font-medium text-primary hover:bg-primary hover:text-white">
                                            Publish Now
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection