@extends('admin.layouts.master')

@section('content')
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <div class="card border-0 shadow-lg rounded-4">

                <!-- Header -->
                <div class="card-header bg-gradient bg-primary text-white text-center rounded-top-4 py-4">
                    <h2 class="fw-bold mb-1">
                        <i class="fas fa-cogs me-2"></i> SEO & Google Settings
                    </h2>
                    <p class="mb-0 small opacity-75">Manage all SEO meta tags, social tags, and Google integrations.</p>
                </div>

                <div class="card-body p-0">

                    {{-- Success Alert --}}
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-0 mb-0" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('google.settings.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Tabs -->
                        <ul class="nav nav-tabs nav-fill bg-light border-bottom px-3 pt-3" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#seo" role="tab">
                                    <i class="fas fa-globe"></i> Site SEO
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#og" role="tab">
                                    <i class="fab fa-facebook"></i> Open Graph
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#twitter" role="tab">
                                    <i class="fab fa-twitter"></i> Twitter Card
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#google" role="tab">
                                    <i class="fab fa-google"></i> Google Services
                                </a>
                            </li>
                        </ul>

                        <!-- Tab Contents -->
                        <div class="tab-content p-4">

                            <!-- SITE SEO -->
                            <div class="tab-pane fade show active" id="seo" role="tabpanel">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Site Title</label>
                                    <input type="text" name="site_title" class="form-control"
                                        value="{{ $settings['site_title']->value ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Meta Description</label>
                                    <textarea name="meta_description" class="form-control" rows="3">{{ $settings['meta_description']->value ?? '' }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Meta Keywords</label>
                                    <input type="text" name="meta_keywords" class="form-control"
                                        value="{{ $settings['meta_keywords']->value ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Meta Author</label>
                                    <input type="text" name="meta_author" class="form-control"
                                        value="{{ $settings['meta_author']->value ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Favicon</label>
                                    <input type="file" name="favicon" class="form-control">
                                    @if(!empty($settings['favicon']->value))
                                        <img src="{{ asset($settings['favicon']->value) }}" alt="favicon" class="mt-2" height="40">
                                    @endif
                                </div>
                            </div>

                            <!-- OPEN GRAPH -->
                            <div class="tab-pane fade" id="og" role="tabpanel">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">OG Title</label>
                                    <input type="text" name="og_title" class="form-control"
                                        value="{{ $settings['og_title']->value ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">OG Description</label>
                                    <textarea name="og_description" class="form-control" rows="3">{{ $settings['og_description']->value ?? '' }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">OG Image</label>
                                    <input type="file" name="og_image" class="form-control">
                                    @if(!empty($settings['og_image']->value))
                                        <img src="{{ asset($settings['og_image']->value) }}" alt="og image" class="mt-2" height="80">
                                    @endif
                                </div>
                            </div>

                            <!-- TWITTER CARD -->
                            <div class="tab-pane fade" id="twitter" role="tabpanel">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Twitter Title</label>
                                    <input type="text" name="twitter_title" class="form-control"
                                        value="{{ $settings['twitter_title']->value ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Twitter Description</label>
                                    <textarea name="twitter_description" class="form-control" rows="3">{{ $settings['twitter_description']->value ?? '' }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Twitter Image</label>
                                    <input type="file" name="twitter_image" class="form-control">
                                    @if(!empty($settings['twitter_image']->value))
                                        <img src="{{ asset($settings['twitter_image']->value) }}" alt="twitter image" class="mt-2" height="80">
                                    @endif
                                </div>
                            </div>

                            <!-- GOOGLE SERVICES -->
                            <div class="tab-pane fade" id="google" role="tabpanel">
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Google Analytics</label>
                                    <input type="text" name="analytics_id" class="form-control"
                                        placeholder="UA-XXXXXXXXX-X or G-XXXXXXXXXX"
                                        value="{{ $settings['analytics_id']->value ?? '' }}">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Google AdSense Script</label>
                                    <textarea name="adsense_script" class="form-control" rows="4">{{ $settings['adsense_script']->value ?? '' }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Google Tag Manager Script</label>
                                    <textarea name="tag_manager_script" class="form-control" rows="4">{{ $settings['tag_manager_script']->value ?? '' }}</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label fw-semibold">Google Site Verification</label>
                                    <input type="text" name="site_verification" class="form-control"
                                        placeholder="google-site-verification=your_code_here"
                                        value="{{ $settings['site_verification']->value ?? '' }}">
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">reCAPTCHA Site Key</label>
                                        <input type="text" name="reCAPTCHA_site_key" class="form-control"
                                            value="{{ $settings['reCAPTCHA_site_key']->value ?? '' }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold">reCAPTCHA Secret Key</label>
                                        <input type="text" name="reCAPTCHA_secret_key" class="form-control"
                                            value="{{ $settings['reCAPTCHA_secret_key']->value ?? '' }}">
                                    </div>
                                </div>
                            </div>

                        </div> <!-- end tab-content -->

                        <!-- Fixed Save Button -->
                        <div class="card-footer bg-white text-center sticky-bottom py-3 shadow-sm">
                            <button type="submit" class="btn btn-primary btn-lg rounded-pill px-5">
                                <i class="fas fa-save me-2"></i> Save All Settings
                            </button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection