@extends('layouts.frontend.app');
@section('style')
    <style>
        body {
            overflow-x: hidden;
        }
    </style>
@endsection
@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="header-list-product text-center">{{ $product->title }} <br>
                    </h1>
                    <div class="row">
                        <div class="col-md-8">
                            <p>{!! $product->desc !!}</p>
                        </div>
                        <div class="col-md-4 pt-4">
                            <img src="{{ url('/files/products/') . '/' . $product->img }}" alt="img" class="img-fluid" width="500">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="destop-web">
    @foreach ($productFeatures as $feature )
        <div class="container-fluid">
            <div class="row mt-5">
                <div class="col-md-12">
                    <div class="row offset-md-1">
                        <div class="col-md-6">
                            <h1 class="header-list-product">{{ $feature->name }}</h1>
                            {{-- <p>{!! $feature->desc !!}</p> --}}
                            <p>{!! $feature->desc !!}</p>
                            {{-- <p><i class="fas fa-check-circle"></i>Aplikasi
                                Mobile DC</p>
                            <p><i class=" fas fa-check-circle"></i>Anti
                                Spoofing</p>
                            <p><i class="fas fa-check-circle"></i>GPS
                                Restriction</p>
                            <p><i class="fas fa-check-circle"></i>Online/Offline</p>
                            <p><i class="fas fa-check-circle"></i>Manual
                                Entry</p> --}}
                            {{-- <a href="#">Pelajari Selengkapnya</a> --}}
                        </div>
                        <div class="col-md-4 text-center">
                            <img src="{{ url('/files/product-features/') . '/' . $feature->img }}" alt="img" class="img-thumbnail" width="500">
                            {{-- <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt=""> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
{{--
    <div class="container-fluid">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="row offset-md-2">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <h1 class="title-product">Melacak Waktu</h1>
                        <p>Bagaimana dan seperti apa Waktu direkam di SmartPresence. Dapatkah dioperasikan
                            offline dan apa saja yang berpengaruh.</p>
                        <p><i class="fas fa-check-circle"></i>nbsp;Aplikasi
                            Mobile DC</p>
                        <p><i class=" fas fa-check-circle"></i>&nbsp&nbsp;Anti
                            Spoofing</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;GPS
                            Restriction</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Online/Offline</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Manual
                            Entry</p>
                        <a href="#">Pelajari Selengkapnya</a>

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

    <div class="container-fluid">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="row offset-md-1">
                    <div class="col-md-6 ">
                        <h1 class="title-product">Melacak Waktu</h1>
                        <p>Bagaimana dan seperti apa Waktu direkam di SmartPresence. Dapatkah dioperasikan
                            offline dan apa saja yang berpengaruh.</p>
                        <p><i class="fas fa-check-circle "></i>&nbsp&nbsp;Aplikasi
                            Mobile DC</p>
                        <p><i class=" fas fa-check-circle"></i>&nbsp&nbsp;Anti
                            Spoofing</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;GPS
                            Restriction</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Online/Offline</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Manual
                            Entry</p>
                        <a href="#">Pelajari Selengkapnya</a>
                    </div>
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
</div>


{{-- <!-- close mobile web -->
<div class="mobile-web">
    <div class="container-fluid">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="row offset-md-2">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <h1 class="title-product">Melacak Waktu</h1>
                        <p>Bagaimana dan seperti apa Waktu direkam di SmartPresence. Dapatkah dioperasikan
                            offline dan apa saja yang berpengaruh.</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Aplikasi
                            Mobile DC</p>
                        <p><i class=" fas fa-check-circle"></i>&nbsp&nbsp;Anti
                            Spoofing</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;GPS
                            Restriction</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Online/Offline</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Manual
                            Entry</p>
                        <a href="#">Pelajari Selengkapnya</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="row offset-md-2">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <h1 class="title-product">Melacak Waktu</h1>
                        <p>Bagaimana dan seperti apa Waktu direkam di SmartPresence. Dapatkah dioperasikan
                            offline dan apa saja yang berpengaruh.</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Aplikasi
                            Mobile DC</p>
                        <p><i class=" fas fa-check-circle"></i>&nbsp&nbsp;Anti
                            Spoofing</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;GPS
                            Restriction</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Online/Offline</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Manual
                            Entry</p>
                        <a href="#">Pelajari Selengkapnya</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="row offset-md-2">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <h1 class="title-product">Melacak Waktu</h1>
                        <p>Bagaimana dan seperti apa Waktu direkam di SmartPresence. Dapatkah dioperasikan
                            offline dan apa saja yang berpengaruh.</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Aplikasi
                            Mobile DC</p>
                        <p><i class=" fas fa-check-circle"></i>&nbsp&nbsp;Anti
                            Spoofing</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;GPS
                            Restriction</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Online/Offline</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Manual
                            Entry</p>
                        <a href="#">Pelajari Selengkapnya</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-flui bg-primary">
        <div class="row mt-5">
            <div class="col-md-12">
                <div class="row offset-md-2">
                    <div class="col-md-4 text-center">
                        <img src="{{ asset('assets/frontend/img/img-list-product/img-ilustrator-clock.png') }}" class="img-fluid" alt="">
                    </div>
                    <div class="col-md-6">
                        <h1 class="title-product">Melacak Waktu</h1>
                        <p>Bagaimana dan seperti apa Waktu direkam di SmartPresence. Dapatkah dioperasikan
                            offline dan apa saja yang berpengaruh.</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Aplikasi
                            Mobile DC</p>
                        <p><i class=" fas fa-check-circle"></i>&nbsp&nbsp;Anti
                            Spoofing</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;GPS
                            Restriction</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Online/Offline</p>
                        <p><i class="fas fa-check-circle"></i>&nbsp&nbsp;Manual
                            Entry</p>
                        <a href="#">Pelajari Selengkapnya</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> --}}


<section class="section-page-banner">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-7">
                        <h4 class="title-section-page martops-custome mb-3">Interested in using {{ $product->title }} for your business or company?</h4>
                            @if ($pricing)
                                <a href="{{ route('pricing-detail', $product->id) }}">
                                    <button type="submit" class="btn mb-3" id="btn-section-page">Try Now</button>
                                </a>
                            @else
                                <a href="{{ route('contact-us') }}">
                                    <button type="submit" class="btn mb-3" id="btn-section-page">Contact Us</button>
                                </a>
                            @endif
                    </div>
                    <div class="col-md-5">
                        <img src="{{ url('/files/products/') . '/' . $product->img }}" class="img-thumbnail" style="width: 300px;"
                            alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection