@extends('admin.layout.master')
@section('content')
@include('admin/send_mail/script_js')
<style>
    .dataTables_length{
            display: none !important;
        }
        .dataTables_filter {
        display: none;
    }
</style>

{{--

<div class="row justify-content-between p-2 rounded m-2 bg-light">
    <div class="col-12 col-md-6 align-self-center">
        <a class='text-decoration-none fw-bold theme_link_color' href="{{url('/home')}}">{{ trans('admin.Home') }}</a> <span class="bi bi-caret-right theme_text_color"></span>
        <span class='text-decoration-none fw-bold theme_text_color' >{{trans('admin.email_hosts')}}</span>
    </div>
    <div class="col-12 col-md-6 align-self-center float-end ">
        <div class='align-self-center  text-center justify-content-center'>
            <div class="row">
                <div class="col-md-5 mt-md-0 mt-2">
                    <div>
                        <input type="text" class="form-control rounded-pill " id="search_new" placeholder="{{trans('admin.search')}}">
                    </div>
                </div>
                <div class="col-md-3 mt-md-0 mt-2">
                    <select id="status_filter" class="form-select rounded-pill">
                      <option value="" selected> {{ trans('admin.all_status') }}</option>
                      <option value="1"> {{ trans('admin.active') }}</option>
                      <option value="0"> {{ trans('admin.inactive') }} </option>
                    </select>
                </div>
                <div class="col-md-2 col-3 mt-md-0 mt-1">
                    <a class='text-decoration-none ' href="{{url('/email_hosts/add')}}">
                          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 55 55">
                          <g id="Group_12506" data-name="Group 12506" transform="translate(-1134.648 -427.545)">
                          <ellipse id="Ellipse_593" data-name="Ellipse 593" cx="27.5" cy="27.5" rx="27.5" ry="27.5" transform="translate(1134.648 427.545)" fill="#f56a20"/>
                          <path id="Path_15415" data-name="Path 15415" d="M1.438-6.844V-9.469H8.25v-6.859h2.672v6.859h6.813v2.625H10.922V0H8.25V-6.844Z" transform="translate(1153.017 463.249)" fill="#fff"/>
                          </g>
                          </svg>
                      </a>
                </div>
                <div class="col-md-2 col-3 mt-md-0 mt-1">
                    <div class="dropdown p-0">
                        <a class=" bi bi-three-dots-vertical fs-3 text-white bg-warning admin_css_dot d-flex justify-content-center align-items-center" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">

                        </a>

                        <ul class=" dropdown-menu" aria-labelledby="dropdownMenuLink">
                          <li><a href="#" class="dropdown-item" onclick="jQuery('.data-table').print()"><i class="bi-printer mx-2"></i>
                            {{__('admin.print')}}</a>
                            </li>
                          <li><a class="dropdown-item" href="#" onclick="exportTable('data-table', 'pdf', '{{trans('admin.email_hosts')}} 2024-10-18 02:29:33')"><i class="bi bi-file-earmark-pdf  mx-2"></i>
                            {{__('admin.PDF')}}</a></li>
                          <li> <a class="dropdown-item" href="#" onclick="exportTable('data-table', 'csv', '{{trans('admin.email_hosts')}} 2024-10-18 02:29:33')"> <i class="bi bi-file-spreadsheet  mx-2"></i>
                            {{__('admin.excel_csv')}} </a></li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div> --}}


