@extends('layouts.admin.app')

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

@push('style')
<style>
    .feed_management .upload-area {
        min-height: 140px;
    }
    .feed_management #logo-preview,
    .feed_management #banner-preview {
        display: none;
        width: 160px;
        height: 160px;
        object-fit: cover;
        border-radius: 12px;
        border: 1px solid var(--input-border);
        margin-bottom: 12px;
    }

    /* Native date/time pickers — recolor the indicator so it's visible on the dark input */
    .feed_management .input[type="date"],
    .feed_management .input[type="time"] {
        color-scheme: dark;
    }
    .feed_management .input[type="date"]::-webkit-calendar-picker-indicator,
    .feed_management .input[type="time"]::-webkit-calendar-picker-indicator {
        filter: invert(1) brightness(1.6);
        opacity: 0.75;
        cursor: pointer;
        padding: 4px;
        border-radius: 6px;
    }
    .feed_management .input[type="date"]::-webkit-calendar-picker-indicator:hover,
    .feed_management .input[type="time"]::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.08);
    }
</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>
        <a href="{{ route('admin.create.league') }}">Create League</a>
        <span>›</span>
        <span class="active">Create New Event</span>
    </div>

    <div class="feed_management">
        <form action="{{ route('admin.leagues.store') }}" method="POST" enctype="multipart/form-data" class="card">
            @csrf

            <div class="card-header">
                <h2 class="card-title">Create New Event</h2>
            </div>

            <hr class="divider">

            <div class="card-body card-body--split">
                <div class="form-left">
                    <div class="field-group">
                        <label class="field-label" for="name">Event Name</label>
                        <input type="text" name="name" id="name" class="input" required maxlength="255"
                            value="{{ old('name') }}" placeholder="Enter event name">
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="short_name">Short Name</label>
                        <input type="text" name="short_name" id="short_name" class="input" maxlength="50"
                            value="{{ old('short_name') }}" placeholder="e.g. ICL">
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="sport_category_id">Sport Category</label>
                        <div class="input-icon-wrap">
                            <select name="sport_category_id" id="sport_category_id" class="select" required>
                                <option value="">Select sport category</option>
                                @foreach ($sportCategories as $category)
                                    <option value="{{ $category->id }}" @selected(old('sport_category_id') == $category->id)>{{ $category->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>
                    </div>

                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label" for="season">Season</label>
                            <input type="text" name="season" id="season" class="input" required maxlength="50"
                                value="{{ old('season') }}" placeholder="e.g. 2026">
                        </div>
                        <div class="field-group">
                            <label class="field-label" for="location">Location / Venue</label>
                            <input type="text" name="location" id="location" class="input" maxlength="255"
                                value="{{ old('location') }}" placeholder="Auckland, NZ">
                        </div>
                    </div>

                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label" for="registration_start">Registration Start</label>
                            <input type="date" name="registration_start" id="registration_start" class="input"
                                value="{{ old('registration_start') }}">
                        </div>
                        <div class="field-group">
                            <label class="field-label" for="registration_end">Registration End</label>
                            <input type="date" name="registration_end" id="registration_end" class="input"
                                value="{{ old('registration_end') }}">
                        </div>
                    </div>

                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label" for="auction_date">Auction Date</label>
                            <input type="date" name="auction_date" id="auction_date" class="input"
                                value="{{ old('auction_date') }}">
                        </div>
                        <div class="field-group">
                            <label class="field-label" for="auction_code">Auction Code</label>
                            <input type="text" name="auction_code" id="auction_code" class="input" maxlength="50"
                                value="{{ old('auction_code') }}" placeholder="e.g. ICL-001">
                        </div>
                    </div>

                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label" for="auction_start_time">Auction Start Time (NZT)</label>
                            <input type="time" name="auction_start_time" id="auction_start_time" class="input"
                                value="{{ old('auction_start_time') }}">
                        </div>
                        <div class="field-group">
                            <label class="field-label" for="auction_end_time">Auction End Time (NZT)</label>
                            <input type="time" name="auction_end_time" id="auction_end_time" class="input"
                                value="{{ old('auction_end_time') }}">
                        </div>
                    </div>

                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label" for="league_start_date">League Start Date</label>
                            <input type="date" name="league_start_date" id="league_start_date" class="input"
                                value="{{ old('league_start_date') }}">
                        </div>
                        <div class="field-group">
                            <label class="field-label" for="league_end_date">League End Date</label>
                            <input type="date" name="league_end_date" id="league_end_date" class="input"
                                value="{{ old('league_end_date') }}">
                        </div>
                    </div>

                    <div class="field-row">
                        <div class="field-group">
                            <label class="field-label" for="team_points">Team ICL Coins</label>
                            <input type="number" name="team_points" id="team_points" class="input" min="0"
                                value="{{ old('team_points', 0) }}">
                        </div>
                        <div class="field-group">
                            <label class="field-label" for="minimum_bid">Minimum Bid</label>
                            <input type="number" name="minimum_bid" id="minimum_bid" class="input" min="0"
                                value="{{ old('minimum_bid', 0) }}">
                        </div>
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="bid_increase">Bid Increase</label>
                        <input type="number" name="bid_increase" id="bid_increase" class="input" min="0"
                            value="{{ old('bid_increase', 0) }}">
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="description">Description</label>
                        <textarea name="description" id="description" class="textarea" rows="4"
                            placeholder="Write a short summary or caption...">{{ old('description') }}</textarea>
                    </div>
                </div>

                <div class="form-right">
                    <div class="field-group">
                        <label class="field-label">Logo</label>
                        <img id="logo-preview" alt="">
                        <div id="logoDropZone" class="upload-area" tabindex="0" role="button" aria-label="Upload logo">
                            <div class="upload-icon" aria-hidden="true">
                                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M17.5 19a4.5 4.5 0 0 0 0-9 6 6 0 0 0-11.7 1.5A4 4 0 0 0 6 19h11.5z" />
                                    <polyline points="9 13 12 10 15 13" />
                                    <line x1="12" y1="10" x2="12" y2="17" />
                                </svg>
                            </div>
                            <p class="upload-title" id="logoUploadTitle">Drag &amp; Drop logo here</p>
                            <p class="upload-hint" id="logoUploadHint">PNG, JPG up to 5MB</p>
                            <p class="upload-file" id="logoUploadFile" style="display:none;"></p>
                            <input type="file" name="logo" id="logo" accept="image/png,image/jpeg" hidden>
                        </div>
                    </div>

                    <div class="field-group">
                        <label class="field-label">Banner</label>
                        <img id="banner-preview" alt="">
                        <div id="bannerDropZone" class="upload-area" tabindex="0" role="button" aria-label="Upload banner">
                            <div class="upload-icon" aria-hidden="true">
                                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M17.5 19a4.5 4.5 0 0 0 0-9 6 6 0 0 0-11.7 1.5A4 4 0 0 0 6 19h11.5z" />
                                    <polyline points="9 13 12 10 15 13" />
                                    <line x1="12" y1="10" x2="12" y2="17" />
                                </svg>
                            </div>
                            <p class="upload-title" id="bannerUploadTitle">Drag &amp; Drop banner here</p>
                            <p class="upload-hint" id="bannerUploadHint">PNG, JPG up to 5MB</p>
                            <p class="upload-file" id="bannerUploadFile" style="display:none;"></p>
                            <input type="file" name="banner" id="banner" accept="image/png,image/jpeg" hidden>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <a href="{{ route('admin.create.league') }}" class="btn btn-outline-purple btn-md">Cancel</a>
                <button type="submit" class="btn btn-filled-green btn-md">Create Event</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<script>
document.querySelectorAll('.feed_management .select').forEach(sel => {
    const sync = () => sel.classList.toggle('has-value', !!sel.value);
    sel.addEventListener('change', sync);
    sync();
});

function setupUpload(dropZoneId, inputId, titleId, hintId, fileId, previewId) {
    const dropZone = document.getElementById(dropZoneId);
    const input = document.getElementById(inputId);
    const title = document.getElementById(titleId);
    const hint = document.getElementById(hintId);
    const fileLabel = document.getElementById(fileId);
    const preview = document.getElementById(previewId);
    let previewUrl = null;

    function showFileName(file) {
        if (!file) return;
        if (title) title.style.display = 'none';
        if (hint) hint.style.display = 'none';
        if (fileLabel) {
            fileLabel.style.display = 'block';
            fileLabel.textContent = `${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
        }
    }

    dropZone.addEventListener('click', () => input.click());
    dropZone.addEventListener('keydown', e => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            input.click();
        }
    });

    ['dragenter', 'dragover'].forEach(ev =>
        dropZone.addEventListener(ev, e => { e.preventDefault(); dropZone.classList.add('drag-over'); })
    );
    ['dragleave', 'drop'].forEach(ev =>
        dropZone.addEventListener(ev, e => { e.preventDefault(); dropZone.classList.remove('drag-over'); })
    );
    dropZone.addEventListener('drop', e => {
        const f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];
        if (f) {
            input.files = e.dataTransfer.files;
            input.dispatchEvent(new Event('change'));
        }
    });

    input.addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;

        showFileName(file);

        if (previewUrl) URL.revokeObjectURL(previewUrl);
        previewUrl = URL.createObjectURL(file);
        preview.src = previewUrl;
        preview.style.display = 'block';
    });
}

setupUpload('logoDropZone', 'logo', 'logoUploadTitle', 'logoUploadHint', 'logoUploadFile', 'logo-preview');
setupUpload('bannerDropZone', 'banner', 'bannerUploadTitle', 'bannerUploadHint', 'bannerUploadFile', 'banner-preview');
</script>
@endpush