@extends('layouts.admin.app')
@section('content')

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="card my-4">
                <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                    <div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
                        <h6 class="text-white text-capitalize ps-3">Contact List

                        </h6>
                    </div>
                </div>
                <br>
                @if(Session::has('success'))
                    <div class="alert alert-success text-white mx-3">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if(Session::has('error'))
                    <div class="alert alert-danger text-white mx-3">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <div class="card-body px-0 pb-2">
                    <div class="table-responsive p-4">
                        <table class="table align-items-center mb-0" id="data_table">
                            <thead>
                                <tr>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">S.No</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Contact</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Contact Type</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Email address</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Address</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder">Disable</th>
                                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($contactno as $contact)
                                <tr>
                                    <td class="align-middle text-center text-sm">{{ $contact->id }}</td>
                                    <td class="align-middle text-center text-sm">{{ $contact->contact_no }}</td>
                                    @if($contact->status==0)
                                    <td class="align-middle text-center text-sm">Whatsapp Number</td>

                                    @elseif($contact->status==1)
                                    <td class="align-middle text-center text-sm">TollFree Number</td>

                                    @else
                                    <td class="align-middle text-center text-sm">Local Number</td>

                                    @endif
                                    <td class="align-middle text-center text-sm">{{ $contact->email_address }}</td>

                                    <td class="align-middle text-center text-sm">

                                        <input type="checkbox" class="toggle-status" data-id="{{ $contact->id }}" {{ $contact->is_disable =='0' ? 'checked' : '' }}>
                                    </td>
                                   <td>
                                        <a class="btn btn-primary" href="{{route('admin.contact-list.edit',$contact->id)}}" >
                                            <i class="material-icons">edit</i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('layouts.admin.footer')
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
     document.querySelectorAll('.toggle-status').forEach(function(element) {
    element.addEventListener('change', function() {
        var contactId = this.dataset.id;
        var status = this.checked ? 0 : 1;

        // Show SweetAlert confirmation dialog
        Swal.fire({
            title: 'Are you sure?',
            text: 'Do you want to update the status?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes',
            cancelButtonText: 'No',
        }).then((result) => {
            if (result.isConfirmed) {
                // Send AJAX request
                $.ajax({
                    url: "{{route('admin.disable.contact')}}",
                    type: 'POST',
                    data: {
                        contact_id: contactId,
                        status: status,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // Show success message
                        Swal.fire({
                            title: 'Success',
                            text: response.message,
                            icon: 'success'
                        });
                    },
                    error: function(xhr, status, error) {
                        // Show error message
                        Swal.fire({
                            title: 'Error',
                            text: 'Failed to update contact status.',
                            icon: 'error'
                        });
                        console.error(xhr.responseText);
                    }
                });
            } else {
                // If user cancels the operation
                // Reset checkbox state
                $(this).prop('checked', !status);
            }
        });
    });
});
</script>

@endsection