@extends('layouts.master')
@section('content')
<link class="js-stylesheet" href="{{ asset('css/light.css') }}" rel="stylesheet">



  <!-- Modal -->
  <div class="modal fade" id="blogModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Désactiver ce howitworks </h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form action="{{ route('admin.desactivateHow') }}" id="desactivateBlog" method="POST">
                @csrf
                <input type="hidden" name="how_id" id="how_id">
                <p>Vous etes sur le point de désactiver ce howitworks. Si oui veuillez confirmer</p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-warning">Oui, désactiver</button>
        </div>
      </div>
    </div>
</form>
  </div>


  <div class="modal fade" id="activateblogModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Activer ce howitworks</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form action="{{ route('admin.activateHow') }}" id="activateBlog" method="POST">
                @csrf
                <input type="text" name="how_activate_id" id="how_activate_id">
                <p>Vous etes sur le point d'activer howitworks. Si oui veuillez confirmer</p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-info">Oui, activer</button>
        </div>
      </div>
    </div>
</form>
  </div>


  <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Supprimer ce howitwork</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <form action="{{ route('admin.deleteHow') }}" id="activateBlog" method="POST">
                @csrf
                <input type="hidden" name="how_delete_id" id="how_delete_id">
                <p>Vous etes sur le point de supprimer ce howitworks. Si oui veuillez confirmer</p>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
          <button type="submit" class="btn btn-danger">Oui, supprimer</button>
        </div>
      </div>
    </div>
</form>
  </div>




<div class="container">
    <div class="card mt-5">
        <div class="card-header">
            <div class="row mb-2 mb-xl-3">


                <div class="col-auto ms-auto text-end mt-n1">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Tableau de bord</a></li>
                            <li class="breadcrumb-item active">Liste de how it works</li>
                        </ol>
                    </nav>
                </div>
            </div>

            <button class="btn btn-primary" onclick="window.location.href='{{ route('admin.howCreate') }}'">Ajouter </button>
        </div>
        <div class="card-body">

            @if (Session::get('success'))
            <div class="alert alert-success">{{ Session::get('success') }}
            </div>
        @endif
        @if (Session::get('error'))
            <div class="alert alert-danger">{{ Session::get('error') }}
            </div>
        @endif
            <table id="datatables-ajax" class="table" style="width:100%; border-collapse: collapse;">
                <thead>
                    <tr>
                        <th style="text-align: center; padding: 15px;">Image</th>
                        <th style="text-align: left; padding: 15px;">Titre</th>
                        <th style="text-align: left; padding: 15px;">Description</th>
                        <th style="text-align: left; padding: 15px;">Position</th>
                        <th style="text-align: left; padding: 15px;">Status</th>
                        <th style="text-align: left; padding: 15px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($hows as $blog)
                    <tr>
                        <td style="text-align: center; padding: 15px;">
                            <img style="object-fit: cover" src="{{ asset($blog->image) }}" width="100" height="100" alt="Blog Image">
                        </td>
                        <td style="text-align: left; padding: 15px;">
                            <u><b>Français</b></u> : {!! $blog->titre_fr !!} <br>
                            <u><b>Anglais</b></u> : {!! $blog->titre_en !!}
                        </td>
                        <td style="text-align: left; padding: 15px;">
                            <u><b>Français</b></u> : {!! $blog->tronquerTexte($blog->description_fr) !!} <br>
                            <u><b>Anglais</b></u> : {!! $blog->tronquerTexte($blog->description_en) !!}
                        </td>
                        <td style="text-align: left; padding: 15px;">
                       {{$blog->position}}
                        </td>
                        <td>
                            @if ($blog->status == 1)
                            <div class="badge bg-danger">Inactif</div>
                            @elseif ($blog->status == 0)
                            <div class="badge bg-success">Actif</div>

                            @endif
                        </td>
                        <td style="text-align: center; padding: 15px;">
                            <div class="d-flex justify-content-start">
                                @if ($blog->status == 0)
                                <a href="#" data-bs-toggle="modal" data-bs-target="#blogModal" class="desactivate_how" data-id="{{ $blog->id }}" title="Désactiver">
                                    <i class="fa-solid fa-x me-2"></i>
                                </a>
                                @endif
                                <a href="#" data-bs-toggle="modal" data-bs-target="#deleteModal" class="delete_how" data-id="{{ $blog->id }}" title="Supprimer">
                                    <i class="fas fa-trash me-2"></i>
                                </a>
                                <a href="{{ route('admin.howEdit', $blog->key_value) }}" class="edit_produit" title="Modifier">
                                    <i class="fas fa-edit me-2"></i>
                                </a>
                                @if ($blog->status == 1)
                                <a href="#" data-bs-toggle="modal" data-bs-target="#activateblogModal" class="activate_how" data-id="{{ $blog->id }}" title="Activer">
                                    <i class="fa-solid fa-check me-2"></i>
                                </a>

                                @endif

                                {{-- <a href="#" data-bs-toggle="modal" data-bs-target="#blogModal" onclick="desactivateBlog()"  class="desactivate_produit" data-id="{{ $blog->id }}" title="Désactiver">
                                    <i class="fa-solid fa-x me-2"></i>
                                </a> --}}






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

<script>

$(document).on('click', '.desactivate_how', function(e) {
    e.preventDefault();

    var how_id = $(this).data('id');

    // alert(categorie_id);



    $('#how_id').val(how_id);

});
$(document).on('click', '.activate_how', function(e) {
    e.preventDefault();

    var how_activate_id = $(this).data('id');

    // alert(categorie_id);



    $('#how_activate_id').val(how_activate_id);

});
$(document).on('click', '.delete_how', function(e) {
    e.preventDefault();

    var how_delete_id = $(this).data('id');

    // alert(categorie_id);



    $('#how_delete_id').val(how_delete_id);

});



</script>
@endsection