<!DOCTYPE html>
<html>
<head>

 
<style>
    * {
        box-sizing: border-box;
    }
    body {
        font-family: Arial, Helvetica, sans-serif;
    }
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    .table td, .table th {
        border: 1px solid #ddd;
        padding: 8px;
    }
    .table tr:nth-child(even){background-color: #f2f2f2;}
    .table th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }
    @media  screen and (max-width: 600px) {
        .table, .table th, .table td {
            width: 100%;
            display: block;
        }
    }

    .btn-green {
    background-color: #4CAF50; /* Green */
    border: none;
    border-radius: 12px; /* Rounded corners */
    color: white;
    padding: 6px;
    text-align: center;
    display: inline-block;
    transition-duration: 0.4s; /* Transition effects */
    cursor: pointer;
}

.btn-red {
    background-color: #ff0000; /* Red */
    border: none;
    border-radius: 12px; /* Rounded corners */
    color: white;
    padding: 6px;
    text-align: center;
    display: inline-block;
    transition-duration: 0.4s; /* Transition effects */
    cursor: pointer;
}


.btn-design:hover {
    background-color: white;
    color: black;
}


</style>
</head>





<?php $__env->startSection('title', trans('clients.title.all')); ?>

<?php $__env->startSection('page_stylesheets'); ?>
    <link href="<?php echo e(asset('assets/libs/datepicker/datepicker.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/libs/dropify/css/dropify.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/libs/intl-tel-input/css/intlTelInput.css')); ?>" rel="stylesheet"/>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('extra_stylesheets'); ?>
    <link href="<?php echo e(asset('assets/css/split-page.css')); ?>" rel="stylesheet">
<?php $__env->stopSection(); ?>

<?php $__env->startSection('action_buttons'); ?>
            <div class="ui right floated segment transparent page-actions">
                <button class="ui icon button positive" data-target="#clientFilter" data-toggle="slide">
                    <i class="filter icon"></i><?php echo e(' Filter & Search '); ?>

                </button>
                <button class="ui labeled icon button primary open-modal" data-target="#newClientModal" data-toggle="modal">
                    <i class="ion-ios-plus-outline icon"></i> 
                    <?php echo e(trans('clients.button.new')); ?> 
                </button>
            </div>
<?php $__env->stopSection(); ?>


<?php $__env->startSection('action_buttons'); ?>
            <div class="ui right floated segment transparent page-actions">
                <button class="ui icon button positive" data-target="#clientFilter" data-toggle="slide">
                    <i class="filter icon"></i><?php echo e(' Filter & Search '); ?>

                </button>
                <button class="ui labeled icon button primary open-modal" data-target="#newClientModal" data-toggle="modal">
                    <i class="ion-ios-plus-outline icon"></i> 
                    <?php echo e(trans('clients.button.new')); ?> 
                </button>
            </div>
<?php $__env->stopSection(); ?>




