@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>
    <section>
        <div class="card">
            <div class="card-header">
                Vos coordonnees
            </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">
    
                                    {{$contact->coordonnees}}
    
    
                                </th>
                                <th scope="row">
    
                                    {{$contact->created_at}}
    
    
                                </th>
                                <th scope="row" class="buttonOffOut">
    
                                    {{-- <div style="padding: 0 0 0 22px;">
                                        <input data-id="{{$contact->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="✓" data-off="Suspendue" {{ $contact->etat ? 'checked' : '' }}>
    
    
                </div> --}}
                <div>
    
    
    
                    <form action="{{url('contacts/'.$contact->id)}}" method="post">
                        <input name="_method" type="hidden" value="DELETE">
                        @csrf
                        <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 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>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script type="text/javascript">
        $('.show_confirm').click(function(event) {
            var form = $(this).closest("form");
            var name = $(this).data("name");
            event.preventDefault();
            swal({
                    title: `Are you sure you want to delete this record?`
                    , text: "If you delete this, it will be gone forever."
                    , icon: "warning"
                    , buttons: true
                    , dangerMode: true
                , })
                .then((willDelete) => {
                    if (willDelete) {
                        form.submit();
                    }
                });
        })
    
    </script>
    <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