<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
    <title>Member | Aplikasi Gym  </title>
    <link rel="icon" type="image/x-icon" href="<?php echo base_url(); ?>assets/src/assets/img/favicon.ico"/>
    <link href="<?php echo base_url(); ?>assets/layouts/modern-light-menu/css/light/loader.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/layouts/modern-light-menu/css/dark/loader.css" rel="stylesheet" type="text/css" />
    <script src="<?php echo base_url(); ?>assets/layouts/modern-light-menu/loader.js"></script>
    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
    <link href="<?php echo base_url(); ?>assets/src/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/layouts/modern-light-menu/css/light/plugins.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo base_url(); ?>assets/layouts/modern-light-menu/css/dark/plugins.css" rel="stylesheet" type="text/css" />
    <!-- END GLOBAL MANDATORY STYLES -->

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/datatables.css">

    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/css/light/table/datatable/dt-global_style.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/css/light/table/datatable/custom_dt_miscellaneous.css">

    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/css/dark/table/datatable/dt-global_style.css">
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/css/dark/table/datatable/custom_dt_miscellaneous.css">

    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/assets/css/light/elements/alert.css">
    <!-- END PAGE LEVEL STYLES -->
     <style>
        .usr-img-frame{
            width: 45px;
            height: 45px;
        }

        .user-avatar{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .modal-content{
            background: #ffffff !important;
            color: #212529 !important;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        }

        .modal-header{
            background: #f8f9fa !important;
            border-bottom: 1px solid #dee2e6;
        }

        .modal-footer{
            background: #f8f9fa !important;
            border-top: 1px solid #dee2e6;
        }

        .modal-title{
            color: #212529 !important;
            font-weight: 600;
        }

        .modal label{
            color: #212529 !important;
            font-weight: 600;
        }

        .modal .form-control,
        .modal .form-select{
            background: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #ced4da !important;
        }

        .modal .form-control:focus,
        .modal .form-select:focus{
            background: #ffffff !important;
            color: #212529 !important;
            box-shadow: none;
            border-color: #4361ee !important;
        }

        .modal textarea{
            min-height: 100px;
        }

    </style>   
</head>
<body class="layout-boxed">
    <!-- BEGIN LOADER -->
    <div id="load_screen"> <div class="loader"> <div class="loader-content">
        <div class="spinner-grow align-self-center"></div>
    </div></div></div>
    <!--  END LOADER -->

    <!--  BEGIN NAVBAR  -->
    <?php include ("navbar.php");?> 
    <!--  END NAVBAR  -->

    <!--  BEGIN MAIN CONTAINER  -->
    <div class="main-container " id="container">

        <div class="overlay"></div>
        <div class="cs-overlay"></div>
        <div class="search-overlay"></div>

        <!--  BEGIN SIDEBAR  -->
        <?php include ("sidebar.php");?> 
        <!--  END SIDEBAR  -->

        <!--  BEGIN CONTENT AREA  -->
        <div id="content" class="main-content">
            <div class="layout-px-spacing">

                <div class="middle-content container-xxl p-0">
                    </br></br>
                    <div class="row">                    
                        <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                            <h4><b>Data Member Gym</b> <a href="<?php echo base_url(); ?>gym/addmember" class="btn btn-primary mb-2 me-4 _effect--ripple waves-effect waves-light">+ Member</a>
                            </h4>
                            
                            <div class="row">    
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mx-auto">
                                    <div class="card bg-info">
                                        <div class="card-body">
                                            <h5 class="card-title">Total Member : <?php echo ($tot_active+$tot_nonactive);?></h5>
                                            <p class="mb-0">Jumlah Member Keseluruhan</p>
                                        </div>
                                    </div>
                                    </br>                                    
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mx-auto">
                                    <div class="card bg-success">
                                        <div class="card-body">
                                            <h5 class="card-title">Aktif : <?php echo $tot_active;?></h5>
                                            <p class="mb-0">Jumlah Member <b>Aktif</b></p>
                                        </div>
                                    </div> 
                                    </br>                                   
                                </div>
                                <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 mx-auto">
                                    <div class="card bg-danger">
                                        <div class="card-body">
                                            <h5 class="card-title">Non-Aktif : <?php echo $tot_nonactive;?></h5>
                                           <p class="mb-0">Jumlah Member <b>Tidak Aktif</b></p>
                                        </div>
                                    </div>
                                    </br>                                    
                                </div>
                            </div>                                                               
                            <?php 
                                include ("notification.php");
                            ?>                                 
                            <div class="statbox widget box box-shadow">      
                                <div class="widget-content widget-content-area">
                                    <table id="html5-extension" class="table dt-table-hover" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>Nama</th>                                                
                                                <th>Pekerjaan</th>
                                                <th>No Telp</th>
                                                <th>Email</th>
                                                <th>Alamat</th>
                                                <th>Expired Member</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <?php
                                                foreach($user as $row){
                                                    $stt="danger";
                                                    if(empty($row['photo'])){
                                                        $row['photo']="assets/src/assets/img/logo.svg";
                                                    }
                                                    if($row['status']=='Active'){
                                                        $stt="success";
                                                    }

                                                    echo "
                                                    <tr>
                                                        <td>
                                                        <div class='d-flex'>
                                                            <div class='usr-img-frame me-2 rounded-circle overflow-hidden'>
                                                                <img 
                                                                    alt='avatar' 
                                                                    class='img-fluid rounded-circle user-avatar' 
                                                                    src='".base_url()."".$row['photo']."'>
                                                            </div>
                                                            
                                                            <p class='align-self-center mb-0 admin-name'>
                                                                ".$row['name']."
                                                            </p>
                                                        </div>
                                                        </td>
                                                        <td>".$row['job']."</td>
                                                        <td>".$row['phone']."</td>
                                                        <td>".$row['email']."</td>
                                                        <td>".$row['address']."</td>
                                                        <td> <a href='".base_url()."gym/detilmember/".$row['user_id']."' class='badge badge-".$stt." mb-2 btn-edit'>".$row['status']."</a>
                                                        </br>".$row['exp_date']."</td>
                                                        <td>
                                                            <a href='#' 
                                                            class='badge badge-info mb-2 btn-message'
                                                            data-bs-toggle='modal'
                                                            data-bs-target='#modalSendMessage'

                                                            data-name='".$row['name']."'
                                                            data-phone='".$row['phone']."'
                                                            data-email='".$row['email']."'
                                                            >
                                                            Kirim Pesan
                                                            </a>
                                                            
                                                            <a href='#' 
                                                            class='badge badge-warning mb-2 btn-edit'
                                                            data-bs-toggle='modal'
                                                            data-bs-target='#modalEditUser'

                                                            data-id='".$row['user_id']."'
                                                            data-name='".$row['name']."'
                                                            data-phone='".$row['phone']."'
                                                            data-email='".$row['email']."'
                                                            data-address='".$row['address']."'                                                            
                                                            data-job='".$row['job']."'
                                                            data-sex='".$row['sex']."'
                                                            >
                                                            Ubah
                                                            </a>
                                                            <a href='#' 
                                                            class='badge badge-danger mb-2 btn-delete'
                                                            data-bs-toggle='modal'
                                                            data-bs-target='#modalDeleteUser'
                                                            data-id='".$row['user_id']."'
                                                            data-name='".$row['name']."'>
                                                            Hapus
                                                            </a>
                                                        </td>
                                                    </tr>
                                                    ";
                                                }
                                            ?>                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>    
                    </div>                    
                </div>                
            </div>
            
            <!--  BEGIN FOOTER  -->
            <div class="footer-wrapper">
                <div class="footer-section f-section-1">
                    <p class="">Copyright © <span class="dynamic-year">2022</span> <a target="_blank" href="https://designreset.com/cork-admin/">DesignReset</a>, All rights reserved.</p>
                </div>
                <div class="footer-section f-section-2">
                    <p class="">Coded with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></p>
                </div>
            </div>
            <!--  END CONTENT AREA  -->

            <!-- Modal Edit User -->
            <div class="modal fade" id="modalEditUser" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-md">
                    <div class="modal-content">
                        <form action="<?php echo base_url(); ?>gym/updatemember" method="POST" enctype="multipart/form-data">
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    Edit Member
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" name="user_id" id="edit_user_id">
                                <div class="mb-3">
                                    <label class="form-label">Photo</label>
                                    <input type="file" class="form-control" name="photo">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Nama User</label>
                                    <input type="text" class="form-control" name="name" id="edit_user_name">
                                </div>
                                <div class="md-3">
                                    <div class="form-group">
                                        <label for="country">Pekerjaan</label>
                                        <select class="form-select mb-3" id="edit_user_job" name="job">
                                            <option value="MAHASISWA">Mahasiswa</option>
                                            <option value="PEGAWAI">Pegawai</option>
                                            <option value="LAINNYA">Lainnya</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Jenis kelamin</label>
                                    <select class="form-select" name="sex" id="edit_user_sex">
                                        <option value="L">Laki-Laki</option>
                                        <option value="P">Perempuan</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">No Telp</label>
                                    <input type="number" class="form-control" name="phone" id="edit_user_phone">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Email</label>
                                    <input type="email" class="form-control" name="email" id="edit_user_email">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Alamat</label>
                                    <textarea class="form-control" name="address" id="edit_user_address"></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-light-dark" data-bs-dismiss="modal">
                                    Batal
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    Simpan Perubahan
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Delete User -->
            <div class="modal fade" id="modalDeleteUser" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-sm">
                    <div class="modal-content">
                        <form action="<?php echo base_url(); ?>gym/deletemember" method="POST">
                            <div class="modal-header">
                                <h5 class="modal-title text-danger">
                                    Konfirmasi Hapus
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body text-center">
                                <input type="hidden" name="user_id" id="delete_user_id">
                                <div class="mb-3">
                                    <svg xmlns="http://www.w3.org/2000/svg" 
                                        width="60" 
                                        height="60" 
                                        fill="currentColor" 
                                        class="bi bi-trash text-danger"
                                        viewBox="0 0 16 16">
                                        
                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 
                                        0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 
                                        0V6a.5.5 0 0 1 .5-.5zm3 
                                        .5a.5.5 0 0 0-1 
                                        0v6a.5.5 0 0 0 1 0V6z"/>
                                        
                                        <path fill-rule="evenodd" 
                                        d="M14.5 3a1 1 0 0 1-1 
                                        1H13v9a2 2 0 0 1-2 
                                        2H5a2 2 0 0 1-2-2V4h-.5a1 
                                        1 0 0 1-1-1V2a1 1 0 0 1 
                                        1-1H6a1 1 0 0 1 1-1h2a1 
                                        1 0 0 1 1 1h3.5a1 1 0 0 1 
                                        1 1v1zM4.118 4 4 4.059V13a1 
                                        1 0 0 0 1 1h6a1 1 0 0 0 
                                        1-1V4.059L11.882 4H4.118zM2.5 
                                        3h11V2h-11v1z"/>
                                    </svg>
                                </div>
                                <h6>
                                    Yakin ingin menghapus user:
                                </h6>
                                <strong id="delete_user_name"></strong>
                            </div>
                            <div class="modal-footer">
                                <button type="button"
                                        class="btn btn-light-dark"
                                        data-bs-dismiss="modal">
                                    Batal
                                </button>
                                <button type="submit"
                                        class="btn btn-danger">
                                    Ya, Hapus
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Modal Kirim Pesan -->
            <div class="modal fade" id="modalSendMessage" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-md">
                    <div class="modal-content">

                        <div class="modal-header">
                            <h5 class="modal-title">
                                Kirim Pesan
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">

                            <div class="mb-3">
                                <label class="form-label">Nama Member</label>
                                <input type="text" 
                                    class="form-control" 
                                    id="message_name" 
                                    readonly>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Pesan</label>
                                <textarea class="form-control" 
                                        id="message_text"
                                        placeholder="Tulis pesan..."></textarea>
                            </div>

                            <div class="d-grid gap-2">

                                <a href="#" 
                                target="_blank"
                                id="btn_whatsapp"
                                class="btn btn-success">
                                    Kirim ke WhatsApp
                                </a>

                                <a href="#" 
                                id="btn_email"
                                class="btn btn-primary">
                                    Kirim ke Email
                                </a>

                            </div>

                        </div>

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

        </div>
        <!--  END CONTENT AREA  -->
    </div>
    <!-- END MAIN CONTAINER -->
    
    
    
    <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/global/vendors.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/mousetrap/mousetrap.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/waves/waves.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/layouts/modern-light-menu/app.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/assets/js/custom.js"></script>
    <!-- END GLOBAL MANDATORY SCRIPTS -->
    
    <!-- BEGIN PAGE LEVEL SCRIPTS -->
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/datatables.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/button-ext/dataTables.buttons.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/button-ext/jszip.min.js"></script>    
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/button-ext/buttons.html5.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/button-ext/buttons.print.min.js"></script>
    <script src="<?php echo base_url(); ?>assets/src/plugins/src/table/datatable/custom_miscellaneous.js"></script>
    <!-- END PAGE LEVEL SCRIPTS -->   
    <script>
    $(document).on('click', '.btn-edit', function(){

        let id       = $(this).data('id');
        let name     = $(this).data('name');
        let phone    = $(this).data('phone');
        let email    = $(this).data('email');
        let address  = $(this).data('address');        
        let job      = $(this).data('job');
        let sex      = $(this).data('sex');

        // Input text
        $('#edit_user_id').val(id);
        $('#edit_user_name').val(name);
        $('#edit_user_phone').val(phone);
        $('#edit_user_email').val(email);
        $('#edit_user_address').val(address);        
        $('#edit_user_job').val(job);       
        $('#edit_user_sex').val(sex);

    });
</script>

<script>

    $(document).on('click', '.btn-delete', function(){

        let id   = $(this).data('id');
        let name = $(this).data('name');

        $('#delete_user_id').val(id);
        $('#delete_user_name').text(name);

    });

</script>

<script>

    $(document).on('click', '.btn-message', function(){

        let name    = $(this).data('name');
        let phone   = $(this).data('phone');
        let email   = $(this).data('email');

        $('#message_name').val(name);

        // reset pesan
        $('#message_text').val('');

        // simpan data
        $('#btn_whatsapp').attr('data-phone', phone);
        $('#btn_email').attr('data-email', email);

    });

    // tombol whatsapp
    $('#btn_whatsapp').click(function(){

        let phone   = $(this).attr('data-phone');
        let message = $('#message_text').val();

        // hapus karakter selain angka
        phone = phone.replace(/[^0-9]/g, '');

        // ubah awalan 0 menjadi 62
        if(phone.startsWith('0')){
            phone = '62' + phone.substring(1);
        }

        let url = 'https://wa.me/' + phone + '?text=' + encodeURIComponent(message);

        window.open(url, '_blank');

    });

    // tombol email
    $('#btn_email').click(function(){

        let email   = $(this).attr('data-email');
        let message = $('#message_text').val();

        let subject = 'Pesan Dari Admin Gym';

        let mailto = 'mailto:' + email +
                    '?subject=' + encodeURIComponent(subject) +
                    '&body=' + encodeURIComponent(message);

        window.location.href = mailto;

    });

</script>
</body>
</html>