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


<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('project.cities') }} </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 d-flex align-items-center gap-2">
                <select class="form-select input-shadow rounded_c @error('lang') is-invalid @enderror fs-12px "
                name="lang_filter" id="lang_filter">
                <option value="">
                    {{__('project.chose_language')}}
                </option>
                @foreach ($lang as $item)
                <option value="{{$item->abbr}}"  @if ($item->is_default == '1' || old('lang') ==
                    $item->abbr) selected @endif>
                    {{$item->name}}
                </option>
                @endforeach
            </select>
            </li>


            <li class="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">
                <input type="text" class="form-control form-control-sm" id="search_new" placeholder="{{trans('project.search')}}">
            </li>

            <li class="nav-item me-2">
                <a class="nav-link text-primary fw-bld" href="{{ route('create_city') }}">
                    <b class="bi-plus-square-fill me-1"></b>  {{ trans('project.new_cites') }}
                </a>
            </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:34:35')">
                                <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:34:35')">
                            <i class="bi bi-file-spreadsheet mx-2"></i>
                            {{__('project.excel_csv')}}
                        </a>
                    </li>
                </ul>
            </li>
        </nav>
    </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.id') }}</th> --}}
                    <th class=''>{{ trans("project.country") }}</th>
                    <th class=''>{{ trans("project.city") }}</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,
            "caseInsensitive": false,
            ajax: {
                url: "{{ route('cities') }}",
                type: 'GET',
                data: function(d) {
                    d.search_new = $('#search_new').val();
                    d.status_filter = $('#status_filter').val();
                    d.lang_filter = $('#lang_filter').val();
                    // console.log(d);
                }
            },
            columns: [{
                    data: 'country',
                    name: 'country',

                },
                {
                    data: 'cities',
                    name: 'cities',


                },
                {
                    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', '#no_of_entries', function(e) {
            $(".custom-select").html(`<option value='`+$(this).val()+`' selected></option>`).change();

        });
    });
    $('body').on('change', '#status_filter', function(e) {
        table.draw(true);
    });
    $('body').on('keyup', '#search_new', function(e) {
        table.draw(true);
    });
    $('body').on('change', '#lang_filter', function(e) {
        table.draw(true);
    });

    $('body').on('click', '.clear', function(e) {
        $('#search_new').val("");
        $('#status_filter').val("");
        $('#lang_filter').val("");

        table.draw(true);
    });
    </script>
@include('admin/cities/script')
@endsection