@extends('Admin.layout.master1')
@section('title','Bülten aboneleri')
@section('content')

<div class="card mb-3" id="ordersTable" data-list='{"valueNames":["order","date","link","address","status","amount"],"page":10,"pagination":true}'>
  <div class="card-header">
    <div class="row flex-between-center">
      <div class="col-4 col-sm-auto d-flex align-items-center pe-0">
        <h5 class="fs-0 mb-0 text-nowrap py-2 py-xl-0">Proje Listesi</h5>
      </div>
      <div class="col-12 col-sm-auto ms-auto text-end ps-0">
        <div id="orders-actions">
          <button class="btn btn-falcon-default btn-sm" type="button">
            <span class="fas fa-plus" data-fa-transform="shrink-3 down-2"></span>
            <span class="d-none d-sm-inline-block ms-1"><a href="{{ route('add.product')}}">Yeni proje ekle</a></span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive scrollbar">
      <table class="table table-sm table-striped fs--1 mb-0 overflow-hidden">
        <thead class="bg-200 text-900">
          <tr>
            <th>
              <div class="form-check fs-0 mb-0 d-flex align-items-center"><input class="form-check-input" id="checkbox-bulk-customers-select" type="checkbox" data-bulk-select='{"body":"table-orders-body","actions":"orders-bulk-actions","replacedElement":"orders-actions"}' /></div>
            </th>
            <th class="sort pe-1 align-middle white-space-nowrap" data-sort="order">ID</th>
            <th class="sort pe-1 align-middle white-space-nowrap" data-sort="link">Email</th>
            <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="status">Statü</th>
            <th class="sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Tarih</th>

          </tr>
        </thead>
        <tbody class="list" id="table-orders-body">
          @foreach($newsletterSubcibers as $subcriber)
          <tr class="btn-reveal-trigger">
            <td class="align-middle" style="width: 28px;">
              <div class="form-check fs-0 mb-0 d-flex align-items-center">
                <input class="form-check-input" type="checkbox" id="checkbox-0" data-bulk-select-row="data-bulk-select-row" />
              </div>
            </td>
            <td class="order py-2 align-middle white-space-nowrap">
              <a href=""><strong>{{ $subcriber->id }}</strong></a>
            </td>
            <td class="date py-2 align-middle">{{ $subcriber->email}}</td>
            <td class="status py-2 align-middle text-center fs-0 white-space-nowrap">
              @if($subcriber['status'] == 1)
                  <a class="updateSubscriberStatus" id="subscriber-{{ $subcriber['id'] }}"
                    subscriber_id="{{ $subcriber['id'] }}" href="javascript:void(0)">
                    <i class="fa fa-toggle-on" aria-hidden="true" status="Aktif"></i>
                  </a>
              @else
                  <a class="updateSubscriberStatus" id="subscriber-{{ $subcriber['id'] }}"
                    subscriber_id="{{ $subcriber['id'] }}" href="javascript:void(0)">
                    <i class="fa fa-toggle-off" aria-hidden="true" status="Pasif"></i>
                  </a>
              @endif
        </td>
        <td class="date py-2 align-middle">{{ $subcriber->created_at}}</td>
        @endforeach
      </tbody>
    </table>
  </div>
</div>
<div class="card-footer">
  <div class="d-flex align-items-center justify-content-center">
    <button class="btn btn-sm btn-falcon-default me-1" type="button" title="Previous" data-list-pagination="prev">
      <span class="fas fa-chevron-left"></span>
    </button>
    <ul class="pagination mb-0"></ul>
    <button class="btn btn-sm btn-falcon-default ms-1" type="button" title="Next" data-list-pagination="next">
      <span class="fas fa-chevron-right"></span>
    </button>
  </div>
</div>
</div>
@endsection

@section('javascript')

<script>
 $(document).ready(function() {
    $(document).on('click', '.updateSubscriberStatus', function () {
      var status        = $(this).children().attr("status");
      var subscriber_id = $(this).attr("subscriber_id");
      //console.log(status);
      //console.log(subscriber_id);
      $.ajax({
         type:'POST',
         url:'{{ route('SubUpdate') }}',
         data:{
           status:status,
           subscriber_id:subscriber_id
         },
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         success:function(resp){
           if (resp['status']==0)
           {
             $("#subscriber-"+subscriber_id).html("<i class='fa fa-toggle-off' aria-hidden='true' status='Pasif'></i>");
           }
           else if(resp['status']==1)
           {
             $("#subscriber-"+subscriber_id).html("<i class='fa fa-toggle-on' aria-hidden='true' status='Aktif'></i>");
           }
         }
      });
    });
});
</script>

@endsection