@extends('layouts.app')

@section('title', 'Social Media Scheduler')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    .platform-icon {
        font-size: 1.5rem;
        margin-right: 0.5rem;
    }
    .platform-facebook { color: #1877F2; }
    .platform-twitter { color: #1DA1F2; }
    .platform-instagram { color: #E4405F; }
    .platform-linkedin { color: #0A66C2; }
    .platform-pinterest { color: #E60023; }
    .platform-youtube { color: #FF0000; }
    .platform-tiktok { color: #000000; }
    
    .scheduled-post {
        transition: all 0.2s ease;
    }
    
    .scheduled-post:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .date-picker-container {
        position: relative;
    }
    
    .time-slots {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
        margin-top: 15px;
    }
    
    .time-slot {
        padding: 8px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        text-align: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .time-slot:hover {
        background-color: #f8f9fa;
    }
    
    .time-slot.selected {
        background-color: #0d6efd;
        color: white;
        border-color: #0d6efd;
    }
    
    .platform-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .platform-checkbox {
        display: none;
    }
    
    .platform-label {
        display: flex;
        align-items: center;
        padding: 8px 15px;
        border: 1px solid #dee2e6;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.2s;
    }
    
    .platform-checkbox:checked + .platform-label {
        background-color: #f0f7ff;
        border-color: #0d6efd;
        color: #0d6efd;
    }
</style>
@endsection

@section('content')
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3">Social Media Scheduler</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPostModal">
            <i class="fas fa-plus me-1"></i> Create New Post
        </button>
    </div>

    @if (session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    <!-- Calendar View -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-white">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">Scheduled Posts</h5>
                <div class="btn-group">
                    <button type="button" class="btn btn-outline-secondary active" data-view="calendar">
                        <i class="fas fa-calendar-alt"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary" data-view="list">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div id="scheduler-calendar"></div>
        </div>
    </div>

    <!-- Upcoming Posts -->
    <div class="card shadow-sm">
        <div class="card-header bg-white">
            <h5 class="card-title mb-0">Upcoming Posts</h5>
        </div>
        <div class="card-body p-0">
            <div class="list-group list-group-flush">
                @forelse($scheduledPosts as $post)
                <div class="list-group-item scheduled-post">
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <div>
                            <div class="d-flex align-items-center mb-2">
                                @foreach($post->platforms as $platform)
                                <i class="fab fa-{{ $platform }} platform-icon platform-{{ $platform }} me-2"></i>
                                @endforeach
                                <small class="text-muted">{{ $post->scheduled_at->format('M d, Y - h:i A') }}</small>
                            </div>
                            <p class="mb-1">{{ Str::limit($post->content, 150) }}</p>
                            @if($post->media_count > 0)
                            <small class="text-muted">
                                <i class="fas fa-image me-1"></i> {{ $post->media_count }} media
                            </small>
                            @endif
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editPostModal" data-post-id="{{ $post->id }}">
                                <i class="fas fa-edit"></i>
                            </button>
                            <form action="{{ route('social-media.scheduler.destroy', $post->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to delete this scheduled post?')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                @empty
                <div class="text-center py-5">
                    <div class="mb-3">
                        <i class="fas fa-calendar-day fa-3x text-muted"></i>
                    </div>
                    <h5>No Upcoming Posts</h5>
                    <p class="text-muted">Schedule your first post to start sharing content across your social media platforms.</p>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createPostModal">
                        Schedule a Post
                    </button>
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- Create Post Modal -->
<div class="modal fade" id="createPostModal" tabindex="-1" aria-labelledby="createPostModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createPostModalLabel">Create New Post</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('social-media.scheduler.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <!-- Platform Selection -->
                    <div class="mb-4">
                        <label class="form-label">Select Platforms</label>
                        <div class="platform-selector">
                            @foreach($connectedAccounts as $account)
                            <div>
                                <input type="checkbox" name="platforms[]" value="{{ $account->platform }}" id="platform-{{ $account->id }}" class="platform-checkbox">
                                <label for="platform-{{ $account->id }}" class="platform-label">
                                    <i class="fab fa-{{ $account->platform }} me-2"></i> {{ $account->getPlatformDisplayName() }}
                                </label>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Post Content -->
                    <div class="mb-3">
                        <label for="post-content" class="form-label">Post Content</label>
                        <textarea class="form-control" id="post-content" name="content" rows="4" placeholder="What would you like to share?"></textarea>
                    </div>

                    <!-- Media Upload -->
                    <div class="mb-3">
                        <label for="post-media" class="form-label">Add Media (Optional)</label>
                        <input type="file" class="form-control" id="post-media" name="media[]" multiple>
                        <div id="media-preview" class="d-flex flex-wrap gap-2 mt-2"></div>
                    </div>

                    <!-- Schedule Date and Time -->
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="schedule-date" class="form-label">Date</label>
                            <input type="date" class="form-control" id="schedule-date" name="schedule_date" min="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-md-6">
                            <label for="schedule-time" class="form-label">Time</label>
                            <input type="time" class="form-control" id="schedule-time" name="schedule_time">
                        </div>
                    </div>

                    <!-- Suggested Time Slots -->
                    <div class="mb-3">
                        <label class="form-label">Suggested Times (Based on audience activity)</label>
                        <div class="time-slots">
                            <div class="time-slot" data-time="08:00">8:00 AM</div>
                            <div class="time-slot" data-time="12:00">12:00 PM</div>
                            <div class="time-slot" data-time="15:00">3:00 PM</div>
                            <div class="time-slot" data-time="18:00">6:00 PM</div>
                            <div class="time-slot" data-time="20:00">8:00 PM</div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" name="action" value="draft" class="btn btn-outline-primary">Save as Draft</button>
                    <button type="submit" name="action" value="schedule" class="btn btn-primary">Schedule Post</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.css" rel="stylesheet">
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize FullCalendar
        const calendarEl = document.getElementById('scheduler-calendar');
        const calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            events: {!! json_encode($calendarEvents) !!},
            eventClick: function(info) {
                // Show post details or edit modal
                window.location.href = `/social-media/scheduler/${info.event.id}/edit`;
            }
        });
        calendar.render();

        // Handle time slot selection
        document.querySelectorAll('.time-slot').forEach(slot => {
            slot.addEventListener('click', function() {
                document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
                this.classList.add('selected');
                document.getElementById('schedule-time').value = this.dataset.time;
            });
        });

        // Media preview
        document.getElementById('post-media').addEventListener('change', function(e) {
            const previewContainer = document.getElementById('media-preview');
            previewContainer.innerHTML = '';
            
            for (const file of this.files) {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const preview = document.createElement('div');
                        preview.className = 'position-relative';
                        preview.innerHTML = `
                            <img src="${e.target.result}" class="img-thumbnail" style="width: 100px; height: 100px; object-fit: cover;">
                            <button type="button" class="btn-close position-absolute top-0 end-0 bg-danger text-white" style="padding: 0.25rem;"></button>
                        `;
                        previewContainer.appendChild(preview);
                        
                        // Handle remove button
                        preview.querySelector('.btn-close').addEventListener('click', function() {
                            preview.remove();
                        });
                    };
                    reader.readAsDataURL(file);
                }
            }
        });

        // Toggle view (calendar/list)
        document.querySelectorAll('[data-view]').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('[data-view]').forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                
                if (this.dataset.view === 'calendar') {
                    document.getElementById('scheduler-calendar').style.display = 'block';
                    // Hide list view if you have one
                } else {
                    document.getElementById('scheduler-calendar').style.display = 'none';
                    // Show list