<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Phone Book App</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
            integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous">
        </script>
    </head>
    <body>
        <div class="container mt-5">
  

  
 
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recherche par numéro de téléphone" id="phoneSearch">
            <button class="btn btn-outline-secondary" type="button" id="searchButton">Recherche</button>
        </div>

            <table class="table mt-5">
                <thead>
                    <tr>
                        <th scope="col">Id</th>
                        <th scope="col">Nom Prénom</th>
                        <th scope="col">Numéro de téléphone</th>
                        <th scope="col">Adresse</th>
                        <th scope="col">Action</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if(count($contact) > 0): ?>
                        <?php $__currentLoopData = $contact; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cont): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr>
                                <th><?php echo e($cont->id); ?></th>
                                <th><?php echo e($cont->name); ?></th>
                                <th><?php echo e($cont->phone); ?></th>
                                <th><?php echo e($cont->email); ?></th>
                                <th><a href="/edit/<?php echo e($cont->id); ?>" class="btn btn-primary">Modifier</a>
                                    <a href="/delete/<?php echo e($cont->id); ?>" onclick="confirmDelete()" class="btn btn-danger">Supprimer</a>
                                </th>
                            </tr>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php else: ?>
                        <tr>
                            <th>No Data</th>
                        </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        <!-- Modal -->
<div class="modal fade" id="searchResultModal" tabindex="-1" aria-labelledby="searchResultModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchResultModalLabel">Résultat de la recherche</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="searchResultContent"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                <!-- <button type="button" class="btn btn-secondary" href="/edit/<?php echo e($cont->id); ?>" data-bs-dismiss="modal">Modifier</button>
                <button type="button" class="btn btn-secondary" href="/delete/<?php echo e($cont->id); ?>" data-bs-dismiss="modal">Supprimer</button> -->

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

    </body>
    <script>
    document.getElementById('searchButton').addEventListener('click', function() {
        var phone = document.getElementById('phoneSearch').value;
        fetch(`/search/${phone}`)
            .then(response => response.json())
            .then(data => {
                if (data.found) {
                    var contentElement = document.getElementById('searchResultContent');
                    contentElement.innerHTML = `Nom Prénom: ${data.contact.name}<br>Numéro de téléphone: ${data.contact.phone}<br>Adresse: ${data.contact.email}`;
                    var modal = new bootstrap.Modal(document.getElementById('searchResultModal'));
                    modal.show();
                } else {
                    window.location.href = `/add?phone=${phone}`;
                }
            });
    });
    function confirmDelete() {
            var userConfirmed = confirm("Êtes-vous sûr? La suppression est irréversible!");
            if (userConfirmed) {
                // If user confirms, submit the form
                document.getElementById("deleteForm").submit();
            }
        }
</script>


</html>
<?php /**PATH C:\Users\Toby\Desktop\contacts\resources\views/welcome.blade.php ENDPATH**/ ?>