@extends('layouts.app')

@section('title', 'Create Post - Social Scheduler')

@section('content')
<div class="topbar">
    <h4 class="mb-0 fw-bold"><i class="bi bi-plus-circle me-2 text-primary"></i>Create New Post</h4>
    <a href="{{ route('posts.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back to Posts
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body p-4">
                <form method="POST" action="{{ route('posts.store') }}" enctype="multipart/form-data">
                    @csrf

                    <!-- Content -->
                    <div class="mb-4">
                        <label for="content" class="form-label fw-semibold">
                            <i class="bi bi-chat-left-text me-1"></i>Post Content
                        </label>
                        <textarea class="form-control @error('content') is-invalid @enderror"
                                  id="content" name="content" rows="5" maxlength="5000"
                                  placeholder="What's on your mind? Support emojis 😊" required>{{ old('content') }}</textarea>
                        <div class="form-text d-flex justify-content-between">
                            <span>Max 5000 characters. Emojis supported.</span>
                            <span id="charCount">0 / 5000</span>
                        </div>
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Media Upload -->
                    <div class="mb-4">
                        <label for="media" class="form-label fw-semibold">
                            <i class="bi bi-image me-1"></i>Media (Optional)
                        </label>
                        <input type="file" class="form-control @error('media') is-invalid @enderror"
                               id="media" name="media" accept="image/jpeg,image/png,image/webp,video/mp4">
                        <div class="form-text">Supported: JPG, PNG, WEBP, MP4 (max 50MB)</div>
                        @error('media')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div id="mediaPreview" class="mt-2"></div>
                    </div>

                    <!-- Platforms -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-share me-1"></i>Select Platforms
                        </label>
                        @if($accounts->isEmpty())
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                No social accounts found. <a href="{{ route('accounts.create') }}">Add an account first</a>.
                            </div>
                        @else
                            <div class="row g-3">
                                @foreach($accounts as $account)
                                <div class="col-md-6">
                                    <div class="form-check card p-3">
                                        <input class="form-check-input" type="checkbox"
                                               name="platforms[]" value="{{ $account->id }}"
                                               id="platform_{{ $account->id }}"
                                               {{ in_array($account->id, old('platforms', [])) ? 'checked' : '' }}>
                                        <label class="form-check-label d-flex align-items-center gap-2 ms-2" for="platform_{{ $account->id }}">
                                            <span class="platform-icon" style="background-color: {{ $account->platform_color }};">
                                                <i class="bi {{ $account->platform_icon }}"></i>
                                            </span>
                                            <div>
                                                <div class="fw-semibold">{{ ucfirst($account->platform_name) }}</div>
                                                <div class="text-muted" style="font-size: 0.8rem;">{{ $account->account_name }}</div>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                            @error('platforms')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        @endif
                    </div>

                    <!-- Publish Type -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-clock me-1"></i>When to Publish?
                        </label>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-check card p-3">
                                    <input class="form-check-input" type="radio" name="publish_type" value="now"
                                           id="publish_now" {{ old('publish_type', 'now') === 'now' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="publish_now">
                                        <i class="bi bi-lightning-charge text-warning me-1"></i>
                                        <strong>Publish Now</strong>
                                        <div class="text-muted" style="font-size: 0.8rem;">Post will be published immediately</div>
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check card p-3">
                                    <input class="form-check-input" type="radio" name="publish_type" value="schedule"
                                           id="publish_schedule" {{ old('publish_type') === 'schedule' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="publish_schedule">
                                        <i class="bi bi-calendar-event text-info me-1"></i>
                                        <strong>Schedule</strong>
                                        <div class="text-muted" style="font-size: 0.8rem;">Choose a future date and time</div>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Schedule Date -->
                    <div class="mb-4" id="scheduleSection" style="display: {{ old('publish_type') === 'schedule' ? 'block' : 'none' }};">
                        <label for="scheduled_at" class="form-label fw-semibold">
                            <i class="bi bi-calendar3 me-1"></i>Schedule Date & Time
                        </label>
                        <input type="datetime-local" class="form-control @error('scheduled_at') is-invalid @enderror"
                               id="scheduled_at" name="scheduled_at" value="{{ old('scheduled_at') }}">
                        <div class="form-text">Timezone: {{ config('app.timezone') }}</div>
                        @error('scheduled_at')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid">
                        <button type="submit" class="btn btn-primary btn-lg" {{ $accounts->isEmpty() ? 'disabled' : '' }}>
                            <i class="bi bi-send me-2"></i>Create Post
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Character counter
    const content = document.getElementById('content');
    const charCount = document.getElementById('charCount');
    content.addEventListener('input', () => {
        charCount.textContent = `${content.value.length} / 5000`;
    });

    // Media preview
    const mediaInput = document.getElementById('media');
    const mediaPreview = document.getElementById('mediaPreview');
    mediaInput.addEventListener('change', function() {
        mediaPreview.innerHTML = '';
        if (this.files && this.files[0]) {
            const file = this.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                if (file.type.startsWith('video/')) {
                    mediaPreview.innerHTML = `<video src="${e.target.result}" controls class="media-preview"></video>`;
                } else {
                    mediaPreview.innerHTML = `<img src="${e.target.result}" class="media-preview" alt="Preview">`;
                }
            };
            reader.readAsDataURL(file);
        }
    });

    // Toggle schedule section
    const publishNow = document.getElementById('publish_now');
    const publishSchedule = document.getElementById('publish_schedule');
    const scheduleSection = document.getElementById('scheduleSection');

    publishNow.addEventListener('change', () => scheduleSection.style.display = 'none');
    publishSchedule.addEventListener('change', () => scheduleSection.style.display = 'block');
</script>
@endpush
@endsection