@extends('back.layouts.pages-layout')
@section('pageTitle', isset($pageTitle) ? $pageTitle: 'Settings')
@section('content')
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row align-items-center">
        <div class="col">
            <div class="page-title">
                Settings
            </div>
            
        </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">
      <div class="page-wrapper">
    <div class="card">
        <div class="card-header">
          <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs" role="tablist">
            <li class="nav-item" role="presentation">
              <a href="#tabs-home-8" class="nav-link active" data-bs-toggle="tab" aria-selected="true" role="tab">Settings</a>
            </li>
            <!--<li class="nav-item" role="presentation">-->
            <!--  <a href="#tabs-profile-8" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">Logo & Favicon</a>-->
            <!--</li>-->
            <li class="nav-item" role="presentation">
              <a href="#tabs-activity-8" class="nav-link" data-bs-toggle="tab" aria-selected="false" role="tab" tabindex="-1">Social Media</a>
            </li>
          </ul>
        </div>
        <div class="card-body">
          <div class="tab-content">
            <div class="tab-pane fade active show" id="tabs-home-8" role="tabpanel">
              {{-- <h4>Home tab</h4> --}}
              <div>
                @livewire('general-settings')
              </div>
            </div>
            <div class="tab-pane fade" id="tabs-profile-8" role="tabpanel">
              <h4>Logo & Favicon</h4>
              <div>
                @livewire('logo-favicon-upload')
              </div>
            </div>
            <div class="tab-pane fade" id="tabs-activity-8" role="tabpanel">
              <h4>Social Media Links</h4>
              <div>
                @livewire('author-blog-social-media-form')
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
  <script>

    $('#changeBlogFaviconForm').submit(function(e)){
      e.preventDefault();
      var form = this;
      $.ajax({
        url:$(form).attr('action'),
        method:$(form).attr('method'),
        data:new FormData(form),
        processData:false,
        dataType:'json',
        contentType:false,
        beforeSend:function(){},
        success:function(data){
          toastr.remove();
          if (data.status == 1) {
            toastr.success(data.msg);
            $(form)[0].reset();
          } else {
            toastr.error(data.msg);
          }
        }
      });
    }

    $('#changeBlogLogoForm').submit(function(e)){
      e.preventDefault();
      var form = this;
      $.ajax({
        url:$(form).attr('action'),
        method:$(form).attr('method'),
        data:new FormData(form),
        processData:false,
        dataType:'json',
        contentType:false,
        beforeSend:function(){},
        success:function(data){
          toastr.remove();
          if (data.status == 1) {
            toastr.success(data.msg);
            $(form)[0].reset();
          } else {
            toastr.error(data.msg);
          }
        }
      });
    }

    $('input[name="blog_logo"]')
    var $image = $('#logo-image-preview');
    $image.viewer({
      inline: true,
      viewed: function() {
        $image.viewer('zoomTo', 1);
      }
    });
    // Get the Viewer.js instance after initialized
    var viewer = $image.data('viewer');
    // View a list of images
    $('#changeBlogLogoForm').viewer();

    
  </script>
@endpush