@extends('backend.layouts.app')
@section('content')

<style type="text/css">
.alert.alert-success {
    display: inline-block;
    margin-top: 6px;
    width: 100%;
}

  table {
    table-layout: fixed;
    font-size: 100%;
    word-break: break-all;
  }

  table th,
  table td {
    overflow: hidden;
  }
  div#example_info {
    color: #000 !important;
    text-transform: capitalize !important;
  }

  div#example_paginate {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
    border: 1px solid #f4f4f4;
    background: #fff;
    padding: 0px;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.current,
  .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #000 !important;
    border: 1px solid #337ab7 !important;
    background: #337ab7 !important;
    color: #fff !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 1px solid #337ab7 !important;
    background: #337ab7 !important;
    color: #fff !important;
  }

  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
  .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
    cursor: default;
    color: #fff !important;
  }

  table.dataTable thead th, table.dataTable thead td { border-bottom: none !important;}

  table.dataTable tfoot th, table.dataTable tfoot td { border-top: none !important; }

  div.dataTables_length select {
    border-radius: 0!important;
    border-color: #d2d6de;
    height: 34px;
    padding: 5px 5px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc; }

    div.dataTables_length label { font-weight: bold !important; }

    .dataTables_wrapper .dataTables_filter input {
      border-radius: 0!important;
      border-color: #d2d6de;
      height: 34px;
      padding: 5px 5px;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ccc;
    }

    div.dataTables_filter label { font-weight: bold!important; }

    .col-sm-6{
      margin-top: 10px;
    }
    .required-star{
      color: red;
    }
  </style>

  <div class="col-md-12">
    @if (Session::has('message'))
    <div class="alert alert-success" role="alert">
     {{Session::get('message')}}
   </div>
   @elseif (Session::has('error'))
   <div class="alert alert-warning" role="alert">
     {{Session::get('error')}}
   </div>
   @endif
 </div>

 <div class="container-fluid" style="min-height: 100vh">
  <div class="row bg-white pt-3 pb-5">
    <div class="col-md-12" id="backend-configuration-mobile-gp">
      <div class="box">
        <div class="box-header">
          <div class="row">
           <div class="col-md-11">
            <h3>Custom fields</h3>
          </div>
          <div class="col-md-1">
            <a class="btn btn-default float-right" href="" data-toggle="modal" data-target="#categoryModal">
             <i class="fa fa-plus"></i> Add
           </a>
         </div>
       </div>
     </div>
     <div class="box-body mt-3">
      <div class="row">
        <div class="col-md-12">
          <div class="portlet">
            <div class="table-responsive">
              <table class="table table-hover table-hover table-striped table-hover table-bordered dataTable" id="tbl_sort" style="border-bottom: none;">
                <thead>
                  <tr>
                    <th style="width: 60%">Question</th>
                    <th style="width: 13%">Type</th>
                    <!-- <th>Values</th> -->
                    <th style="width: 8%">Priority</th>
                    <th style="width: 8%">Status</th>
                    <th style="width: 8%">Action</th>
                  </tr>
                </thead>
                <tbody>