Viewing file:  workout_plan.blade.php (9.31 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title') Workout Plan @endsection
@section('extra-css')
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')}}">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<style>
.w-100{
width: 100%;
}
.list-style-none{
list-style: none;
background: whitesmoke;
padding: 7px 20px;
border-radius: 5px;
}
input[type=checkbox]{
display: block !important;
}
.task-preview-section{
width: 100%;
}
#previewImage{
width: 100%;
}
video{
width: 100%;
}
input[type=checkbox] {
display: block !important;
}
.preview_task{
padding: 0px 4px 1px 4px !important;
}
</style>
@endsection
@section('content')
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h2 class="card-title">@lang('Workout Plan Details')</h2>
</div>
<!-- /.card-header -->
<div class="card-body table-body">
<div class="row">
@if(!isset($upgrade_plan) && isset($customer_workout_plan) && $customer_workout_plan)
<div class="col-md-10 mx-auto">
<div class="mt-3">
<h5>{{$customer_workout_plan->meal_plan->title}}</h5>
</div>
@if($customer_workout_plan->customer_workout_sections)
<div class="mt-3">
@foreach($customer_workout_plan->customer_workout_sections as $s_key=>$section)
<div class="card mt-3">
<div class="card-header text-center">
<h6>{{isset($section->title)?$section->title:''}}</h6>
</div>
<div class="card-body">
@foreach($section->customer_workout_tasks as $key=>$task)
<ul class="list-style-none">
<li>
<strong>Task: </strong> {{isset($task->workout_task->name)?$task->workout_task->name:''}}
<input type="checkbox" {{$task->status=='complete'?'checked':''}}
class="check_workout_task border-red float-right"
data-id="{{$task->id}}">
</li>
<li><strong>Repetation and set: </strong> {{isset($task->repetation_and_set)?$task->repetation_and_set:''}}</li>
<li>
<strong>Rest Time: </strong> {{isset($task->rest_time)?$task->rest_time:''}}
@php
$attach_file='';
if(isset($task->workout_task->image_or_video) && $task->workout_task->image_or_video){
$file_name=explode('.',$task->workout_task->image_or_video);
if(isset($file_name[1]) && $file_name[1]=='mp4'){
$attach_file='mp4';
}
}
@endphp
<button
data-path="{{asset('uploads/'.$task->workout_task->image_or_video)}}"
data-type="{{$attach_file}}" type="button"
class="btn-sm btn btn-info float-right preview_task">
<small>Preview</small>
</button>
</li>
</ul>
@endforeach
</div>
</div>
@endforeach
</div>
@endif
</div>
@else
<div class="col-md-4 mx-auto">
<div class="card">
<div class="card-body text-center">
<h5>{{trans('No Workout Plan Assigned')}}</h5>
<strong>{{trans('Contact With Admin')}}</strong>
</div>
</div>
</div>
@endif
</div>
</div>
<!-- /.card-body -->
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="previewModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header bg-white">
<button type="button" class="close pause_video" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="task-preview-section">
<div class="section-video">
</div>
<img id="previewImage" alt="">
</div>
</div>
</div>
</div>
</div>
@endsection
@section('extra-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
"use strict";
let workout_task_status = 'incomplete';
$(document).on("click", ".check_workout_task", function (e) {
const data_id = $(this).attr('data-id');
if ($(this).is(':checked')) {
workout_task_status = 'complete';
} else {
workout_task_status = 'incomplete';
}
$.ajax({
url: '{{route('customer.work.out.plan.status')}}',
method: 'POST',
data: {
'_token': '{{csrf_token()}}',
workout_task_status: workout_task_status,
id: data_id
},
success: function (res) {
if(res.status=='success'){
toastr.success(res.message);
}
}
});
});
</script>
<script>
"use strict";
$(document).on('click', '.preview_task', function(e){
const type=$(this).attr('data-type');
const file=$(this).attr('data-path');
if(type && type=='mp4'){
$('#videoTag').removeClass('d-none');
$('.section-video').html(`<video id="videoTag" controls autoplay> <source src="${file}" type="video/mp4"></video>`)
}else{
$('#videoTag').addClass('d-none');
$('#previewImage').attr('src', file);
}
$('#previewModal').modal('show');
});
$(document).on('click', '.pause_video', function(e){
$('#videoTag').get(0).pause();
});
</script>
@endsection
|