@if (!empty($footer['brandsHome']) && count($footer['brandsHome']) > 0 )
<section class="doi-tac">
    <div class="ctnr">
        <div class="doi-tac-slider slick-has-nav">
            @foreach ($footer['brandsHome'] as $brandsHome)
            <div class="item">
                <a href="{{ $brandsHome->slug2 }}" title="{{ $brandsHome->name2 }}">
                    <img src="{{ asset($brandsHome->avatar_path) }}" alt="{{ $brandsHome->name2 }}">
                </a>
            </div>
            @endforeach

        </div>
    </div>
</section>
@endif

@if(isset($footer['dangKyNT']))
<div class="form_dk">
    <div class="ctnr">
        <div class="row align-items-center">
            <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                <div class="hotline_home">
                    <div class="image">
                        <img src="{{asset($footer['dangKyNT']->icon_path)}}" alt="{{$footer['dangKyNT']->name}}">
                    </div>
                    <div class="box_phonenumber">
                        <p>{{$footer['dangKyNT']->name}}</p>
                        <div class="number">{{$footer['dangKyNT']->value}}</div>
                    </div>
                </div>
            </div>
            <div class="clm" style="--w-lg:6; --w-md:6; --w-xs:12">
                <div class="box_form">
                    <h3>{!!$footer['dangKyNT']->description!!}</h3>
                   	<form action="{{ route('contact.storeAjax') }}" id="form-contact-footer" method="POST">
                        @csrf
                        <input type="email" name="email" id="email" placeholder="Email của bạn">
                        <button type="submit" class="tt-up">Đăng ký</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
@endif

<footer>
    <div class="ctnr">
        <div class="footer-top">
            <div class="row footer-top__row">
                <div class="clm" style="--w-lg:4; --w-md:12; --w-xs:12">
                    <div class="footer-logo">
                        <a href="{{ url('/') }}" title="Trang chủ">
                            <img 
                                src="{{ asset('frontend/images/placeholder-white.jpg') }}" loading="lazy" decoding="async" class="lazy-img"
                                data-src="{{ asset($footer['infoWeb']->image_path) }}"
                                alt="{{ asset($footer['infoWeb']->image_path) }}">
                        </a>
                    </div>
                    <div class="footer-address">
                        {!! $footer['infoWeb']->description !!}

                    </div>
                </div>
                <div class="clm" style="--w-lg:8; --w-md:12; --w-xs:12">
                    <div class="row">
                        <div class="clm" style="--w-lg:3; --w-md:4; --w-xs:6">
                            <div class="footer-content">
                                {!! $footer['infoWeb']->content2 !!}
                            </div>
                        </div>

                        @if (!empty($footer['supportInfo']) && $footer['supportInfo']->posts->isNotEmpty())
                            <div class="clm" style="--w-lg:5; --w-md:4; --w-xs:6">
                                <div class="footer-content">
                                    <h2>{{ $footer['supportInfo']->name2 }}</h2>
                                    <ul>
                                        @foreach ($footer['supportInfo']->posts as $post)
                                        <li><a href="{{ $post->slug2 }}">{{ $post->name2 }}</a></li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>
                        @endif

                        <div class="clm" style="--w-lg:4; --w-md:4; --w-xs:12">
                            <div class="footer-content">
                                {!! remove_iframe_sandbox($footer['infoWeb']->content3) !!}

                                 <div class="social">
                                    {!! $footer['infoWeb']->content4 !!} 
                                </div>
                            </div>
                        </div>   

                        @if (!empty($footer['contactOrder']))
                        <div class="clm" style="--w-xs:12">
                            <div class="footer-content contact">
                                <h2>{{ $footer['contactOrder']->name }}</h2>
                                <div class="person-contact">
                                    @if ($footer['contactOrder']->content)
                                    <div class="item">
                                        <img src="{{ asset($footer['contactOrder']->icon_path) }}" alt="{{ asset($footer['contactOrder']->icon_path) }}" loading="lazy">
                                        <div class="info">
                                            {!! $footer['contactOrder']->content !!}
                                        </div>
                                    </div>
                                    @endif

                                    @if ($footer['contactOrder']->content2)
                                    <div class="item">
                                        <img src="{{ asset($footer['contactOrder']->icon_path2) }}" alt="{{ asset($footer['contactOrder']->icon_path2) }}" loading="lazy">
                                        <div class="info">
                                            {!! $footer['contactOrder']->content2 !!}
                                        </div>
                                    </div>
                                    @endif

                                    @if ($footer['contactOrder']->content3)
                                    <div class="item">
                                        <img src="{{ asset($footer['contactOrder']->icon_path3) }}" alt="{{ asset($footer['contactOrder']->icon_path3) }}" loading="lazy">
                                        <div class="info">
                                            {!! $footer['contactOrder']->content3 !!}
                                        </div>
                                    </div>
                                    @endif

                                    @if ($footer['contactOrder']->content4)
                                    <div class="item">
                                        <img src="{{ asset($footer['contactOrder']->icon_path4) }}" alt="{{ asset($footer['contactOrder']->icon_path4) }}" loading="lazy">
                                        <div class="info">
                                            {!! $footer['contactOrder']->content4 !!}
                                        </div>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        {{-- 
            @if (!empty($header['menus']))
            <div class="footer-bottom">
                @foreach($header['menus'] as $menu)
                    <a href="{{ $menu->slug2 }}" class="tag">
                    <img 
                    src="{{ asset('frontend/images/placeholder-white.jpg') }}" loading="lazy" decoding="async" class="lazy-img"
                    data-src="{{asset($menu->icon_path ?? '/frontend/images/image.png')}}" alt="{{$menu->name2}}" >{{ $menu->name2 }}
                    </a>
                @endforeach
            </div>
            @endif
         --}}
    </div>
