@extends('Admin.layout.master1')
@section('title','Sosyal medya hesapları')
@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">Sosyal Medya 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.social')}}">Yeni sosyal medya 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">Sosyal Medya İcon</th>
            <th class="sort pe-1 align-middle white-space-nowrap text-center" data-sort="status">Sosyal Medya adı</th>
            <th class="sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Sosyal Medya Linki</th>
            <th class="sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Statü durumu</th>
            <th class="sort pe-1 align-middle white-space-nowrap pe-7" data-sort="date">Kaldır</th>
          </tr>
        </thead>
        <tbody class="list" id="table-orders-body">
          @foreach($socials as $social)
          <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>{{ $social->social_id }}</strong></a>
            </td>
            <td class="date py-2 align-middle"><i class="{{ $social->social_logo}}"></i></td>
            <td class="date py-2 align-middle">{{ $social->title}}</td>
            <td class="date py-2 align-middle">{{ $social->social_link}}</td>

            <td class="status py-2 align-middle text-center fs-0 white-space-nowrap">
              @if($social['status'] == 1)
                  <a class="updateTopbarMenuStatus" id="socials-{{ $social['social_id'] }}"
                    socials_id="{{ $social['social_id'] }}" href="javascript:void(0)">
                    <i class="fa fa-toggle-on" aria-hidden="true" status="Aktif"></i>
                  </a>
              @else
                  <a class="updateTopbarMenuStatus" id="socials-{{ $social['social_id'] }}"
                    socials_id="{{ $social['social_id'] }}" href="javascript:void(0)">
                    <i class="fa fa-toggle-off" aria-hidden="true" status="Pasif"></i>
                  </a>
              @endif
        </td>
        <td class="status py-2 align-middle text-center fs-0 white-space-nowrap">
              <a href="javascript:void(0)" class="confirmDelete" delete_id="{{$social->social_id}}">
                <i class="btn btn-danger">Sil</i>
              </a>
        </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', '.updateTopbarMenuStatus', function () {
      var status     = $(this).children().attr("status");
      var socials_id = $(this).attr("socials_id");
      //console.log(status);
      //console.log(socials_id);
      $.ajax({
         type:'POST',
         url:'{{ route('socialTopUpdate') }}',
         data:{
           status:status,
           socials_id:socials_id
         },
         headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
         success:function(resp){
           if (resp['status']==0)
           {
             $("#socials-"+socials_id).html("<i class='fa fa-toggle-off' aria-hidden='true' status='Pasif'></i>");
           }
           else if(resp['status']==1)
           {
             $("#socials-"+socials_id).html("<i class='fa fa-toggle-on' aria-hidden='true' status='Aktif'></i>");
           }
         }
      });
    });
});
</script>

<script>
  $(".confirmDelete").click(function(){
    var id = $(this).attr("delete_id");
    Swal.fire({
      title: 'Sosyal medyayı silmek istediğine emin misin ?',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Evet, sil!'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Silindi!',
          'Sosyal medyayı sildin.',
          'success'
        )
        window.location = "/admin/delete-social/"+id;
      }
})
  });
</script>

@endsection