@extends('layouts.idara.panel')


@section('content')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js" integrity="sha512-F636MAkMAhtTplahL9F6KmTfxTmYcAcjcCkyu0f0voT3N/6vzAuJ4Num55a0gEJ+hRLHhdz3vDvZpf6kqgEa5w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" integrity="sha512-hievggED+/IcfxhYRSr4Auo1jbiOczpqpLZwfTVL/6hFACdbI3WQ8S9NCX50gsM9QVE+zLk/8wb9TlgriFbX+Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@include('backend.partials.import')


<div class="container">
    <section style="margin-bottom: 44px;">
        <div class="card">
            <div class="card-header">
               Produit
            </div>
            <div class="card-body">

                
                <a href="{{route('produit.add')}}" class="btn btn-primary">+ Ajouter</a>

              
                <a href="javascript:window.location.href=window.location.href" class="btn btn-secondary"><i class="fa-solid fa-arrows-rotate"></i>Actualiser</a>




            </div>
        </div>
    </section>
    @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif
    @if (count($errors) > 0)
    <div class="alert alert-danger">
        <strong>Whoops!</strong> Some problems with your input.<br><br>
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    @if (Session::has('message'))
    <div class="alert alert-info">{{ Session::get('message') }}</div>
 @endif
    <div class="card">
            <div class="card-header">
             Produits
            </div>
            <div class="card-body">


                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Nom</th>
                                <th scope="col">categorie</th>

                                <th scope="col">Date</th>

                                <th scope="col">Action</th>

                            </tr>
                        </thead>
                        <tbody>
                        @foreach($articles as $article)

                            <tr>
                                <th scope="row">

                                <a class="title" href="{{ route('produit.show',['id'=>$article]) }}" >{{$article->nom}}</a>


                                </th>
                                <th scope="row">
                                   
                                @foreach ($article->categories as $singleTag)
                                <span class="label label-info label-many btn btn-secondary">{{ $singleTag->nom }}</span>
                            @endforeach
                                </th>
                                <th scope="row">

                                    {{$article->created_at}}

                                </th>

                                <th scope="row" class="buttonOffOut">

                                    <div>
                                        <form action="{{url('produit/'.$article->id)}}" method="post">

                                            @csrf

                                            @if($article->etat == 1)
                                            <Tooltip title="Masquer">
                    
                                                <input data-id="{{$article->id}}" class="toggle-class" type="checkbox"  data-onstyle="success"  data-offstyle="danger" data-toggle="toggle" data-on="✔" data-off="⊘" {{ $article->etat ? 'checked' : '' }}>
                    
                    
                                            </Tooltip>
                    
                                            @else
                                                <Tooltip title="Afficher">
                    
                                                    <input data-id="{{$article->id}}" class="toggle-class" type="checkbox"  data-onstyle="success"  data-offstyle="danger" data-toggle="toggle" data-on="✔" data-off="⊘" {{ $article->etat ? 'checked' : '' }}>
                    
                    
                                                </Tooltip>  
                                            
                                            @endif
                                            
                                            @if($article->etat == 1)
                                            <Tooltip title="Masquer de l'accueil">
                    
                                                <input data-id="{{$article->id}}" class="toggle-class-home" type="checkbox" data-onstyle="success" data-offstyle="warning" data-toggle="toggle" data-on="🏠" data-off="🏠" {{ $article->home ? 'checked' : '' }}>

                    
                    
                                            </Tooltip>
                    
                                            @else
                                                <Tooltip title="Afficher a l'accueil">
                    
                                                    <input data-id="{{$article->id}}" class="toggle-class-home" type="checkbox" data-onstyle="success" data-offstyle="warning" data-toggle="toggle" data-on="🏠" data-off="🏠" {{ $article->home ? 'checked' : '' }}>

                    
                    
                                                </Tooltip>  
                                            
                                            @endif
                                            

                                            <Tooltip title="Voir Plus"> <a href="{{ route('produit.show',['id'=>$article]) }}" class="btn btn-xs btn-primary"><i class="fa fa-sign-out" aria-hidden="true"></i></a></Tooltip>



                                            <input name="_method" type="hidden" value="DELETE">
                                            <Tooltip title="Supprimer"> <a  class="btn btn-xs btn-danger btn-flat show_confirm" data-toggle="tooltip" ref="{{ url('produit/'.$article->id) }}"><i class="fa-solid fa-trash" aria-hidden="true"></i></a></Tooltip>


                                        </form>



                                    </div>
                                </th>
                            </tr>


                            @endforeach

                        </tbody>
                    </table>
                    <div>

                    </div>
                </div>
    </section>

    
</div>

@include('backend.partials.alert')

<script>
    $(function() {
        $('.toggle-class').change(function() {
            var etat = $(this).prop('checked') == true ? 1 : 0;
            var Id = $(this).data('id');

            $.ajax({
                type: "GET"
                , dataType: "json"
                , url: '/changeStatusProduit'
                , data: {
                    'etat': etat
                    , 'Id': Id
                }
                , success: function(data) {
                    console.log(data.success)
                }
            });
        })
    });
    $(function() {
        $('.toggle-class-home').change(function() {
            var home = $(this).prop('checked') == true ? 1 : 0;
            var Id = $(this).data('id');

            $.ajax({
                type: "GET"
                , dataType: "json"
                , url: '/changeStatusProduitHome'
                , data: {
                    'home': home
                    , 'Id': Id
                }
                , success: function(data) {
                    console.log(data.success)
                }
            });
        })
    });

</script>

@endsection