@extends('backEnd.layouts.master')
@section('title', 'Social Media Settings')

@section('content')
<div class="page-header">
    <div>
        <h4><i class="fas fa-share-alt me-2 text-success"></i>Social Media Links</h4>
    </div>
</div>

<form action="{{ route('admin.settings.social.update') }}" method="POST">
    @csrf
    <div class="admin-card">
        <div class="admin-card-header">
            <h5>Social Media Platforms</h5>
        </div>
        <div class="admin-card-body">
            <div class="row g-3">
                @php
                $platforms = [
                    'facebook'  => ['icon' => 'fab fa-facebook', 'label' => 'Facebook',  'color' => '#1877F2'],
                    'instagram' => ['icon' => 'fab fa-instagram','label' => 'Instagram', 'color' => '#E4405F'],
                    'youtube'   => ['icon' => 'fab fa-youtube',  'label' => 'YouTube',   'color' => '#FF0000'],
                    'twitter'   => ['icon' => 'fab fa-twitter',  'label' => 'Twitter/X', 'color' => '#1DA1F2'],
                    'whatsapp'  => ['icon' => 'fab fa-whatsapp', 'label' => 'WhatsApp',  'color' => '#25D366'],
                    'tiktok'    => ['icon' => 'fab fa-tiktok',   'label' => 'TikTok',    'color' => '#010101'],
                ];
                $existingMap = $socials->keyBy('platform');
                @endphp

                @foreach($platforms as $platform => $info)
                @php $existing = $existingMap->get($platform); @endphp
                <div class="col-md-6">
                    <div class="d-flex align-items-start gap-3 p-3 border rounded">
                        <div class="mt-1" style="width: 36px; height: 36px; border-radius: 8px; background: {{ $info['color'] }}; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="{{ $info['icon'] }} text-white"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label class="fw-600">{{ $info['label'] }}</label>
                                <div class="form-check form-switch mb-0">
                                    <input class="form-check-input" type="checkbox"
                                           name="platforms[{{ $platform }}][status]" value="1"
                                           {{ $existing?->status ? 'checked' : '' }}>
                                </div>
                            </div>
                            <input type="text" name="platforms[{{ $platform }}][url]"
                                   class="form-control form-control-sm"
                                   value="{{ $existing?->url ?? '' }}"
                                   placeholder="{{ $info['label'] }} page URL">
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    <div class="mt-4">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i>Save Social Media Settings
        </button>
    </div>
</form>
@endsection