@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">
                Contact
            </div>
            <div class="card-body">

                
                <a href="{{route('contact.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
    <section>
        <div class="card">
            <div class="card-header">
                Coordonnées
            </div>
            <div class="card-body">
    
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th scope="col">Type de coordonnées</th>
    
    
                                <th scope="col">coordonnées</th>
                                <th scope="col">Date</th>
    
                                <th scope="col">Action</th>
    
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($contacts as $contact)
                            <tr>
                                <th scope="row">
    
                                    {{ $contact->coorType->type}}
    
                                </th>
    
                                <th scope="row">
                                   
                                    @if($contact->coorType_id ==4)
                                    {{$contact->details}}
                                    
                                    @else

                                    {{$contact->coordonnees}}
                                    @endif
    
                                </th>
                                <th scope="row">
    
                                    {{$contact->created_at}}
    
    
                                </th>
                                <th scope="row" class="buttonOffOut">
    
                           
                <div>
    
    
    
                    <form action="{{url('contacts/'.$contact->id)}}" method="post">
                        <input name="_method" type="hidden" value="DELETE">
                        @csrf
                        @if($contact->etat == 1)
                        <Tooltip title="Masquer">

                            <input data-id="{{$contact->id}}" class="toggle-class" type="checkbox"  data-onstyle="success"  data-offstyle="danger" data-toggle="toggle" data-on="✔" data-off="⊘" {{ $contact->etat ? 'checked' : '' }}>


                        </Tooltip>

                        @else
                            <Tooltip title="Afficher">

                                <input data-id="{{$contact->id}}" class="toggle-class" type="checkbox"  data-onstyle="success"  data-offstyle="danger" data-toggle="toggle" data-on="✔" data-off="⊘" {{ $contact->etat ? 'checked' : '' }}>


                            </Tooltip>  
                        
                        @endif
    
                        <Tooltip title="Modifier">
                            <a href="{{ route('contact.edit', ['id' => $contact]) }}"  class="btn btn-xs btn-primary">
    
                                <i class="fa-solid fa-pen-to-square"></i>
                            </a>
                        </Tooltip>
    
    
                        <Tooltip title="Supprimer"> <button type="submit" class="btn btn-xs btn-danger btn-flat show_confirm" data-toggle="tooltip" ref="{{ url('contacts/'.$contact->id) }}"><i class="fa-solid fa-trash"></i></i></button></Tooltip>
    
                    </form>
                </div>
    
                </th>
                </tr>
    
                @endforeach
    
                </tbody>
                </table>
            </div>
    
    
        </div>
        </div>
    </section>
    
    @include('backend.partials.alert')

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

@endsection