@extends('layouts.admin.app')

@section('title', 'Create Feed')
@push('style')
<style>
    .feed_management #media-preview-img,
    .feed_management #media-preview-video {
        width: 100%;
        max-width: 380px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        background: #000;
        border-radius: 12px;
        display: none;
        margin-bottom: 12px;
    }
    .feed_management .card-footer {
        gap: 12px;
        flex-wrap: wrap;
    }
    .feed_management .select:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .feed_management #offer-preview-img {
        width: 100%;
        max-width: 520px;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        background: #000;
        border-radius: 12px;
        display: none;
        margin-bottom: 12px;
    }
    .feed_management .switch-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .feed_management .switch-row .field-label {
        margin: 0;
        cursor: pointer;
    }
    .feed_management .feed-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        flex: none;
        cursor: pointer;
    }
    .feed_management .feed-switch input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
    .feed_management .feed-switch__track {
        display: inline-block;
        width: 44px;
        height: 24px;
        background: #2b2b2b;
        border-radius: 999px;
        position: relative;
        transition: background 0.2s;
    }
    .feed_management .feed-switch__thumb {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 18px;
        height: 18px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.2s;
    }
    .feed_management .feed-switch input:checked + .feed-switch__track {
        background: var(--green);
    }
    .feed_management .feed-switch input:checked + .feed-switch__track .feed-switch__thumb {
        transform: translateX(20px);
    }
    .feed_management .feed-switch input:focus-visible + .feed-switch__track {
        outline: 2px solid var(--green);
        outline-offset: 2px;
    }
    .feed_management .offer-fields {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }
    .feed_management .offer-fields .field-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    @media (max-width: 768px) {
        .feed_management .offer-fields .field-row {
            grid-template-columns: 1fr;
        }
    }
    .feed_management .offer-fields[hidden],
    .feed_management #offerMedia[hidden] {
        display: none;
    }
    /* The left column is much taller than the right; without this the upload
       areas stretch to match it instead of keeping their own proportions. */
    .feed_management .form-right {
        align-self: start;
    }
    .feed_management .form-right .upload-area {
        flex: none;
        width: 100%;
        min-height: 0;
    }
    /* Post media is square; the offer background is a wide banner. max-width
       keeps both ratios sane once the grid collapses to a single column. */
    .feed_management #dropZone {
        aspect-ratio: 1 / 1;
        max-width: 380px;
    }
    .feed_management #offerDropZone {
        aspect-ratio: 16 / 9;
        max-width: 520px;
    }
    .feed_management .error-message {
        color: #ef4444;
        font-size: 13px;
        margin-top: 6px;
        margin-bottom: 0;
    }
    .feed_management .input.is-invalid,
    .feed_management .upload-area.is-invalid {
        border-color: #ef4444 !important;
        background-color: rgba(239, 68, 68, 0.05);
    }
