@extends('layouts.admin.main') @section('title', 'Fitness Goal')
@section('header')
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-lg-6 col-7">
                <h6 class="h2 text-white d-inline-block mb-0"></h6>
            </div>
        </div>
    </div>
@endsection
 @section('content')
<div class="row">
  <!-- Light table -->
  <div class="col">
    <div class="card">
      <!-- Card header -->
        <div class="card-header border-0">
            <div class="row align-items-center">
                <div class="col">
                    <h3 class="mb-0">Foods</h3>
                </div>
                <div class="col text-right">
                    @if($type == 'master')
                        <a href="{{ route('admin.foods.add') }}" 
                        class="btn btn-sm btn-primary">
                            Add Food
                        </a>
                    @endif
                    <br/>
                </div>
            </div>
        </div>
      <form action="{{ url()->full() }}" method="get" id="get_data">@csrf
        <input type="hidden" name="page" id="page" class="form-control">
      </form>
      <div class="card-body pt-0">
        <div class="loading-overlay hide-loading-overlay">
          <div class="loading-content">
            <img src="{{ asset('/img/loading.gif') }}" alt="Loading..." />
          </div>
        </div>@include('layouts.messages')
        {{-- <div class="ajax-content">
        </div> --}}
        <div class="mb-4">
            @php $activeClass = 'btn-primary'; $inactiveClass = 'btn-secondary'; @endphp
            <div class="section">
                <div class="tabs">
                    <a href="{{ route('admin.foods.index','master') }}"
                    class="btn {{ $type == 'master' ? $activeClass : $inactiveClass }}">
                        Master Food
                    </a>
                    <a href="{{ route('admin.foods.index','usda') }}"
                    class="btn {{ $type == 'usda' ? $activeClass : $inactiveClass }}">
                        USDA Food
                    </a>
                    <a href="{{ route('admin.foods.index','user') }}"
                    class="btn {{ $type == 'user' ? $activeClass : $inactiveClass }}">
                        User Food
                    </a>
                </div>
                {{-- @includeIf('admin.users.tabs.' . $tab) --}}
            </div>
        </div>
        <div class="ajax-content">
        </div>
      </div>
    </div>
  </div>
</div>@endsection @section('scripts') @parent
<script>
        function showPermissionAlertadd() {
    alert("You do not have permission to add this product.");
}
</script>
{{-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script> --}}
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<script>
  function get_data_ajax() {
    var form = $('form#get_data');
    $('.loading-overlay').removeClass('hide-loading-overlay');
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: $('form#get_data').serialize(),
      success: function (data) {
        $('.ajax-content').html(data);
        $('.loading-overlay').addClass('hide-loading-overlay');
      },
      error: function (xhr, textStatus, errorThrown) {
        alert('Error in fetching data. Please try again.');
        $('.loading-overlay').addClass('hide-loading-overlay');
      }
    });
  }
  $(document).on('click', '.pagination>li>a', function (event) {
    event.preventDefault();
    $('#page').val($(this).text());
    get_data_ajax();
  });
  $(document).on('submit', 'form#get_data', function (event) {
    event.preventDefault();
    get_data_ajax();
  });
  $(document).ready(function() {
    $('form#get_data').submit();
  });
  </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
  $(document).on('submit', 'form.delete-action', function (event) {
    if (confirm('Are you sure you want to delete this?')) {
      $.ajax({
        dataType: 'json',
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
          show_toastrs(data);
          $('#page').val('1');
          get_data_ajax();
        },
        error: function(err) {
          console.log(err);
        }
      });
    }
    return false;
  });
</script>@endsection
<style>
    h6.h2 {
        font-size: 32px;
    }
    div#categorys_wrapper {
    padding-bottom: 0px;
}
    h3 {
        font-size: 18px !important;
    }
    .navbar-top.border-bottom.navbar-dark {
        background-color: white!important;
        border-style:doted !important;
    }
    .pb-6, .py-6 {
        padding: 0 27px;
    }
    label {
        color: gray;
        font-family: sans-serif;
        font-weight: bold;
    }
    label input[type="search"] {
        border: solid #A3CB38 1px;
        border-radius: 5px;
    }
    .navbarflex {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .navbar-expand .navbar-nav{
        margin-left:0 !important;
    }
    div#categorys_info{
        color: #808080;
    }
    th {
        color: black !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }
    table#categorys{
    margin-bottom: 0px !important;
}
.dataTables_info{
    padding-left: 0px !important;
}
.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 5px !important;
    padding-bottom: 5px;
}
.pagination-block.text-center.mt-2 {
    margin-top: 0px !important;
}
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.375rem;
    margin-bottom:0px !important;
}
.card-body.pt-0 {
  padding-bottom: 20px;
}
.pb-6  {
    padding: 40px 0px !important;
   }
   .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #A3CB38 !important;
    border-color: #A3CB38 !important;
}
.new-alert.alert.alert-success.alert-dismissible.mb-2 {
    width: 370px !important;
    margin: auto !important;
}
      /*tablate*/
    @media (min-width:768px) and (max-width:1023px) {
        .main-content .navbar-top .collapse {
             justify-content: space-between;;
        }
        .navbar-expand .navbar-nav{
            margin-left:0 !important;
        }
        .table td{
            font-size:16px !important;
        }
        th {
            color: black !important;
            font-size: 16px !important;
            font-weight: 800 !important;
        }
        H3{
            font-size: 20px !important;
        }
        .btn{
            font-size:16px !important;
        }
        .card-body {
            padding:0 !important;
        }
        .actions .delete-action .btn {
            font-size: 14px !important;
        }
        table.dataTable.no-footer {
            padding: 15px 0 0 0;
        }
        div#planlist_filter {
            padding: 15px 0px;
        }
    }
    /*mobile*/
    @media (min-width:320px) and (max-width:767px) {
        .table td{
            font-size:14px !important;
        }
        label {
            padding: 0 17px;
        }
        th {
            color: black !important;
            font-size: 14px !important;
            font-weight: 800 !important;
        }
        H3{
            font-size: 17px !important;
        }
        .btn{
            font-size:14px !important;
        }
        .actions .delete-action .btn {
            font-size: 12px !important;
        }
        table.dataTable.no-footer {
            padding: 15px 0 0 0;
        }
        div#planlist_filter {
            padding: 15px 0px;
        }
        div#categorys_info {
          padding-top:10px !important;
          padding-bottom:10px;
    color: #A3CB38;
}
.pagination-block.text-center.mt-2 {
    margin-top: 10px !important;
}
    }
    label {
    display: flex !important;
    margin-bottom: 0.5rem;
}
div#categorys_length, div#categorys_length label, div#categorys_filter, div#categorys_filter label {
    padding: 0px !important;
    display: flex;
    justify-content: center;
}
</style>