@extends('main')

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
@endsection

@section('content')
<div class="content-wrapper">

    <!-- Main content -->
    <section class="content">
      @if(session('message'))
      <div class="row">
        <div class="col-12">
          <div class="form-group mt-3">
            <div class="alert alert-success" role="alert">
                {{ session('message') }}
            </div>
        </div>
        </div>
      </div>
       @endif
      <!-- /.row -->
      <div class="row">
        <div class="col-12">
          <div class="card card-primary mt-3">
            <div class="card-header"></div>
            <div class="card-body">
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <a class="nav-link active" id="welcome-tab" data-toggle="tab" href="#welcome" role="tab" aria-controls="welcome" aria-selected="true">Welcome</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="button-tab" data-toggle="tab" href="#button" role="tab" aria-controls="button" aria-selected="false">Button</a>
                </li>
                <li class="nav-item" role="presentation">
                  <a class="nav-link" id="display-tab" data-toggle="tab" href="#display" role="tab" aria-controls="display" aria-selected="false">Display</a>
                </li>
              </ul>
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active text-center" id="welcome" role="tabpanel" aria-labelledby="welcome-tab">
                  <iframe class="mt-4" src="{{ route('bio') }}" style="width: 80%; height:100vh;"></iframe>
                </div>
                <div class="tab-pane fade" id="button" role="tabpanel" aria-labelledby="button-tab">
                  <div class="row">
                    <div class="col-12 mt-3">
                      <a href="{{ route('bio.create') }}" class="btn btn-primary float-right">Add New Bio</a>
                    </div>
                    <div class="col-12 mt-3">
                      <table id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                          <th>BIO</th>
                          <th>Options</th>
                        </tr>
                        </thead>
                        <tbody>
                        @if(!empty($bio))
                        @foreach($bio as $b)
                        <tr>
                          <td>{{ $b->bio }}</td>
                          <td class="text-center">
                              <a href="{{$b->slug}}" target="_blank" class="btn btn-primary btn-sm"  title="see article" target="_blank"><i class="fas fa-link"></i></a>
                              <a href="/admin/dashboard/bio/edit/{{$b->id}}" class="btn btn-warning btn-sm"  title="edit Bio"><i class="fas fa-edit"></i></a> 
                            <a href="/admin/dashboard/bio/delete/{{$b->id}}" class="btn btn-danger btn-sm" title="delete Bio"><i class="fas fa-trash" onclick="return confirm('Anda Ingin Menghapus BIO ?');"></i></a>
                          </td>
                        </tr>
                       @endforeach
                       @endif
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
                <div class="tab-pane fade" id="display" role="tabpanel" aria-labelledby="display-tab">
                  <form role="form" method="POST" action="{{ route('bio.page') }}" enctype="multipart/form-data">
                    {{csrf_field()}}
                      <div class="form-group mt-3">
                        <label for="background">Background Color</label>
                        <input type="color" name="background" class="form-control" id="background" placeholder="Background Code" value="{{ $biopage->background }}">
                      </div>
                      <div class="form-group">
                        <label for="background">Background Image</label>
                       <input type="file" name="file" id="file" class="form-control" accept="image/*">
                      </div>
                      <div class="form-group">
                        <label for="logo">Logo Image</label>
                       <input type="file" name="logo" id="logo" class="form-control" accept="image/*">
                      </div>
                      <div class="form-group">
                        <label for="background">Title Page</label>
                        <input type="text" name="title" class="form-control" id="title" placeholder="title" value="{{ $biopage->title }}">
                      </div>
                      <div class="form-group">
                        <label for="background">Header Title</label>
                        <input type="text" name="header_title" class="form-control" id="header_title" placeholder="Header" value="{{ $biopage->header_title }}">
                      </div>
                      <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    <!-- /.content -->
    </section>
  </div>
@endsection

@section('js')
<!-- DataTables -->
<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>


<script>
$(document).ready(function() {
    $('#example2').DataTable({
      "ordering": false
    })
})
</script>

@endsection