@extends('home.users_profile.layout')

@section('title')
    لیست علاقه مندی ها
@endsection

@section('style')
    <link rel="stylesheet" href="{{ asset('home/css/profile_panel.css') }}">

    <style>
        .header-transparent{
            position: static !important;
            background-color: #222;
        }
        table {
            width: 100%;
        }

        tr {
            border-bottom: 1px solid #eeeeee;
        }

        table th {
            text-align: center;
            padding: 20px;

        }

        table td {
            text-align: center;
            padding: 20px;

        }

        .fa-trash {
            color: red;
        }

        li {
            list-style: none !important;
        }

        #myaccountContent {
            margin-top: 0 !important;
        }

        td {
            vertical-align: middle !important;
        }

        @media screen and (max-width: 768px) {
            .table {
                width: 410px;
            }
        }

        .arrow-icons {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }

        @media (min-width: 576px) {
            .modal-dialog {
                max-width: 1000px !important;
                margin: 1.75rem auto;
            }

            .arrow-icons {
                display: none;
            }
        }

        @media screen and (max-width: 768px) {
            .product-name-width {
                width: 700px;
            }
        }
    </style>
@endsection

@section('script')
    <script>
        $('.mobile-menu-toggle').click(function () {
            $('.loaded').addClass('mmenu-active');
        })
        $('.mobile-menu-close').click(function () {
            $('.loaded').removeClass('mmenu-active');
        })
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a').append('<span class="toggle-btn"> </span>');
        $('div#categories > ul.mobile-menu > li > a > span.toggle-btn').click(function (e) {
            e.preventDefault();
            $(this).parent().next().slideToggle(300).parent().toggleClass("show");
        })

        //remove from wishlist
        function RemoveFromProfileWishList(tag, event, productId) {
            event.preventDefault();
            $.ajax({
                url: "{{ route('home.wishlist.remove') }}",
                type: "POST",
                dataType: "json",
                data: {
                    productId: productId,
                    _token: "{{ csrf_token() }}"
                },
                success: function (msg) {
                    if (msg[0] == 'ok') {
                        swal({
                            text: "محصول از لیست علاقه مندی های شما حذف شد",
                            icon: "success",
                            timer: 5000,
                            buttons: false,
                        })
                        window.location.reload();
                    }
                },
                error: function () {
                    console.log("something went wrong");
                },
            });
        }

        $('#mobile_menu_nav').click(function () {
            $('#icon-panel').toggleClass('negative');
            $('#icon-panel').toggleClass('positive');
            $('.negative').html('-');
            $('.positive').html('+');
        })
    </script>
@endsection

