<!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>Presensi | 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" />
    <!-- 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">

    <!-- END PAGE LEVEL STYLES -->
    <style>

/* MODAL CERAH */
.modal-content{
    background: #ffffff !important;
    color: #212529 !important;
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 35px rgba(0,0,0,0.15);
}

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

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

/* BODY */
.modal-body{
    background: #ffffff !important;
}

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

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

/* INPUT */
.modal .form-control,
.modal .form-select,
.modal textarea{
    background: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #ced4da !important;
    border-radius: 10px;
}

/* FOCUS */
.modal .form-control:focus,
.modal .form-select:focus,
.modal textarea:focus{
    background: #ffffff !important;
    color: #212529 !important;
    border-color: #4361ee !important;
    box-shadow: 0 0 0 0.15rem rgba(67,97,238,0.15) !important;
}

/* PLACEHOLDER */
.modal ::placeholder{
    color: #6c757d !important;
}

/* TAB */
.modal .nav-tabs{
    border-bottom: 1px solid #dee2e6;
}

.modal .nav-tabs .nav-link{
    color: #495057 !important;
    border-radius: 10px;
    margin-right: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    background: transparent !important;
}

.modal .nav-tabs .nav-link.active{
    background: #4361ee !important;
    color: #ffffff !important;
    border-color: #4361ee !important;
}

/* AUTOCOMPLETE */
#member_result{
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

#member_result .list-group-item{
    cursor: pointer;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    background: #ffffff !important;
    color: #212529 !important;
    transition: 0.2s;
}

#member_result .list-group-item:hover{
    background: #4361ee !important;
    color: #ffffff !important;
}

/* BUTTON */
.modal .btn-light-dark{
    background: #e9ecef !important;
    color: #212529 !important;
    border: none !important;
}

.modal .btn-primary{
    background: #4361ee !important;
    border-color: #4361ee !important;
}

/* CLOSE BUTTON */
.modal .btn-close{
    filter: none !important;
}

/* BACKDROP */
.modal-backdrop.show{
    opacity: 0.5;
}

