<!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>Profile 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 CUSTOM STYLE FILE  -->
    <link href="<?php echo base_url(); ?>assets/src/assets/css/light/components/list-group.css" rel="stylesheet" type="text/css">
    <link href="<?php echo base_url(); ?>assets/src/assets/css/light/users/user-profile.css" rel="stylesheet" type="text/css" />

    <link href="<?php echo base_url(); ?>assets/src/assets/css/dark/components/list-group.css" rel="stylesheet" type="text/css">
    <link href="<?php echo base_url(); ?>assets/src/assets/css/dark/users/user-profile.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/assets/css/light/elements/alert.css">
    <!--  END CUSTOM STYLE FILE  -->
      <style>

    /* Background modal */
    .modal-content{
        background: #ffffff !important;
        color: #3b3f5c !important;
        border-radius: 14px;
        border: none;
    }

    /* Header modal */
    .modal-header{
        border-bottom: 1px solid #e0e6ed;
        background: #ffffff;
    }

    /* Footer modal */
    .modal-footer{
        border-top: 1px solid #e0e6ed;
        background: #ffffff;
    }

    /* Input form */
    .modal .form-control,
    .modal .form-select,
    .modal textarea{
        background-color: #ffffff !important;
        color: #3b3f5c !important;
        border: 1px solid #d3d3d3 !important;
    }

    /* Placeholder */
    .modal .form-control::placeholder,
    .modal textarea::placeholder{
        color: #888 !important;
    }

    /* Label */
    .modal .form-label{
        color: #3b3f5c;
        font-weight: 600;
    }

    /* Title */
    .modal-title{
        color: #3b3f5c;
        font-weight: 700;
    }

    /* Close button */
    .btn-close{
        filter: invert(0);
    }

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

                    <!-- BREADCRUMB -->
                    <div class="page-meta">
                        <nav class="breadcrumb-style-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Users</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Profile</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- /BREADCRUMB -->
    
                    <div class="row layout-spacing ">
    
                        <!-- Content -->                       

                        <div class="col-xl-7 col-lg-12 col-md-12 col-sm-12 layout-top-spacing">

                            <div class="usr-tasks ">
                                <div class="widget-content widget-content-area">
                                    <h3 class="">Kartu Member</h3>
                                    <center><button class="btn btn-info">Status Member : <?php echo $detil[0]['status']?></button></center></br>
                                    <img
                                        src="<?= $qr_image ?>"
                                        width="250"
                                        class="mx-auto d-block"
                                    ></br>
                                    <div class="alert alert-arrow-right alert-icon-right alert-light-danger alert-dismissible fade show mb-4" role="alert">
                                        <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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12" y2="16"></line></svg>
                                        <strong>Info!</strong> Pastikan status anda Aktif untuk dapat mendapatkan fasilitas GYM.
                                    </div>
                                </div>
                            </div>                            
                        </div>

                        <div class="col-xl-5 col-lg-12 col-md-12 col-sm-12 layout-top-spacing">
                            <div class="user-profile">
                                <div class="widget-content widget-content-area">
                                    <div class="d-flex justify-content-between">
                                        <h3 class="">Detil Member</h3>
                                    </div>
                                    <div class="text-center user-info">
                                        <img src="<?php
                                            if(empty($detil[0]['photo'])){
                                                echo base_url()."assets/src/assets/img/logo.svg";
                                            }else{
                                                echo base_url()."".$detil[0]['photo'];
                                            }?>
                                            " alt="avatar" style="width:30%">
                                        <p class=""><?php echo $detil[0]['name']?></p>
                                    </div>
                                    <div class="user-info-list">
    
                                        <div class="">
                                            <ul class="contacts-block list-unstyled">
                                                <li class="contacts-block__item">
                                                    <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-coffee me-3"><path d="M18 8h1a4 4 0 0 1 0 8h-1"></path><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path><line x1="6" y1="1" x2="6" y2="4"></line><line x1="10" y1="1" x2="10" y2="4"></line><line x1="14" y1="1" x2="14" y2="4"></line></svg> <?php echo $detil[0]['job']?>
                                                </li>
                                                <li class="contacts-block__item">
                                                    <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-calendar me-3"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg><?php echo $detil[0]['exp_date']?>
                                                </li>
                                                <li class="contacts-block__item">
                                                    <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-map-pin me-3"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg><?php echo $detil[0]['address']?>
                                                </li>
                                                <li class="contacts-block__item">
                                                    <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-phone me-3"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> <?php echo $detil[0]['phone']?>
                                                </li>
                                            </ul>

                                            <ul class="list-inline mt-4">
                                                <li class="list-inline-item mb-0">
                                                    <a class="btn btn-info btn-icon btn-rounded" href="javascript:void(0);">
                                                        <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-twitter"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item mb-0">
                                                    <a class="btn btn-danger btn-icon btn-rounded" href="javascript:void(0);">
                                                        <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-dribbble"><circle cx="12" cy="12" r="10"></circle><path d="M8.56 2.75c4.37 6.03 6.02 9.42 8.03 17.72m2.54-15.38c-3.72 4.35-8.94 5.66-16.88 5.85m19.5 1.9c-3.5-.93-6.63-.82-8.94 0-2.58.92-5.01 2.86-7.44 6.32"></path></svg>
                                                    </a>
                                                </li>
                                                <li class="list-inline-item mb-0">
                                                    <a class="btn btn-dark btn-icon btn-rounded" href="javascript:void(0);">
                                                        <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-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>                                    
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>

                    <div class="row">
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                            <div class="pro-plan layout-spacing">
                                <div class="widget">    
                                    <div class="widget-heading">        
                                        <div class="task-info">
                                            <div class="w-title">
                                                <h5>Masa Aktif Member</h5>
                                            </div>
                                        </div>   
                                        <?php if ($detil[0]['status']=='Non-Active'){
                                            echo "
                                                <div class='task-action'>
                                                    <button 
                                                        class='btn btn-secondary'
                                                        data-bs-toggle='modal'
                                                        data-bs-target='#modalPerpanjang'
                                                    >
                                                        Perpanjang
                                                    </button>
                                                </div>
                                            ";
                                        }else{
                                            echo "
                                                <div class='task-action'>
                                                   <span class='badge badge-success mb-2 me-4'>".$detil[0]['status']."</span>
                                                </div>
                                            ";
                                        }
                                        ?>    
                                    </div>
                                    
                                    <div class="widget-content">        
                                        <ul class="p-2 ps-3 mb-4">
                                            <li class="mb-1"><strong>Gym Area</strong></li>
                                            <li class="mb-1"><strong>Loker</strong></li>
                                            <li class=""><strong>Fasilitas Lainnya</strong></li>
                                        </ul>    
                                        <?php
                                            $persen = 0;
                                            $sisaHari = 0;
                                            $totalHari = 0;

                                            if(!empty($current[0]['start_date']) && !empty($current[0]['end_date'])){

                                                $start = strtotime($current[0]['start_date']);
                                                $end   = strtotime($current[0]['end_date']);
                                                $today = strtotime(date('Y-m-d'));

                                                // total hari membership
                                                $totalHari = ($end - $start) / 86400;

                                                // sisa hari
                                                $sisaHari = ceil(($end - $today) / 86400);

                                                // hari terpakai
                                                $terpakai = ($today - $start) / 86400;

                                                if($totalHari > 0){
                                                    $persen = ($terpakai / $totalHari) * 100;
                                                }

                                                // limit 0-100
                                                if($persen < 0){
                                                    $persen = 0;
                                                }

                                                if($persen > 100){
                                                    $persen = 100;
                                                }
                                            }
                                        ?>   
                                        <?php if(!empty($current)){ ?>                                 
                                        <div class="progress-data">
                                            <div class="progress-info">
                                                <div class="due-time">
                                                    <p><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-clock"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg> <?php echo $sisaHari;?> Hari</p>
                                                </div>
                                                <div class="progress-stats"><p class="text-info">Rp <?php echo number_format($current[0]['nominal'],0,',','.'); ?> / <?php echo $current[0]['paket']?> bulan</p></div>
                                            </div>                                            
                                            <div class="progress">
                                                <div 
                                                    class="progress-bar bg-primary"
                                                    role="progressbar"
                                                    style="width: <?php echo $persen; ?>%"
                                                    aria-valuenow="<?php echo $persen; ?>"
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                                >
                                                    <?php echo round($persen); ?>%
                                                </div>
                                            </div>
                                        </div> 
                                        <?php } ?>       
                                    </div>        
                                </div>
                            </div>                            
                        </div>
    
                        <div class="col-xl-6 col-lg-12 col-md-12 col-sm-12">
                            <div class="payment-history layout-spacing ">
                                <div class="widget-content widget-content-area">
                                    <h3 class="">Riwayat Member 3 Terakhir</h3>

                                    <div class="list-group">
                                        <?php
                                            foreach ($history as $row){
                                                echo "
                                                    <div class='list-group-item d-flex justify-content-between align-items-start'>
                                                        <div class='me-auto'>
                                                            <div class='fw-bold title'>".$row['paket']." Bulan</div>
                                                            <p class='sub-title mb-0'>Mulai ".$row['start_date']."</br>Sampai ".$row['end_date']."</p>
                                                        </div>
                                                        <span class='pay-pricing align-self-center me-3'>Rp ".number_format($row['nominal'],0,',','.')."</span>
                                                        <div class='btn-group dropstart align-self-center' role='group'>
                                                            <a id='paymentHistory1' href='javascript:void(0);' class='dropdown-toggle' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                                                                <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-more-horizontal'><circle cx='12' cy='12' r='1'></circle><circle cx='19' cy='12' r='1'></circle><circle cx='5' cy='12' r='1'></circle></svg>
                                                            </a>
                                                            <div class='dropdown-menu' aria-labelledby='paymentHistory1'>
                                                                <a class='dropdown-item' href='javascript:void(0);'>View Invoice</a>
                                                                <a class='dropdown-item' href='javascript:void(0);'>Download Invoice</a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                ";
                                            }
                                        ?>
                                    </div>
    
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="statbox widget box box-shadow">      
                        <div class="widget-content widget-content-area">
                             <div class="widget-heading">        
                                <div class="task-info">
                                    <div class="w-title">
                                        <h5>Daftar Sesi Latihan - Coach
                                        </h5>
                                    </div>
                                </div>   
                            </div>
                            </br>
                            <table id="html5-extension" class="table dt-table-hover" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Nama Coach</th>                                                
                                        <th>Tanggal</th>
                                        <th>Durasi</th>
                                        <th>Jenis Latihan</th>
                                        <th>Workout Plan</th>
                                        <th>Berat Badan</th>
                                        <th>Kondisi</th>
                                        <th>Catatan</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <?php
                                        foreach($detilsession as $row){
                                            echo "
                                                <tr>
                                                    <td>".$row['name']."</td>
                                                    <td>".$row['session_date']."</td>
                                                    <td>".$row['duration']."</td>
                                                    <td>".$row['training_type']."</td>
                                                    <td>".$row['workout_notes']."</td>
                                                    <td>".$row['weight']."</td>
                                                    <td>".$row['client_condition']."</td>
                                                    <td>".$row['coach_notes']."</td>
                                                </tr>
                                            ";
                                        }
                                    ?>                                          
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Modal Perpanjang Member -->
            <div 
                class="modal fade" 
                id="modalPerpanjang" 
                tabindex="-1" 
                aria-labelledby="modalPerpanjangLabel" 
                aria-hidden="true"
            >

                <div class="modal-dialog modal-dialog-centered">
                    
                    <div class="modal-content">

                        <form action="<?= base_url('gym/perpanjang_member') ?>" method="POST">

                            <div class="modal-header">
                                <h5 class="modal-title" id="modalPerpanjangLabel">
                                    Perpanjang Member
                                </h5>

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

                            <div class="modal-body">

                                <!-- Hidden ID User -->
                                <input 
                                    type="hidden" 
                                    name="user_id" 
                                    value="<?= $detil[0]['user_id'] ?>"
                                >

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

                                    <input 
                                        type="text"
                                        class="form-control"
                                        value="<?= $detil[0]['name'] ?>"
                                        readonly
                                    >
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">
                                        Paket Member
                                    </label>

                                    <select 
                                        name="paket"
                                        class="form-select"
                                        required
                                    >
                                        <option value="">
                                            -- Pilih Paket --
                                        </option>

                                        <option value="1">
                                            1 Bulan
                                        </option>

                                        <option value="3">
                                            3 Bulan
                                        </option>

                                        <option value="6">
                                            6 Bulan
                                        </option>

                                        <option value="12">
                                            12 Bulan
                                        </option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label class="form-label">
                                        Tanggal Mulai
                                    </label>

                                    <input 
                                        type="date"
                                        name="start_date"
                                        class="form-control"
                                        required
                                    >
                                </div>

                                <input 
                                    type="text"
                                    class="form-control"
                                    id="nominal"
                                    placeholder="Rp 0"
                                    required
                                >

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

                                <div class="mb-3">
                                    <label class="form-label">
                                        Catatan
                                    </label>

                                    <textarea 
                                        name="note"
                                        class="form-control"
                                        rows="3"
                                        placeholder="Catatan tambahan..."
                                    ></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 Perpanjangan
                                </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 FOOTER  -->
            
        </div>
        <!--  END CONTENT AREA  -->
          
    </div>
    <!-- END MAIN CONTAINER -->
    
    
    
   <!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
    <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>
    <!-- END GLOBAL MANDATORY SCRIPTS -->
     <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>
</body>
</html>