@props([
    'showApply' => true
])
<div class="w-[300px] h-auto border-[3px] hover:border-green-400 rounded-xl shadow-xl hover:transform hover:scale-105 duration-500 ease-in-out hover:shadow-2xl xl:ml-[5px]">
    <div class="border-b 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-[13px] mt-5 p-3 border border-green-400 bg-green-400 font-bold">
                ultimate +
            </div>
            <div class="flex justify-center tracking-wider text-green-400">
                <div class="text-xl font-medium mt-[6px]">$</div>
                <div class="text-6xl font-light">75</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=""> Qualifying Tribal Lands in United States</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=""> 15GB HIGH SPEED Data*</div>
                </div>
            </div>
        </div>
    </div>

    @if($showApply)
    <a href="{{ route('acp.apply') }}">
        <div class="uppercase text-green-400 text-center rounded-b-md w-auto pt-8 pb-[30px] text-sm  font-bold -mt-2 relative z-0 hover:cursor-pointer hover:text-green-600 hover:bg-green-200">
            apply now
        </div>
    </a>
    @endif
</div>