</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 Presensi Gym</b> <button 
                                class="btn btn-primary mb-2 me-4 _effect--ripple waves-effect waves-light"
                                data-bs-toggle="modal"
                                data-bs-target="#modalPresensi">

                                + Presensi
                            </button></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 : <?php echo ($member+$kunjungan);?></h5>
                                            <p class="mb-0">Jumlah Prensi</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">Member : <?php echo ($member);?></h5>
                                            <p class="mb-0">Jumlah <b>Member</b> Presensi</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-warning">
                                        <div class="card-body">
                                            <h5 class="card-title">Kunjungan : <?php echo ($kunjungan);?></h5>
                                            <p class="mb-0">Jumlah <b>Kunjungan</b> Presensi</p>
                                        </div>
                                    </div>
                                    </br>                                    
                                </div>
                            </div>                                
                            <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>Tanggal / Waktu</th>
                                                <th>Nama</th>
                                                <th>Phone</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                             <?php
                                                foreach($presensi as $row){
                                                    $stt="danger";
                                                    if(empty($row['photo'])){
                                                        $row['photo']="assets/src/assets/img/logo.svg";
                                                    }
                                                    if($row['status']=='Active'){
                                                        $stt="success";
                                                    }                                                    
                                                    if($row['member_id']==0){
                                                        echo "
                                                            <tr>
                                                                <td>".date('Y-m-d H:i:s', strtotime($row['presensi_date']))."</td>
                                                                <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['visitor_name']."
                                                                    </p>
                                                                </div>
                                                                </td>
                                                                <td>".$row['visitor_phone']."</td>
                                                                <td><span class='badge badge-warning mb-2'>Kunjungan</span></td>                                                        
                                                            </tr>
                                                            ";
                                                    }else{
                                                        echo "
                                                        <tr>
                                                            <td>".date('Y-m-d H:i:s', strtotime($row['presensi_date']))."</td>
                                                            <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['phone']."</td>
                                                            <td><span class='badge badge-success mb-2'>Member</span></td>                                                         
                                                        </tr>
                                                        ";
                                                    }
                                                    
                                                }
                                            ?>                                          
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>    
                    </div>                    
                </div>                
            </div>

            <!-- Modal Presensi -->
            <div class="modal fade" id="modalPresensi" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">

                        <form action="<?php echo base_url(); ?>gym/addpresensi" method="POST">

                            <div class="modal-header">
                                <h5 class="modal-title">
                                    Form Presensi Gym
                                </h5>

                                <button type="button"
                                        class="btn-close"
                                        data-bs-dismiss="modal">
                                </button>
                            </div>

                            <div class="modal-body">

                                <!-- TAB -->
                                <ul class="nav nav-tabs mb-4" id="presensiTab" role="tablist">

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active"
                                                id="member-tab"
                                                data-bs-toggle="tab"
                                                data-bs-target="#tab-member"
                                                type="button">

                                            Member
                                        </button>
                                    </li>

                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link"
                                                id="kunjungan-tab"
                                                data-bs-toggle="tab"
                                                data-bs-target="#tab-kunjungan"
                                                type="button">

                                            Kunjungan
                                        </button>
                                    </li>

                                </ul>

                                <div class="tab-content">

                                    <!-- TAB MEMBER -->
                                    <div class="tab-pane fade show active"
                                        id="tab-member"
                                        role="tabpanel">

                                        <div class="row">
                                            
                                            <div class="col-md-12 mb-3">
                                                <label class="form-label">
                                                    Cari Member
                                                </label>

                                                <input type="text"
                                                    class="form-control"
                                                    id="search_member"
                                                    placeholder="Cari nama / nomor telepon">

                                                <!-- AUTOCOMPLETE RESULT -->
                                                <div class="list-group mt-2"
                                                    id="member_result"
                                                    style="max-height:250px; overflow:auto;">
                                                </div>
                                            </div>

                                            <input type="hidden"
                                                name="member_id"
                                                id="member_id">

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Nama Member
                                                </label>

                                                <input type="text"
                                                    class="form-control"
                                                    id="member_name"
                                                    readonly>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    No Telepon
                                                </label>

                                                <input type="text"
                                                    class="form-control"
                                                    id="member_phone"
                                                    readonly>
                                            </div>

                                        </div>

                                    </div>

                                    <!-- TAB KUNJUNGAN -->
                                    <div class="tab-pane fade"
                                        id="tab-kunjungan"
                                        role="tabpanel">

                                        <div class="row">

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Nama Pengunjung
                                                </label>

                                                <input type="text"
                                                    class="form-control"
                                                    name="visitor_name"
                                                    placeholder="Masukkan nama">
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    No Telepon
                                                </label>

                                                <input type="text"
                                                    class="form-control"
                                                    name="visitor_phone"
                                                    placeholder="08xxxxxxxxxx">
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Jenis Kelamin
                                                </label>

                                                <select class="form-select"
                                                        name="visitor_gender">

                                                    <option value="">
                                                        Pilih Gender
                                                    </option>

                                                    <option value="L">
                                                        Laki-Laki
                                                    </option>

                                                    <option value="P">
                                                        Perempuan
                                                    </option>

                                                </select>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Jenis Kunjungan
                                                </label>

                                                <select class="form-select"
                                                        name="visit_type">

                                                    <option value="">
                                                        Pilih Jenis
                                                    </option>

                                                    <option value="Trial">
                                                        Trial
                                                    </option>

                                                    <option value="Harian">
                                                        Harian
                                                    </option>

                                                    <option value="Personal Training">
                                                        Personal Training
                                                    </option>

                                                </select>
                                            </div>
                                            <div class="col-md-12 mb-3">
                                           <input 
                                                type="text"
                                                class="form-control"
                                                id="nominal"
                                                placeholder="Rp 0"
                                            >

                                            <input 
                                                type="hidden"
                                                name="nominal"
                                                id="nominal_hidden"
                                            >
                                            </div>
                                        </div>

                                    </div>

                                </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 Presensi
                                </button>

                            </div>

                        </form>

                    </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  -->
        </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>

$('#search_member').on('keyup', function(){

    let keyword = $(this).val();

    if(keyword.length < 1){
        $('#member_result').html('');
        return;
    }

    $.ajax({
        url: "<?= base_url('gym/searchmember') ?>",
        type: "POST",
        data: {
            keyword: keyword
        },
        dataType: "JSON",

        success: function(response){

            let html = '';

            if(response.length > 0){

                response.forEach(function(row){

                    let photo = row.photo
                        ? "<?= base_url() ?>" + row.photo
                        : "<?= base_url('assets/src/assets/img/profile-30.png') ?>";

                    html += `
                        <a href="#"
                        class="list-group-item list-group-item-action pilih-member"

                        data-id="${row.user_id}"
                        data-name="${row.name}"
                        data-phone="${row.phone}">

                            <div class="d-flex align-items-center">

                                <img src="${photo}"
                                    style="
                                        width:45px;
                                        height:45px;
                                        object-fit:cover;
                                        border-radius:50%;
                                        margin-right:12px;
                                    ">

                                <div>
                                    <b>${row.name}</b><br>
                                    <small>${row.phone}</small>
                                </div>

                            </div>

                        </a>
                    `;
                });

            }else{

                html = `
                    <div class="list-group-item text-muted">
                        Member tidak ditemukan
                    </div>
                `;
            }

            $('#member_result').html(html);

        }

    });

});

$(document).on('click', '.pilih-member', function(e){

    e.preventDefault();

    $('#member_id').val($(this).data('id'));
    $('#member_name').val($(this).data('name'));
    $('#member_phone').val($(this).data('phone'));

    $('#search_member').val($(this).data('name'));

    $('#member_result').html('');

});

</script>
<script>

let delayTimer;

$('#search_member').on('keyup', function(){

    clearTimeout(delayTimer);

    let keyword = $(this).val();

    delayTimer = setTimeout(function(){

        if(keyword.length < 1){
            $('#member_result').html('');
            return;
        }

        $.ajax({
            url: "<?= base_url('gym/searchmember') ?>",
            type: "POST",
            data: {
                keyword: keyword
            },
            dataType: "JSON",

            success: function(response){

                let html = '';

                response.forEach(function(row){

                    html += `
                        <a href="#"
                        class="list-group-item list-group-item-action pilih-member"

                        data-id="${row.user_id}"
                        data-name="${row.name}"
                        data-phone="${row.phone}">

                            <b>${row.name}</b><br>
                            <small>${row.phone}</small>

                        </a>
                    `;
                });

                $('#member_result').html(html);

            }

        });

    }, 300);

});

</script>
<script>

    const nominalInput = document.getElementById('nominal');
    const nominalHidden = document.getElementById('nominal_hidden');

    nominalInput.addEventListener('input', function(e){

        // ambil angka saja
        let value = this.value.replace(/[^0-9]/g, '');

        // simpan value asli ke hidden input
        nominalHidden.value = value;

        // format rupiah
        let formatted = new Intl.NumberFormat('id-ID').format(value);

        // tampilkan
        this.value = value ? 'Rp ' + formatted : '';

    });

</script>
<script>

function toggleNominalRequired(){

    // cek tab aktif
    let activeTab = $('.nav-link.active').attr('id');

    if(activeTab == 'member-tab'){

        // TAB MEMBER
        $('#nominal').prop('required', false);

    }else{

        // TAB KUNJUNGAN
        $('#nominal').prop('required', true);

    }

}

// saat modal dibuka
$('#modalPresensi').on('shown.bs.modal', function(){

    toggleNominalRequired();

});

// saat pindah tab
$('button[data-bs-toggle="tab"]').on('shown.bs.tab', function(){

    toggleNominalRequired();

});

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