@php
    $category = \App\Helpers\Functions::getCategory();
@endphp
{{--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>--}}
<div class="header content header-main">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="header_main_logo"> <span data-action="toggle-nav"
                                                     class="action nav-toggle"><span>Toggle Nav</span></span> <a
                            class="logo"
                            href="{{route('home')}}"
                            title="Siêu thị khóa học online, trực tuyến hàng đầu tại Việt Nam - GTG Academy"><img
                                style="height:52px;width: 65px"
                                src="{{setting('logo')?: url('frontend/images/logo.png') }}"
                                title="Siêu thị khóa học online, trực tuyến hàng đầu tại Việt Nam - GTG Academy"
                                alt="Siêu thị khóa học online, trực tuyến hàng đầu tại Việt Nam - GTG Academy"
                                width="103" height="52"/></a></div>
                <div class="header_main_search">
                    <div class="block block-search">
                        <div class="block block-title"><strong>Tìm kiếm</strong></div>
                        <div class="block block-content">
                            <form class="form minisearch" id="search_mini_form"
                                  action="" method="get">
                                <div class="field search"><label class="label" for="search"
                                                                 data-role="minisearch-label"><span>Tìm kiếm</span></label>
                                    <div class="control"><input id="search" type="text" name="search"
                                                                placeholder="Tìm kiếm khóa học ngay" class="input-text"
                                                                maxlength="1000" role="combobox" aria-haspopup="false"
                                                                aria-autocomplete="both" autocomplete="off"
                                                                value="{{ request('search') }}"
                                                                aria-expanded="false"/></div>
                                </div>
                                <div class="actions">
                                    <button type="submit" title="Tìm kiếm"
                                            class="action btn btn-default btn-search-header"></button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="header_main_cart">
                    <div class="header_main_cart_icon">
                        <div class="btn-group cart-notification-dropdown">
                            <div data-block="minicart" class="minicart-wrapper" data_show="false">
                                <a class="action showcart" data-bind="scope: 'minicart_content'">
                                    <span class="text">My Cart</span>
                                    <span class="counter qty">
                                          <span class="counter-number">0</span>
                                    </span>
                                </a>


                                <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front mage-dropdown-dialog"
                                     tabindex="-1" role="dialog" aria-describedby="ui-id-1" style="">
                                    <div class="block block-minicart ui-dialog-content ui-widget-content"
                                         data-role="dropdownDialog" id="ui-id-1" style="">
                                        <div id="minicart-content-wrapper" data-bind="scope: 'minicart_content'">
                                            <!-- ko template: getTemplate() -->

                                            <div class="block-content">
                                                <div class="items-total">
                                                    <div class="inner-items-total">
                                                        Giỏ hàng - <span class="count">2</span> khóa
                                                    </div>
                                                </div>


                                                <div data-action="scroll" class="minicart-items-wrapper"
                                                     style="height: 178px;">
                                                    <ol id="mini-cart" class="minicart-items">
                                                    </ol>
                                                </div>


                                                <div class="actions">
                                                    <div class="row">
                                                        <div class="col-md-6">
                                                            <div class="subtotal">
                                                                <span class="label">
                                                                    <!-- ko i18n: 'Tổng' --><span>Tổng</span>
                                                                    <!-- /ko -->
                                                                </span>
                                                                <div class="amount price-container">
                                                                    <span class="price-wrapper"
                                                                          data-bind="html: cart().subtotal_excl_tax"><span
                                                                                class="price">0&nbsp;₫</span></span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-6 align-self-center" style="padding-left: 0">
                                                            <div class="secondary text-right">
                                                                <a class="action viewcart"
                                                                   data-bind="attr: {href: shoppingCartUrl}"
                                                                   href="{{route('checkout-cart')}}">
                                                                    <span data-bind="i18n: 'Xem giỏ hàng'">Xem giỏ hàng</span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div><!-- /ko -->

                                                <div id="minicart-widgets" class="minicart-widgets">
                                                </div>
                                            </div>

                                            <!-- /ko -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="header_main_notification">
                    <div class="header_main_notification_icon">
                        <div class="customer-menu menu-account btn-group notification-dropdown">
                            <div class="action toggle toggle-notification" data-toggle="dropdown" aria-haspopup="true"
                                 aria-expanded="false" role="button" tabindex="0">
                                <div class="notification">
                                    <div class="notification-button"><span class="badge noti-count">0</span></div>
                                </div>
                            </div>
                            <div class="wrapper-dropdown-notification">
                                <ul class="dropdown dropdown-menu dropdown-notification">
                                    {{--Danh sách notification--}}
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="header_main_user pull-right">
                    <ul class="header links">
                        <div class="customer-menu menu-account" style="width: 200px">
                            <div class="action toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                 role="button" tabindex="0">
                                <div class="customer-name">
                                    @if(!empty(session('info-temp')) && session('info-temp')->avatar)
                                        <img class="avatar-customer" src="{{session('info-temp')->avatar}}" alt="">
                                    @else
                                        <span class="picture-name text-uppercase">{{substr(session('info-temp')->full_name,0,2)?:'AD'}}</span>
                                    @endif
                                    <span class="fullname">{{session('info-temp')->full_name}}</span>
                                    <div class="fa fa-caret-down"></div>
                                </div>
                            </div>
                            <ul class="dropdown dropdown-menu">
                                <li class="dropdown-item"><a href="/account/profile">Thông tin tài khoản</a></li>
                                <div class="dropdown-divider mobile"></div>
                                <li class="dropdown-item"><a href="{{route('my-course')}}">Khoá học của tôi</a></li>
                                <div class="dropdown-divider mobile"></div>
                                <li class="dropdown-item"><a href="{{route('my-order')}}">Đơn hàng của tôi</a></li>
                                <div class="dropdown-divider mobile"></div>
                                <li class="dropdown-item"><a href="{{route('change-password.get')}}">Đổi mật khẩu</a>
                                </li>
                                <div class="dropdown-divider"></div>
                                <li class="dropdown-item item-below-divider" id="sign-out-button"><a
                                            href="{{route('dang-xuat')}}">Đăng xuất</a></li>
                            </ul>
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="header_bottom">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="category-mobile">
                    <div class="category-mobile-mask"></div>
                    <a href="/home"><span class="logo-mobile"
                                          style="background: url('{{setting('logo')?: url('frontend/images/logo.png') }}') no-repeat center/cover;"></span></a>
                    <span
                            class="category-mobile-icon" id="category-mobile-icon"></span>
                    <ul class="category-mobile-container" id="main-category-mobile">
                        {{--<li><span class="close-category-drawer" id="close-category-main-drawer"></span></li>--}}

                        <li>
                            <span class="close-category-drawer" id="close-category-main-drawer">
                                <i class="fa fa-arrow-left" aria-hidden="true" style="font-size: 15px"></i>
                            </span>
                        </li>

                        @if(isset($category) && count($category))
                            @foreach($category as $item)
                                <li>
                                    <a class="category-link" href="/category/{{$item->id}}">
                                        <span>
                                            <span class="category-name no-icon">{{$item->title}}</span>
                                        </span>
                                    </a>
                                    <span class="more-category-drawer show-subcategory" id="223"></span>
                                </li>
                            @endforeach
                        @endif

                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="mobile-delete-search-input" style="display: none;"></div>
    <div class="wrapper header-category-wrapper">
        <div class="wrapper wrapper_banner header-category">
            <div class="wrapper_banner_category">
                <div id="section_ajax_slide_0973653001585017671">
                    <section class="category-widget-section">
                        <div class="wrapper_column_category_placeholder"></div>
                    </section>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <fieldset>
                    <div class="input-group">
                        <input type="hidden" class="user_id_send_notify">
                        <input type="text" class="form-control message-notify" placeholder="Button on right"
                               aria-describedby="button-addon4">
                        <div class="input-group-append" id="button-addon4">
                            <button class="btn btn-primary send-notify" type="button">submit</button>
                        </div>
                    </div>
                </fieldset>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).on('click', '.customer-menu.menu-account', function () {
        $(this).toggleClass("active")
    })
    $(document).mouseup(function (e) {
        const container = $(".customer-menu.menu-account");

        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.removeClass("active")
        }
    });

    $(document).on('click', '.minicart-wrapper', function () {
        getCart();
        $('.block.block-minicart.ui-dialog-content.ui-widget-content').toggle();
    })
    $(document).mouseup(function (e) {
        const aaaa = $(".block.block-minicart.ui-dialog-content.ui-widget-content");
        if (!aaaa.is(e.target) && aaaa.has(e.target).length === 0) {
            $('.block.block-minicart.ui-dialog-content.ui-widget-content').hide();
        }
    });

    setTimeout(function () {
        getTotalCart();
    }, 2000)

    function getTotalCart() {
        $.ajax({
            url: '{{ url('api/get-total-cart') }}',
            type: 'GET',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function (data) {
                if (data) {
                    $('.counter-number').text(data.data);
                }
            }
        });
    }

    async function getCart() {
        let html = '';
        let row = $('body').find('.minicart-items');
        let cart_empty = $('body').find('#minicart-content-wrapper .block-content')
        $.ajax({
            url: '{{ url('api/get-cart') }}',
            type: 'GET',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: await function (data) {
                if (data.data.length > 0) {
                    $('.counter-number').text(data.data.length);
                    $('.amount.price-container .price').text(data.total_price + ' ₫');
                    let abc = data.data;
                    abc.forEach(element => {
                        html += `
                                <li class="item product product-item" data-role="product-item">
                                    <div class="product">
                                        <a class="product-item-photo" href="">
                                            <span class="product-image-container" style="width: 75px;">
                                                <span class="product-image-wrapper" style="padding-bottom: 100%;">
                                                    <img class="product-image-photo" src=" {{\App\Constants\DirectoryConstant::UPLOAD_FOLDER_LECTURE_THUMB}}` + element.lecture.thumbnail + `"  alt="Làm chủ 6 công cụ marketing online hot nhất hiện nay" style="width: 75px; height: 75px;">

                                                </span>
                                            </span>
                                        </a>
                                        <div class="product-item-details">
                                            <strong class="product-item-name">
                                                <a href="">` + element.lecture.title + `</a>
                                            </strong>
                                            <div class="product-item-pricing">
                                                <div class="price-container">
                                                    <span class="price-wrapper" data-bind="html: price">
                                                        <span class="price-excluding-tax" data-label="Excl. Tax">
                                                            <span class="minicart-price">
                                                                <span class="price">` + parseInt(element.lecture.price).toLocaleString() + `&nbsp;₫</span>
                                                            </span>
                                                        </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            `
                        row.html(html);
                    });
                } else {
                    html = `
                        <div class="wrap-icon-cart">
                        <div class="icon-cart"></div>
                        </div>
                        <strong class="subtitle empty" data-bind="visible: closeSidebar(), i18n: 'Bạn chưa có khóa học nào trong giỏ hàng'">Bạn chưa có khóa học nào trong giỏ hàng</strong>

                        <div id="minicart-widgets" class="minicart-widgets">
                        </div>
                    `
                    cart_empty.html(html);
                }
            }
        });
    }


    $('#category-mobile-icon').click(function (event) {
        event.stopPropagation();
        $('#main-category-mobile').addClass('show-main-category');
        $('.category-mobile-mask').show();
    })
    $('#close-category-main-drawer').click(function (event) {
        event.stopPropagation();
        $('#main-category-mobile').removeClass('show-main-category');
        $('.category-mobile-mask').hide();
    })
    $('.category-mobile-mask').click(function () {
        $('#main-category-mobile').removeClass('show-main-category');
        $('.category-mobile-mask').hide();
    })


    // Notification ---------------------------------

    setInterval(function () {
        getTotalNotify();
    }, 5000)

    $('.header_main_notification').on('click', function () {
        getNotify();
    });
    $(document).on('click', '.notification-list', async function () {
        let id = $(this).attr('data-id');
        const type_tang_cap = 2; //tăng cấp
        let message = await updateStatus(id);
        if (message) {
            if(message.type == type_tang_cap){
                window.location.href = '/account/profile';
            } else {
                let value = JSON.parse(message.data);
                swal({
                    title: value.message + ' !',
                    type: 'success'
                })
            }
        }

    });

    function getTotalNotify() {
        $.ajax({
            url: '/notify/get-total-notify',
            type: 'GET',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function (data) {
                console.log(11111111, data)
                if (data) {
                    $('.badge.noti-count').text(data);
                }
            }
        });
    }

    async function updateStatus(id) {
        let value = null;
        await $.ajax({
            url: '/notify/update-status-notify',
            type: 'PUT',
            data: {
                _token: "{{ csrf_token() }}",
                data_id: id
            },
            success: function (data) {
                if (data) {
                    value = data;
                }
            }
        });
        return value;
    }

    async function getNotify() {
        let html = '';
        let row = $('body').find('.dropdown-notification');
        $.ajax({
            url: '/notify/get-notify',
            type: 'GET',
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: await function (data) {
                if (data.length > 0) {
                    data.forEach(element => {
                        let cl = element.status == 0 ? "active" : '';
                        let message = element.data.message.slice(0, 30) + (element.data.message.length > 30 ? "..." : "");
                        html += `
                             <li class="notification-list ` + cl + `" data-id="` + element.id + `">
                                   <a class="notification-container">
                                        <img class="avatar"
                                             src="https://dvch1hlupt.cdn.hostvn.net/notification/image/khuy_n_m_i_6.png"
                                             alt="Hoàn tiền 100% ">
                                        <div class="notification-content">
                                             <div><p>` + element.title + `!</p></div>
                                             <div class="text">` + message + `</div>
                                             <h5 class="time"><span>` + element.created_at + `</span></h5>
                                        </div>
                                   </a>
                             </li>
                        `
                        row.html(html);
                    });
                }
            }
        });
    }

</script>
{{--<a href="javascript:void(0)">--}}
{{--<div class="media">--}}
{{--<div class="media-left align-self-center">--}}
{{--<i class="ft-plus-square icon-bg-circle bg-cyan"></i>--}}
{{--</div>--}}
{{--<div class="media-body">--}}
{{--<h6 class="media-heading item-notify ` + cl + `" data-id="` + element.id + `">` + element.title + `!</h6>--}}
{{--<p class="notification-text font-small-3 text-muted">` + element.data.message + `</p>--}}
{{--<small>--}}
{{--<time class="media-meta text-muted" datetime="2015-06-11T18:29:20+08:00">30 minutes ago</time>--}}
{{--<span class="float-right popup-notify" data-userId="` + element.data.user_send + `" data-id="` + element.id + `"><i class="ficon ft-mail"></i></span>--}}
{{--</small>--}}
{{--</div>--}}
{{--</div>--}}
{{--</a>--}}