@extends('layouts.admin.app')

@section('title', 'My Event Auction')

@push('style')
@endpush

@section('content')
    <div class="upcoming_auction_detail users_list">
        @include('admin.layouts.alert')

        <div class="breadcrumb">
            <a href="{{ route('admin.dashboard.index') }}">Dashboard</a>
            <span>›</span>
            <a href="{{ route('admin.leagues.index') }}">Auction Events</a>
            <span>›</span>
            <span class="active">Create League</span>
        </div>
        <div class="feed_management">
            <div class="card">

                <!-- Header -->
                <div class="card-header">
                    <h2 class="card-title">Create New league</h2>
                    <button type="button" class="btn btn-outline-green btn-sm">View Rules</button>
                </div>

                <hr class="divider">

                <!-- Body -->
                <div class="card-body">

                    <!-- Duplicate Event -->
                    <form id="duplicateEventForm" action="{{ route('admin.leagues.duplicate') }}" method="POST" novalidate>
                        @csrf
                        <div class="field-group">
                            <label class="field-label" for="dupEventSelect">Duplicate Event</label>
                            <div class="duplicate-row">
                                <div class="input-icon-wrap input-icon-wrap--fixed">
                                    <select id="dupEventSelect" name="league_id" class="select" required>
                                        <option value="" selected>Select Event</option>
                                        @foreach ($leagues as $league)
                                            <option value="{{ $league->id }}" @selected(old('league_id') == $league->id)>{{ $league->name }}</option>
                                        @endforeach
                                    </select>
                                    <span class="input-icon" aria-hidden="true">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <polyline points="6 9 12 15 18 9"></polyline>
                                        </svg>
                                    </span>
                                </div>
                                <button id="duplicateBtn" type="submit"
                                    class="btn btn-outline-border btn-md">Duplicate</button>
                            </div>
                            <span id="dupEventError" class="field-error" style="display:none; color:#f87171; font-size:12px; margin-top:6px;">Please select an event to duplicate.</span>
                        </div>
                    </form>

                    <!-- Create New Event -->
                    <div class="field-group">
                        <label class="field-label">Create New Event</label>
                        <div>
                            <a href="{{ route('admin.leagues.create') }}" class="btn btn-filled-green btn-md">Create New Event</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
<script>
    document.getElementById('duplicateEventForm').addEventListener('submit', function (e) {
        var select = document.getElementById('dupEventSelect');
        var error = document.getElementById('dupEventError');

        if (!select.value) {
            e.preventDefault();
            error.style.display = 'block';
            select.focus();
            return;
        }

        error.style.display = 'none';
    });

    document.getElementById('dupEventSelect').addEventListener('change', function () {
        document.getElementById('dupEventError').style.display = 'none';
    });
</script>
@endpush