@extends("frontend.main")
@section("content")
    <div class="mt-2 row row-box__service">
        <div class="col-md-3 p-3">
            <div
                onclick="return window.location.href = '{{route('service.index')}}'"
                class="rounded cursor-point shadow p-3">
                <div class="row align-items-center m-0">
                    <div class="col-lg-4 col-md-12 text-center col-image">
                        <img src="{{ asset('icon/server.png') }}" style="width: 50px;"
                             alt="Dịch vụ của tôi">
                    </div>
                    <div class="col-lg-8 col-md-12 col-name">
                        <div class="title">Dịch vụ</div>
                        <div class="number">{{count($vmware) + count($hosting)}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 p-3">
            <div
                onclick="return window.location.href = '{{route('customer.domain.index')}}'"
                class="rounded cursor-point shadow p-3">
                <div class="row align-items-center m-0">
                    <div class="col-lg-4 col-md-12 text-center col-image">
                        <img src="{{ asset('icon/domain.png') }}" style="width: 50px;"
                             alt="Dịch vụ của tôi">
                    </div>
                    <div class="col-lg-8 col-md-12 col-name">
                        <div class="title">Tên miền</div>
                        <div class="number">{{count($domain)}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 p-3">
            <div
                onclick="return window.location.href = '{{route('invoice')}}'"
                class="rounded cursor-point shadow p-3">
                <div class="row align-items-center m-0">
                    <div class="col-lg-4 col-md-12 text-center col-image">
                        <img src="{{ asset('icon/invoice.png') }}" style="width: 50px;"
                             alt="Dịch vụ của tôi">
                    </div>
                    <div class="col-lg-8 col-md-12 col-name">
                        <div class="title">Hoá đơn</div>
                        <div class="number">{{count($invocie_unpaid)}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 p-3">
            <div
                onclick="return window.location.href = '{{route('ticket')}}'"
                class="rounded cursor-point shadow p-3">
                <div class="row align-items-center m-0">
                    <div class="col-lg-4 col-md-12 text-center col-image">
                        <img src="{{ asset('icon/ticket.png') }}" style="width: 50px;"
                             alt="Dịch vụ của tôi">
                    </div>
                    <div class="col-lg-8 col-md-12 col-name">
                        <div class="title">Hỗ trợ</div>
                        <div class="number">{{count($ticket)}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-2 row">
        <div class="col-md-6">
            <div class="rounded shadow p-3">
                <h3>Thống kê dịch vụ</h3>
                <div class="box-service mt-4">
                    <table class="table">
                        <thead class="table-brand">
                        <tr>
                            <th class="text-center">Dịch vụ</th>
                            <th class="text-center">Số Lượng</th>
                            <th class="text-center"></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td class="text-left px-3">
                                <img src="{{ asset('icon/server.png') }}"
                                     style="width: 20px; margin-right: 10px"
                                     alt="VPS">
                                <strong>VPS</strong></td>
                            <td class="text-center"><strong>{{ count($vmware) }}</strong></td>
                            <td class="text-center">
                                <a class="text-decoration-none border p-1 px-3 rounded border-brand"
                                   href="{{ route('service.index') }}">Chi tiết</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-left px-3">
                                <img src="{{ asset('icon/server.png') }}"
                                     style="width: 20px; margin-right: 10px"
                                     alt="Hosting">
                                <strong>Hosting</strong></td>
                            <td class="text-center"><strong>{{ count($hosting) }}</strong></td>
                            <td class="text-center">
                                <a class="text-decoration-none border p-1 px-3 rounded border-brand"
                                   href="{{ route('service.index') }}">Chi tiết</a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="rounded shadow p-3">
                <h3>Thông tin cơ bản</h3>
                <div class="box-service mt-4">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td class="text-left px-3">
                                <i class="fas fa-dollar-sign" style="width: 30px"></i> Số dư tài khoản
                            </td>
                            <td class="text-end">
                              <strong> {{ number_format(auth('users')->user()->credit,0,',','.') }} đ </strong>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-left d-fl px-3">
                                    <i class="fas fa-money-bill-wave" style="width: 30px"></i> Tổng tiền đã chi
                            </td>
                            <td class="text-end">
                                <strong> {{ number_format(((int)auth('users')->user()->total - (int)auth('users')->user()->credit),0,',','.') }} đ </strong>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-left px-3 border-0">
                                <i class="fas fa-hand-holding-usd" style="width: 30px"></i> Tổng tiền đã nạp
                            </td>
                            <td class="text-end border-0">
                                <strong> {{ number_format((int)auth('users')->user()->total ,0,',','.') }} đ </strong>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-3 row">
        <div class="col-lg-8 col-md-7">
            <div class="rounded shadow p-3">
                <h3>Mã giảm giá</h3>
                 @if($discount->count())
                    <div class="box-coupon owl-carousel">
                        @foreach($discount as $item)
                            <div class="coupon-item cursor-point">
                                <div
                                    onclick="CopyDiscount('{{$item->code}}')"
                                    class="coupon overflow-hidden align-items-center shadow bg-white rounded mb-3 d-flex justify-content-between">
                                    <div class="kiri p-3">
                                        <div class="icon-container ">
                                            <div class="icon-container_box">
                                                <img src="{{ asset('icon/gift-card.png') }}"
                                                     width="85"
                                                     style="width: 60px"
                                                     alt="Coupon"
                                                     class=""/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tengah py-3 d-flex w-100 justify-content-start">
                                        <div>
                                            <h3 class="lead">{{$item->code}}</h3>
                                            <p class="text-muted mb-0">
                                                @switch($item->type)
                                                    @case(1)
                                                        Giảm <strong>{{$item->discount}}</strong> % trên giá trị đơn
                                                        hàng trong lần thanh toán đầu tiên.
                                                        @break
                                                    @case(2)
                                                        Giảm
                                                        <strong>{{number_format($item->discount,0,',','.')}}</strong> đ
                                                        trên giá trị đơn hàng trong lần thanh toán đầu tiên.
                                                        @break
                                                @endswitch
                                            </p>
                                        </div>
                                    </div>
                                    <div class="kanan">
                                        <div class="info m-3 d-flex align-items-center">
                                            <div class="w-100">
                                                <div class="block">
                                                    <span class="time">
                                                        <span class="font-weight-bold fs-3">
                                                            {{\Carbon\Carbon::now()->diffInDays(\Carbon\Carbon::parse($item->end),false) + 1}}
                                                        </span>
                                                         ngày
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="alert mt-4 alert-warning" role="alert">
                        Chưa có chương trình ưu đãi nào
                    </div>
                @endif
            </div>
        </div>
        <div class="col-lg-4 col-md-5">
            <div class="shadow rounded p-3">
                <h3>Thông báo</h3>
                <div class="box-post">
                    <div class="list list-row">
                         @foreach($posts->all() as $item)
                            <div class="list-item mt-3 d-flex">
                                <div class="w-40"><span class="w-40 avatar gd-primary">P</span></div>
                                <div class="px-3 w-80 ">
                                    <a href="{{ route('post',['slug' => $item->slug]) }}"
                                       class="item-author text-dark text-decoration-none text-color">
                                        {{ $item->name }}
                                    </a>
                                    <div class="no-wrap">
                                        <div
                                            class="item-date text-muted text-sm d-none d-md-block">{{ \Carbon\Carbon::parse($item->created_at)->diffForHumans() }}</div>
                                    </div>
                                </div>

                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('viewStyles')
    <link rel="stylesheet" href="{{ asset('lib/carousel/owl.carousel.min.css') }}">
    <link rel="stylesheet" href="{{ asset('lib/carousel/owl.theme.default.min.css') }}">
    <link rel="stylesheet" href="{{ asset('lib/sweetalert/sweetalert.css') }}">
@endpush
@push('viewScripts')
    <script src="{{ asset('lib/carousel/owl.carousel.js') }}"></script>
    <script src="{{ asset('lib/sweetalert/sweetalert.min.js') }}"></script>
    <script type="text/javascript">
        $('.owl-carousel').owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            responsive: {
                400: {
                    items: 1,
                    nav: true
                },
                768: {
                    items: 1,
                    nav: false,

                },
                1200: {
                    items: 2,
                    nav: true,
                    loop: false
                }
            }
        })
    </script>
@endpush