</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.posts.index') }}">Feed Management</a>
        <span>›</span>
        <span class="active">Create New Post</span>
    </div>

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

            <div class="card-header">
                <h2 class="card-title">Create New Post</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="league_id">League Association</label>
                        <div class="input-icon-wrap">
                            <select name="league_id" id="league_id" class="select" required>
                                <option value="">Select league</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>
                    </div>

                    <div class="field-group">
                        <label class="field-label" for="sponsor_id">Sponsor</label>
                        <div class="input-icon-wrap">
                            <select name="sponsor_id" id="sponsor_id" class="select" disabled>
                                <option value="">Select league first</option>
                            </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-group">
                        <label class="field-label" for="media_type">Media Type</label>
                        <div class="input-icon-wrap">
                            <select name="media_type" id="media_type" class="select" required>
                                <option value="">Select type</option>
                                <option value="1" @selected(old('media_type') == 1)>Image</option>
                                <option value="2" @selected(old('media_type') == 2)>Video</option>
                            </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-group">
                        <label class="field-label" for="content">Description</label>
                        <textarea name="content" id="content" class="textarea" rows="4" required placeholder="Write a short summary or caption...">{{ old('content') }}</textarea>
                    </div>

                    <hr class="divider">

                    <div class="field-group">
                        <div class="switch-row">
                            <input type="hidden" name="is_sponsored" value="0">
                            <label class="feed-switch" for="is_sponsored">
                                <input type="checkbox" name="is_sponsored" id="is_sponsored" value="1"
                                    role="switch" @checked(old('is_sponsored') == 1)>
                                <span class="feed-switch__track"><span class="feed-switch__thumb"></span></span>
                            </label>
                            <label class="field-label" for="is_sponsored">Mark this post as sponsored</label>
                        </div>
                    </div>

                    <div class="field-group">
                        <div class="switch-row">
                            <input type="hidden" name="is_offers" value="0">
                            <label class="feed-switch" for="is_offers">
                                <input type="checkbox" name="is_offers" id="is_offers" value="1"
                                    role="switch" @checked(old('is_offers') == 1)>
                                <span class="feed-switch__track"><span class="feed-switch__thumb"></span></span>
                            </label>
                            <label class="field-label" for="is_offers">Attach a sponsor offer to this post</label>
                        </div>
                    </div>

                    <div id="offerFields" class="offer-fields" @if(old('is_offers') != 1) hidden @endif>
                        <div class="field-group">
                            <label class="field-label" for="offer_title">Offer Title</label>
                            <input type="text" name="offer_title" id="offer_title" class="input @error('offer_title') is-invalid @enderror" maxlength="100"
                                placeholder="DREAM HOME OFFER" value="{{ old('offer_title') }}">
                            @error('offer_title')
                                <p class="error-message">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field-group">
                            <label class="field-label" for="offer_subtitle">Offer Subtitle</label>
                            <input type="text" name="offer_subtitle" id="offer_subtitle" class="input @error('offer_subtitle') is-invalid @enderror" maxlength="255"
                                placeholder="Get $5,000 off by redeeming" value="{{ old('offer_subtitle') }}">
                            @error('offer_subtitle')
                                <p class="error-message">{{ $message }}</p>
                            @enderror
                        </div>

                        <div class="field-row">
                            <div class="field-group">
                                <label class="field-label" for="offer_points">Reward Points</label>
                                <input type="number" name="offer_points" id="offer_points" class="input @error('offer_points') is-invalid @enderror" min="0"
                                    placeholder="2000" value="{{ old('offer_points') }}">
                                @error('offer_points')
                                    <p class="error-message">{{ $message }}</p>
                                @else
                                    <p class="upload-hint">Shown highlighted after the subtitle, e.g. "…redeeming <strong>2,000</strong> reward points". Display only.</p>
                                @enderror
                            </div>

                            <div class="field-group">
                                <label class="field-label" for="discount_amount">Discount Amount</label>
                                <input type="number" name="discount_amount" id="discount_amount" class="input @error('discount_amount') is-invalid @enderror" min="0" step="0.01"
                                    placeholder="500.00" value="{{ old('discount_amount') }}">
                                @error('discount_amount')
                                    <p class="error-message">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="field-row">
                            <div class="field-group">
                                <label class="field-label" for="offer_color_code">Offer Color Code</label>
                                <input type="color" name="offer_color_code" id="offer_color_code" class="input"
                                    value="{{ old('offer_color_code', '#7C3AED') }}">
                            </div>

                            <div class="field-group">
                                <label class="field-label" for="text_color">Text Color</label>
                                <input type="color" name="text_color" id="text_color" class="input"
                                    value="{{ old('text_color', '#FFFFFF') }}">
                            </div>
                        </div>

                        <div class="field-row">
                            <div class="field-group">
                                <label class="field-label" for="cta_text">CTA Text</label>
                                <input type="text" name="cta_text" id="cta_text" class="input" maxlength="100"
                                    placeholder="Claim Offer" value="{{ old('cta_text') }}">
                            </div>

                            <div class="field-group">
                                <label class="field-label" for="cta_url">CTA URL</label>
                                <input type="url" name="cta_url" id="cta_url" class="input" maxlength="255"
                                    placeholder="https://example.com" value="{{ old('cta_url') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-right">
                    <div class="field-group">
                        <label class="field-label">Media Content</label>
                        <img id="media-preview-img" alt="">
                        <video id="media-preview-video" controls></video>
                        <div id="dropZone" class="upload-area @error('media') is-invalid @enderror" tabindex="0" role="button" aria-label="Upload media">
                            <div class="upload-icon" aria-hidden="true">
                                <svg width="44" height="44" 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="uploadTitle">Drag &amp; Drop media here</p>
                            <p class="upload-hint" id="uploadHint">Image or video up to 100MB</p>
                            <p class="upload-file" id="uploadFile" style="display:none;"></p>
                            <input type="file" name="media" id="media" accept="image/*,video/*" required hidden>
                        </div>
                        @error('media')
                            <p class="error-message">{{ $message }}</p>
                        @enderror
                    </div>

                    <div id="offerMedia" class="field-group" @if(old('is_offers') != 1) hidden @endif>
                        <label class="field-label">Offer Background Image</label>
                        <img id="offer-preview-img" alt="">
                        <div id="offerDropZone" class="upload-area @error('offer_image') is-invalid @enderror" tabindex="0" role="button" aria-label="Upload offer background image">
                            <div class="upload-icon" aria-hidden="true">
                                <svg width="44" height="44" 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="offerUploadTitle">Drag &amp; Drop offer image here</p>
                            <p class="upload-hint" id="offerUploadHint">JPG, PNG or WebP up to 5MB</p>
                            <p class="upload-file" id="offerUploadFile" style="display:none;"></p>
                            <input type="file" name="offer_image" id="offer_image" accept="image/jpeg,image/png,image/webp" hidden>
                        </div>
                        @error('offer_image')
                            <p class="error-message">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" name="status" value="1" class="btn btn-filled-green btn-md">Create Post</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('script')
