<div>
    <div class="tab">
        <ul class="nav nav-tabs customtab" role="tablist">
            <li class="nav-item">
                <a wire:click="selectTab('general_settings')"
                    class="nav-link {{ $tab == 'general_settings' ? 'active' : '' }}" data-toggle="tab"
                    href="#general_settings" role="tab" aria-selected="true">Allgemeine Einstellungen</a>
            </li>
            <li class="nav-item">
                <a wire:click="selectTab('logo_favicon')" class="nav-link {{ $tab == 'logo_favicon' ? 'active' : '' }}"
                    data-toggle="tab" href="#logo_favicon" role="tab" aria-selected="false">Logo &
                    Favicon</a>
            </li>
            <li class="nav-item">
                <a wire:click="selectTab('social_links')" class="nav-link {{ $tab == 'social_links' ? 'active' : '' }}"
                    data-toggle="tab" href="#social_links" role="tab" aria-selected="false">Social Links</a>
            </li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane fade {{ $tab == 'general_settings' ? 'active show' : '' }}" id="general_settings"
                role="tabpanel">
                <div class="pd-20">
                    <form wire:submit="updateSiteInfo()">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label><b>Seiten Titel</b><span style="color:red">*</span></label>
                                    <input type="text" class="form-control" wire:model="site_title"
                                        placeholder="Seiten Titel angeben" />
                                    @error('site_title')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for=""><b>Seiten Kontakt E-Mail</b><span
                                            style="color:red">*</span></label>
                                    <input type="text" class="form-control" wire:model="site_email"
                                        placeholder="Kontakt E-Mail Adresse angeben" />
                                    @error('site_email')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for=""><b>Seiten Kontakt Telefonnummer</b><small>
                                            (optional)</small></label>
                                    <input type="text" class="form-control" wire:model="site_phone"
                                        placeholder="Kontakt Telefonnummer angeben" />
                                    @error('site_phone')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for=""><b>Seiten Meta Keywords</b><small>
                                            (optional)</small></label>
                                    <input type="text" class="form-control" wire:model="site_meta_keywords"
                                        placeholder="Eg: ecommerce, free api, laravel, dropshipping" />
                                    @error('site_meta_keywords')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for=""><b>Seiten Meta Description</b><small>
                                    (optional)</small></label>
                            <textarea class="form-control" rows="4" cols="4" wire:model="site_meta_description"
                                placeholder="Meta Description hier angeben"></textarea>
                            @error('site_meta_description')
                                <span class="text-danger ml-1">{{ $message }}</span>
                            @enderror
                        </div>
                        <button class="btn btn-primary" type="submit">Speichern</button>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade {{ $tab == 'logo_favicon' ? 'active show' : '' }}" id="logo_favicon"
                role="tabpanel">
                <div class="pd-20">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Seiten Logo</h6>
                            <div class="mb-2 mt-1" style="max-width: 200px">
                                <img wire:ignore
                                    src="/images/site/{{ isset(settings()->site_logo) ? settings()->site_logo : '' }}"
                                    alt="img-thumbnail" class="img-thumbnail" id="preview_site_logo">
                            </div>
                            <form action="{{ route('admin.update_logo') }}" method="post"
                                enctype="multipart/form-data" id="updateLogoForm">
                                @csrf

                                <div class="mb-2">
                                    <input type="file" name="site_logo" id="profileLogoFile" accept="image/*"
                                        class="form-control" />
                                    <span class="text-danger ml-1"></span>
                                </div>
                                <button type="submit" class="btn btn-primary">Logo ändern</button>
                            </form>
                        </div>
                        <div class="col-md-6">
                            <h6>Seiten Favicon</h6>
                            <div class="mb-2 mt-1" style="max-width: 100px">
                                <img wire:ignore
                                    src="/images/site/{{ isset(settings()->site_favicon) ? settings()->site_favicon : '' }}"
                                    alt="img-thumbnail" class="img-thumbnail" id="preview_site_favicon">
                            </div>
                            <form action="{{ route('admin.update_favicon') }}" method="POST"
                                enctype="multipart/form-data" id="updateFaviconForm">
                                @csrf
                                <div class="mb-2">
                                    <input type="file" name="site_favicon" id="profileFaviconFile"
                                        class="form-control" accept="image/png,image/jpeg, image/jpg" />
                                    <span class="text-danger
                                        ml-1"></span>
                                </div>
                                <button type="submit" class="btn btn-primary">Favicon ändern</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade {{ $tab == 'social_links' ? 'active show' : '' }}" id="social_links"
                role="tabpanel">
                <div class="pd-20">
                    <form method="POST" wire:submit="updateSiteSocialLinks()">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for=""><b>Facebook</b></label>
                                    <input type="text" class="form-control" wire:model="facebook_url"
                                        placeholder="Facebook Url" />
                                    @error('facebook_url')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for=""><b>Instagram</b></label>
                                    <input type="text" class="form-control" wire:model="instagram_url"
                                        placeholder="Instagram Url" />
                                    @error('instagram_url')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for=""><b>LinkedIn</b></label>
                                    <input type="text" class="form-control" wire:model="linkedin_url"
                                        placeholder="LinkedIn Url" />
                                    @error('linkedin_url')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for=""><b>Twitter (X)</b></label>
                                    <input type="text" class="form-control" wire:model="twitter_url"
                                        placeholder="Twitter Url" />
                                    @error('twitter_url')
                                        <span class="text-danger ml-1">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Speichern</button>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
