@extends('layouts.app')

@section('title', 'Share on Social Media')

@section('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    .share-card {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    
    .share-card:hover {
        transform: translateY(-5px);
    }
    
    .share-preview {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    
    .share-preview-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 15px;
    }
    
    .share-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
    
    .share-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        color: white;
        font-size: 20px;
        transition: all 0.2s ease;
    }
    
    .share-button:hover {
        transform: scale(1.1);
    }
    
    .share-button.facebook { background-color: #1877F2; }
    .share-button.twitter { background-color: #1DA1F2; }
    .share-button.linkedin { background-color: #0A66C2; }
    .share-button.instagram { background-color: #E4405F; }
    .share-button.pinterest { background-color: #E60023; }
    .share-button.whatsapp { background-color: #25D366; }
    .share-button.telegram { background-color: #0088cc; }
    .share-button.email { background-color: #6c757d; }
    
    .platform-checkbox {
        display: none;
    }
    
    .platform-label {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        border: 1px solid #dee2e6;
        border-radius: 50px;
        cursor: pointer;
        transition: all 0.2s;
        margin-bottom: 10px;
    }
    
    .platform-checkbox:checked + .platform-label {
        background-color: #f0f7ff;
        border-color: #0d6efd;
        color: #0d6efd;
    }
</style>
@endsection

@section('content')
<div class="container py-4">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3">Share on Social Media</h1>
                <a href="{{ url()->previous() }}" class="btn btn-outline-secondary">
                    <i class="fas fa-arrow-left me-1"></i> Back
                </a>
            </div>
            
            @if (session('status'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('status') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif
            
            <div class="card share-card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-4">Preview</h5>
                    <div class="share-preview">
                        @if(isset($item) && method_exists($item, 'getFeaturedImage') && $item->getFeaturedImage())
                            <img src="{{ $item->getFeaturedImage() }}" class="share-preview-image" alt="{{ $item->name }}">
                        @elseif(isset($item) && method_exists($item, 'getImage') && $item->getImage())
                            <img src="{{ $item->getImage() }}" class="share-preview-image" alt="{{ $item->name }}">
                        @else
                            <div class="bg-light d-flex align-items-center justify-content-center" style="height: 200px; border-radius: 8px; margin-bottom: 15px;">
                                <i class="fas fa-image fa-3x text-muted"></i>
                            </div>
                        @endif
                        
                        <h4>{{ isset($item) ? $item->name : 'Your Content' }}</h4>
                        <p class="text-muted">{{ isset($item) && isset($item->description) ? $item->description : 'Share this content across your social media platforms.' }}</p>
                        <div class="d-flex align-items-center">
                            <i class="fas fa-link me-2 text-muted"></i>
                            <span class="text-muted">{{ isset($item) && method_exists($item, 'getUrl') ? $item->getUrl() : url('/') }}</span>
                        </div>
                    </div>
                    
                    <h5 class="mb-3">Quick Share</h5>
                    <div class="share-buttons">
                        @foreach($sharingLinks as $platform => $link)
                        <a href="{{ $link }}" target="_blank" class="share-button {{ $platform }}" title="Share on {{ ucfirst($platform) }}">
                            <i class="fab fa-{{ $platform == 'email' ? 'envelope' : $platform }}"></i>
                        </a>
                        @endforeach
                    </div>
                </div>
            </div>
            
            <div class="card share-card">
                <div class="card-body">
                    <h5 class="card-title mb-4">Schedule Post</h5>
                    <form action="{{ isset($website) ? route('social-media.website.share', $website->id) : (isset($agent) ? route('social-media.agent.share', $agent->id) : '#') }}" method="POST">
                        @csrf
                        
                        <div class="mb-4">
                            <label class="form-label">Select Platforms</label>
                            <div class="row">
                                @foreach(['facebook', 'twitter', 'linkedin', 'instagram', 'pinterest'] as $platform)
                                <div class="col-md-4">
                                    <input type="checkbox" name="platforms[]" value="{{ $platform }}" id="platform-{{ $platform }}" class="platform-checkbox">
                                    <label for="platform-{{ $platform }}" class="platform-label">
                                        <i class="fab fa-{{ $platform }} me-2"></i> {{ ucfirst($platform) }}
                                    </label>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="custom-title" class="form-label">Custom Title (Optional)</label>
                            <input type="text" class="form-control" id="custom-title" name="custom_title" placeholder="Enter a custom title for your post">
                        </div>
                        
                        <div class="mb-3">
                            <label for="custom-description" class="form-label">Custom Description (Optional)</label>
                            <textarea class="form-control" id="custom-description" name="custom_description" rows="3" placeholder="Enter a custom description for your post"></textarea>
                        </div>
                        
                        <div class="mb-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="schedule-later" name="schedule_later">
                                <label class="form-check-label" for="schedule-later">
                                    Schedule for later
                                </label>
                            </div>
                        </div>
                        
                        <div id="schedule-options" class="mb-4 d-none">
                            <div class="row">
                                <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>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary" id="share-button">Share Now</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const scheduleLaterCheckbox = document.getElementById('schedule-later');
        const scheduleOptions = document.getElementById('schedule-options');
        const shareButton = document.getElementById('share-button');
        
        scheduleLaterCheckbox.addEventListener('change', function() {
            if (this.checked) {
                scheduleOptions.classList.remove('d-none');
                shareButton.textContent = 'Schedule Post';
            } else {
                scheduleOptions.classList.add('d-none');
                shareButton.textContent = 'Share Now';
            }
        });
    });
</script>
@endsection