@extends('Template::layouts.master')
@section('content')
    <div class="dashboard-body">
        <div class="data-table">
            <div class="data-table__header">
                <h6 class="data-table__title">
                    {{ __($pageTitle) }}
                </h6>
            </div>
            <div class="data-table__body">
                @if (!$domainBid->isEmpty())
                    <div class="table--responsive">
                        <table class="table table--custom tale--responsive-md">
                            <thead>
                                <tr>
                                    <th>@lang('Name')</th>
                                    <th>@lang('Price')</th>
                                    <th>@lang('Ends')</th>
                                    <th>@lang('Win Status')</th>
                                    <th>@lang('Status')</th>
                                    <th>@lang('Action')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($domainBid as $bid)
                                    <tr>
                                        <td data-label="Name">
                                            <a class="domain-name" href="{{ route('domain.detail', ['id' => $bid->domain?->id, 'name' => slug($bid->domain?->name)]) }}">
                                                {{ __($bid?->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>
                                                    <path d="m21 3-9 9"></path>
                                                    <path d="M15 3h6v6"></path>
                                                </svg>
                                            </a>
                                        </td>
                                        <td data-label="Price">
                                            {{ showAmount(@$bid?->domain?->price ?? '') }}
                                        </td>
                                        <td data-label="Ends">
                                            <span data-countdown="{{ $bid?->domain?->end_time ?? '' }}" data-title="@lang('This auction ended')"></span>
                                        </td>
                                        <td data-label="Win Status">
                                            @if ($bid->win_status == 1)
                                                <span class="badge badge--success">@lang('Win')</span>
                                            @elseif($bid->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="Status">
                                            @php
                                                echo $bid->statusText;
                                            @endphp
                                        </td>
                                        <td data-label="Action">
                                            @if ($bid->win_status == 1)
                                                <a href="{{ route('user.bid.conversation', ['id' => $bid->id, 'domain_id' => $bid?->domain?->id]) }}" class="btn btn--icon btn--sm btn--base-two">
                                                    <i class="fas fa-desktop" data-bs-toggle="tooltip" data-bs-position="top" aria-label="View Details" data-bs-original-title="@lang('View Details')"></i>
                                                </a>
                                            @else
                                                <button class="btn btn--icon btn--sm btn--base-two approveBtn" data-offer_price="{{ showAmount($bid->price) }}" data-domain_name="{{ __($bid?->domain?->name ?? '') }}" data-domain_price="{{ showAmount($bid?->domain?->price ?? '') }}" data-end_time="{{ $bid?->domain?->end_time ?? '' }}">
                                                    <i class="fas fa-desktop" data-bs-toggle="tooltip" data-bs-position="top" title="@lang('View Details')"></i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    @include('Template::partials.data_not_found', ['data' => 'No Bids Found'])
                @endif
            </div>
        </div>
        @if ($domainBid->hasPages())
            <div class="pagination-wrapper">
                {{ paginateLinks($domainBid) }}
            </div>
        @endif
    </div>

    <div class="modal custom--modal fade" id="approveModal" 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>
    </div>
@endsection
@push('style')
    <style>
        .has-notification {
            position: relative;
        }

        .has-notification::after {
            position: absolute;
            content: '';
            top: -24px;
            right: -12px;
            width: 13px;
            height: 13px;
            border: 2px solid #fff;
            background-color: red;
            border-radius: 50%;
        }
    </style>
@endpush

@push('script')
    <script>
        (function($) {
            "use strict";
            $('.approveBtn').on('click', function() {
                var modal = $('#approveModal');
                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