@section('content')
    <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">

        <div class="app-container container-xxl d-flex">
            <div id="kt_app_sidebar" class="app-sidebar align-self-start" data-kt-drawer="true" data-kt-drawer-name="app-sidebar" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="{default:'200px', '300px': '225px'}" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_app_sidebar_mobile_toggle">
                <!--begin::Sidebar secondary menu-->
                <div class="card flex-grow-1 py-4" data-kt-sticky="true" data-kt-sticky-name="app-sidebar-menu-sticky" data-kt-sticky-offset="{default: false, xl: '500px'}" data-kt-sticky-width="225px" data-kt-sticky-left="auto" data-kt-sticky-top="125px" data-kt-sticky-animation="false" data-kt-sticky-zindex="95" style="">
                    <div class="hover-scroll-y mx-3 px-1 px-lg-2" data-kt-scroll="true" data-kt-scroll-activate="{default: false, lg: true}" data-kt-scroll-height="auto" data-kt-scroll-dependencies="#kt_app_header, #kt_app_toolbar, #kt_app_footer" data-kt-scroll-wrappers="#kt_app_main" data-kt-scroll-offset="5px" style="height: 230px;">
                        <div id="kt_app_sidebar_menu" data-kt-menu="true" class="menu menu-sub-indention menu-rounded menu-column menu-active-bg menu-title-gray-600 menu-icon-gray-400 menu-state-primary menu-arrow-gray-500 fw-semibold fs-6">
                            <!--begin:Menu item-->
                            <div class="menu-item">
                                <!--begin:Menu content-->
                                <div class="menu-content">
                                    <span class="menu-section fs-5 fw-bolder ps-1 py-1">صفحات</span>
                                </div>
                                <!--end:Menu content-->
                            </div>

                            <div  class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{ route('home.users_profile.show') }}" class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
												<span class="menu-title">اطلاعات حساب کاربری </span>

											</a>

                            </div>

                            <div  class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{ route('home.profile.wallet.index') }}" class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
                                    <span class="menu-title">  کیف پول </span>

                                </a>

                            </div>

                            <div  class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{ route('home.addresses.index') }}" class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
                                    <span class="menu-title">آدرس ها   </span>

                                </a>

                            </div>

                            <div  class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{ route('home.comments.users_profile.index') }}" class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
                                    <span class="menu-title">دیدگاه   </span>

                                </a>

                            </div>

                            <div  class="menu-item here">
                                <!--begin:Menu link-->
                                <a href="{{ route('home.ticket.index') }}" class="menu-link">
												<span class="menu-bullet">
													<span class="bullet bullet-dot"></span>
												</span>
                                    <span class="menu-title">درخواست پشتیبانی   </span>

                                </a>

                            </div>


                            <!--end:Menu item-->
                        </div>
                    </div>
                </div>
                <!--end::Sidebar secondary menu-->
            </div>

            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <!--begin::Content wrapper-->
                <div class="d-flex flex-column flex-column-fluid">
                    <!--begin::Content-->
                    <div id="kt_app_content" class="app-content">
                        <!--begin::محصولات-->
                        <div class="card card-flush">

                            <div class="card-body pt-0">
                                @if($wishlist->isEmpty())
                                    <div class="alert alert-danger text-center">
                                        لیست علاقه مندی های شما خالی می باشد
                                    </div>
                                @else
                                <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_ecommerce_products_table">
                                    <thead>
                                    <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">

                                        <th class="min-w-100px"> محصول</th>

                                        <th scope="col"> حذف</th>

                                    </tr>
                                    </thead>
                                    <tbody class="fw-semibold text-gray-600">

                                    @foreach ($wishlist as $item)
                                    <tr>

                                        <td>
                                            <div class="d-flex justify-content-center align-items-center">
                                                <!--begin::Thumbnail-->
                                                <a href="{{ route('home.product' , ['alias' => $item->product->alias]) }}" class="symbol symbol-50px">
                                                    <span class="symbol-label" style="background-image:url('{{ asset(env('PRODUCT_IMAGES_UPLOAD_PATH') . $item->product->primary_image) }}');"></span>
                                                </a>
                                                <!--end::Thumbnail-->
                                                <div class="ms-5">
                                                    <!--begin::Title-->
                                                    <a href="{{ route('home.product' , ['alias' => $item->product->alias]) }}" class="text-gray-800 text-hover-primary fs-5 fw-bold" data-kt-ecommerce-product-filter="product_name">          {{ $item->product->name }} </a>
                                                    <!--end::Title-->
                                                </div>
                                            </div>
                                        </td>
                                        <td class="text-center pe-0">
                                            <a class="btn btn-danger" onclick="RemoveFromProfileWishList(this,event,{{ $item->product->id }})">
                                                <i class="fa fa-trash"
                                                   style="font-size: 20px"></i> </a>
                                        </td>


                                    </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                                @endif
                            </div>
                            <!--end::کارت body-->
                        </div>
                        <!--end::محصولات-->
                    </div>
                    <!--end::Content-->
                </div>

            </div>
            <!--end:::اصلی-->
        </div>
        <!--end::Wrapper container-->
    </div>
@endsection