@extends('layout')
@section('title')
    <title>{{ __('translate.Promote listing') }} - {{ $listing->title }}</title>
@endsection

@section('body-content')
<main>
    <section class="dashboard footer-top-pad listing-promotion-manage">
        <div class="container">
            <div class="row">
                @include('profile.sidebar')

                <div class="col-xxl-9 col-xl-8 col-lg-8">
                    <div class="listing-promotion-manage__hero {{ $listing->thumb_image ? '' : 'listing-promotion-manage__hero--no-media' }}">
                        @if ($listing->thumb_image)
                            <div class="listing-promotion-manage__hero-media">
                                <img src="{{ custom_asset($listing->thumb_image, '420x315') }}" alt="{{ $listing->title }}">
                            </div>
                        @endif
                        <div class="listing-promotion-manage__hero-body">
                            <div class="listing-promotion-manage__hero-top">
                                <div>
                                    <p class="listing-promotion-manage__page-label">{{ __('translate.Promote listing') }}</p>
                                    <h2 class="listing-promotion-manage__listing-title">{{ $listing->title }}</h2>
                                    <div class="listing-promotion-manage__listing-meta">
                                        @if ($listing->sub_category)
                                            <span class="listing-promotion-manage__category">
                                                <i class="fas fa-tag" aria-hidden="true"></i>
                                                {{ $listing->sub_category->name }}
                                            </span>
                                        @endif
                                        @if ($listing->regular_price)
                                            <span class="listing-promotion-manage__price">{{ currency($listing->regular_price) }}</span>
                                        @endif
                                    </div>
                                </div>
                                <a href="{{ route('user.listing.index') }}" class="listing-promotion-manage__back">
                                    <i class="fas fa-arrow-left" aria-hidden="true"></i>
                                    {{ __('translate.Back to my listings') }}
                                </a>
                            </div>
                            <p class="listing-promotion-manage__intro">{{ __('translate.Promotion manage intro') }}</p>
                        </div>
                    </div>

                    @if (!$active_plan)
                        <div class="alert alert-warning mb-4" role="alert">
                            {{ __('translate.Please enroll first') }}
                            <a href="{{ route('pricing-plan') }}">{{ __('translate.Subscription Plan') }}</a>
                        </div>
                    @endif

                    @php
                        $typeIcons = [
                            \App\Enums\ListingPromotionType::SEARCH_HOME => 'fa-magnifying-glass',
                            \App\Enums\ListingPromotionType::BANNER_SLIDER => 'fa-panorama',
                            \App\Enums\ListingPromotionType::EMAIL_BANNER => 'fa-envelope',
                            \App\Enums\ListingPromotionType::LISTING_REFRESH => 'fa-rotate',
                            \App\Enums\ListingPromotionType::DASHBOARD_BANNER => 'fa-rectangle-ad',
                            \App\Enums\ListingPromotionType::COOKIE_BANNER => 'fa-cookie-bite',
                        ];
                        $hasSelectable = $active_plan && collect($options)->contains(fn ($o) => $o['selectable'] ?? false);
                    @endphp

                    @if ($hasSelectable)
                        <form
                            action="{{ route('user.listing-promotion.activate', $listing->id) }}"
                            method="POST"
                            class="listing-promotion-manage__bulk-form"
                            id="listing-promotion-bulk-form"
                        >
                            @csrf
                            <p class="listing-promotion-manage__bulk-hint">{{ __('translate.Promotion manage bulk hint') }}</p>

                            <div class="row g-4 listing-promotion-manage__grid">
                                @foreach ($options as $option)
                                    @php
                                        $isSelectable = (bool) ($option['selectable'] ?? false);
                                        $inputId = 'promotion_manage_' . $option['type'];
                                    @endphp
                                    <div class="col-lg-4 col-md-6">
                                        <article class="promotion-option-card {{ $option['active'] ? 'is-active' : '' }} {{ $isSelectable ? 'is-selectable' : '' }}">
                                            @if ($isSelectable)
                                                <label class="promotion-option-card__select" for="{{ $inputId }}">
                                                    <input
                                                        type="checkbox"
                                                        class="promotion-option-card__checkbox"
                                                        name="promotions[{{ $option['type'] }}]"
                                                        id="{{ $inputId }}"
                                                        value="1"
                                                        data-promotion-select
                                                        {{ old('promotions.' . $option['type']) ? 'checked' : '' }}
                                                    >
                                                    <span class="promotion-option-card__check" aria-hidden="true"></span>
                                                    <span class="visually-hidden">{{ __($option['label_key']) }}</span>
                                                </label>
                                            @endif

                                            @if ($option['active'])
                                                <div class="promotion-option-card__active-banner">
                                                    <i class="fas fa-circle-check" aria-hidden="true"></i>
                                                    <span>{{ __('translate.Promotion active') }}</span>
                                                </div>
                                            @endif

                                            <div class="promotion-option-card__body">
                                                <div class="promotion-option-card__icon">
                                                    <i class="fas {{ $typeIcons[$option['type']] ?? 'fa-bullhorn' }}" aria-hidden="true"></i>
                                                </div>
                                                <h3 class="promotion-option-card__title">{{ __($option['label_key']) }}</h3>

                                                @if ($option['has_package_slots'])
                                                    <div class="promotion-option-card__quota {{ $option['package_available'] > 0 ? 'has-available' : 'is-full' }}">
                                                        <span class="promotion-option-card__quota-label">{{ __('translate.Promotion slots in plan') }}</span>
                                                        <strong>{{ $option['package_available'] }} / {{ $option['package_limit'] }}</strong>
                                                        <small>{{ __('translate.Promotion slots available hint', ['used' => $option['package_used'], 'total' => $option['package_limit']]) }}</small>
                                                    </div>
                                                @endif

                                                @if ($option['active'] && ($option['can_renew_in_place'] ?? false))
                                                    <p class="promotion-option-card__meta-hint">{{ __('translate.Listing refresh renew hint') }}</p>
                                                @endif

                                                @if ($option['active'])
                                                    <div class="promotion-option-card__expiry">
                                                        <i class="fas fa-clock" aria-hidden="true"></i>
                                                        <div>
                                                            <span class="promotion-option-card__expiry-label">{{ __('translate.Promotion expires') }}</span>
                                                            <strong>{{ $option['expires_remaining'] }}</strong>
                                                            @if ($option['expires_at_formatted'])
                                                                <small>{{ __('translate.Promotion expires on', ['date' => $option['expires_at_formatted']]) }}</small>
                                                            @endif
                                                        </div>
                                                    </div>
                                                @elseif ($isSelectable)
                                                    @include('listing::frontend.partials.listing-promotion-duration-select', ['option' => $option])
                                                @elseif ($option['consumed_on_listing'] ?? false)
                                                    <span class="promotion-option-card__status promotion-option-card__status--muted">{{ __('translate.Listing promotion already used') }}</span>
                                                @elseif ($option['unavailable'] ?? false)
                                                    <span class="promotion-option-card__status promotion-option-card__status--muted">{{ __('translate.Promotion not available') }}</span>
                                                @endif
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                            </div>

                            <div class="listing-promotion-manage__bulk-actions">
                                <button type="submit" class="main-btn listing-promotion-manage__bulk-btn" id="listing-promotion-submit" disabled>
                                    <span>{{ __('translate.Activate selected promotions') }}</span>
                                </button>
                            </div>
                        </form>
                    @else
                        <div class="row g-4 listing-promotion-manage__grid">
                            @foreach ($options as $option)
                                <div class="col-lg-4 col-md-6">
                                    <article class="promotion-option-card {{ $option['active'] ? 'is-active' : '' }}">
                                        @if ($option['active'])
                                            <div class="promotion-option-card__active-banner">
                                                <i class="fas fa-circle-check" aria-hidden="true"></i>
                                                <span>{{ __('translate.Promotion active') }}</span>
                                            </div>
                                        @endif

                                        <div class="promotion-option-card__body">
                                            <div class="promotion-option-card__icon">
                                                <i class="fas {{ $typeIcons[$option['type']] ?? 'fa-bullhorn' }}" aria-hidden="true"></i>
                                            </div>
                                            <h3 class="promotion-option-card__title">{{ __($option['label_key']) }}</h3>

                                            @if ($option['has_package_slots'])
                                                <div class="promotion-option-card__quota {{ $option['package_available'] > 0 ? 'has-available' : 'is-full' }}">
                                                    <span class="promotion-option-card__quota-label">{{ __('translate.Promotion slots in plan') }}</span>
                                                    <strong>{{ $option['package_available'] }} / {{ $option['package_limit'] }}</strong>
                                                    <small>{{ __('translate.Promotion slots available hint', ['used' => $option['package_used'], 'total' => $option['package_limit']]) }}</small>
                                                </div>
                                            @endif

                                            @if ($option['active'])
                                                <div class="promotion-option-card__expiry">
                                                    <i class="fas fa-clock" aria-hidden="true"></i>
                                                    <div>
                                                        <span class="promotion-option-card__expiry-label">{{ __('translate.Promotion expires') }}</span>
                                                        <strong>{{ $option['expires_remaining'] }}</strong>
                                                        @if ($option['expires_at_formatted'])
                                                            <small>{{ __('translate.Promotion expires on', ['date' => $option['expires_at_formatted']]) }}</small>
                                                        @endif
                                                    </div>
                                                </div>
                                            @elseif ($option['consumed_on_listing'] ?? false)
                                                <span class="promotion-option-card__status promotion-option-card__status--muted">{{ __('translate.Listing promotion already used') }}</span>
                                            @elseif ($option['unavailable'] ?? false)
                                                <span class="promotion-option-card__status promotion-option-card__status--muted">{{ __('translate.Promotion not available') }}</span>
                                            @endif
                                        </div>
                                    </article>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
</main>
@include('profile.logout')
@endsection

@push('js_section')
<script>
(function () {
    var form = document.getElementById('listing-promotion-bulk-form');
    if (!form) {
        return;
    }

    var submitBtn = document.getElementById('listing-promotion-submit');
    var checkboxes = form.querySelectorAll('[data-promotion-select]');

    function syncCardState(checkbox) {
        var card = checkbox.closest('.promotion-option-card');
        if (card) {
            card.classList.toggle('is-selected', checkbox.checked);
        }
    }

    function updateSubmitState() {
        var anyChecked = Array.prototype.some.call(checkboxes, function (cb) {
            return cb.checked;
        });
        if (submitBtn) {
            submitBtn.disabled = !anyChecked;
        }
    }

    checkboxes.forEach(function (checkbox) {
        syncCardState(checkbox);
        checkbox.addEventListener('change', function () {
            syncCardState(checkbox);
            updateSubmitState();
        });
    });

    updateSubmitState();
    if (window.initListingPromotionDurationFields) {
        window.initListingPromotionDurationFields(form);
    }
})();
</script>
@include('listing::frontend.partials.listing-promotion-duration-scripts')
@endpush