@extends('Template::layouts.master')
@section('content')
    <div class="dashboard-body">
        <div class="text-end mb-4">
            <a class="btn btn--sm btn--base-two" href="{{ route('user.auction.create') }}">
                <span class="btn__text">@lang('Create Auction')</span>
                <span class="btn__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-arrow-up-right-icon lucide-arrow-up-right">
                        <path d="M7 7h10v10"></path>
                        <path d="M7 17 17 7"></path>
                    </svg>
                </span>
            </a>
        </div>
        <div class="data-table">
            <div class="data-table__header">
                <h6 class="data-table__title">
                    {{ __($pageTitle) }}
                </h6>
            </div>
            <div class="data-table__body">
                @if (!$domains->isEmpty())
                    <div class="table--responsive">
                        <table class="table table--custom table--responsive-md">
                            <thead>
                                <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>
                            </thead>
                            <tbody>
                                @foreach ($domains as $domain)
                                    <tr>
                                        <td data-label="Domain">
                                            <a href="{{ route('domain.detail', ['id' => $domain->id, 'name' => slug($domain->name)]) }}"
                                                class="domain-name">
                                                {{ __($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($domain->price) }}
                                        </td>
                                        <td data-label="Total Bids">{{ $domain->bids_count }}</td>
                                        <td data-label="End Date">
                                            <span data-countdown = "{{ $domain->end_time }}" data-title="@lang('The auction end')">
                                            </span>
                                        </td>
                                        <td data-label="Status">
                                            @php
                                                echo $domain->statusText;
                                            @endphp

                                            @if ($domain->status == 0 && $domain->verify_code)
                                                <button class="btn-info btn-rounded badge verifyStatus"
                                                    data-verify_code="{{ $domain->verify_code }}"
                                                    data-verify_detail="{{ $domain->verify_detail }}"><i
                                                        class="fa fa-info"></i>
                                            @endif

                                            @if ($domain->admin_feedback)
                                                <button class="btn-info btn-rounded badge feedbackBtn"
                                                    data-admin_feedback="{{ $domain->admin_feedback }}">
                                                    <i class="fa fa-info"></i>
                                                </button>
                                            @endif
                                            </button>
                                        </td>
                                        <td data-label="Action">
                                            <div class="d-flex align-items-center justify-content-end gap-2">
                                                <a href="{{ route('user.auction.edit', $domain->id) }}"
                                                    class="btn btn--icon btn--sm btn--success">
                                                    <i class="las la-edit" data-bs-toggle="tooltip" data-bs-position="top"
                                                        aria-label="Edit" data-bs-original-title="Edit"></i>
                                                </a>
                                                @if ($domain->status == 0 && $domain->verify_code != null)
                                                    <a href="{{ route('user.auction.file.download', $domain->id) }}"
                                                        data-bs-toggle="tooltip" data-bs-position="top"
                                                        title="@lang('Download')" class="btn btn--icon btn--sm btn--dark">
                                                        <i class="las la-download"></i>
                                                    </a>
                                                @else
                                                    <a href="javascript:void(0)" data-bs-toggle="tooltip"
                                                        data-bs-position="top" title="@lang('Download')"
                                                        class="btn btn--icon btn--sm btn--dark" disabled="disabled">
                                                        <i class="las la-download"></i>
                                                    </a>
                                                @endif
                                                <a href="{{ route('user.contact.seller.owner.message', $domain->id) }}"
                                                    @if ($domain->status != 1) disabled="disabled" @endif
                                                    class="btn btn--icon btn--sm btn--primary">
                                                    <i class="las la-comment" data-bs-toggle="tooltip"
                                                        data-bs-position="top" aria-label="View Message"
                                                        data-bs-original-title="@lang('View Message')">
                                                    </i>
                                                    @if ($domain->contact_messages_count > 0)
                                                        <span class="has-notification"></span>
                                                    @endif
                                                </a>
                                                <a href="{{ route('user.bid.details', $domain->id) }}"
                                                    class="btn btn--icon btn--sm btn--warning">
                                                    <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>
                                                    @if ($domain->bids_count > 0)
                                                        <span class="has-notification"></span>
                                                    @endif
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    @include('Template::partials.data_not_found', ['data' => 'No Auction Found'])
                @endif
            </div>
        </div>
        @if ($domains->hasPages())
            <div class="pagination-wrapper">
                {{ paginateLinks($domains) }}
            </div>
        @endif
    </div>

    <div id="detailModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Details')</h5>
                    <button type="button" class="close btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="auction-detail"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="verifyModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Details')</h5>
                    <button type="button" class="close btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="verify-code"></div>
                    <div class="verify-detail"></div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('style')
    <style>
        .has-notification {
            position: relative;
        }

        .has-notification::after {
            position: absolute;
            content: '';
            top: -17px;
            right: -8px;
            width: 13px;
            height: 13px;
            border: 2px solid #fff;
            background-color: red;
            border-radius: 50%;
        }

        a[disabled="disabled"] {
            pointer-events: none;
            opacity: .5;
        }
    </style>
@endpush
@push('script')
    <script>
        "use script";
        $('.feedbackBtn').on('click', function() {
            var modal = $('#detailModal');
            var feedback = $(this).data('admin_feedback');
            modal.find('.auction-detail').html(`<p> ${feedback} </p>`);
            modal.modal('show');
        });
        $('.verifyStatus').on('click', function() {
            var modal = $('#verifyModal');
            var verify_code = $(this).data('verify_code');
            var verify_detail = $(this).data('verify_detail');
            modal.find('.verify-code').html(`<h4 class="mb-3"> Domain Verification Code : ${verify_code} </h4>`);
            modal.find('.verify-detail').html(`<p> ${verify_detail} </p>`);
            modal.modal('show');
        });
    </script>
@endpush
