@extends('layouts/contentNavbarLayout')

@section('title', 'blog')
@section('vendor-style')
  <style>

    .dropdown-toggle{
      border: 1px solid black;
    }
  </style>
@endsection
@section('content')

  <h4 class="fw-bold py-3 mb-4">
    <span class="text-muted fw-light">{{trans('main.Blog')}} </span>
  </h4>
  <div class="row">
    <div class="col">
      <a href="{{route('admin.blog.create')}}" class="btn btn-primary" >
        {{trans('main.add_blog')}}
      </a>
    </div>
  </div>
  <br>

  <div class="card">
    <h5 class="card-header"></h5>
    <div class="card-body">
      <div class="table-responsive">
        <table class="table text-md-nowrap" id="example1">
          <thead>
          <tr class="text-nowrap ">
            <th class="text-primary">#</th>

            <th class="text-primary">{{trans('main.title')}} </th>
            <th class="text-primary">{{trans('main.category')}}</th>
            <th class="text-primary">{{trans('main.image')}}</th>
            <th class="text-primary">{{trans('main.action')}}</th>
          </tr>
          </thead>
          <tbody>
                    @foreach($blogs as $blog)
                          <tr data-id="{{$blog->id}}">
              <th>{{$i}}</th>
              <th>{{$blog->getTranslation('name','en')}}</th>
              <th>{{$blog->category->getTranslation('name','en')}}</th>
              <th><img src="{{asset($blog->image)}}" width="150" height="150"></th>

              <th>
                <a class="btn btn-danger" href="{{route('admin.blog.delete',['blog'=>encrypt($blog->id)])}}"><i class='bx bxs-trash' ></i></a>
                <a href="{{route('admin.blog.edit',['blog'=>$blog->id])}}" class="btn btn-primary"><i class='bx bx-edit-alt' ></i></a>
              </th>

            </tr>
          @endforeach
          </tbody>
        </table>
      </div>
    </div>
  </div>


@endsection

@section('page-script')
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
    $('table').on('change', '.status', function () {
      var row = $(this).closest('tr');
      var id = row.attr('data-id');
      var type =$(this).data('type')
      $.ajax({
        type: 'POST',
        url: '{{route('admin.blog.status')}}',
        data: {id: id,type:type, "_token": "{{ csrf_token() }}",},
        dataType: "json",
        success: function (response) {

          Swal.fire({
            icon: 'success',
            title: 'Success...',
          })
        },
        error: function (response) {
          window.onload = function () {
            Swal.fire({
              icon: 'error',
              title: 'Error...',
            })
          }
        }
      });
    });

  </script>
@endsection