@extends('layouts.home_panel')

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

@section('content')  
<!-- ======= Hero Section ======= -->
<section id="hero" class="d-flex align-items-center">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 d-flex flex-column justify-content-center pt-4 pt-lg-0 order-2 order-lg-1" data-aos="fade-up" data-aos-delay="200">
          <h3 style="color: white;">Grow Your Online Presence By Leveraging The Power Of Guest Posts</h3>
          <p style="color: white;">99Outreach simplifies the process of guest posting on top-notch websites. Do you want to publish a guest post? Consider it done. Eager to sell a guest post slot on your website? With 99Outreach, it’s as easy as cracking an egg.</p>
          <div class="d-lg-flex">
            <a href="{{ URL('/register') }}" class="btn-get-started scrollto">Sign Up Free</a>
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="zoom-in" data-aos-delay="200">
          <img src="{{ URL::asset('front/assets/img/hero-img.png') }}" class="img-fluid animated" alt="">
        </div>
      </div>
    </div>

  </section><!-- End Hero -->
  
  <main id="main">
  
    <div class="container" data-aos="fade-up">
      <div class="mt-3 justify-content-center filter-mobile">
        <button class="btn btn-danger" onclick="formShow()" id="filterButtonShow"><i class="icofont-filter"></i> Show Filter</button>
        <button class="btn btn-danger" onclick="formHide()" id="filterButtonHide" style="display: none;"><s><i class="icofont-filter"></i></s> Hide Filter</button>
      </div>

      <div class="row mt-5 mb-5 justify-content-center">
        <div class="col-lg-12">
          <table id="example1" class="table table-bordered table-striped">
              <thead class="thead-dark">
              <tr>              
                <th>Website Name</th>
                <th>DA</th>
                <th>PA</th>
                <th>Link Type</th>
                <th>Price</th>
                <th>Action</th>
              </tr>
              </thead>
              <tbody>
              @foreach($websites as $website)
                <tr>                
                  <td>{{ $website->website }}</td>
                  <td>{{ $website->da }}</td>
                  <td>{{ $website->pa }}</td>
                  <td>{{ $website->link_type }}</td>
                  <td>${{ $website->price_with_link }}</td>
                  <td><a class="btn btn-sm btn-info" href="/b/add/{{ $website->id }}" role="button"><i class="icofont-shopping-cart"></i> Add</a></td>
                </tr>
              @endforeach
              </tbody>
          </table>
        </div>
      </div>
    </div>

  </main><!-- End #main -->
@endsection

@section('bottom-scripts')
  <!-- DataTables -->
  <script src="{{ URL::asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
  <script src="{{ URL::asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
  <script src="{{ URL::asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
  <script src="{{ URL::asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
  <script>
    $(function () {
      $("#example1").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $('#example2').DataTable({
        "paging": true,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
      });
      $("#example3").DataTable({
        "responsive": false,
        "autoWidth": false,
        "scrollX": true,
      });
    });
    function formShow()
    {
      document.getElementById("filterButtonShow").style.display = "none";
      document.getElementById("filterButtonHide").style.display = "";
      document.getElementById("filter-form").style.display = "block";
    }
    function formHide()
    {
      document.getElementById("filterButtonHide").style.display = "none";
      document.getElementById("filterButtonShow").style.display = "";
      document.getElementById("filter-form").style.display = "none";
    }
  </script>
@endsection