@extends('frontEnd.master')
@section('content')
@include('frontEnd.partials.breadcrumb', ['mainTitle' => "Package
", 'breadcrumb1' => "Internet", 'breadcrumb2' => 'Package'])
<section class="s-py-30 s-py-lg-30 s-py-xl-30 ls ms">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2" id="price">
                <h4 class="fw-300 text-center mb-1">Our Packages</h4>
                <p class="text-center">Which Internet package is right for you? </p>
                <p class="text-center">With <b>Xplorenetbd</b> light speed Internet, you can choose the best package as befits your family</p>
            </div>
        </div>
        <div class="divider-20 d-none d-lg-block"></div>
        <div class="row c-gutter-20">
            @foreach ($packages as $package)
            <div class="col-lg-4 col-12">
                <div class="pricing-plan hero-bg rounded">
                    <div class="plan-name text-uppercase bg-maincolor">
                        <div class="ltx-header-wrapper">
                            <h2 class="header font-graduate ">{{ $package->package_name}}</h2>
                            <p>Unlimited</p>
                            <ul class="ltx-tariff-icons ">
                                <li class="youtube position-relative"><img
                                        class="position-absolute facebook-icon_position"
                                        src="{{asset('frontend_assets/images/FTP-icon.jpg')}}" style="width:50%">
                                </li>
                                <li class="facebook position-relative"><img
                                        class="position-absolute facebook-icon_position"
                                        src="{{asset('frontend_assets/images/youtube.png')}}" style="width:50%">
                                </li>
                                <li class="bdix position-relative"><img
                                        class="facebook-icon_position position-absolute"
                                        src="{{asset('frontend_assets/images/bdix.png')}}" style="width:50%"></li>
                                <li class="facebook position-relative"><img
                                        class="position-absolute facebook-icon_position"
                                        src="{{asset('frontend_assets/images/stream.svg')}}" style="width:50%">
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="plan-desc">
                        <div class="plan-content">
                            <h1 class="color-main fw-200 mb-0">{{ $package->package_speed}}<span style="font-size:20px">Mbps</span></h1>
                        </div>
                    </div>
                    <div class="plan-features">
                        <ul class="ltx-tariff-list">
                            <li>100 mbps | Facebook, Youtube, BDIX, FTP</li>
                            <li>6 Peak Hours</li>
                            <li>18 Off Peak Hours</li>
                            <li>24/7 Support</li>
                        </ul>
                    </div>
                    <div class="price-wrap d-flex">
                        <span class="plan-sign small-text">BDT</span>
                        <span class="plan-price color-main3">{{ $package->package_price}}</span>
                        <span class="plan-decimals small-text">/mo</span>
                    </div>
                    <div class="plan-button">
                        <a href="contact.html" class="btn small-btn btn-maincolor2"><span>Buy Now</span></a>
                    </div>
                </div>
                <div class="divider-20 d-block d-lg-none"></div>
            </div>
            @endforeach
        </div>
    </div>
</section>


<section class="s-py-30 s-py-lg-30 s-py-xl-30 ls ms">
    <div class="container">
        <div class="row c-gutter-20">
            @foreach ($exclusive_packages as $exclusive_package)
            <div class="col-12 mb-4">
                <div @php echo 'style="background-image: url(' .url('store-images/exclusive_package/'.$exclusive_package->exclusive_package_image).');background-size: cover;background-position:
                    center center;background-repeat: no-repeat;"'; @endphp>
                    <div class="collection-banner-contain ">
                        <div class="sub-contain text-left">
                            <h3 class="fw-300" style="color:#fff"><img class=""
                                    src="{{asset('frontend_assets/images/logo.png')}}" alt="XploreNet " width="15%">
                                {{$exclusive_package->exclusive_package_name}}</h3>
                            <p class="col-lg-5 fw-500 mb-2" style="color:#fff">
                                {{$exclusive_package->exclusive_package_description}}</p>
                            <div class="plan-button mb-2">
                                <a href="#" class="btn small-btn btn-maincolor2" data-toggle="modal"
                                    data-target="#plan-modal"><span>Buy Now</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            <!-- <div class="col-12 mt-4">
                <div class="collection-banner-mimelite">
                    <div class="collection-banner-contain ">
                        <div class="sub-contain text-left">
                            <h3 class="fw-300" style="color:#000"><img
                                    src="{{asset('frontend_assets/images/mime.png')}}" alt="XploreNet "> Elite</h3>
                            <p class="col-lg-5 fw-500" style="color:#000">Design your own bespoke M<span
                                    class="text-red">i</span>ME Package, with M<span
                                    class="text-red">i</span>ME ELITE. Start from BDT 5000</p>
                            <div class="plan-button">
                                <a href="contact.html" class="btn small-btn btn-maincolor2"><span>Buy
                                        Now</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->

        </div>
        <div class="divider-40 d-none d-lg-block"></div>
    </div>
</section>

<section class="ds s-pt-80 s-pb-20 s-pt-lg-30 s-pb-lg-30 s-pt-xl-30 s-pb-xl-30 mb-30 c-gutter-30 c-mb-0 background-gradient advantage-section cover-background" id="advantage">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 mb-4 text-center">
                    <h4 class="fw-200 mb-2">Enjoy the Best of <b>Xplorenetbd</b></h4>
            </div> 
            <div class="col-lg-4">
                <div class="media">
                    <div class="image-styled text-center">
                        <img alt="" src="{{asset('frontend_assets/images/reliability.png')}}">
                    </div>
                    <div class="media-body">
                        <h5 class="fw-200">Network Reliability</h5>
                        <p>
                            More Browsing, Less Buffering.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="media">
                    <div class="image-styled text-center">
                        <img alt="" src="{{asset('frontend_assets/images/unlimited.png')}}">
                    </div>
                    <div class="media-body">
                        <h5 class="fw-200">No Usage Limits or Data Caps</h5>
                        <p>
                            Stream as much as you want, whenever you want with our evolved connectivity.
                        </p>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="media">
                    <div class="image-styled text-center">
                        <img alt="" src="{{asset('frontend_assets/images/icon-cs.png')}}">
                    </div>
                    <div class="media-body">
                        <h5 class="fw-200">24/7 Support</h5>
                        <p>
                            We're here for you whenever you need us.
                        </p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</section>

@endsection