@extends('user.header')
@section('userContent')
  <div class="content-wrapper" style="min-height: 887px;">
    <div class="container-full">
      <!-- Content Header (Page header) -->
      @include('extensions.alerts')
      <!-- Main content -->
      <section class="content">
        <div class="row">
          <div class="col-xl-12 col-lg-12 col-12">
            <div class="box">
              <div class="box-header with-border">
                <h4 class="box-title">Home-Page Slider</h4>
                <a class="btn btn-sm btn-bold btn-primary float-end" href="{{ route('admin.sliders.create') }}">+ New
                  Slider</a>
              </div>
              <div class="box-body">
                @include('cms.banners-select-box')
                <div class="table-responsive">
                  <div id="example2_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                    <div class="row">
                      <div class="col-sm-12 col-md-6"></div>
                      <div class="col-sm-12 col-md-6"></div>
                    </div>
                    <div class="row">
                      <div class="col-sm-12">
                        <table id="example2" class="table table-lg invoice-archive tr-odd_clr dataTable no-footer"
                          role="grid" aria-describedby="example2_info">
                          <thead>
                            <tr role="row">

                              <th width="2%" class="sorting_asc" tabindex="0" aria-controls="example2" rowspan="1"
                                colspan="1" aria-sort="ascending" aria-label="Sl#: activate to sort column descending">Sl#
                              </th>
                              <th width="18%" class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                colspan="1" aria-label="Client Name: activate to sort column ascending">Slider Image</th>

                              <th width="12%" class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                colspan="1" aria-label="Client Address: activate to sort column ascending">Slider Link
                              </th>
                              <th width="10%" class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                colspan="1" aria-label="Next Call: activate to sort column ascending">Slider Sort</th>
                              <th width="15%" class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                colspan="1" aria-label="Client Followup: activate to sort column ascending">Slider Status
                              </th>
                              <th width="15%" class="sorting" tabindex="0" aria-controls="example2" rowspan="1"
                                colspan="1" aria-label="Action: activate to sort column ascending">Action</th>
                            </tr>
                          </thead>
                          <tbody>
                            <form id="sorting-form" method="post" action="{{ route('admin.home-slider-sort-update') }}">
                              @csrf
                              @foreach ($sliders as $key => $slider)
                                <input type="hidden" name="id[]" value="{{ $slider->id }}">
                                <tr role="row" class="odd">
                                  <td align="left" class="sorting_1">
                                    {{-- <input type="checkbox" id="md_checkbox_21" class="filled-in chk-col-primary">
													<label for="md_checkbox_21"></label> --}}
                                    {{ ++$key }}
                                  </td>

                                  <td align="left">
                                    <div class="row">
                                      <div class="col-md-4">
                                        <img
                                          src="{{ asset('/consultant/public/uploads/sliders') }}/{{ $slider->slider_image }}"
                                          class="img-fluid">
                                      </div>
                                    </div>
                                  </td>
                                  <td align="left">
                                    <a href="{{ $slider->slider_link }}" target="_blank">Slider Link</a>
                                  </td>

                                  <td align="left">
                                    <input type="number" min="0" name="sort[{{ $slider->id }}]"
                                      class="form-control w-auto" value="{{ $slider->sort }}">
                                  </td>

                                  <td align="left">
                                    @if ($slider->status === 1)
                                      {{ 'Active' }}
                                    @else
                                      {{ 'In-Active' }}
                                    @endif
                                  </td>
                                  <td>
                                    <a href="{{ route('admin.sliders.edit', $slider->id) }}"
                                      class="waves-effect waves-light btn btn-default btn-flat mb-5 d-block"
                                      style="width:100%;font-size:12px;background:#989898 !important;color:#fff !important">
                                      Edit</a>

                                    <a href="javascript:;" data-bs-toggle="modal" data-bs-target="#modal-delete"
                                      onclick="destroyUrlUpdate(this)"
                                      data-destroy-url="{{ route('admin.sliders.destroy', $slider->id) }}"
                                      class="waves-effect waves-light btn btn-default btn-flat mb-5"
                                      style="width:100%;font-size:12px;background:#989898 !important;color:#fff !important">
                                      Delete</a>
                                  </td>
                                </tr>
                              @endforeach
                            </form>
                            <tr>
                              <td></td>
                              <td></td>
                              <td></td>
                              <td><button form="sorting-form" class="btn btn-sm btn-success">Update Slider
                                  Sorting</button></td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
@endsection