@extends('layouts.app')

@section('content')
<div>
    <!-- Settings Header -->
    <div class="panelHeader">
        <h3 class="panelHeaderTitle">Settings</h3>
    </div>

    <!-- Settings Table -->
    <div class="relative overflow-x-auto rounded p-2 md:p-5">
        @include('settings.nav')

        <div id="settings-tab-content">
            <form action="{{ route('admin.settings.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="grid gap-4">

                    <div class="hidden" id="general" role="tabpanel" aria-labelledby="general-tab">
                        <div class="grid gap-4 md:grid-cols-2 items-end">
                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Site Name</label>
                                <input type="text" name="site_name" value="{{ $info->site_name }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Copyright</label>
                                <input type="text" name="copyright" value="{{ $info->copyright }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Logo</label>
                                @if (!empty($info->logo))
                                <div class="relative border w-fit rounded">
                                    <img src="{{ asset($info->logo) }}" alt="Logo" class="w-auto h-12">
                                    <a href="{{ route('admin.settings.destroy', 'logo') }}"
                                        class="absolute -right-2 -top-2 flexCenter h-5 w-5 text-white bg-error text-sm rounded-full cursor-pointer">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                                @endif
                                <input type="file" name="logo" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Favicon</label>
                                @if (!empty($info->favicon))
                                <div class="relative border w-fit rounded">
                                    <img src="{{ asset($info->favicon) }}" alt="Favicon" class="w-auto h-12">
                                    <a href="{{ route('admin.settings.destroy', 'favicon') }}"
                                        class="absolute -right-2 -top-2 flexCenter h-5 w-5 text-white bg-error text-sm rounded-full cursor-pointer">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                                @endif
                                <input type="file" name="favicon" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">White Logo</label>
                                @if (!empty($info->footer_logo))
                                <div class="relative border w-fit rounded bg-black p-1">
                                    <img src="{{ asset($info->footer_logo) }}" alt="Logo" class="w-auto h-12"
                                        alt="Banner">
                                    <a href="{{ route('admin.settings.destroy', 'footer_logo') }}"
                                        class="absolute -right-2 -top-2 flexCenter h-5 w-5 text-white bg-error text-sm rounded-full cursor-pointer">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                                @endif
                                <input type="file" name="footer_logo" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Login Background</label>
                                @if (!empty($info->login_bg))
                                <div class="relative border w-fit rounded">
                                    <img src="{{ asset($info->login_bg) }}" alt="Logo" height="48" class="h-12 w-auto"
                                        alt="Banner">
                                    <a href="{{ route('admin.settings.destroy', 'login_bg') }}"
                                        class="absolute -right-2 -top-2 flexCenter h-5 w-5 text-white bg-error text-sm rounded-full cursor-pointer">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                                @endif
                                <input type="file" name="login_bg" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Breadcrumb Background</label>
                                @if (!empty($info->breadcrumb_bg))
                                <div class="relative border w-fit rounded">
                                    <a href="{{asset($info->breadcrumb_bg)}}" target="_blank">
                                        <img src="{{ asset($info->breadcrumb_bg) }}" alt="Logo"
                                            class="aspect-[16/4] max-w-[200px] object-cover" alt="Banner">
                                    </a>
                                    <a href="{{ route('admin.settings.destroy', 'breadcrumb_bg') }}"
                                        class="absolute -right-2 -top-2 flexCenter h-5 w-5 text-white bg-error text-sm rounded-full cursor-pointer">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                                @endif
                                <input type="file" name="breadcrumb_bg" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Upload Sitemap</label>

                                @if (!empty($info->sitemap))
                                <div>
                                    <a href="{{asset($info->sitemap)}}" target="_blank"
                                        class="text-[#516AFE] border-[#516AFE] inline-flex rounded border items-center text-lg gap-2 pr-3">
                                        <div
                                            class="bg-[#516AFE] text-xl text-white size-10 flex items-center justify-center">
                                            {!! config('icons.xml') !!}
                                        </div>
                                        {{$info->sitemap}}
                                    </a>
                                </div>
                                @endif

                                <input type="file" name="sitemap" class="inputField">
                            </div>
                        </div>
                    </div>

                    <div class="hidden" id="google-map" role="tabpanel" aria-labelledby="google-map-tab">
                        <div class="grid gap-4">
                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">Title</label>
                                <input type="text" name="map_title"
                                    value="{{ !empty($info->map_title) ? $info->map_title : '' }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">Iframe <small class="text-red-400">(Embed a
                                        Map)</small></label>
                                <textarea name="map"
                                    class="min-h-[120px] inputField">{{ !empty($info->map) ? $info->map : '' }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="hidden" id="social" role="tabpanel" aria-labelledby="social-tab">
                        <div class="grid gap-4 md:grid-cols-2">
                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Facebook</label>
                                <input type="text" name="facebook" value="{{ $info->facebook }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Google Plus</label>
                                <input type="text" name="google_plus" value="{{ $info->google_plus }}"
                                    class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Twitter</label>
                                <input type="text" name="twitter" value="{{ $info->twitter }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Instagram</label>
                                <input type="text" name="instagram" value="{{ $info->instagram }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Linkedin</label>
                                <input type="text" name="linkedin" value="{{ $info->linkedin }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Youtube</label>
                                <input type="text" name="youtube" value="{{ $info->youtube }}" class="inputField">
                            </div>
                        </div>
                    </div>

                    <div class="hidden" id="footer" role="tabpanel" aria-labelledby="footer-tab">
                        <div class="grid gap-4 md:grid-cols-2">
                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Mobile</label>
                                <input type="tel" name="mobile" value="{{ $info->mobile }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Telephone</label>
                                <input type="tel" name="telephone" value="{{ $info->telephone }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Fax</label>
                                <input type="tel" name="fax" value="{{ $info->fax }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Email</label>
                                <input type="email" name="email" value="{{ $info->email }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Skype</label>
                                <input type="tel" name="skype" value="{{ $info->skype }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Whatsapp</label>
                                <input type="tel" name="whatsapp" value="{{ $info->whatsapp }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">BD Address</label>
                                <input type="text" name="location" class="inputField" value="{{ $info->location }}">
                            </div>

                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">UK Address</label>
                                <input type="text" name="us_location" class="inputField"
                                    value="{{ $info->us_location }}">
                            </div>

                            <div class="flex flex-col md:col-span-2 gap-2">
                                <label class="inputLabel">About Us
                                    <button data-popover-target="popover-statistics-title"
                                        data-popover-placement="bottom-start" type="button">
                                        {!! config('icons.questionDuotone') !!}
                                        <span class="sr-only">Show Hints</span>
                                    </button>

                                    <div data-popover id="popover-statistics-title" role="tooltip"
                                        class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
                                        <ol class="p-3 space-y-2 list-decimal ml-4">
                                            <li>
                                                To add a line break in your title, use the <code>&lt;br/&gt;</code>
                                                tag.
                                            </li>
                                            <li>
                                                To highlight text, wrap it with the <code>&lt;span&gt;</code> Highligt
                                                Text
                                                <code>&lt;/span&gt;</code> tags.
                                            </li>
                                        </ol>
                                    </div>
                                </label>
                                <textarea name="about_us"
                                    class="min-h-[120px] inputField">{{ $info->about_us }}</textarea>
                            </div>
                        </div>
                    </div>

                    <div class="hidden" id="payment" role="tabpanel" aria-labelledby="payment-tab">
                        <div class="grid md:grid-cols-2 gap-4">
                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">Stripe</label>
                                <select name="stripe" class="inputField">
                                    <option value="" selected>Select Stripe</option>
                                    @foreach ($stripeList as $row)
                                    <option value="{{$row->slug}}" @if($row->slug == $info->stripe) selected
                                        @endif>{{$row->name}}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">PayPal</label>
                                <select name="paypal" class="inputField">
                                    <option value="" selected>Select PayPal</option>
                                    @foreach ($paypalList as $row)
                                    <option value="{{$row->slug}}" @if($row->slug == $info->paypal) selected
                                        @endif>{{$row->name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="hidden" id="meta" role="tabpanel" aria-labelledby="meta-tab">
                        <div class="grid gap-4">
                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">Meta Title</label>
                                <input type="text" name="meta_title" value="{{ $info->meta_title }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">Meta Tag</label>
                                <input type="text" name="meta_tag" value="{{ $info->meta_tag }}" class="inputField">
                            </div>

                            <div class="flex flex-col gap-2">
                                <label for="" class="inputLabel">Meta Description</label>
                                <textarea name="meta_description"
                                    class="inputField min-h-[150px]">{{ $info->meta_description }}</textarea>
                            </div>

                            <div class="flex flex-col gap-1.5">
                                <label for="" class="inputLabel">Meta Image</label>
                                @if (!empty($info->meta_image))
                                <div class="relative border w-fit rounded">
                                    <img src="{{ asset($info->meta_image) }}" alt="Logo" class="h-12 w-auto"
                                        alt="Banner">
                                    <a href="{{ route('admin.settings.destroy', 'meta_image') }}"
                                        class="absolute -right-2 -top-2 flexCenter h-5 w-5 text-white bg-error text-sm rounded-full cursor-pointer">
                                        <i class="fa-solid fa-xmark"></i>
                                    </a>
                                </div>
                                @endif
                                <input type="file" name="meta_image" class="inputField">
                            </div>
                        </div>
                    </div>

                    <div class="flex justify-end">
                        <button class="button">
                            Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('headerPartial')
<style>
</style>
@endpush

@push('footerPartial')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>

<script>
    const tabsElement = document.getElementById('settings-tab');

    const tabElements = [
        {
            id: 'general',
            triggerEl: document.querySelector('#general-tab'),
            targetEl: document.querySelector('#general'),
        },
        {
            id: 'google-map',
            triggerEl: document.querySelector('#google-map-tab'),
            targetEl: document.querySelector('#google-map'),
        },
        {
            id: 'social',
            triggerEl: document.querySelector('#social-tab'),
            targetEl: document.querySelector('#social'),
        },
        {
            id: 'footer',
            triggerEl: document.querySelector('#footer-tab'),
            targetEl: document.querySelector('#footer'),
        },
        {
            id: 'payment',
            triggerEl: document.querySelector('#payment-tab'),
            targetEl: document.querySelector('#payment'),
        },
        {
            id: 'meta',
            triggerEl: document.querySelector('#meta-tab'),
            targetEl: document.querySelector('#meta'),
        },
    ];

    // Get the tab from the URL or set the default
    const urlParams = new URLSearchParams(window.location.search);
    const currentTab = urlParams.get('tab') || 'general';

    // options with default values
    const options = {
        defaultTabId: currentTab,
        activeClasses:
            'active',
        inactiveClasses:
            'inactive',
        onShow: (tabId) => {
            const id = tabId._activeTab.id;
            const url = new URL(window.location);
            url.searchParams.set('tab', id);
            window.history.pushState({}, '', url);
        },
    };

    // instance options with default values
    const instanceOptions = {
        id: 'settings-tab',
        override: true
    };

    const tabs = new Tabs(tabsElement, tabElements, options, instanceOptions);

</script>
@endpush