@extends('Template::layouts.master')
@section('content')
    <div class="dashboard-body">
        <div class="notice"></div>
        @php
            $kyc = getContent('kyc.content', true);
        @endphp
        @if (auth()->user()->kv == Status::KYC_UNVERIFIED && auth()->user()?->kyc_rejection_reason)
            <div class="alert alert--danger mb-3" role="alert">
                <button class="btn-close btn--close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                <div class="alert__icon"><i class="fas fa-check"></i></div>
                <div class="alert__content">
                    <h6 class="alert__title">@lang('KYC Documents Rejected')</h6>
                    <p class="alert__desc">
                        {{ __($kyc?->data_values?->reject ?? '') }}
                        <span class="d-inline-flex align-items-center gap-2">
                            <a class="alert__link" href="{{ route('user.kyc.form') }}">
                                @lang('Click Here to Re-submit Documents').
                            </a>
                            <a class="text--info fw-semibold" data-bs-toggle="modal" data-bs-target="#kycRejectionReason"
                               href="javascript:void(0);">
                                @lang('Show Reason')
                            </a>
                        </span>
                    </p>
                </div>
            </div>
        @elseif(auth()->user()->kv == Status::KYC_UNVERIFIED)
            <div class="alert alert--info mb-3" role="alert">
                <button class="btn-close btn--close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                <div class="alert__icon"><i class="fas fa-check"></i></div>
                <div class="alert__content">
                    <h6 class="alert__title">@lang('KYC Verification required')</h6>
                    <p class="alert__desc">
                        {{ __($kyc?->data_values?->required ?? '') }}
                        <a class="alert__link" href="{{ route('user.kyc.form') }}">
                            @lang('Click Here to Submit Documents')
                        </a>
                    </p>
                </div>
            </div>
        @elseif(auth()->user()->kv == Status::KYC_PENDING)
            <div class="alert alert--warning mb-3" role="alert">
                <button class="btn-close btn--close" type="button" data-bs-dismiss="alert" aria-label="Close"></button>
                <div class="alert__icon"><i class="fas fa-check"></i></div>
                <div class="alert__content">
                    <h6 class="alert__title">@lang('KYC Verification pending')</h6>
                    <p class="alert__desc">
                        {{ __($kyc?->data_values?->pending ?? '') }}
                        <a class="alert__link" href="{{ route('user.kyc.data') }}">
                            @lang('See KYC Data')
                        </a>
                    </p>
                </div>
            </div>
        @endif

        <div class="row gy-4 mb-4">
            <div class="col-lg-4">
                <div class="dashboard-widget">
                    <div class="dashboard-widget__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="lucide lucide-dollar-sign-icon lucide-dollar-sign">
                            <line x1="12" x2="12" y1="2" y2="22" />
                            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                        </svg>
                    </div>
                    <div class="dashboard-widget__content">
                        <h6 class="dashboard-widget__title">{{ showAmount(Auth::user()->balance) }}</h6>
                        <span class="dashboard-widget__balance">@lang('Balance')</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="dashboard-widget">
                    <div class="dashboard-widget__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="lucide lucide-clipboard-list-icon lucide-clipboard-list">
                            <rect width="8" height="4" x="8" y="2" rx="1" ry="1" />
                            <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" />
                            <path d="M12 11h4" />
                            <path d="M12 16h4" />
                            <path d="M8 11h.01" />
                            <path d="M8 16h.01" />
                        </svg>
                    </div>
                    <div class="dashboard-widget__content">
                        <h6 class="dashboard-widget__title">{{ $totalDomain }}</h6>
                        <span class="dashboard-widget__balance">@lang('Auction Domain')</span>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="dashboard-widget">
                    <div class="dashboard-widget__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                             stroke-linejoin="round" class="lucide lucide-gavel-icon lucide-gavel">
                            <path d="m14 13-8.381 8.38a1 1 0 0 1-3.001-3l8.384-8.381" />
                            <path d="m16 16 6-6" />
                            <path d="m21.5 10.5-8-8" />
                            <path d="m8 8 6-6" />
                            <path d="m8.5 7.5 8 8" />
                        </svg>
                    </div>
                    <div class="dashboard-widget__content">
                        <h6 class="dashboard-widget__title">{{ $totalBid }}</h6>
                        <span class="dashboard-widget__balance">@lang('Total Bids')</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="data-table mb-4">
            <div class="data-table__header">
                <h6 class="data-table__title">
                    @lang('Your Domain List')
                </h6>
            </div>
            <div class="data-table__body">
                @if (!$userDomain->isEmpty())
                    <div class="table--responsive">
                        <table class="table table--custom table--responsive-md">
                            <thead>
                                <tr>
                                <tr>
                                    <th>@lang('Domain')</th>
                                    <th>@lang('Price')</th>
                                    <th>@lang('Total Bids')</th>
                                    <th>@lang('End Date')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($userDomain as $item)
                                    <tr>
                                        <td data-label="@lang('Domain')">
                                            <a class="domain-name"
                                               href="{{ route('domain.detail', ['id' => $item->id, 'name' => slug($item->name)]) }}">
                                                {{ __($item->name) }}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="lucide lucide-square-arrow-out-up-right-icon lucide-square-arrow-out-up-right">
                                                    <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6">
                                                    </path>
                                                    <path d="m21 3-9 9"></path>
                                                    <path d="M15 3h6v6"></path>
                                                </svg>
                                            </a>
                                        </td>
                                        <td data-label="@lang('Price')">
                                            {{ showAmount($item->price) }}
                                        </td>
                                        <td data-label="@lang('Total Bids')">
                                            {{ count($item->bids) }}
                                        </td>
                                        <td data-label="@lang('End Date')">
                                            <span data-countdown="{{ $item->end_time }}" data-title="@lang('The auction end')">
                                            </span>
                                        </td>
                                        <td data-label="@lang('Status')">
                                            @php echo $item->statusText @endphp
                                        </td>

                                        <td data-label="Action">
                                            <a href="{{ route('user.bid.details', $item->id) }}"
                                               class="btn btn--icon btn--sm btn--base-two">
                                                <i class="las la-gavel" data-bs-toggle="tooltip" data-bs-position="top"
                                                   aria-label="View Bids"
                                                   data-bs-original-title="@lang('View Bids')"></i>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    @include('Template::partials.data_not_found', [
                        'data' => __($emptyMessage),
                    ])
                @endif
            </div>
        </div>
        <div class="data-table">
            <div class="data-table__header">
                <h6 class="data-table__title">
                    @lang(' Bid Domain List')
                </h6>
            </div>
            <div class="data-table__body">
                @if (!$domainBid->isEmpty())
                    <div class="table--responsive">
                        <table class="table table--custom table--responsive-md">
                            <thead>
                                <tr>
                                    <th>@lang('Name')</th>
                                    <th>@lang('Price')</th>
                                    <th>@lang('Ends')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($domainBid as $item)
                                    <tr>
                                        <td data-label=" Name">
                                            <a class="domain-name"
                                               href="{{ route('domain.detail', ['id' => $item->domain?->id, 'name' => slug($item->domain?->name)]) }}">
                                                {{ __($item->domain?->name) }}
                                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                     viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                     stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                     class="lucide lucide-square-arrow-out-up-right-icon lucide-square-arrow-out-up-right">
                                                    <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
                                                    <path d="m21 3-9 9" />
                                                    <path d="M15 3h6v6" />
                                                </svg>
                                            </a>
                                        </td>
                                        <td data-label="Price">
                                            {{ showAmount($item->domain?->price) }}
                                        </td>
                                        <td data-label="@lang('Ends')"> <span
                                                  data-countdown="{{ $item->domain?->end_time }}"
                                                  data-title="@lang('This auction ended')"></span>
                                        </td>
                                        <td data-label="Status">
                                            @if ($item->win_status == 1)
                                                <span class="badge badge--success">@lang('Win')</span>
                                            @elseif($item->win_status == 2)
                                                <span class="badge badge--danger">@lang('Lose')</span>
                                            @else
                                                <span class="badge badge--warning">@lang('Pending')</span>
                                            @endif
                                        </td>
                                        <td data-label="Action">
                                            <div class="d-flex align-items-center justify-content-end gap-2">
                                                @if ($item->win_status == 1)
                                                    <a href="{{ route('user.bid.conversation', ['id' => $item->id, 'domain_id' => $item->domain_id]) }}"
                                                       class="btn btn--icon btn--sm btn--base">
                                                        <i class="las la-sms"></i>
                                                    </a>
                                                @endif
                                                <button class="btn btn--icon btn--sm btn--base-two detailBtn"
                                                        data-offer_price="{{ showAmount($item->price) }}"
                                                        data-domain_name="{{ $item->domain?->name }}"
                                                        data-domain_price="{{ showAmount($item->domain?->price) }}"
                                                        data-end_time="{{ $item->domain?->end_time }}">
                                                    <i class="las la-desktop" data-bs-toggle="tooltip"
                                                       data-bs-position="top" title="View Details"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    @include('Template::partials.data_not_found', [
                        'data' => __($emptyMessage),
                    ])
                @endif
            </div>
        </div>
    </div>


    @if (auth()->user()->kv == Status::KYC_UNVERIFIED && auth()->user()->kyc_rejection_reason)
        <div class="modal custom--modal fade" id="kycRejectionReason">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">@lang('KYC Document Rejection Reason')</h6>
                        <button type="button" class="btn btn--sm btn--close btn-soft--secondary btn--icon"
                                data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>{{ auth()->user()->kyc_rejection_reason }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <div class="modal custom--modal fade" id="detailModal" tabindex="-1" aria-labelledby="transactionModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="transactionModalLabel">@lang('Bid Details')</h5>
                    <button type="button" class="close btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <ul class="list-group list-group--custom">
                        <li class="list-group-item">
                            <span>@lang('Domain Name')</span>
                            <strong class="domain_name value"></strong>
                        </li>
                        <li class="list-group-item">
                            <span>@lang('Domain Price')</span>
                            <strong class="domain_price value"></strong>
                        </li>
                        <li class="list-group-item">
                            <span>@lang('Bid Offer')</span>
                            <strong class="bid_price value"></strong>
                        </li>

                        <li class="list-group-item">
                            <span>@lang('Auction End')</span>
                            <strong class="auction_end value"></strong>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    @endsection



    @push('script')
        <script>
            (function($) {
                "use strict";
                $('.detailBtn').on('click', function() {
                    var modal = $('#detailModal');
                    modal.find('.domain_name').text($(this).data('domain_name'));
                    modal.find('.domain_price').text($(this).data('domain_price'));
                    modal.find('.bid_price').text($(this).data('offer_price'));
                    modal.find('.auction_end').text($(this).data('end_time'));
                    modal.modal('show');
                });
            })(jQuery);
        </script>
    @endpush
