@extends('layouts.app')

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

@section('content')
<div class="topbar">
    <h4 class="mb-0 fw-bold"><i class="bi bi-pencil me-2 text-primary"></i>Edit 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.update', $post) }}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <!-- 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" required>{{ old('content', $post->content) }}</textarea>
                        <div class="form-text d-flex justify-content-between">
                            <span>Max 5000 characters. Emojis supported.</span>
                            <span id="charCount">{{ strlen($post->content) }} / 5000</span>
                        </div>
                        @error('content')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Media -->
                    <div class="mb-4">
                        <label class="form-label fw-semibold">
                            <i class="bi bi-image me-1"></i>Media
                        </label>
                        @if($post->media_path)
                            <div class="mb-2">
                                @if($post->media_type === 'video')
                                    <video src="{{ $post->media_url }}" controls class="media-preview"></video>
                                @else
                                    <img src="{{ $post->media_url }}" class="media-preview" alt="Current media">
                                @endif
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" name="remove_media" id="remove_media" value="1">
                                <label class="form-check-label" for="remove_media">Remove current media</label>
                            </div>
                        @endif
                        <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">Upload new media to replace (optional). 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>
                        <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', $selectedPlatforms)) ? '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
                    </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', $post->status === 'published' ? 'now' : 'schedule') === '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', $post->status === 'scheduled' ? 'schedule' : '') === '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', $post->status === 'scheduled' ? 'schedule' : 'now') === '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', $post->scheduled_at ? $post->scheduled_at->format('Y-m-d\TH:i') : '') }}">
                        <div class="form-text">Timezone: {{ config('app.timezone') }}</div>
                        @error('scheduled_at')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="bi bi-check-lg me-2"></i>Update Post
                        </button>
                        <a href="{{ route('posts.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-lg me-2"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

    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);
        }
    });

    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