<div class='bg-white rounded'>
    <div class="nav-scroller">
        <nav class="nav">
            <li class="nav-item d-flex align-items-center">
                <a class='nav-link fw-bold text-primary' href="{{url('/home')}}">{{trans('project.home')}}</a>
                <span class="bi bi-caret-right"></span>
                <span class="mx-2"> {{ trans('admin.email_hosts') }} </span>
            </li>

            <li class="nav-item mx-auto me-2 d-flex align-items-center gap-2">
                <label> {{ trans('admin.show') }} </label>
                <select class="form-select form-select-sm" id="no_of_entries">
                    <option value="10" selected>10</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="200">200</option>
                    <option value="300">300</option>
                    <option value="400">400</option>
                    <option value="400">500</option>
                    <option value="-1">{{ trans('admin.all') }}</option>
                </select>
            </li>



            <li class="nav-item me-2">
                <input type="text" class="form-control form-control-sm" id="search_new" placeholder="{{trans('project.search')}}">
            </li>


            <li class="nav-item me-2">

                    <select id="status_filter" class="form-select">
                      <option value=""> {{ trans('admin.all_status') }}</option>
                      <option value="1"> {{ trans('admin.active') }}</option>
                      <option value="0"> {{ trans('admin.inactive') }} </option>
                    </select>

            </li>


            <li class="nav-item me-2">

              @can('insert /'.Request::path())
                <a class="nav-link text-primary fw-bld" href="{{url('/email_hosts/add')}}">
                    <b class="bi-plus-square-fill me-1"></b>  {{ trans('admin.add_New') }}
                </a>
                @endcan
            </li>

            <li class="nav-item">
                <a class="nav-link" data-bs-toggle="dropdown">
                    <b class="bi-box-arrow-up-right me-2"></b> {{ trans('admin.export') }}
                </a>
                <ul class="dropdown-menu">
                    <li>
                        <a class="dropdown-item" onclick="jQuery('.data-table').print()">
                            <i class="bi-printer mx-2"></i>
                            {{__('project.print')}}
                        </a>
                            <a class="dropdown-item" onclick="exportTable('data-table', 'pdf', '{{trans('home slider')}} 2024-10-18 02:29:33')">
                                <i class="bi bi-file-earmark-pdf mx-2"></i>
                                {{__('project.pdf')}}
                            </a>
                        <a class="dropdown-item" onclick="exportTable('data-table', 'csv', '{{trans('home slider')}} 2024-10-18 02:29:33')">
                            <i class="bi bi-file-spreadsheet mx-2"></i>
                            {{__('project.excel_csv')}}
                        </a>
                    </li>
                </ul>
            </li>
        </nav>
    </div>
  </div>

{{--

<div class="container-fluid rounded">
    <div class='table-responsive'>
        <table class='table table-sm w-100 table-border data-table'>
            <thead>
                <tr class='tex-g'>
                    <th>{{ trans('admin.name') }}</th>
                    <th>{{ trans('admin.host') }}</th>
                    <th>{{ trans('admin.username') }}</th>
                    <th class='text-center'>{{ trans('admin.default') }}</th>
                    <th class='text-center'>{{ trans("admin.status") }}</th>
                    <th class="text-end">{{ trans('admin.actions') }}</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>
</div> --}}




<main class="px-0 scroll-y">
    <!-- body content  -->
    <div class="card rounded border-0">
      <div class="card-body pt-0">
        <div class="row">
          <div class="col-lg-12">
            <div class="table-responsive">
              <table class="table w-100 table-sm table-hover mb-0 table-bordered data-table">
                <thead class="bg-light">
                    <tr>
                        <th>{{ trans('admin.name') }}</th>
                        <th>{{ trans('admin.host') }}</th>
                        <th>{{ trans('admin.username') }}</th>
                        <th>{{ trans('admin.default') }}</th>
                        <th>{{ trans("admin.status") }}</th>
                        <th class="text-end">{{ trans('admin.actions') }}</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
        </div>
      </div>
    </div>
  </div>
  </main>




<script type="text/javascript">
    var table = "";
    $(function() {
        table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            "searching": false,
            ajax: {
                url: "{{ url('email_hosts/host_list') }}",
                type: 'GET',
                data: function(d) {
                  d.search_new = $('#search_new').val();
                  d.status_filter = $('#status_filter').val();
                  // console.log(d);
                }
            },
            columns: [
                {data: 'name', name: 'name'},
                {data: 'host_address', name: 'host_address'},
                {data: 'username', name: 'username'},
                {data: 'is_default', name: 'is_default', orderable: false, searchable: false},
                {data: 'status', name: 'status', orderable: false, searchable: false},
                {data: 'actions', name: 'actions', class:'text-end no-print', orderable: false, searchable: false},
            ],
            "lengthMenu": [[10, 25, 50, 100, -1], [100, 200, 500, 700, "All"]]
        });
    });
    $('body').on('change', '#status_filter', function(e) {
      table.draw(true);
    });
    $('body').on('keyup', '#search_new', function(e) {
      table.draw(true);
    });
    $('body').on('click', '.clear', function(e) {
        $('#search_new').val("");
        $('#status_filter').val("");
        table.draw(true);
    });
</script>
@endsection