@extends('themes.one.master')

@php
    $ContactUsMeta = ($pageSettingsBySlug ?? collect())->get('blog');
    $title = transField($ContactUsMeta, 'title') ??  __('Blogs');

@endphp

@section('title', $title)

@section('content')

    <!--=================================
    inner-header -->
    @if(!empty($banner))
        <section class="inner-banner bg-overlay-black-70 bg-holder" style="background-image: url('');">
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-12">
                        <div class="text-center">
                            <h1 class="text-white">{{ transField($banner, 'title') }}</h1>
                        </div>
                        <div class="d-flex justify-content-center ">
                            <ol class="breadcrumb mb-0 p-0">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                                <li class="breadcrumb-item active"><span>{{ $title }}</span></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @else
        <section class="inner-banner bg-overlay-black-70 bg-holder" style="background-image: url('assets/themes/one/images/bg/06.jpg');">
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="col-md-12">
                        <div class="text-center">
                            <h1 class="text-white">{{ $title }}</h1>
                        </div>
                        <div class="d-flex justify-content-center ">
                            <ol class="breadcrumb mb-0 p-0">
                                <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ __('Home') }}</a></li>
                                <li class="breadcrumb-item active"><span>{{ $title }}</span></li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!--=================================
    inner-header -->
    <section class="space-ptb position-relative">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-7 col-md-10 text-center">
                    <!-- Section Title START -->
                    <div class="section-title">
                        <h2 class="title">Latest Articles</h2>
                        <p class="mb-0">Check out our latest blog posts, articles, client success stories and essential announcement</p>
                    </div>
                    <!-- Section Title END -->
                </div>
            </div>
            <div class="row">
                
                @foreach($articals as $blist)
                <div class="col-lg-4 col-md-6">
                    <!-- Blog 01 START -->
                    <div class="blog">
                        <!-- Blog image -->
                        <div class="blog-image">
                            <img class="img-fluid border-radius" src="{{$blist['image']}}" alt="">
                        </div>
                        <!-- Blog content -->

                        <div class="blog-content pt-4">
                            <h5 class="blog-title mb-3"><a href="{{url('/blog-details/'.$blist['id'])}}">{{$blist['title']}}</a></h5>
                            <div class="blog-meta mb-0">
                                <ul class="list-unstyled mb-0 d-flex">
                                    <li class="mr-3"><a href="#"><i class="fas fa-calendar-alt pr-1"></i>{{date('d M, Y', strtotime($blist['extra']['date']))}}</a></li>
                                </ul>
                            </div>
                            <p class="mt-3">{!! $blist['extra']['short_desc'] !!}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>

    <!--=================================
    Map -->
    @if(!empty($banner) && !empty($banner['iframe_url']))
    <section class="map">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <div class="col-sm-12">
                    <div class="map h-500">
                        <!-- iframe START -->
                        <iframe src="{{ $banner['iframe_url'] }}" style="width: 100%; height: 100%;"></iframe>
                        <!-- iframe END -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    <!--=================================
    Map -->


    <div id="app-translations"
        data-first_name_required="{{ __('First name is required.') }}"
        data-first_name_min="{{ __('Please enter at least 2 characters.') }}"
        data-last_name_required="{{ __('Last name is required.') }}"
        data-email_required="{{ __('Email is required.') }}"
        data-email_invalid="{{ __('Please enter a valid email address.') }}"
        data-phone_required="{{ __('Phone number is required.') }}"
        data-phone_invalid="{{ __('Please enter a valid phone number.') }}"
        data-message_required="{{ __('Message is required.') }}"
        data-message_min="{{ __('Please enter at least 5 characters.') }}">
    </div>

@endsection

@section('script')
    <script>
        $(document).ready(function() {
            var t = document.getElementById('app-translations').dataset;

            var $form = $('#admissionForm');
            var $btn = $('#admissionSubmitBtn');
            var $alert = $('#admissionAlert');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Helpers
            function showError($field, message) {
                $field.addClass('is-invalid');
                $field.closest('.form-group').find('.invalid-feedback').text(message).show();
            }

            function clearError($field) {
                $field.removeClass('is-invalid');
                $field.closest('.form-group').find('.invalid-feedback').text('').hide();
            }

            function clearAllErrors() {
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('.invalid-feedback').text('').hide();
            }

            function showAlert(type, message) {
                $alert.removeClass('d-none alert-success alert-danger').addClass('alert-' + type).text(message);
            }

            function clearAlert() {
                $alert.addClass('d-none').removeClass('alert-success alert-danger').text('');
            }

            function isEmail(str) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(str);
            }

            function isPhone(str) {
                var digits = (str.match(/\d/g) || []).length;
                return /^[0-9+\-\s()]+$/.test(str) && digits >= 7;
            }

            function validate() {
                clearAllErrors();
                var ok = true;

                var $first_name = $('#first_name');
                var $middle_name = $('#middle_name');
                var $last_name = $('#last_name');
                var $email = $('#email');
                var $phone = $('#phone_no');
                var $message = $('#message');

                var firstName = $first_name.val().trim();
                var middleName = $middle_name.val().trim();
                var lastName = $last_name.val().trim();
                var email = $email.val().trim();
                var phone = $phone.val().trim();
                var message = $message.val().trim();

                if (!firstName) {
                    showError($first_name, t.first_name_required);
                    ok = false;
                } else if (firstName.length < 2) {
                    showError($first_name, t.first_name_min);
                    ok = false;
                }

                if (!lastName) {
                    showError($last_name, t.last_name_required);
                    ok = false;
                } else if (lastName.length < 2) {
                    showError($last_name, t.first_name_min);
                    ok = false;
                }

                if (!email) {
                    showError($email, t.email_required);
                    ok = false;
                } else if (!isEmail(email)) {
                    showError($email, t.email_invalid);
                    ok = false;
                }

                if (!phone) {
                    showError($phone, t.phone_required);
                    ok = false;
                } else if (!isPhone(phone)) {
                    showError($phone, t.phone_invalid);
                    ok = false;
                }

                if (!message) {
                    showError($message, t.message_required);
                    ok = false;
                } else if (message.length < 5) {
                    showError($message, t.message_min);
                    ok = false;
                }

                return ok;
            }

            $form.on('input change', 'input, textarea, select', function() {
                clearError($(this));
                clearAlert();
            });

            $form.on('submit', function(e) {
                e.preventDefault();
                clearAlert();

                if (!validate()) {
                    showAlert('danger', 'Please fix the highlighted errors.');
                    return;
                }

                var originalText = $btn.text();
                $btn.prop('disabled', true).text('Sending...');

                $.post('