@extends('mix::layouts.master')
@section('title', __('Seo'))
@section('namespace', 'user-mix-settings-seo')
@section('back-button', route('user-mix-settings'))
@section('content')
<form class="mix-padding-10" method="post" action="{{ route('user-mix-settings-post', 'seo') }}" enctype="multipart/form-data">
	@csrf
	<div class="dashhead flex-col sm:flex-row mb-5">
		<div class="flex">
			<div class="-icon">
				{!! ori('custom', 'settings-seo-1') !!}
			</div>

			<div class="-content">
				<p class="--title my-auto">{{ __('Settings') }}
					<span class="text-gray-400 text-sm">{{ __('/ Seo') }}</span>
				</p>
			</div>
		</div>
	</div>

	<div class="relative koon-white-card">
		@if (!plan('settings.seo'))
			@include('include.no-plan')
		@endif

		<div class="koon-gray-title mb-5 flex justify-between items-center">
			<div class="-title">{{ __('Enable custom seo info') }}</div>
			<label class="sandy-switch is-koon">
				<input type="hidden" name="seo[enable]" value="0">
				<input class="sandy-switch-input" name="seo[enable]" value="1" type="checkbox" {{ user('seo.enable') ? 'checked' : '' }}>
				<span class="sandy-switch-in"><span class="sandy-switch-box is-white"></span></span>
			</label>
		</div>
		
		<div class="form-input mb-7 text-count-limit" data-limit="55">
			<span class="text-count-field"></span>
			<input type="text" name="seo[page_name]" placeholder="{{ __('Page Name') }}" value="{{ user('seo.page_name') }}">
		</div>

		<div class="form-input text-count-limit flex" data-limit="400">
			<span class="text-count-field"></span>
			<textarea rows="4" name="seo[page_description]" placeholder="{{ __('Page Description') }}">{{ user('seo.page_description') }}</textarea>
		</div>

		<div class="koon-gray-title my-5 flex justify-between items-center">
			<div class="-title">{{ __('Prevent Search Engine Indexing') }}</div>
			<label class="sandy-switch is-koon">
				<input type="hidden" name="seo[block_engine]" value="0">
				<input class="sandy-switch-input" name="seo[block_engine]" value="1" type="checkbox" {{ user('seo.block_engine') ? 'checked' : '' }}>
				<span class="sandy-switch-in"><span class="sandy-switch-box is-white"></span></span>
			</label>
		</div>
		<div class="wj-image-selector-w is-avatar relative is-sandy-upload-modal mb-5 active" data-generic-preview=".h-avatar">
			<a class="wj-image-selector-trigger rounded-xl flex items-center relative">
				<div class="wj-image-container inline-flex items-center justify-center rounded-lg">
					<img src="{{ gs('media/bio/seo', user('seo.opengraph_image')) }}" alt="">
				</div>
				<div class="wj-image-selector-text ml-3 flex flex-col">
					<span class="wj-text-holder text-sm font-bold">{{ __('OpenGraph Image / Favicon') }}</span>
					<span class="font-8 font-bold uppercase">{{ __('2mb Max') }}</span>
				</div>

				<input type="file" name="opengraph_image">
			</a>
		</div>


		<p class="italic text-xs mt-4">{{ __('A custom Favicon, OpenGraph & Twitter image for your bio page to display a link preview') }}</p>

		@if (mediaExists('media/bio/seo', user('seo.opengraph_image')))
			<a href="{{ route('user-mix-settings-seo-remove-opengraph') }}" app-sandy-prevent="" data-delete="{{ __('Are you sure you want to remove this image?') }}" class="text-sticker bg-red-500 text-white mt-5">{{ __('Remove Image') }}</a>
		@endif
	</div>

	<button class="koon-btn-dark mt-5">{{ __('Save') }}</button>
</form>
@endsection