@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/settings.social.page_title') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.settings.index') }}">{{ __('admin/settings.breadcrumb.settings') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/settings.breadcrumb.social') }}</li>
                </ol>
            </div>
        </div>

        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <a href="{{ route('admin.settings.index') }}" class="btn btn-light">
                        <i class="ri-arrow-left-line me-1"></i>{{ __('admin/settings.actions.back') }}
                    </a>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/settings.social.title') }}</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">{{ __('admin/settings.social.description') }}</p>
                        <p class="text-muted small mb-4">{{ __('admin/settings.social.hint') }}</p>

                        <form id="social-config-form">
                            @csrf
                            @php
                                $socialIcons = [
                                    'facebook' => 'ri-facebook-fill text-primary',
                                    'instagram' => 'ri-instagram-line text-danger',
                                    'linkedin' => 'ri-linkedin-fill text-info',
                                    'youtube' => 'ri-youtube-fill text-danger',
                                    'x' => 'ri-twitter-x-fill',
                                    'tiktok' => 'ri-tiktok-fill',
                                ];
                            @endphp

                            @foreach(__('admin/settings.social.networks') as $key => $label)
                            <div class="mb-3">
                                <label class="form-label" for="social-{{ $key }}">
                                    <i class="{{ $socialIcons[$key] ?? 'ri-link' }} me-1"></i>{{ $label }}
                                </label>
                                <input type="url"
                                       class="form-control"
                                       id="social-{{ $key }}"
                                       name="social[{{ $key }}]"
                                       value="{{ $socialConfig[$key] ?? '' }}"
                                       placeholder="https://">
                            </div>
                            @endforeach

                            <div class="text-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="ri-save-line me-1"></i>{{ __('admin/settings.social.save') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('admin/settings.social.preview_title') }}</h5>
                    </div>
                    <div class="card-body">
                        @php $hasSocial = collect($socialConfig)->filter()->isNotEmpty(); @endphp
                        @if($hasSocial)
                        <ul class="list-group list-group-flush">
                            @foreach(__('admin/settings.social.networks') as $key => $label)
                                @if(!empty($socialConfig[$key]))
                                <li class="list-group-item px-0 d-flex align-items-center justify-content-between">
                                    <span>{{ $label }}</span>
                                    <a href="{{ $socialConfig[$key] }}" target="_blank" rel="noopener noreferrer" class="text-truncate ms-3" style="max-width: 55%;">
                                        {{ $socialConfig[$key] }}
                                    </a>
                                </li>
                                @endif
                            @endforeach
                        </ul>
                        @else
                        <p class="text-muted mb-0">{{ __('admin/settings.social.preview_empty') }}</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<x-admin.toast-messages />
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('social-config-form');
    if (!form) return;

    form.addEventListener('submit', function (e) {
        e.preventDefault();

        const submitBtn = form.querySelector('button[type="submit"]');
        const originalHtml = submitBtn.innerHTML;
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>{{ __('admin/settings.messages.saving') }}';

        fetch(@json(route('admin.settings.update-social')), {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Accept': 'application/json',
            },
            body: new FormData(form),
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                setTimeout(() => window.location.reload(), 800);
            } else {
                showToast(data.message || @json(__('admin/settings.messages.errors.unexpected')), 'error');
            }
        })
        .catch(() => {
            showToast(@json(__('admin/settings.messages.errors.unexpected')), 'error');
        })
        .finally(() => {
            submitBtn.disabled = false;
            submitBtn.innerHTML = originalHtml;
        });
    });
});
</script>
@endpush