</footer>

<div class="copyright">
    <div class="ctnr">
        <div class="inner"> 
            
            {!! $footer['infoWeb']->content5 !!}
        </div>
    </div>
</div>

<div id="topcontrol" style="">
    <div class="backtotop">
        <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="//www.w3.org/2000/svg">
            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
            <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
            <g id="SVGRepo_iconCarrier">
                <path d="M17 15L12 10L7 15" stroke="#555" stroke-width="1.5" stroke-linecap="round"
                    stroke-linejoin="round"></path>
            </g>
        </svg>
        Top
    </div>
</div>


@if(isset($footer['mxh']))
<div id="button-contact-vr">
    <div id="gom-all-in-one">
        @foreach( $footer['mxh'] as $key=>$item)
           <div class="button-contact">
                <div @if($key != 0) id="viber-vr" @endif class="phone-vr">
                    <div class="phone-vr-circle-fill"></div>
                    <div class="phone-vr-img-circle">
                        <a href="{{$item->slug}}" rel="nofollow">
                            <img src="{{ asset($item->icon_path) }}" alt="{{$item->name}}" title="{{$item->name}}">
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
    </div>
</div>
@endif

<script>
$(document).on('submit', '#form-contact-footer', function (e) {
	e.preventDefault();

	const $form = $(this);
	const action = $form.attr('action');
	const btn = $form.find('button[type="submit"]');
	const email = $.trim($form.find('input[name="email"]').val());

	if (!email) {
		datgin.warning('Email là bắt buộc');
		return;
	}

	const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
	if (!emailRegex.test(email)) {
		datgin.warning('Email không hợp lệ');
		return;
	}

	$.ajax({
		url: action,
		type: 'POST',
		data: $form.serialize(),
		beforeSend: function () {
			btn.prop('disabled', true);
		},
		success: function (response) {
			$form[0].reset();
			datgin.success(response.message || 'Đăng ký thành công');
		},
		error: function (xhr) {
			datgin.error(xhr.responseJSON?.message || 'Gửi thông tin thất bại!');
		},
		complete: function () {
			btn.prop('disabled', false);
		}
	});
});
</script>