@extends('admin.layouts.app')

@push('css')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.nav-tabs .nav-link {
    border-radius: 0.25rem 0.25rem 0 0;
    border: 1px solid transparent;
    background: none;
    color: #6c757d;
}

.nav-tabs .nav-link.active {
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    color: #495057;
    font-weight: 600;
}

.nav-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    padding: 1.5rem;
    background: #fff;
}

.tab-icon {
    margin-right: 0.5rem;
}

.form-section-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.help-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin-top: 0.25rem;
}

.form-actions {
    border-top: 1px solid #dee2e6;
    padding-top: 1.5rem;
    margin-top: 2rem;
    background: #f8f9fa;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 1.5rem;
}

.social-platform-card {
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    background: #f8f9fa;
    margin-bottom: 1rem;
}

.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    margin-right: 1rem;
}

.social-instagram { background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.social-facebook { background: #1877F2; }
.social-twitter { background: #1DA1F2; }
.social-linkedin { background: #0A66C2; }
.social-youtube { background: #FF0000; }
.social-pinterest { background: #BD081C; }
.social-tiktok { background: #000000; }
.social-whatsapp { background: #25D366; }
.social-telegram { background: #0088CC; }
</style>
@endpush

@section('content')

<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Configuración de Redes Sociales</h4>
            <div class="page-title-right">
                <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">Volver</a>
            </div>
        </div>
    </div>
</div>
        <form action="{{ route('settings.social.update') }}" method="POST" enctype="multipart/form-data">                
            @csrf
            @method('PUT')

            <div class="card">
                <div class="card-body p-0">
                    
                    <!-- Navigation Tabs -->
                    <ul class="nav nav-tabs" id="socialTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="main-social-tab" data-bs-toggle="tab" data-bs-target="#main-social" 
                                    type="button" role="tab" aria-controls="main-social" aria-selected="true">
                                <i class="ri-share-forward-line tab-icon"></i>
                                Redes Principales
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="video-social-tab" data-bs-toggle="tab" data-bs-target="#video-social" 
                                    type="button" role="tab" aria-controls="video-social" aria-selected="false">
                                <i class="ri-video-line tab-icon"></i>
                                Plataformas de Video
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="messaging-tab" data-bs-toggle="tab" data-bs-target="#messaging" 
                                    type="button" role="tab" aria-controls="messaging" aria-selected="false">
                                <i class="ri-chat-3-line tab-icon"></i>
                                Mensajería y Contacto
                            </button>
                        </li>
                    </ul>

                    <!-- Tab Content -->
                    <div class="tab-content" id="socialTabContent">
                        
                        <!-- Redes Principales -->
                        <div class="tab-pane fade show active" id="main-social" role="tabpanel" aria-labelledby="main-social-tab">
                            <h5 class="form-section-title">
                                <i class="ri-thumb-up-line text-primary"></i>
                                Redes Sociales Principales
                            </h5>
                            
                            <div class="row">
                                <!-- Instagram -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-instagram">
                                                <i class="ri-instagram-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Instagram</h6>
                                                <small class="text-muted">Red social de fotos y videos</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="instagram_url" class="form-label">URL de Instagram</label>
                                            <input type="url" name="instagram_url" id="instagram_url" class="form-control @error('instagram_url') is-invalid @enderror" 
                                                   value="{{ old('instagram_url', $settings->instagram_url ?? '') }}" 
                                                   placeholder="https://www.instagram.com/tu-pagina">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace directo a tu perfil de Instagram
                                            </small>
                                            @error('instagram_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Facebook -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-facebook">
                                                <i class="ri-facebook-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Facebook</h6>
                                                <small class="text-muted">Red social principal</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="facebook_url" class="form-label">URL de Facebook</label>
                                            <input type="url" name="facebook_url" id="facebook_url" class="form-control @error('facebook_url') is-invalid @enderror" 
                                                   value="{{ old('facebook_url', $settings->facebook_url ?? '') }}" 
                                                   placeholder="https://www.facebook.com/tu-pagina">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu página de Facebook
                                            </small>
                                            @error('facebook_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Twitter -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-twitter">
                                                <i class="ri-twitter-x-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Twitter</h6>
                                                <small class="text-muted">Microblogging y noticias</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="twitter_url" class="form-label">URL de Twitter</label>
                                            <input type="url" name="twitter_url" id="twitter_url" class="form-control @error('twitter_url') is-invalid @enderror" 
                                                   value="{{ old('twitter_url', $settings->twitter_url ?? '') }}" 
                                                   placeholder="https://twitter.com/tu-pagina">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu perfil de Twitter
                                            </small>
                                            @error('twitter_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- LinkedIn -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-linkedin">
                                                <i class="ri-linkedin-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">LinkedIn</h6>
                                                <small class="text-muted">Red profesional</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="linkedin_url" class="form-label">URL de LinkedIn</label>
                                            <input type="url" name="linkedin_url" id="linkedin_url" class="form-control @error('linkedin_url') is-invalid @enderror" 
                                                   value="{{ old('linkedin_url', $settings->linkedin_url ?? '') }}" 
                                                   placeholder="https://www.linkedin.com/company/tu-empresa">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu página de empresa en LinkedIn
                                            </small>
                                            @error('linkedin_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Plataformas de Video -->
                        <div class="tab-pane fade" id="video-social" role="tabpanel" aria-labelledby="video-social-tab">
                            <h5 class="form-section-title">
                                <i class="ri-play-line text-danger"></i>
                                Plataformas de Video y Contenido Visual
                            </h5>
                            
                            <div class="row">
                                <!-- YouTube -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-youtube">
                                                <i class="ri-youtube-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">YouTube</h6>
                                                <small class="text-muted">Plataforma de videos</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="youtube_url" class="form-label">URL de YouTube</label>
                                            <input type="url" name="youtube_url" id="youtube_url" class="form-control @error('youtube_url') is-invalid @enderror" 
                                                   value="{{ old('youtube_url', $settings->youtube_url ?? '') }}" 
                                                   placeholder="https://www.youtube.com/channel/tu-canal">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu canal de YouTube
                                            </small>
                                            @error('youtube_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- TikTok -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-tiktok">
                                                <i class="ri-tiktok-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">TikTok</h6>
                                                <small class="text-muted">Videos cortos y entretenimiento</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="tiktok_url" class="form-label">URL de TikTok</label>
                                            <input type="url" name="tiktok_url" id="tiktok_url" class="form-control @error('tiktok_url') is-invalid @enderror" 
                                                   value="{{ old('tiktok_url', $settings->tiktok_url ?? '') }}" 
                                                   placeholder="https://www.tiktok.com/@tu-usuario">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu perfil de TikTok
                                            </small>
                                            @error('tiktok_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Pinterest -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-pinterest">
                                                <i class="ri-pinterest-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Pinterest</h6>
                                                <small class="text-muted">Tableros de imágenes e ideas</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="pinterest_url" class="form-label">URL de Pinterest</label>
                                            <input type="url" name="pinterest_url" id="pinterest_url" class="form-control @error('pinterest_url') is-invalid @enderror" 
                                                   value="{{ old('pinterest_url', $settings->pinterest_url ?? '') }}" 
                                                   placeholder="https://www.pinterest.com/tu-perfil">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu perfil de Pinterest
                                            </small>
                                            @error('pinterest_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Mensajería y Contacto -->
                        <div class="tab-pane fade" id="messaging" role="tabpanel" aria-labelledby="messaging-tab">
                            <h5 class="form-section-title">
                                <i class="ri-chat-quote-line text-success"></i>
                                Plataformas de Mensajería y Contacto Directo
                            </h5>
                            
                            <div class="alert alert-info">
                                <i class="ri-information-line"></i>
                                <strong>Información:</strong> Configure estas plataformas para permitir contacto directo con sus clientes.
                            </div>
                            
                            <div class="row">
                                <!-- WhatsApp -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-whatsapp">
                                                <i class="ri-whatsapp-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">WhatsApp Business</h6>
                                                <small class="text-muted">Mensajería instantánea</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="whatsapp_url" class="form-label">Enlace de WhatsApp</label>
                                            <input type="url" name="whatsapp_url" id="whatsapp_url" class="form-control @error('whatsapp_url') is-invalid @enderror" 
                                                   value="{{ old('whatsapp_url', $settings->whatsapp_url ?? '') }}" 
                                                   placeholder="https://wa.me/549111234567">
                                            <small class="help-text">
                                                <i class="ri-whatsapp-fill"></i>
                                                Enlace directo para chatear por WhatsApp
                                            </small>
                                            @error('whatsapp_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Telegram -->
                                <div class="col-md-6">
                                    <div class="social-platform-card">
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="social-icon social-telegram">
                                                <i class="ri-telegram-fill"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Telegram</h6>
                                                <small class="text-muted">Mensajería segura</small>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label for="telegram_url" class="form-label">URL de Telegram</label>
                                            <input type="url" name="telegram_url" id="telegram_url" class="form-control @error('telegram_url') is-invalid @enderror" 
                                                   value="{{ old('telegram_url', $settings->telegram_url ?? '') }}" 
                                                   placeholder="https://t.me/tu-usuario">
                                            <small class="help-text">
                                                <i class="ri-links-line"></i>
                                                Enlace a tu perfil o canal de Telegram
                                            </small>
                                            @error('telegram_url')
                                                <span class="invalid-feedback" role="alert">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Form Actions -->
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="ri-save-line me-2"></i>Actualizar Redes Sociales
                        </button>
                        <a href="{{ route('admin.dashboard') }}" class="btn btn-outline-secondary btn-lg ms-3">
                            <i class="ri-close-line me-2"></i>Cancelar
                        </a>
                    </div>

                </div>
            </div>

        </form>


@endsection

@section('customJs')
@endsection