<!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>Sesi Coach | 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>
    /* MODAL CERAH */
    .modal-content{
        background: #ffffff !important;
        color: #212529 !important;
        border-radius: 14px;
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }

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

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

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

    /* 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;
    }

    /* FOCUS INPUT */
    .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;
    }

    /* 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;
    }

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

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

    /* BUTTON */
    .modal .btn-light-dark{
        background: #e9ecef !important;
        color: #212529 !important;
        border: 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">

                    <!-- BREADCRUMB -->
                    <div class="page-meta">
                        <nav class="breadcrumb-style-one" aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#">Coach</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Sesi Latihan</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- /BREADCRUMB -->
    
                    <div class="row layout-spacing ">
                        <?php 
                            include ("notification.php");
                        ?> 
                        <!-- Content -->
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 layout-top-spacing">
                            <div class="usr-tasks ">
                                <div class="widget-content widget-content-area">
                                    <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%">
                                        <h2 class=""><?php echo $detil[0]['name']?></h2>
                                    </div>
                                    <h3 class="">
                                        Daftar Client

                                        <button 
                                            class="btn btn-secondary"
                                            style="float:right"
                                            data-bs-toggle="modal"
                                            data-bs-target="#modalTambahClient">
                                            Tambah Client
                                        </button>
                                    </h3>

                                    <!-- TAB CLIENT -->
                                    <ul class="nav nav-tabs mt-4 mb-3" id="clientTableTab" role="tablist">

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

                                                Client Member
                                            </button>
                                        </li>

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

                                                Client Kunjungan
                                            </button>
                                        </li>

                                    </ul>

                                    <div class="tab-content">

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

                                            <div class="table-responsive">

                                                <table class="table table-bordered table-hover">

                                                    <thead>
                                                        <tr>                                                            
                                                            <th>Aksi</th>
                                                            <th>Nama Client</th>
                                                            <th>Paket</th>
                                                            <th>Tanggal</th>
                                                            <th>Catatan</th>
                                                        </tr>
                                                    </thead>

                                                    <tbody>
                                                        <?php
                                                            foreach($coachmember as $row){
                                                                echo "
                                                                    <tr>
                                                                        <td>
                                                                        <a href='#' 
                                                                        class='badge badge-success mb-2 btn-input-sesi'

                                                                        data-bs-toggle='modal'
                                                                        data-bs-target='#modalInputSesi'

                                                                        data-id='".$row['clientcoach_id']."'
                                                                        data-coach_id='".$row['coach_id']."'
                                                                        data-name='".$row['name']."'
                                                                        data-package='".$row['member_package']."'
                                                                        >
                                                                        Input Sesi
                                                                        </a>

                                                                        <a href='".base_url()."gym/detilmember/".$row['user_id']."' class='badge badge-info mb-2 btn-edit'>Detil Sesi</a></td>
                                                                        <td>".$row['name']."</td>
                                                                        <td>".$row['member_package']."</td>
                                                                        <td>".$row['member_schedule']."</td>
                                                                        <td>".$row['member_notes']."</td>
                                                                    </tr>
                                                                ";
                                                            }
                                                        ?>      
                                                    </tbody>

                                                </table>

                                            </div>

                                        </div>

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

                                            <div class="table-responsive">

                                                <table class="table table-bordered table-hover">

                                                    <thead>
                                                        <tr>
                                                            <th>Nama Visitor</th>
                                                            <th>Jenis Kunjungan</th>
                                                            <th>Tanggal</th>
                                                            <th>Status</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                         <?php
                                                            foreach($coachvisit as $row){
                                                                echo "
                                                                    <tr>
                                                                        <td>".$row['visitor_name']."</td>
                                                                        <td>".$row['visit_type']."</td>
                                                                        <td>".$row['visit_date']."</td>
                                                                        <td>".$row['visitor_notes']."</td>
                                                                    </tr>
                                                                ";
                                                            }
                                                        ?>       
                                                    </tbody>

                                                </table>

                                            </div>

                                        </div>

                                    </div>
                                </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 FOOTER  -->
            <!-- Modal Input Sesi -->
            <div class="modal fade" id="modalInputSesi" 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/addsessions" method="POST">

                            <div class="modal-header">
                                <h5 class="modal-title">
                                    Input Sesi Latihan
                                </h5>

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

                            <div class="modal-body">

                                <input type="hidden"
                                    name="clientcoach_id"
                                    id="session_user_id">

                                    <input type="hidden"
                                    name="coach_id"
                                    id="session_coach_id">

                                <div class="row">

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

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

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

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

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">
                                            Tanggal Latihan
                                        </label>

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

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">
                                            Durasi Latihan
                                        </label>

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

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

                                            <option value="30 Menit">
                                                30 Menit
                                            </option>

                                            <option value="60 Menit">
                                                60 Menit
                                            </option>

                                            <option value="90 Menit">
                                                90 Menit
                                            </option>

                                            <option value="120 Menit">
                                                120 Menit
                                            </option>

                                        </select>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">
                                            Jenis Latihan
                                        </label>

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

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

                                            <option value="Upper Body">
                                                Upper Body
                                            </option>

                                            <option value="Lower Body">
                                                Lower Body
                                            </option>

                                            <option value="Push Day">
                                                Push Day
                                            </option>

                                            <option value="Pull Day">
                                                Pull Day
                                            </option>

                                            <option value="Leg Day">
                                                Leg Day
                                            </option>

                                            <option value="Cardio">
                                                Cardio
                                            </option>

                                            <option value="Full Body">
                                                Full Body
                                            </option>

                                        </select>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">
                                            Detail Program
                                        </label>

                                        <textarea class="form-control"
                                                rows="5"
                                                name="workout_notes"
                                                placeholder="Contoh:
            Bench Press 4x12
            Squat 4x10
            Lat Pulldown 4x12"></textarea>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">
                                            Berat Badan
                                        </label>

                                        <input type="number"
                                            class="form-control"
                                            name="weight"
                                            placeholder="Contoh: 75">
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">
                                            Kondisi Client
                                        </label>

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

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

                                            <option value="Fit">
                                                Fit
                                            </option>

                                            <option value="Kurang Fit">
                                                Kurang Fit
                                            </option>

                                            <option value="Cedera Ringan">
                                                Cedera Ringan
                                            </option>

                                        </select>
                                    </div>

                                    <div class="col-md-12 mb-3">
                                        <label class="form-label">
                                            Catatan Coach
                                        </label>

                                        <textarea class="form-control"
                                                rows="4"
                                                name="coach_notes"
                                                placeholder="Masukkan evaluasi latihan client"></textarea>
                                    </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 Sesi
                                </button>

                            </div>

                        </form>

                    </div>
                </div>
            </div>
            <!-- Modal Tambah Client -->
            <div class="modal fade" id="modalTambahClient" 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/addclientcoach" method="POST">

                            <div class="modal-header">
                                <h5 class="modal-title">
                                    Tambah Client Coach
                                </h5>

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

                            <div class="modal-body">

                                <input type="hidden"
                                    name="coach_id"
                                    value="<?php echo $detil[0]['user_id']?>">

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

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

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

                                </ul>

                                <div class="tab-content">

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

                                        <div class="row">

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

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

                                                    <option value="">
                                                        -- Pilih Member --
                                                    </option>

                                                    <?php
                                                        foreach($member as $m){
                                                            echo "
                                                            <option value='".$m['user_id']."'>
                                                                ".$m['name']." - ".$m['phone']."
                                                            </option>
                                                            ";
                                                        }
                                                    ?>

                                                </select>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Paket Latihan
                                                </label>

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

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

                                                    <option value="Weight Loss">
                                                        Weight Loss
                                                    </option>

                                                    <option value="Muscle Building">
                                                        Muscle Building
                                                    </option>

                                                    <option value="Body Recomp">
                                                        Body Recomp
                                                    </option>

                                                    <option value="Powerlifting">
                                                        Powerlifting
                                                    </option>

                                                </select>
                                            </div>

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Jadwal Latihan
                                                </label>

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

                                            <div class="col-md-12 mb-3">
                                                <label class="form-label">
                                                    Catatan Coach
                                                </label>

                                                <textarea class="form-control"
                                                        rows="4"
                                                        name="member_notes"></textarea>
                                            </div>

                                        </div>

                                    </div>

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

                                        <div class="row">

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

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

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

                                                <input type="number"
                                                    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-6 mb-3">
                                                <label class="form-label">
                                                    Tanggal Kunjungan
                                                </label>

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

                                            <div class="col-md-6 mb-3">
                                                <label class="form-label">
                                                    Target Berat Badan
                                                </label>

                                                <input type="number"
                                                    class="form-control"
                                                    name="visitor_target_weight"
                                                    placeholder="Contoh: 70">
                                            </div>

                                            <div class="col-md-12 mb-3">
                                                <label class="form-label">
                                                    Catatan Coach
                                                </label>

                                                <textarea class="form-control"
                                                        rows="4"
                                                        name="visitor_notes"></textarea>
                                            </div>

                                        </div>

                                    </div>

                                </div>

                            </div>

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

                                <input 
                                    type="hidden"
                                    name="nominal"
                                    id="nominal_hidden"
                                >
                                <button type="button"
                                        class="btn btn-light-dark"
                                        data-bs-dismiss="modal">
                                    Batal
                                </button>

                                <button type="submit"
                                        class="btn btn-primary">
                                    Simpan Client
                                </button>

                            </div>

                        </form>

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

<script>

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

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

    $('#session_coach_id').val(coach_id);    
    $('#session_user_id').val(id);
    $('#session_name').val(name);
    $('#session_package').val(paket);

});

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