@php
    $header = $options->theme->header;
@endphp


<!-- Offcanvas area start -->
    
    <div class="offcanvas__area">
        <div class="modal fade" id="offcanvasmodal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="offcanvas__wrapper">
                        <div class="offcanvas__content">
                            <div class="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
                                <div class="offcanvas__logo logo">
                                    <a href="{{ route('home') }}">
                                        <img src="{{ $header->logo ?? $siteinfo->logo(theme_asset('img/logo/logo-2.png')) }}" alt="{{$siteinfo->name}}">
                                    </a>
                                </div>
                                <div class="offcanvas__close">
                                    <button class="offcanvas__close-btn" data-bs-toggle="modal" data-bs-target="#offcanvasmodal">
                                        <i class="fal fa-times"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="bd-utilize__buttons mb-25 d-xl-none">
                                <div class="bd-action__item">
                                    <div class="bd-action__cart">
                                        <div class="bd-action__cart-icon">
                                            <a href="#" data-bs-toggle="offcanvas" data-bs-target="#cartmini" aria-controls="cartmini">
                                                <svg id="shopping-bag" xmlns="http://www.w3.org/2000/svg" width="16.508" height="18.5" viewBox="0 0 16.508 18.5">
                                                    <path id="Path_76" data-name="Path 76"
                                                        d="M24.21,35.5H34.3a3.214,3.214,0,0,0,3.21-3.21v-9.6a.571.571,0,0,0-.569-.569H33.523v-.854a4.269,4.269,0,0,0-8.538,0v.854H21.569a.571.571,0,0,0-.569.569v9.6A3.214,3.214,0,0,0,24.21,35.5Zm1.913-14.231a3.131,3.131,0,0,1,6.262,0v.854H26.123Zm-3.985,1.992h2.846v1.423a.569.569,0,0,0,1.138,0V23.262h6.262v1.423a.569.569,0,0,0,1.138,0V23.262h2.846V32.29A2.076,2.076,0,0,1,34.3,34.362H24.21a2.076,2.076,0,0,1-2.072-2.072Z"
                                                        transform="translate(-21 -17)" fill="#1c1d1b"></path>
                                                </svg>
                                            </a>
                                            <span class="bd-action__item-number cart-count {{parse_classname('cart-quantity')}}">0</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bd-action__item">
                                    <div class="bd-action__wishlist">
                                        <div class="bd-action__wistlist-icon">
                                            <a href="#" data-bs-toggle="offcanvas" data-bs-target="#wishlist" aria-controls="wishlist">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16.194" height="14.985" viewBox="0 0 16.194 14.985">
                                                    <path id="Path_4" data-name="Path 4"
                                                        d="M11.829,39.221a4.128,4.128,0,0,0-3.415,1.9c-.118.166-.224.331-.317.492-.093-.161-.2-.326-.317-.492a4.128,4.128,0,0,0-3.415-1.9C1.82,39.221,0,41.549,0,44.343c0,3.195,2.4,6.206,7.769,9.762a.587.587,0,0,0,.656,0c5.373-3.557,7.769-6.568,7.769-9.762C16.194,41.551,14.375,39.221,11.829,39.221Zm1.428,9.1A24,24,0,0,1,8.1,52.7a24,24,0,0,1-5.16-4.383,6.283,6.283,0,0,1-1.671-3.978c0-2.012,1.244-3.74,3.1-3.74A2.891,2.891,0,0,1,6.76,41.938a5.312,5.312,0,0,1,.734,1.445.618.618,0,0,0,1.208,0,5.308,5.308,0,0,1,.711-1.413A2.9,2.9,0,0,1,11.829,40.6c1.857,0,3.1,1.73,3.1,3.74A6.283,6.283,0,0,1,13.257,48.321Z"
                                                        transform="translate(0 -39.221)" fill="#1c1d1b"></path>
                                                </svg>
                                            </a>
                                            <span class="bd-action__item-number wishlist-count">0</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bd-action__item d-flex align-items-center">
                                    @php
                                        $accountUrl = route('web.account');
                                    @endphp
                                    @if ($user = auth()->user())
                                        <div class="bd-action__cart">
                                            <div class="bd-action__cart-icon">
                                                <a href="{{ $accountUrl }}">
                                                    <img src="{{ $user->getAvatar() }}" alt="{{ $user->name }}" class="user-avatar" width="100%">
                                                </a>
                                            </div>
                                        </div>
                                        <div class="bd-action__user">
                                            <a href="{{ $accountUrl }}">
                                                <span><span>{{ $user->name }}</span></span>
                                            </a>
                                            <a href="{{route('web.account.logout')}}">
                                                <span>Thoát</span>
                                            </a>
                                        </div>
                                    @else
                                        <div class="bd-action__cart">
                                            <div class="bd-action__cart-icon">
                                                <a href="{{ $u = route('web.account.login', ['next' => $current_url]) }}">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="13.539" height="16" viewBox="0 0 13.539 16">
                                                        <path id="Path_32" data-name="Path 32" d="M48.566,7.419a4.1,4.1,0,1,0-4.824,0,6.78,6.78,0,0,0-4.357,6.325A2.259,2.259,0,0,0,41.641,16h9.026a2.259,2.259,0,0,0,2.256-2.256A6.78,6.78,0,0,0,48.566,7.419ZM43.282,4.1a2.872,2.872,0,1,1,2.872,2.872A2.875,2.875,0,0,1,43.282,4.1Zm7.385,10.667H41.641a1.027,1.027,0,0,1-1.026-1.026,5.538,5.538,0,1,1,11.077,0A1.027,1.027,0,0,1,50.667,14.769Z" transform="translate(-39.385)" fill="#171717" />
                                                    </svg>
                                                </a>
                                            </div>
                                        </div>
                                        <div class="bd-action__user">
                                            <a href="{{ $u }}">
                                                <span><span>Đăng nhập</span></span>
                                            </a>
                                            <a href="{{route('web.account.register')}}"><span>Đăng ký</span></a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="offcanvas__search mb-25">
                                <form action="{{route('web.products')}}">
                                    <input type="text" name="search" placeholder="Tìm sản phẩm...">
                                    <button type="submit"><i class="far fa-search"></i></button>
                                </form>
                            </div>
                            <div class="mobile-menu fix mb-40"></div>
                            @php
                            $contacts = $options->theme->contacts;
                            $page_title = $contacts->page_title('Liên hệ');
                            $socials = $options->theme->socials;
                            $list = ['facebook', 'twitter', 'instagram', 'youtube', 'linkedin'];
                            $layout = 'master';
                        
                        @endphp
                            <div class="offcanvas__map d-none d-lg-block mb-15">
                                {!! $contacts->map_code !!}
                            </div>
                            <div class="offcanvas__contact mt-30 mb-20">
                                <h4>Thông tin liên hệ</h4>
                                <ul>
                                    <li class="d-flex align-items-center">
                                        <div class="offcanvas__contact-icon mr-15">
                                            <i class="fal fa-map-marker-alt"></i>
                                        </div>
                                        <div class="offcanvas__contact-text">
                                            <a target="_blank" href="https://www.google.com/maps/place/Dhaka/@23.7806207,90.3492859,12z/data=!3m1!4b1!4m5!3m4!1s0x3755b8b087026b81:0x8fa563bbdd5904c2!8m2!3d23.8104753!4d90.4119873">{{ $contacts->address($siteinfo->address) }}</a>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <div class="offcanvas__contact-icon mr-15">
                                            <i class="far fa-phone"></i>
                                        </div>
                                        <div class="offcanvas__contact-text">
                                            <a href="tel:{{ $phone = $contacts->phone_number($siteinfo->phone_number('18000000')) }}">{{$phone}}</a>
                                        </div>
                                    </li>
                                    <li class="d-flex align-items-center">
                                        <div class="offcanvas__contact-icon mr-15">
                                            <i class="fal fa-envelope"></i>
                                        </div>
                                        <div class="offcanvas__contact-text">
                                            <a href="mailto:{{ $email = $contacts->email($siteinfo->email('support@website.com')) }}"><span><span>{{$email}}</span></span></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="offcanvas__social">
                                <ul>
                                    @php
                                    $list = [
                                        "facebook", "twitter", "youtube", "instagram", "pinterest"
                                    ];
                                    $pf = [
                                        "-f", "", "", "", "-p"
                                    ];
                                    
                                @endphp
                                @foreach ($list as $s)
                                    @continue(!$socials->{$s})
                                    <li>
                                        <a href="{{ $socials->{$s} }}"><i class="fa-brands fa-{{$s}}{{$pf[$loop->index]}}"></i></a>
                                    </li>
                                @endforeach
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- offcanvas area end -->