@extends('frontEnd.layout')

@section('content')

<!-- start Home Slider -->
@include('frontEnd.includes.slider2')
<!-- end Home Slider -->

<div class="container">
    <div class="about-grid ">
        <div class="row">
            <div class="col-md-7">
                <div class="about-content">
                    {!! @$HomePage->{"details_" . @Helper::currentLanguage()->code} !!}
                </div>
            </div>
            <?php
                $photo_about = $HomePage->photo_file;
            ?>
            <div class="col-md-5">
                <div class="about-image-wrap">
                    <div class="hover-img">
                        <figure>
                            <img src="{{ URL::to('uploads/topics/'.$photo_about) }}" alt="">
                        </figure>
                    </div>
                    <div class="about-image">
                        <img src="{{ URL::to('uploads/topics/'.$photo_about) }}" alt="">

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="counter-wrap">
        @foreach($topicFields as $topicField)
        <div class="counter-line"></div>
            <div class="counter-card" style="opacity: 1;">
                <p class="counter-number">
                    <span class="counter" data-number="{{ $topicField->field_value }}"></span>
                    %
                </p>
                <div class="counter-text-wrap">

                    <p class="counter-text">{{ $topicField->field->{"title_" . @Helper::currentLanguage()->code} }}</p>
                </div>
            </div>
            <div class="counter-line"></div>
        @endforeach
    </div>

</div>
<section class="courser">
    <div class="container">

        <div class="section-title">{{ __('frontend.title_course') }}</div>
        <div class="row">
            @foreach($courses as $course)
                <div class="col-md-3 my-4">
                    <a class="courser-item" href="{{ route('courses.child',$course->seo_url_slug_en) }}">
                        <img src="{{ URL::to('uploads/sections/'.$course->photo) }}" alt="">
                       
                        <span>{{ __('frontend.viewMore') }}</span>
                    </a>
                    <div>
                        <p class="mt-2" style="color:#006b36;text-align: center;font-weight: bold;">
                            {{ $course->{"title_" . @Helper::currentLanguage()->code} }}
                        </p>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
    <div class="courser-bg">

    </div>
</section>
<section class="event">
    <div class="container">
        <div class="section-title">
            {{ __('frontend.title_event') }}
        </div>
        <div class="event--list">
            @foreach($events as $event)
                <div class="event-item">
                    <a class="hover-img " href="{{ route('detailEvent',$event->seo_url_slug_en) }}">
                        <figure>
                            <img src="{{ URL::to('uploads/topics/'.$event->photo_file) }}" alt="">
                        </figure>
                    </a>
                    <div class="event-content">
                        <div class="d-flex">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>{{ $event->fields[0]->field_value }}</span>
                            <?php
                                $dateStart = $event->date;
                                $dataNow = date('Y-m-d');
                                if($dateStart > $dataNow) {
                            ?>
                            <div class="status status-coming">Sắp diễn ra</div>
                            <?php } ?>
                            <?php  if($dateStart == $dataNow) { ?>
                                <div class="status status-active">Đang diễn ra</div>
                            <?php }    ?>
                        </div>
                        <div class="d-flex">
                            <i class="fas fa-calendar-alt"></i>
                            <span>Ngày {{ $dateStart }}</span>
                        </div>
                        <a href="{{ route('detailEvent',$event->seo_url_slug_en) }}">
                            <h3>{{ $event->{"title_" . @Helper::currentLanguage()->code} }}</h3>
                        </a>
                        <p>{{ $event->{"seo_description_" . @Helper::currentLanguage()->code} }}</p>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="d-flex justify-content-center mt-5">
            <a href="{{ route('events') }}" class="btn btn-main">{{ __('frontend.viewMore') }}</a>
        </div>
    </div>
</section>
<div class="bg-world">
    @foreach($partners as $partner)
        <section class="client">
            <div class="container">
                <div class="section-title">
                    <span>{{ $partner->{"title_" . @Helper::currentLanguage()->code} }}</span>

                </div>

            </div>
            <div class="container container-custom">
                <div class="client-list">
                    @foreach($partner->topicOfCategorys as $image)
                        <div class="client-item">
                            <img src="{{ URL::to('uploads/topics/'.$image->photo_file) }}" alt="">
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endforeach
</div>
@include('frontEnd.includes.contact')

@endsection

@section('script_js')
<script>
    $(document).ready(function() {
        $(".js-form-error").hide();
        $(".js-form-success").hide();
        $(".js-send-info").on("click", () => {
            const username = $(".user_name").val();
            const phone = $(".phone").val();
            const email = $(".email").val();
            const course = $(".course").val();
            const note = $(".note").val();
            let invalid = false;
            if(!username) {
                $(".user_name").addClass('border border-danger');
                invalid = true;
            } else {
                $(".user_name").removeClass('border border-danger');
            }
            if(!phone) {
                $(".phone").addClass('border border-danger');
                invalid = true;
            } else {
                $(".phone").removeClass('border border-danger');
            }
            if(!email) {
                $(".email").addClass('border border-danger');
                invalid = true;
            } else {
                $(".email").removeClass('border border-danger');
            }
            if(!course) {
                $(".course").addClass('border border-danger');
                invalid = true;
            } else {
                $(".course").removeClass('border border-danger');
            }
            if(invalid) {
                $(".js-form-error").show();
                return;
            } 
            $(".js-form-error").hide();
            $.ajax({
                method: "POST",
                url: "/contact/submit",
                data: { contact_name:username,contact_phone:phone,contact_email:email,contact_subject:course,contact_message:note,"_token": "{{ csrf_token() }}" }
            })
            .done(function( msg ) {
                $(".user_name").val("");
                $(".phone").val("");
                $(".email").val("");
                $(".course").val("");
                $(".note").val("");
                $(".js-form-success").show();
            });

        });
    });
</script>
@endsection