@extends('admin.layout.master')
@section('content')
@include('admin/support_type/js')

<style>
    .dataTables_length{
        display: none !important;
    }
</style>
{{-- <div class='container-fluid bg-white rounded '>
    <div class="row justify-content-between rounded bg-light px-3 py-2">
        <div class="col-12 col-md-4 d-flex align-items-center">
            <a class='text-decoration-none fw-bold ' href="{{url('/home')}}">{{trans('project.home')}} </a> <span
                class="bi bi-caret-right"></span>
            <span class='text-decoration-none fw-bold'>{{trans('project.support_type')}}</span>
        </div>
        <div class="col-12 col-md-8 align-self-center float-end ">
            <div class='d-flex align-self-center text-md-center justify-content-end'>
                <div class="row align-items-center ">
                    <div class="col-md-5">
                        <div>
                            <input type="text" class="form-control bg-light  fs-12px rounded-pill" id="search_new"
                                placeholder="{{trans('project.search')}}">
                        </div>
                    </div>
                    <div class="col-md-5 md-mt-0">
                        <select id="status_filter" class="form-select bg-light fs-12px rounded-pill ">
                            <option value="" selected>{{trans('project.all_status')}}</option>
                            <option value="1"> {{trans('project.active')}} </option>
                            <option value="0"> {{trans('project.inactive')}} </option>
                        </select>
                    </div>
                    <div class="col-md-1 col-2 text-end">
                        <div class="add-icon">
                            <a href="{{route('add_supportType')}}">
                                <i class="bi bi-plus-circle-fill" style="font-size: 29px; color:#FEBF2C"></i>
                            </a>
                        </div>
                    </div>

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



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


            <li class="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 form-select-sm">
                    <option value=""> {{trans('project.status')}} </option>
                    <option value="1"> {{trans('project.active')}} </option>
                    <option value="0"> {{trans('project.inactive')}} </option>
                </select>
            </li>

            <li class="nav-item me-2">
                <a class="nav-link text-primary fw-bld" href="{{route('add_supportType')}}">
                    <b class="bi-plus-square-fill me-1"></b>  {{ trans('project.add') }}
                </a>
            </li>

        </nav>
    </div>
</div>







{{-- <div class="container-fluid p-3 rounded">
    <div class='table-responsive '>
        <table class='table table-sm w-100 table-border data-table'>
            <thead>
                <tr class='tex-g'>
                    <th>{{ trans('project.name') }}</th>
                    <th class='text-center'>{{ trans("project.status") }}</th>
                    <th class="text-end">{{ trans('project.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('project.name') }}</th>
                    <th >{{ trans("project.status") }}</th>
                    <th class="text-end">{{ trans('project.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: "{{ route('support_type') }}",
            type: 'GET',
            data: function(d) {
                d.search_new = $('#search_new').val();
                d.status_filter = $('#status_filter').val();
                // console.log(d);
            }
        },
        columns: [{
                data: 'S_name',
                name: 'S_name'
            },
            {
                data: 'status',
                name: 'status',
                orderable: false,
                searchable: false
            },
            {
                data: 'action',
                name: 'action',
                class: 'no-print',
                orderable: false,
                searchable: false
            },
        ],
        "lengthMenu": [
            [10, 20, 50, 70, 100, 200, 300, 400, 500, -1],
            [10, 20, 50, 70, 100, 200, 300, 400, 500, "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