@extends('client.layouts.client')
@section('title', 'Cấp Bậc & Dịch Vụ')
@section('content')
<div class="row">
     <div class="col-md-12 mb-3" style="margin-top: 3rem;">
            <div class="row gy-4">
                <div class="col-xxl-4 col-sm-6">
                    <div class="pricing-plan position-relative radius-24 overflow-hidden border bg-base shadow">
                        <div class="d-flex align-items-center gap-16 mb-28">
                            <span
                                class="w-72-px h-72-px d-flex justify-content-center align-items-center radius-16 bg-primary-50">
                                <img src="https://cdn-icons-png.flaticon.com/512/6690/6690105.png" alt="">
                            </span>
                            <div class="">
                                <span class="fw-medium text-md text-secondary-light">Cho người dùng</span>
                                <h6 class="mb-0">Cộng tác viên</h6>
                            </div>
                        </div>
                        <h3 class="mb-24"> {{number_format(site('collaborator'))}} VNĐ
                        </h3>
                        <span class="mb-20 fw-medium">Sẽ được những gì</span>
                        <ul>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">Nạp đủ và thăng cấp tự động.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">1 giao dịch hoặc tổng nạp.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">Được tạo website riêng.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">Giá được ưu đãi hơn.</span>
                            </li>
                        </ul>
                        <a href="{{route('account.recharge')}}"
                            class="bg-primary-600 bg-hover-primary-700 text-white text-center border border-primary-600 text-sm btn-sm px-12 py-10 w-100 radius-8 mt-28">Nâng cấp ngay</a>
                    </div>
                </div>
                <div class="col-xxl-4 col-sm-6">
                    <div
                        class="pricing-plan featured-item shadow position-relative radius-24 overflow-hidden border bg-primary-600 text-white z-1">
                        <img src="/assets/images/pricing/pricing-shape.png" alt=""
                            class="position-absolute end-0 top-10 z-n1">
                        <span
                            class="bg-white bg-opacity-25 text-white radius-24 py-8 px-24 text-sm position-absolute end-0 top-0 z-1 rounded-start-top-0 rounded-end-bottom-0">VIP</span>
                        <div class="d-flex align-items-center gap-16 mb-28">
                            <span
                                class="w-72-px h-72-px d-flex justify-content-center align-items-center radius-16 bg-base">
                                <img src="https://cdn-icons-png.flaticon.com/512/6690/6690105.png" alt="">
                            </span>
                            <div class="">
                                <span class="fw-medium text-md text-white">Cho người dùng</span>
                                <h6 class="mb-0 text-white">Nhà phân phối</h6>
                            </div>
                        </div>
                        <h3 class="mb-24 text-white">{{number_format(site('distributor'))}} VNĐ
                        </h3>
                        <span class="mb-20 fw-medium">Sẽ được những gì</span>
                        <ul>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-white rounded-circle text-primary-600"><iconify-icon
                                        icon="iconamoon:check-light" class="text-sm   "></iconify-icon></span>
                                <span class="text-white text-sm">Nạp đủ và thăng cấp tự động.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-white rounded-circle text-primary-600"><iconify-icon
                                        icon="iconamoon:check-light" class="text-sm   "></iconify-icon></span>
                                <span class="text-white text-sm">1 giao dịch hoặc tổng nạp.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-white rounded-circle text-primary-600"><iconify-icon
                                        icon="iconamoon:check-light" class="text-sm   "></iconify-icon></span>
                                <span class="text-white text-sm">Được tạo website riêng.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-white rounded-circle text-primary-600"><iconify-icon
                                        icon="iconamoon:check-light" class="text-sm   "></iconify-icon></span>
                                <span class="text-white text-sm">Giá được ưu đãi tốt nhất, hỗ trợ đặc biệt.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-white rounded-circle text-primary-600"><iconify-icon
                                        icon="iconamoon:check-light" class="text-sm   "></iconify-icon></span>
                                <span class="text-white text-sm">Được bổ sung các tính năng yêu cầu.</span>
                            </li>
                        </ul>
                        <a href="{{route('account.recharge')}}"
                            class="bg-white text-primary-600 text-white text-center border border-white text-sm btn-sm px-12 py-10 w-100 radius-8 mt-28">Nâng cấp ngay</a>

                    </div>
                </div>
                <div class="col-xxl-4 col-sm-6">
                    <div class="pricing-plan shadow position-relative radius-24 overflow-hidden border bg-base">
                        <div class="d-flex align-items-center gap-16 mb-28">
                            <span
                                class="w-72-px h-72-px d-flex justify-content-center align-items-center radius-16 bg-primary-50">
                                <img src="https://cdn-icons-png.flaticon.com/512/6690/6690105.png" alt="">
                            </span>
                            <div class="">
                                <span class="fw-medium text-md text-secondary-light">Cho người dùng</span>
                                <h6 class="mb-0">Đại lý</h6>
                            </div>
                        </div>
                        <h3 class="mb-24"> {{number_format(site('agency'))}} VNĐ
                        </h3>
                        <span class="mb-20 fw-medium">Sẽ được những gì</span>
                        <ul>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">Nạp đủ và thăng cấp tự động.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">1 giao dịch hoặc tổng nạp.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16 mb-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">Được tạo website riêng.</span>
                            </li>
                            <li class="d-flex align-items-center gap-16">
                                <span
                                    class="w-24-px h-24-px d-flex justify-content-center align-items-center bg-primary-600 rounded-circle"><iconify-icon
                                        icon="iconamoon:check-light" class="text-white text-sm "></iconify-icon></span>
                                <span class="text-secondary-light text-sm">Giá được ưu đãi tốt.</span>
                            </li>
                        </ul>
                        <a href="{{route('account.recharge')}}"
                            class="bg-primary-600 bg-hover-primary-700 text-white text-center border border-primary-600 text-sm btn-sm px-12 py-10 w-100 radius-8 mt-28">Nâng cấp ngay</a>
                    </div>
                </div>
            </div>
        </div>
        
        
    
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h5>Bảng Giá Dịch Vụ</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <ul class="nav nav-pills row" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            @foreach ($platforms as $platform)
                            <li class="col-md-2 text-center">
                                <a class="nav-link {{ $loop->first ? 'active' : '' }} d-flex align-items-center gap-1 justify-content-center"
                                    id="v-pills-{{ $platform->id }}-tab" data-bs-toggle="pill"
                                    href="#v-pills-{{ $platform->id }}" role="tab"
                                    aria-controls="v-pills-{{ $platform->id }}" aria-selected="true">
                                <img src="{{ $platform->image }}" class="wid-25" alt="" width="28">
                                <span>{{ $platform->name }}</span>
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="col-md-12">
                        <div class="tab-content" id="v-pills-tabContent">
                            @foreach ($platforms as $platform)
                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}"
                                id="v-pills-{{ $platform->id }}" role="tabpanel"
                                aria-labelledby="v-pills-{{ $platform->id }}-tab">
                                {{-- accordition service --}}
                                <div class="accordion" id="accordionExample">
                                    @foreach ($platform->services as $service)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header" id="heading{{ $service->id }}">
                                            <button class="accordion-button collapsed font-bold" type="button"
                                                data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $service->id }}"
                                                aria-expanded="false"
                                                aria-controls="collapse{{ $service->id }}">
                                                {{ $service->name }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $service->id }}"
                                            class="accordion-collapse collapse"
                                            aria-labelledby="heading{{ $service->id }}"
                                            data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <div class="table-responsive">
                                                    <table
                                                        class="table table-bordered table-hover table-striped">
                                                        <thead>
                                                            <tr>
                                                                <th>Thông tin</th>
                                                                <th>Máy chủ</th>
                                                                <th>Thành viên</th>
                                                                <th>Cộng tác viên</th>
                                                                <th>Đại lý</th>
                                                                <th>Nhà phân phối</th>
                                                                <th>Trạng thái</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            @foreach ($service->servers->where('domain', request()->getHost()) as $server)
                                                            <tr></tr>
                                                            <td>
                                                                <ul class="mb-0">
                                                                    <li class="fs-6 fw-bold">Thông tin:
                                                                        {{ $server->name }}
                                                                    </li>
                                                                    <li class="fs-6 fw-bold">Min - Max:
                                                                        {{ number_format($server->min) }} ~
                                                                        {{ number_format($server->max) }}
                                                                    </li>
                                                                    <li class="fs-6 fw-bold">Giới hạn ngày:
                                                                        <span class="text-danger">
                                                                        @if ($server->limit_day == 0)
                                                                        Không giới hạn
                                                                        @else
                                                                        {{ $server->limit_day }}
                                                                        @endif
                                                                        </span>
                                                                    </li>
                                                                </ul>
                                                            </td>
                                                            <td>
                                                                <span
                                                                    class="badge bg-primary">{{ $server->package_id }}</span>
                                                            </td>
                                                            <td>
                                                                <span
                                                                    class="badge bg-success">{{ $server->price_member }}đ</span>
                                                            </td>
                                                            <td>
                                                                <span
                                                                    class="badge bg-info">{{ $server->price_collaborator }}đ</span>
                                                            </td>
                                                            <td>
                                                                <span
                                                                    class="badge bg-warning">{{ $server->price_agency }}đ</span>
                                                            </td>
                                                            <td>
                                                                <span class="badge bg-danger">
                                                                Liên hệ Admin
                                                                </span>
                                                            </td>
                                                            <td>
                                                                {!! statusAction($server->status, true) !!}
                                                            </td>
                                                            </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection