@extends('superadmin.layout.main')

<!-- Page header -->
@section('page-header')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    <div class="page-pretitle">
                        Application
                    </div>
                    <h2 class="page-title">
                        Setting
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <span class="d-none d-sm-inline">
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">
                                {!! $GO_BACK !!} Go Back
                            </a>
                        </span>

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


@section('main-container')

    <div class="row">
        <div class="col-sm-12 mt-5">
            @if ($errors->any())
                <div class="card">
                    <div class="card-body">
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>        
            @endif
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    
                    <h2 class="mb-0">Main Setting</h2>
                    <div class="ms-auto">
                        <button type="submit" form="form-id" class="btn btn-success">
                            {!! $CHECK !!} Update Settings
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    
                    <form method="POST" id="form-id" action="{{ route('admin.setting.update') }}" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                        <!-- Site Title -->
                        <div class="mb-4">
                            <label class="form-label"> App Title <span data-bs-toggle="tooltip" data-bs-placement="right" title="The App Title will be used as the main title displayed on the Home Page and in the Title Meta Tag of the website, which is important for SEO optimization."><span class="info-icon"> {!! $INFO  !!} </span></span></label> 
                            <input value="{{old('app_title', $setting->app_title?? false)}}" type="text" class="form-control alpha-digit {{ errorClass($errors, 'app_title') }}" name="app_title" placeholder="Tool Crafting" required>
                            @error('app_title')
                                {{$message}}
                            @enderror
                        </div>
                    
                        <!-- App Description -->
                        <div class="mb-4">
                            <label class="form-label">App Description <span data-bs-toggle="tooltip" data-bs-placement="right" title="The Description will be used in the Description Meta Tag of the website, which is important for SEO optimization."><span class="info-icon"> {!! $INFO  !!} </span></span></label>
                            <textarea  class="form-control {{ errorClass($errors, 'app_description') }}" name="app_description" rows="3" placeholder="Enter your app description here...">{{old('app_description', $setting->app_description?? false)}}</textarea>
                            @error('app_description')
                                {{$message}}
                            @enderror
                        </div>
                    

                        <!-- Hero Heading -->
                        <div class="mb-4">
                            <label class="form-label">Hero Heading <span data-bs-toggle="tooltip" data-bs-placement="right" title="The Hero Heading will be used in hero section on the Home Page."><span class="info-icon"> {!! $INFO  !!} </span></span></label> 
                            <input value="{{old('hero_heading', $setting->hero_heading?? false)}}" type="text" class="form-control alpha-digit {{ errorClass($errors, 'hero_heading') }}" name="hero_heading" placeholder="Empower Your Digital Workflow with Tool Crafting">
                            @error('hero_heading')
                                {{$message}}
                            @enderror
                        </div>
                    
                        <!-- Hero Description -->
                        <div class="mb-4">
                            <label class="form-label">Hero Description <span data-bs-toggle="tooltip" data-bs-placement="right" title="The Hero Description will be used in hero section on the Home Page."><span class="info-icon"> {!! $INFO  !!} </span></span></label>
                            <textarea  class="form-control {{ errorClass($errors, 'hero_description') }}" name="hero_description" rows="3" placeholder="Enter your app description here...">{{old('hero_description', $setting->hero_description?? false)}}</textarea>
                            @error('hero_description')
                                {{$message}}
                            @enderror
                        </div>
                    
                        <!-- App Meta Tags -->
                        <div class="mb-4">
                            <label class="form-label">
                                App Meta Tags (Additional) 
                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Title and Description meta tags are already included in the header. Use this field for additional meta tags, like Google Console verification or other SEO-related tags. This will apply to all pages of the website"><span class="info-icon"> {!! $INFO  !!} </span></span>
                            </label>
                            <textarea class="form-control {{ errorClass($errors, 'app_meta_tags') }}" name="app_meta_tags" rows="3" placeholder="Enter your verification meta tags here...">{{old('app_meta_tags', $setting->app_meta_tags??NULL)}}</textarea>
                        </div>
                    
                        <!-- App Meta Keywords -->
                        <div class="mb-4">
                            <label class="form-label">
                                App Meta Keywords 
                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Keywords will show in meta tags by default if you leave empty for any page, blog or tool then these keywords will show for SEO."><span class="info-icon"> {!! $INFO  !!} </span></span>
                            </label>
                            <textarea class="form-control {{ errorClass($errors, 'app_meta_keywords') }}" name="app_meta_keywords" rows="3" placeholder="Keywords with coma seprate i.e seoscript, phptools, toolcrafting, easytool, allin1tool etc.">{{old('app_meta_keywords', $setting->app_meta_keywords??NULL)}}</textarea>
                        </div>
                    
                        <!-- Global Header (JS and CSS) -->
                        <div class="mb-4">
                            <label class="form-label">
                                Header Javascript and CSS (Inside {{"<header>"}} Tag)
                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Only add Java Script inside <script> tags and CSS inside <style> tags to avoid breaking the website's responsiveness. You can also add any third-party script file here. This will apply to all pages of the website."><span class="info-icon"> {!! $INFO  !!} </span></span>
                            </label>
                            <textarea class="form-control {{ errorClass($errors, 'global_header') }}" name="global_header" rows="3" placeholder="Enter Javscript and CSS code here. This will be under <head> </head> tag for all pages.">{{old('global_header', $setting->global_header??NULL)}}</textarea>
                            @error('global_header')
                                <span class="text text-danger">{{$message}}</span>
                            @enderror
                        </div>
                        
                        <!-- After Body Tag (JS and CSS) -->
                        <div class="mb-4">
                            <label class="form-label">
                                After {{"<body>"}} Body Tag (Javascript and CSS)
                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Only add Java Script in <script> tags and CSS in <style> tag. This will apply to all pages of the website right after <body> tag."><span class="info-icon"> {!! $INFO  !!} </span></span>
                            </label>
                            <textarea class="form-control {{ errorClass($errors, 'after_body_tag') }}" name="after_body_tag" rows="3" placeholder="Enter Javascript and CSS to code. This will be just after <body> tag for all pages.">{{old('after_body_tag',$setting->after_body_tag??NULL)}}</textarea>
                            @error('after_body_tag')
                                <span class="text text-danger">{{$message}}</span>
                            @enderror
                        </div>
                    
                        <!-- Global Footer (JS) -->
                        <div class="mb-4">
                            <label class="form-label">
                                Footer Javascript (Before {{"</body>"}} Tag)
                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Only add Java Script in <script> tags. This will apply to all pages of the website right before </body> tag"><span class="info-icon"> {!! $INFO  !!} </span></span>
                            </label>
                            <textarea class="form-control {{ errorClass($errors, 'global_footer') }}" name="global_footer" rows="3" placeholder="Enter footer Javscript here. This will be just before </body> tag for all pages.">{{old('global_footer',$setting->global_footer??NULL)}}</textarea>
                            @error('global_footer')
                                <span class="text text-danger">{{$message}}</span>
                            @enderror
                        </div>
                
                        <!-- Open Graph Tags -->
                        <div class="mb-4">
                            <label class="form-label">
                                Open Graph Tags
                                <span data-bs-toggle="tooltip" data-bs-placement="right" title="Add open graph tags for SEO. This will apply on all pages of website."><span class="info-icon"> {!! $INFO  !!} </span></span>
                            </label>
                            <textarea class="form-control {{ errorClass($errors, 'open_graph_tags') }}" name="open_graph_tags" rows="3" placeholder="{{'<meta property="og:title" content="Open Graph Example Title" />'}}">{{old('open_graph_tags',$setting->open_graph_tags?? NULL) }}</textarea>
                        </div>
                    
                        <div class="stylish-line">
                            <span>Section Visibility</span>
                        </div>

                        <!-- Show Sidebar -->
                        <div class="row mb-4">
                            
                            <div class="col-md-4 mb-2">
                                <label class="form-label">Show Most View Sidebar</label>
                                <select class="form-control" name="most_view_show" id="most_view_show">
                                    <option value="1" {{$setting->most_view_show? 'selected' : false}} >Yes</option>
                                    <option value="0" {{$setting->most_view_show === 0? 'selected' : false}}>No</option>
                                </select>
                            </div>
                            <div class="col-md-4 mb-2">
                                <label class="form-label">Show Popular Sidebar</label>
                                <select class="form-control" name="popular_show" id="popular_show">
                                    <option value="1" {{$setting->popular_show? 'selected' : false}}>Yes</option>
                                    <option value="0" {{$setting->popular_show === 0? 'selected' : false}}>No</option>
                                </select>
                            </div>
                        </div>

                        <div class="stylish-line">
                            <span>API Key & Limits</span>
                        </div>

                         <!-- API key and Max Generate Record -->
                         <div class="row">
                            
                            <div class="col-md-2 mb-2">
                                <label class="form-label">Generate Max Record</label>
                                <input type="number" placeholder="30" class="form-control" name="generate_max_records" min="1" value="{{old('generate_max_records', $setting->generate_max_records?? false)}}">
                                @error('generate_max_records')
                                    <span class="text text-danger">{{$message}}</span>
                                @enderror
                            </div>

                            <div class="col-md-5 mb-2">
                                <label class="form-label">IP Info Access Token <a class="how-to-get api-f" id="howToGet" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#howToGetModal">How to get IP info access token?</a></label>
                                <input type="text" placeholder="a2d53ae68265ad" class="form-control" name="ipinfo_api_key" value="{{old('ipinfo_api_key', $setting->ipinfo_api_key?? false)}}">
                                @error('ipinfo_api_key')
                                    <span class="text text-danger">{{$message}}</span>
                                @enderror
                            </div>

                            <div class="col-md-5 mb-2">
                                <label class="form-label">YouTube API <a class="how-to-get-yt api-f" id="howToGetYT" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#howToGetYTModal">How to get YouTube API?</a></label>
                                <input type="text" placeholder="AIzaSyBm7Afz15FevaRtRccwQfe0kA7b0rhLXh4" class="form-control" name="youtube_api_key" value="{{old('youtube_api_key', $setting->youtube_api_key?? false)}}">
                                @error('youtube_api_key')
                                    <span class="text text-danger">{{$message}}</span>
                                @enderror
                            </div>
                        </div>


                        <!-- Submit Button -->
                        <div class="mt-4">
                            <button type="submit" class="btn btn-success mt-4"> {!! $CHECK !!} Update Settings</button>
                        </div>
                    </form>
                    
                    
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Structure -->
    <div class="modal fade" id="howToGetModal" tabindex="-1" aria-labelledby="howToGetModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="howToGetModalLabel">IP Info access token guideline</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>To get an IPinfo access token, you can:</p>
                    <ol>
                        <li>Go to the <a style="text-decoration: underline" target="_blank" href="https://ipinfo.io/">IPinfo website</a> and create a free account</li>
                        <li>Go to the account dashboard and scroll down to the token section</li>
                        <li>Click "Token"</li>
                        <li>Click "Copy to Clipboard" and past here</li>
                    </ol>
                    <p>
                        The free plan limits users to <u>50,000 requests per month</u> and doesn't include some data fields. To access more data fields and increase request volumes, you can check out IPinfo's paid plans. 
                        You can also contact IPinfo's sales team to learn more.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Structure -->
    <div class="modal fade" id="howToGetYTModal" tabindex="-1" aria-labelledby="howToGetYTModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="howToGetYTModalLabel">YouTube API access guideline</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>To get an YouTube API Key, you can:</p>
                    <ol>
                        <li>Please visit <a style="text-decoration: underline" target="_blank" href="https://developers.google.com/youtube/v3/getting-started">Get API Guideline</a> and go into Google Console.</li>
                        <li>Create a project in the Google Developers Console and obtain authorization credentials so your application can submit API requests.</li>
                        <li>After creating your project, make sure the YouTube Data API is one of the services that your application is registered to use.</li>
                    </ol>
                    <p>
                        The free plan limits users to <u>10,000 requests per day</u>. To access more data fields and increase request volumes, you can check out Google cloud paid plans. 
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection