@extends('user.layouts.master')
@section('home-active', 'active')
@section('content')
    <style>
        .mb-10 {
            margin-bottom: 10px;
        }

        .sub-heading {
            color: white;
            font-size: 41px;
            margin-bottom: 20px;

        }

        .Picture {
            height: 20vh !important;
            margin-left: 31% !important;
            margin-bottom: 20px !important;
        }

        .card {
            background: linear-gradient(to left, #8096e5, #283c86) !important;
            color: #fff;
            height: 25vh;
            border-radius: 20px;
        }

        .post-heading {
            color: black;
            font-size: 36px;
            text-align: center;
            font-weight: bold;
            margin-top: 17% !important;
            margin-left: -2px !important;
        }

        .post-heading1 {
            color: black;
            font-size: 36px;
            text-align: center;
            font-weight: bold;
            margin-top: 6%;
            margin-left: -6% !important;
        }

        .counter1 {
            border: 2px solid #ecca69;
            height: 20rem;
        }

        .color {
            color: #ecca69;

        }

        .Picture1 {
            height: 20vh !important;
            margin-left: 60% !important;
            margin-top: 15% !important;

        }



        @media (min-width: 1024px) {
            section {
                padding: 21px 0;
            }
        }

        @media only screen and (max-width: 320px) {

            .search::placeholder {
                color: grey !important;
                font-size: 8px !important;
                color: black !important;
            }

            .Picture1 {
                height: 12vh !important;
                margin-left: 8% !important;
                margin-top: 13% !important;
            }

            .post-heading1 {
                color: black;
                font-size: 24px;
                text-align: center;
                font-weight: bold;
                margin-top: 24px !important;
                margin-left: -5% !important;
            }

            .post-heading {
                color: black;
                font-size: 24px;
                text-align: center;
                font-weight: bold;
                margin-top: 61px !important;
                margin-left: 0 !important;
            }


        }

        /* @media only screen and (max-width: 390px){
                                                        .inner-header-title {
                                                            height: 190px !important;
                                                        }

                                                    } */

        .owl-carousel:hover .owl-buttons {
            display: block;
        }

        .owl-item {
            text-align: center;
        }

        .owl-theme .owl-controls .owl-buttons div {
            background: transparent;
            color: #2e75b5;
            font-size: 40px;
            line-height: 300px;
            margin: 0;
            padding: 0 60px;
            position: absolute;
            top: 0;
        }

        .owl-theme .owl-controls .owl-buttons .owl-prev {
            left: 0;
            padding-left: 20px;
        }

        .owl-theme .owl-controls .owl-buttons .owl-next {
            right: 0;
            padding-right: 20px;
        }

        @media only screen and (min-width: 321px) and (max-width:540px) {
            .inner-header-title {
                /* padding-top: 12em; */
                text-align: center;
                color: #fff;
                overflow: visible;
                position: relative;
                /* border-bottom: 4px solid #11b719; */
                background-size: cover;
                height: 135px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

        @media only screen and (max-width: 375px) {
            .post-heading1 {
                color: black;
                font-size: 31px;
                text-align: center;
                font-weight: bold;
                margin-top: 6%;
                margin-left: -5% !important;
            }

            .post-heading {
                color: black;
                font-size: 30px;
                text-align: center;
                font-weight: bold;
                margin-top: 17% !important;
                margin-left: 2px !important;
            }



            .search::placeholder {
                color: grey !important;
                font-size: 6px;
                color: black !important;
            }
        }

        @media only screen and (max-width: 425px) {

            .post-heading1 {
                color: black;
                font-size: 30px;
                text-align: center;
                font-weight: bold;
                margin-top: 4%;
                margin-left: -3% !important;
            }

            .post-heading {
                color: black;
                font-size: 30px;
                text-align: center;
                font-weight: bold;
                margin-top: 16% !important;
                margin-left: 4px !important;
            }

            .search::placeholder {
                color: grey !important;
                font-size: 12px;
                word-spacing: -0.5px !important;
                color: black !important;

            }
        }

        @media only screen and (max-width: 768px) {
            .cus_height {
                height: 36px !important;
            }

            #cus_height {
                height: 37px !important;
                margin-bottom: 9px !important;
            }
        }

        .new_img {
            margin: 14px auto !important;
        }

        @media only screen and (max-width: 768px) {
            .card_mar {
                margin-top: 37px !important;
            }
        }


        .tooltip .tooltiptext {
            visibility: hidden;
            width: 400px;
            bottom: 100%;
            left: 10%;
            margin-left: -60px;
            background-color: white;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }
    </style>
    <section class="inner-header-title testimonial" id="testimonial"
        style="background-image:url({{ asset('user/assets/img/bg.png') }}">

        <div class="container">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-10 col-sm-10">
                    <div class="search-filter">
                        <form action="{{ route('report.search') }}">
                            {{-- @csrf --}}


                            <div class="filter-form">
                                <div class="input-group">
                                    <input type="text" class="form-control search cus_height" name="search"
                                        placeholder="Search by Name, Email, Phone Number, Username, etc."
                                        onfocus="this.placeholder=''"
                                        onblur="this.placeholder='Search by Name, Email, Phone Number, Username, etc.'"
                                        required>
                                    <span class="input-group-btn">
                                        <button type="submit" class="btn btn-default" id="cus_height"><i
                                                class="fa fa-search"></i></button>
                                    </span>
                                </div>
                            </div>
                            {{-- </div> --}}
                        </form>
                    </div>
                </div>

            </div>

            {{-- <div class="container">
            <div class="row">
                <h1 style="margin-top: 40px;margin-bottom: 33px;">Welcome To Legitcheckr</h1>
                <p>The only online archive specifically designed to track untrustworthy sellers</p>
            </div> --}}


        </div>
    </section>
    <div class="clearfix"></div>


    <div class="clearfix"></div>
    <section class="how-it-works">
        <div class="container">
            <div class="row" data-aos="fade-up">
                <div class="col-md-12">
                    <div class="main-heading">
                        {{-- <p>Working Process</p> --}}
                        <h2>How It Works</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3 col-sm-3 card_mar">
                    <a href="https://www.flaticon.com/free-icons/keyboard" target="_blank"  title="keyboard icons">
                        <img src="{{ asset('user/assets/img/Picture1.png') }}" class="img-responsive Picture new_img"
                            alt="" />
                    </a>
                    <div class="process-num">
                        <p>Users submit reports of scammers to our team by sharing their story and providing as much
                            information as possible.
                        </p>
                        {{-- <h4>Create An Account</h4> --}}
                        {{-- <p>@if (!empty($work)) {{ $work->step1 }} @endif</p> --}}
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 card_mar">
                    <a href="https://www.flaticon.com/free-icons/information" title="information icons">
                        <img src="{{ asset('user/assets/img/Picture2.png') }}" class="img-responsive Picture new_img"
                            alt="" />
                    </a>
                    <div class="process-num">
                        <p>Our admins then reviews the submission for authenticity and will either approve or deny the
                            report based on the facts provided.
                        </p>
                        {{-- <h4>Create An Account</h4> --}}
                        {{-- <p>@if (!empty($work)) {{ $work->step1 }} @endif</p> --}}
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 card_mar">
                    <a href="https://www.flaticon.com/free-icons/database" title="database icons">
                        <img src="{{ asset('user/assets/img/Picture3.png') }}" class="img-responsive Picture new_img"
                            alt="" />
                    </a>
                    <div class="process-num">
                        <p>If a report is approved, the scammer’s information will then be recorded in our database based on
                            the contents of the report.
                        </p>
                        {{-- <h4>Create An Account</h4> --}}
                        {{-- <p>@if (!empty($work)) {{ $work->step1 }} @endif</p> --}}
                    </div>
                </div>
                <div class="col-md-3 col-sm-3 card_mar">
                    <a href="https://www.flaticon.com/free-icons/search-bar" title="search bar icons">
                        <img src="{{ asset('user/assets/img/Picture4.png') }}" class="img-responsive Picture new_img"
                            alt="" />
                    </a>
                <div class="process-num">
                    <p>Before making any transactions, buyers can then do a quick search to see if the seller had been
                        reported as a scammer.
                    </p>
                    {{-- <h4>Create An Account</h4> --}}
                    {{-- <p>@if (!empty($work)) {{ $work->step1 }} @endif</p> --}}
                </div>
            </div>
        </div>
        </div>
    </section>

    {{-- <div class="clearfix"></div> --}}

    <!-- pricing Section Start -->
    <section class="testimonial" id="testimonial">
        <div class="container">
            {{-- <div class="row">
                <div class="main-heading">
                    <h2>Recent<span> Reports</span></h2>
                </div>
            </div> --}}
            <div class="row">
                <div id="client-testimonial-slider-2" class="owl-carousel">
                    {{-- @php
                        $reports = [];
                        if (!empty($report)) {
                        if (!empty($report->images['0'])) {
                        $report = json_decode($report->images['0']);
                        }
                        }
                        
                    @endphp --}}
                    {{-- @foreach ($report as $reports)
                        <div class="client-testimonial">
                            <div class="pic chip">

                                <a href="{{ route('report.detail', ['id' => $reports->id]) }}">
                                    @php
                                        $report_first_image = json_decode($reports->images);
                                    @endphp
                                    <img src="{{ asset('imgfiles/' . $report_first_image[0]) }}" alt="">
                                </a>
                            </div>
                            <p class="client-description">
                                <strong>Full Name:</strong>
                                {{ !empty($reports) && !empty($reports->first_name) ? $reports->first_name : 'N/A' }}
                                {{ !empty($reports) && !empty($reports->last_name) ? $reports->last_name : 'N/A' }}
                            </p>
                            <p class="client-description">
                                <strong>Email:</strong>
                                {{ !empty($reports) && !empty($reports->email) ? $reports->email : 'N/A' }}
                            </p>
                            <p class="client-description">
                                <strong>Phone Number:</strong>
                                {{ !empty($reports) && !empty($reports->number_format1) ? $reports->number_format1 : 'N/A' }}
                            </p>
                            <p class="client-description">
                                <strong>User Name:</strong>
                                {{ !empty($reports) && !empty($reports->user_name) ? $reports->user_name : 'N/A' }}
                            </p>
                            
                            </a>
                        </div>
                    @endforeach --}}
                </div>
            </div>
    </section>

    <!-- End Candidate Section -->
    @if (!empty($togg->status == 'on'))
        <section class="container">
            <div class="col-md-12 counter1">
                <div class="row">
                    <div class="col-md-4 col-sm-3"></div>

                    <div class="col-md-4 col-sm-6">
                        <h2 class="post-heading text-black">Report Counter</h2>
                        <h6 class="post-heading1">{{ $report_count }}</h6>
                    </div>
                </div>
            </div>
        </section>
    @endif
    {{-- <br/>
    <br/>
    <br/>
    <br/>
    <br/> --}}

    <!-- ============================ Call To Action ================================== -->
    {{-- @if (!Auth::guard('user')->check())
        <section class="theme-bg call-to-act-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="call-to-act">
                            <div class="call-to-act-head">
                                <h3>Want to Become a Trusted Seller?</h3>
                                <span>We'll help you to grow your career and growth.</span>
                            </div>
                            <a href="{{ route('register') }}" class="btn btn-call-to-act">SignUp Today</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif --}}

    <!-- ============================ Call To Action End ================================== -->

    <!-- ============================ Before Footer ================================== -->

    <!-- ============================ Before Footer ================================== -->

    <!-- ============================ Footer Start ================================== -->
@endsection