@extends('components.main')
@section('content')

<header>
    <img src="{{ asset('main_site/img/header.png') }}" class="shape-1" alt="">

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <div class="row">
                    <div class="col-md-3">
                        <img src="{{ asset('main_site/img/character.png') }}" alt="">
                    </div>
                    <div class="col-md-8">
                        <h1  data-aos="fade-down">Prondl Books</h1>

                        <div class="slide">
                            @foreach ($descriptions as $descripe)

                            <p>{{ $descripe->description }}</p>
                            @endforeach
                        </div>


                        <div class="btns d-flex flex-row flex-wrap"  data-aos="fade-up">
                            @guest('web')
                            <a href="{{ route('signUp') }}"  role="button" class="white mb-2">@lang('buttons.free_trial')</a>
                            @endguest
                            <a href="{{ route('pay') }}" role="button" >@lang('buttons.subscribe')</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>

<section class="intro scrolling">
    <img src="{{ asset('main_site/img/shape.svg') }}" class="shape-2" alt="">
    <div class="container">
        <div class="title">
            <h1>@lang('home.intro')</h1>
            <p class="h4 text-muted">@lang('home.why_prondi')</p>
        </div>

        <video controls>
            <source src="{{ asset(@$setting->video) }}" type="video/mp4">
        </video>
    </div>
</section>

<section class="d-flex flex-column align-items-center" id="features">

    <div class="features scrolling">
        <div class="container">
            <div class="title">
                <h1>@lang('home.main_features')</h1>
            </div>
            <div class="row mt-5 align-items-center">
                <div class="col-md-6  text-center" data-aos="fade-down">
                    <div class="text">
                        <h1>@lang('home.first_feature')</h1>
                        <p>{{@$setting->first_feature}}</p>
                    </div>
                </div>
                <div class="col-md-6" data-aos="fade-left">
                    <img src="{{ asset('main_site/img/undraw_finance_0bdk.svg') }}" alt="">
            </div>
        </div>
    </div>
</div>