<?php $__env->startSection('content'); ?>
        @parent
        <?php echo $__env->make('global.status', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>
        <div class="ui segment white" id="clientFilter"<?php echo $filter ? '' : ' style="display:none;"'; ?>>
            <form action="<?php echo e(action('ClientController@getAll')); ?>" method="GET">
                <div class="ui form">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="field">
                                <label><?php echo e(trans('clients.label.name')); ?></label>
                                <input type="text" name="name" placeholder="<?php echo e(trans('clients.label.name')); ?>" value="<?php echo e(isset($filters['name']) ? $filters['name'] : null); ?>"/>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="field ">
                                <label><?php echo e(trans('clients.label.status.header')); ?></label>
                                <select class="ui fluid search dropdown" name="status">
                                    <option value=""><?php echo e(trans('clients.label.status.header')); ?></option>
                                    <option <?php echo e(isset($filters['status']) ? ($filters['status']  == 1 ? ' selected' : '') : ''); ?> value="1"><?php echo e(trans('clients.status.active')); ?></option>
                                    <option <?php echo e(isset($filters['status']) ? ($filters['status']  == 0 ? ' selected' : '') : ''); ?> value="0"><?php echo e(trans('clients.status.inactive')); ?></option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3 text-right">
                            <div class="field">
                                <div class="m-t-25">
                                    <button class="ui button" type="reset"> <?php echo e(trans('policies.button.clear')); ?> </button>
                                    <button class="ui labeled icon button black" name="filter" type="submit"> <i class="search icon"></i> <?php echo e(trans('policies.button.filter')); ?> </button>
                                </div>
                            </div>

                        </div>
                    </div>

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



<!-- Add your Grid and Table buttons here -->




<button class="ui icon button positive" id="switchToGrid" style="background-color: #4CAF50; color: white; border-radius: 5px; padding: 10px; margin-left: 5px;">
        Switch to Grid
    </button>
    <button class="ui icon button positive" id="switchToTable" style="background-color: #4CAF50; color: white; border-radius: 5px; padding: 10px; margin-left: 5px;">
        Switch to Table
    </button>

<button onclick="printData()" class="ui icon button positive" style="background-color: #4CAF50; color: white; border-radius: 5px; padding: 10px; margin-left: 5px;"> Print All Data</button>
<button onclick="printSelectedRows()" class="ui icon button positive" style="background-color: #4CAF50; color: white; border-radius: 5px; padding: 10px; margin-left: 5px;">Print Selected Rows</button>



<!-- Wrap your table view in a div with id `tableView` -->
<div id="tableView">
    <!-- Your table view code here... -->

    <table class="table table-striped">
    <thead>
        <tr> 
         <th>#</th>
            <th>Id</th>
            <th>Profile</th>
            <th>Name</th>  
            <th>Phone</th>
            <th>Email</th>
             <!--  <th>address</th> -->
            <th>Status</th>
            <th>Registration Date</th>
            
           
            <!-- <th>Policies</th>-->
           <!--  <th>Due</th> -->
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php $__empty_1 = true; foreach($clients as $client): $__empty_1 = false; ?>
            <tr>
            <td>
                    <input type="checkbox" class="print-checkbox" data-id="<?php echo e($client->id); ?>">
                </td>
                <td>
                    <?php echo e($client->id); ?> <!-- Display client's ID -->
                </td>

                 <td>
                    <img src="<?php echo e(asset('uploads3/images/users/'. $client->profile_image_filename)); ?>" alt="<?php echo e($client->first_name . ' ' . $client->last_name); ?>" style="width:60px; height:60px;">
                </td>


                <td>
                    <?php echo e($client->first_name); ?> <?php echo e($client->last_name); ?>

                </td>

               
                <td>
                    <?php echo e(isset($client->phone) ? $client->phone : '(---) ---- --- ---'); ?>

                </td>
                <td>
                    <?php echo e($client->email); ?>

                </td>
                  <!--  
                <td>
                    <?php echo e($client->address); ?>

                </td> -->

                 <!--

                 Old
                <td>
                    <?php if($client->status): ?>
                        <i class="ion-ios-circle-filled text-success"></i> <?php echo e(trans('clients.status.active')); ?>

                    <?php else: ?>
                        <i class="ion-ios-circle-filled text-danger"></i> <?php echo e(trans('clients.status.inactive')); ?>

                    <?php endif; ?>
                </td>  -->
               <td>
    <?php if($client->status): ?>

        <button class="btn-green"> <?php echo e(trans('clients.status.active')); ?></button>
    <?php else: ?>
        <button class="btn-red"> <?php echo e(trans('clients.status.inactive')); ?></button>
        <!--   <button class="btn-red"> <i class="ion-ios-circle-filled text-danger"></i> <?php echo e(trans('clients.status.inactive')); ?></button> -->
    <?php endif; ?>
</td>


  <td>
           <?php echo e($client->created_at->format('d-m-Y')); ?> <!-- Display client's registration date -->
        </td>
              
                <!-- Display client's Policies
                <td>
                    <?php echo e($client->policies->count()); ?>

                </td>
                -->
                 <!--
                <td>
                    <?php if($client->premiums > $client->paid): ?>
                    <span class="text-danger">
                    <?php elseif($client->premiums === $client->paid): ?>
                    <span class="text-success"><?php echo e(trans('clients.label.status.paid')); ?> -
                    <?php else: ?>
                    <span class="text-info">
                    <?php endif; ?>
                        <?php echo e(isset($client->currency_symbol) ? $client->currency_symbol : $clients->currency_symbol); ?><?php echo e($client->due); ?>

                    </span>
                </td>
                    -->
                <td>
                    <a href="<?php echo e(action('ClientController@getOne', array($client->id))); ?>"> <?php echo e(trans('clients.link.profile')); ?> </a>
                </td>
                
            </tr>
        <?php endforeach; if ($__empty_1): ?>
            <tr>
                <td colspan="7">
                    <div class="segment text-center ui white">
                        <i class="huge icon ion-android-alert"></i>
                        <p><?php echo e(trans('clients.message.empty.clients')); ?></p>
                    </div>
                </td>
            </tr>
        <?php endif; ?>
    </tbody>
</table>
<div class="col-md-12 text-center">
    <?php echo $clients->render($presenter); ?>

</div>
</body>




</div>

<!-- Wrap your grid view in a div with id `gridView` -->
<div id="gridView">
    <!-- Your grid view code here... -->

    <div class="row clients-list">
            <!-- start clients -->
            <?php $__empty_1 = true; foreach($clients as $client): $__empty_1 = false; ?>
            <div class="col-md-6">
                <div class="ui segment white client-list-card">
                    <div class="client-list-about">
                        <div class="client-list-avatar">
                            <?php if($client->profile_image_filename === 'default-profile.jpg'): ?>
                            <div class="text-avatar small w-h-70" style="background-color:<?php echo e(collect(config('insura.colors'))->random()); ?>;"><?php echo e(strtoupper($client->first_name[0] . (isset($client->last_name) ? $client->last_name[0] : ''))); ?></div>
                            <?php else: ?>
                            <img src="<?php echo e(asset('uploads3/images/users/' . $client->profile_image_filename)); ?>" alt="<?php echo e($client->first_name); ?> <?php echo e($client->last_name); ?>"/>
                            <?php endif; ?>
                        </div>
                        <div class="client-list-info">
                            <h3><?php echo e($client->first_name); ?> <?php echo e($client->last_name); ?></h3>
                            <span>
                                <?php if($client->status): ?>
                                <i class="ion-ios-circle-filled text-success"></i> <?php echo e(trans('clients.status.active')); ?>

                                <?php else: ?>
                                <i class="ion-ios-circle-filled text-danger"></i> <?php echo e(trans('clients.status.inactive')); ?>

                                <?php endif; ?>
                            </span>
                            <div class="client-list-contact">
                                <div class="col-xs-6 col-sm-6 col-md-6 b-r text-ellipsis p-0">
                                    <i class="ion-ios-email"></i> <?php echo e($client->email); ?>

                                </div>
                                <div class="col-xs-6 col-sm-6 col-md-6 text-ellipsis">
                                    <i class="ion-ios-telephone"></i> <?php echo e(isset($client->phone) ? $client->phone : '(---) ---- --- ---'); ?>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row client-list-footer">
                        <div class="col-xs-3 col-sm-4 col-md-4">
                            <p>
                                <strong><?php echo e(trans('clients.label.policies')); ?>:</strong> <?php echo e($client->policies->count()); ?>

                            </p>
                        </div>
                        <div class="col-xs-5 col-sm-4 col-md-4">
                            <p>
                                <strong><?php echo e(trans('clients.label.due')); ?>:</strong>
                                <?php if($client->premiums > $client->paid): ?>
                                <span class="text-danger">
                                <?php elseif($client->premiums === $client->paid): ?>
                                <span class="text-success"><?php echo e(trans('clients.label.status.paid')); ?> - 
                                <?php else: ?>
                                <span class="text-info">
                                <?php endif; ?>
                                    <?php echo e(isset($client->currency_symbol) ? $client->currency_symbol : $clients->currency_symbol); ?><?php echo e($client->due); ?>

                                </span>
                            </p>
                        </div>
                        <div class="col-xs-4 col-sm-4 col-md-4 text-right client-list-more">
                            <a href="<?php echo e(action('ClientController@getOne', array($client->id))); ?>" class="mini ui button"> <?php echo e(trans('clients.link.profile')); ?> </a>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; if ($__empty_1): ?>
            <div class="col-md-4 col-md-offset-3">
                <div class="segment text-center ui white">
                    <i class="huge icon ion-android-alert"></i>
                    <p><?php echo e(trans('clients.message.empty.clients')); ?></p>
                </div>
            </div>
            <?php endif; ?>
            <!-- end clients -->
            <div class="col-md-12 text-center">
                <?php echo $clients->render($presenter); ?>

            </div>
        </div>



</div>




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // Initially hide table view
    $("#tableView").hide();

    // Show grid view when clicking the "Grid" button
    $("#switchToGrid").click(function(){
        $("#gridView").show();
        $("#tableView").hide();
    });

    // Show table view when clicking the "Table" button
    $("#switchToTable").click(function(){
        $("#gridView").hide();
        $("#tableView").show();
    });
});
</script>



 <!--  


 Clients Table Start

    -->

     
<?php $__env->stopSection(); ?>

<?php $__env->startSection('page_scripts'); ?>





 <!-- Print Data Javascript Start-->

<script type="text/javascript">
        function printData() {
            let prtContent = document.querySelector('.table');
            let WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
            WinPrint.document.write('<html><head><title>Print</title></head><body>');
            WinPrint.document.write('<style>.table td, .table th {border: 1px solid black;}</style>');
            WinPrint.document.write(prtContent.outerHTML);
            WinPrint.document.write('</body></html>');
            WinPrint.document.close();
            WinPrint.focus();
            WinPrint.print();
            WinPrint.close();
        }
    </script>


<script type="text/javascript">       
       function printSelectedRows() {
            let rowsToPrint = Array.from(document.querySelectorAll('.print-checkbox:checked')).map(checkbox => checkbox.closest('tr'));
            if (rowsToPrint.length > 0) {
                let printWindow = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
                printWindow.document.write('<html><head><title>Print</title></head><body>');
                printWindow.document.write('<style>table td, table th {border: 1px solid black;}</style>');
                let tempTable = document.createElement('table');
                tempTable.className = 'table';
                tempTable.append(document.querySelector('.table thead').cloneNode(true));
                let tbody = document.createElement('tbody');
                rowsToPrint.forEach(row => {
                    tbody.append(row.cloneNode(true));
                });
                tempTable.append(tbody);
                printWindow.document.body.append(tempTable);
                printWindow.document.close();
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            } else {
                alert("No rows selected for printing.");
            }
        }
</script>

 <!-- Print Data Javascript End -->



    <script src="<?php echo e(asset('assets/libs/datepicker/datepicker.min.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/libs/dropify/js/dropify.min.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/libs/intl-tel-input/js/intlTelInput.min.js')); ?>" type="text/javascript"></script>
    <script type="text/javascript">
        (function($insura, $) {
            $(document).ready(function() {
                $insura.helpers.initDatepicker('input.datepicker');
                $insura.helpers.initDropdown('div.dropdown, select.dropdown');
                $insura.helpers.initDropify('input.file-upload');
                $insura.helpers.initModal('div.modal', true);
                $insura.helpers.initScrollbar('div.scrollbar');
                $insura.helpers.initTelInput('input[type="tel"]');
                $insura.helpers.listenForChats();
                $insura.helpers.requireDropdownFields('form div.required select, form div.required div.dropdown input[type="hidden"]');
            });
        })(window.insura, window.jQuery);
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('global.app', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>