@props([
    'showApply' => true
])
<div class="w-[300px] h-auto border-[3px] shadow-xl rounded-xl hover:transform hover:scale-105 duration-500 ease-in-out hover:shadow-2xl hover:border-gray-400">
    <div class="border border-slate-200 bg-white rounded-md shadow-md relative z-10 divide-y divide-solid divide-gray-300 space-y-9 ">
        <div>
            <div class="uppercase tracking-wider text-white text-center rounded-md w-[320px] -ml-[10px] mt-5 p-3 border border-gray-400 bg-gray-400 font-bold">
                Ultimate</div>
            <div class="flex justify-center tracking-wider text-gray-500 ">
                <div class="text-xl font-medium mt-[6px]">$</div>
                <div class="text-6xl font-light">30</div>
                <div class="text-xl font-medium mt-[32px]">/month</div>
            </div>
            <div class="flex-col text-center space-y-2 my-5 text-2xl">
                - ACP Discount<br/>
                Total: <strong>FREE</strong>
            </div>
        </div>

        <div class="w-[230px] ml-8">
            <div class="flex-col text-center space-y-2 my-5 ">
                <div class="flex justify-center text-sm font-bold text-blue-500 space-x-1">
                    <x-heroicon-o-check class="w-6 h-6"/>
                    <div class=""> Nationwide Service</div>
                </div>
                <div class="flex justify-center text-sm font-bold text-blue-500 space-x-1">
                    <x-heroicon-o-check class="w-6 h-6"/>
                    <div class=""> No Monthly Contracts</div>
                </div>
                <div class="flex justify-center text-sm font-bold text-blue-500 space-x-1">
                    <x-heroicon-o-check class="w-6 h-6"/>
                    <div class=""> UNLIMITED Talk</div>
                </div>
                <div class="flex justify-center text-sm font-bold text-blue-500 space-x-1">
                    <x-heroicon-o-check class="w-6 h-6"/>
                    <div class=""> UNLIMITED Text</div>
                </div>
                <div class="flex justify-center text-sm font-bold text-blue-500 space-x-1">
                    <x-heroicon-o-check class="w-6 h-6"/>
                    <div class=""> 10GB HIGH SPEED Data*</div>
                </div>
            </div>
        </div>
    </div>
    @if($showApply)
    <a href="{{ route('acp.apply') }}">
        <div class="uppercase text-gray-100 text-center rounded-b-md w-auto pt-8 pb-[30px] text-sm font-bold -mt-2 relative z-0 hover:text-gray-600 hover:bg-gray-200 ">
            Apply Now
        </div>
    </a>
    @endif
</div>