<div class="features scrolling">
    <div class="container">
        <div class="row mt-5 align-items-center">
            <div class="col-md-6"  data-aos="fade-right">
                <img src="{{ asset('main_site/img/undraw_Calculator_0evy.svg')}}" alt="">
            </div>
            <div class="col-md-6 text-center" data-aos="fade-up">
                <div class="text">
                    <h1>@lang('home.second_feature')</h1>
                    <p>{{ @$setting->second_feature }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

</section>
<section id="why" class="features-2 scrolling">
    <div class="container">
        <div class="title" data-aos="fade-down">
            <h1>@lang('home.why_p')</h1>
        </div>
        <div class="row mt-5 align-items-center" data-aos="fade-up">
            <div class="col-md-4">
                @foreach ($why_left as $left)
                
                <div class="text">
                    <h2>{{ $left->head }}</h2>
                    <p class="">{{ $left->body }}</p>
                </div>
                @endforeach

            </div>
            <div class="col-md-4">
                <img src="{{ asset('main_site/img/1.png')}}" class="logo" alt="">
            </div>
            <div class="col-md-4">
                @foreach ($why_right as $right)

                <div class="text">
                    <h2>{{ $right->head }}</h2>
                    <p>{{ $right->body }}</p>
                </div>
                @endforeach

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

<section id="packages" class="pricing scrolling">
    <div class="container">
        <div class="title" data-aos="fade-down">
            <h1>@lang('home.pricing')</h1>
            <div>@lang('home.our_pricing_plans')</div>
        </div>

        <div class="row d-flex flex-row flex-wrap justify-content-center mt-4" data-aos="fade-left">
            @guest
            <div class="col-md-3 mt-4" style="min-width: 230px;max-width:300px;">
                <div class="box">
                    <div class="type">@lang('home.trial_type')</div>
                    <div class="price">
                        0$
                        <span>15 @lang('home.day')</span>
                    </div>
                    <p class="mt-4">

                        @lang('home.trial_desciption')
                    </p>
                    <form action="{{ route('trial') }}" method="POST" id="form1">
                        @csrf
                        <a onclick="document.getElementById('form1').submit()" style="cursor:pointer"> @lang('buttons.choose_plan')</a>
                    </form>
                </div>
            </div> 
            @endguest
            @auth
            @if(!auth()->user()->hadTrial())
            <div class="col-md-3" style="min-width: 230px;max-width:300px;">
                <div class="box">
                    <div class="type">@lang('home.trial_type')</div>
                    <div class="price">
                        0$
                        <span>15 @lang('home.day')</span>
                    </div>
                    <p class="mt-4">

                        @lang('home.trial_desciption')
                    </p>
                   

                    {{-- <a href="{{ route('trial') }}">@lang('buttons.choose_plan')</a> --}}
                    <form action="{{ route('trial') }}" method="POST" id="form2">
                        @csrf
                        <a onclick="document.getElementById('form2').submit()" style="cursor:pointer"> @lang('buttons.choose_plan')</a>
                    </form>
                </div>
            </div>
            
            @endif
            @endauth
            @foreach($plans as $plan)
            <div class="col-md-3" style="min-width: 230px;max-width:300px;">
                <div class="box">
                    <div class="type">{{ $plan->type }}</div>
                    <div class="price">
                        {{ $plan->price }}$
                        <span>{{ $plan->period }} @lang('home.month')</span>
                    </div>

                    <p class="mt-4">
                        {!! $plan->description !!}
                    </p>
                    

                    <a href="{{ $plan->planPath() }}">@lang('buttons.choose_plan')</a>
                </div>
            </div>
            @endforeach


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

<section class="gallery scrolling">
    <div class="container">
        <div class="title" data-aos="fade-down">
            <h1>@lang('home.screen_gallery')</h1>
            <div>@lang('home.dashboard')</div>
        </div>

        <div class="gallery-slide" data-aos="fade-up">
            @foreach ($slides as $slide)
            <img src="{{ asset($slide->image) }}" alt="">
            @endforeach
        </div>
    </div>
</section>
{{-- start of faq --}}
<section id="faq" class="faq scrolling">
    <div class="container">
        <div class="title" data-aos="fade-down">
            <h1><span>@lang('home.faq')</span></h1>
            <div style="color: #000;"><b>@lang('home.have_any_question')</b></div>
        </div>
        {{-- {{ dd($faqs) }} --}}
        @php
        $count = 0;
        @endphp
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            @foreach ($faqs as $category => $faq)


            <li class="nav-item" role="presentation">
                <a class="nav-link show @if($count == 0 )active @endif" id="{{'pills-'.$category.'-tab'}}"
                    data-toggle="pill" href="{{'#pills-'.$category}}" role="tab" aria-controls="{{'pills-'.$category}}"
                    aria-selected=" @if($count==0) true @else false
                    @endif">{{ ($category) }}</a>
            </li>
            @php
            $count++;
            @endphp

            @endforeach

        </ul>
        @php
        $count = 0;
        @endphp
        <div class=" tab-content" id="pills-tabContent" data-aos="fade-up">
            @foreach($faqs as $category => $faq)
            <div class="tab-pane fade  @if($count == 0 ) show active @endif" id="pills-{{ $category }}" role="tabpanel"
                aria-labelledby="pills-{{ $category }}-tab">
                <div class="row justify-content-center">
                    <div class="col-md-10">
                        <div class="faq-slide">
                            @php
                            $count++;
                            @endphp
                            @foreach($faq as $fa)
                            <div class="block">
                                <h1>{{ $fa->question }}</h1>
                                <p>{{ $fa->answer }}</p>
                            </div>
                            @endforeach
                            {{-- {{ dd($count) }} --}}
                        </div>
                    </div>
                </div>
            </div>

            @endforeach
            {{-- <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">

            </div> --}}

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

{{-- end of faq --}}
<section class="payment scrolling">
    <div class="container">
        <div class="title" data-aos="fade-down">
            <h1>@lang('home.payment_method')</h1>
        </div>

        <div class="images">
            <img data-aos="fade-right" src="{{ asset('main_site/img/3.png')}}" alt="">
            <img data-aos="fade-left" src="{{ asset('main_site/img/4.png')}}" alt="">
        </div>
    </div>
</section>

<section id="contact" class="contact scrolling">
    <div class="container">
        <div class="title" data-aos="fade-down">
            <h1>@lang('home.contact_us')</h1>
            <div>@lang('home.happy_answer')</div>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-6">
                @include('components.responses')

                <form action="{{ route('contact-us') }}" method="POST">
                    @csrf
                    <div class="row" data-aos="fade-right">
                        <div class="col-md-12">
                            <input type="text" name="name" id="" placeholder="@lang('home.contact_name')">
                            @error('name')
                            <div style="text-align: center">

                                <small style="color: red">{{ $message }}</small>
                            </div>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <input type="email" name="email" id="" placeholder="@lang('home.contact_email')">
                            @error('email')
                            <div style="text-align: center">

                                <small style="color: red">{{ $message }}</small>
                            </div>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <input type="text" name="title" id="" placeholder="@lang('home.contact_subject') ">
                            @error('title')
                            <div style="text-align: center">

                                <small style="color: red;">{{ $message }}</small>
                            </div>
                            @enderror
                        </div>
                        <div class="col-md-12">
                            <textarea name="description" id="" rows="5"
                                placeholder="@lang('home.contact_message')"></textarea>
                            @error('description')
                            <div style="text-align: center">

                                <small style="color: red">@lang($message) </small>
                            </div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-12" data-aos="fade-up">
                        <button type="submit">@lang('buttons.send')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
@endsection