<script>
const sponsorsUrl = @json(route('admin.posts.sponsors'));
const selectedSponsorId = @json(old('sponsor_id'));

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

document.getElementById('league_id').addEventListener('change', function () {
    const select = document.getElementById('sponsor_id');
    if (!this.value) {
        select.innerHTML = '<option value="">Select league first</option>';
        select.disabled = true;
        select.classList.remove('has-value');
        return;
    }
    fetch(sponsorsUrl + '?league_id=' + this.value)
        .then(r => r.json())
        .then(data => {
            select.innerHTML = '<option value="">Select sponsor (optional)</option>';
            (data.sponsors || []).forEach(s => {
                const sel = selectedSponsorId == s.id ? ' selected' : '';
                select.innerHTML += `<option value="${s.id}"${sel}>${s.company_name}</option>`;
            });
            select.disabled = false;
            select.classList.toggle('has-value', !!select.value);
        });
});

if (document.getElementById('league_id').value) {
    document.getElementById('league_id').dispatchEvent(new Event('change'));
}

function initDropZone({ zoneId, inputId, titleId, hintId, fileId, onFile }) {
    const dropZone = document.getElementById(zoneId);
    const input = document.getElementById(inputId);
    if (!dropZone || !input) return;

    const uploadTitle = document.getElementById(titleId);
    const uploadHint = document.getElementById(hintId);
    const uploadFile = document.getElementById(fileId);

    function showUploadFileName(file) {
        if (!file) return;
        if (uploadTitle) uploadTitle.style.display = 'none';
        if (uploadHint) uploadHint.style.display = 'none';
        if (uploadFile) {
            uploadFile.style.display = 'block';
            uploadFile.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'));
        }
    });

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

        showUploadFileName(file);

        if (previewUrl) URL.revokeObjectURL(previewUrl);
        previewUrl = URL.createObjectURL(file);
        onFile(file, previewUrl);
    });
}

initDropZone({
    zoneId: 'dropZone',
    inputId: 'media',
    titleId: 'uploadTitle',
    hintId: 'uploadHint',
    fileId: 'uploadFile',
    onFile: (file, url) => {
        const img = document.getElementById('media-preview-img');
        const video = document.getElementById('media-preview-video');
        if (file.type.startsWith('video/')) {
            img.style.display = 'none';
            video.src = url;
            video.style.display = 'block';
        } else {
            video.style.display = 'none';
            video.removeAttribute('src');
            img.src = url;
            img.style.display = 'block';
        }
    },
});

initDropZone({
    zoneId: 'offerDropZone',
    inputId: 'offer_image',
    titleId: 'offerUploadTitle',
    hintId: 'offerUploadHint',
    fileId: 'offerUploadFile',
    onFile: (file, url) => {
        const img = document.getElementById('offer-preview-img');
        img.src = url;
        img.style.display = 'block';
    },
});

const offerToggle = document.getElementById('is_offers');
const offerFields = document.getElementById('offerFields');
const offerMedia = document.getElementById('offerMedia');
const offerTitleInput = document.getElementById('offer_title');
const offerSubtitleInput = document.getElementById('offer_subtitle');
const offerPointsInput = document.getElementById('offer_points');
const discountAmountInput = document.getElementById('discount_amount');
const offerImageInput = document.getElementById('offer_image');

function syncOfferVisibility() {
    const on = offerToggle.checked;
    offerFields.hidden = !on;
    offerMedia.hidden = !on;

    // Update required attribute based on toggle state
    [offerTitleInput, offerSubtitleInput, offerPointsInput, discountAmountInput, offerImageInput].forEach(input => {
        if (on) {
            input.setAttribute('required', '');
        } else {
            input.removeAttribute('required');
        }
    });
}

offerToggle.addEventListener('change', syncOfferVisibility);
syncOfferVisibility();
</script>
@endpush