@extends("layouts.adminlte")
@section("page-heading")
    Profile
@endsection
@section("content")
    <div class="row">
        <div class="col-md-8">
            <!-- About Me Box -->
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">{{ $profile->p_name }}</h3>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <strong><i class="fas fa-calendar mr-1"></i> Date of Joining :
                            </strong>{{ \Carbon\Carbon::parse($profile->p_doj)->format("d-M-Y") }}
                        </div>
                        <div class="col-md-6">
                            <strong><i class="fas fa-pencil-alt mr-1"></i> HLife ID : </strong>{{ $profile->p_hb_id }}
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <strong><i class="fas fa-calendar mr-1"></i> Date of Birth :
                            </strong>{{ \Carbon\Carbon::parse($profile->p_dob)->format("d-M-Y") }}
                        </div>
                        <div class="col-md-6">
                            <strong><i class="fas fa-child mr-1"></i> Gender : </strong>{{ $profile->p_gender }}
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <strong><i class="fas fa-mobile mr-1"></i> Mobile : </strong>{{ $profile->p_mobile }}
                        </div>
                        <div class="col-md-6">
                            <strong><i class="fas fa-map mr-1"></i> Address : </strong>{{ $profile->p_address }}
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <div class="col-md-2">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">Before</h3>
                </div>
                <div class="card-body box-profile">
                    <div class="text-center">
                        <img class="" style="width: 100%; height: 138px"
                             src="{{ $profile->p_photo1 ? \Storage::url($profile->p_photo1) : asset("img/adminlte/dist/img/AdminLTELogo.png") }}"
                             alt="User profile picture">
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <div class="col-md-2">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">After</h3>
                </div>
                <div class="card-body box-profile">
                    <div class="text-center">
                        <img class="" style="width: 100%; height: 138px"
                             src="{{ $profile->p_photo2 ? \Storage::url($profile->p_photo2) : asset("img/adminlte/dist/img/AdminLTELogo.png") }}"
                             alt="User profile picture">
                    </div>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-pills">
                        <li class="nav-item">
                            <a class="nav-link active" href="#analysis1" data-toggle="tab">Analysis History</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#analysis2" data-toggle="tab">New Analysis</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#diet" data-toggle="tab">Diet Chart</a>
                        </li>
                    </ul>
                </div>
                <!-- /.card-header -->
                <div class="card-body">
                    <div class="tab-content">
                        <div class="active tab-pane" id="analysis1">
                            <table id="data-table-profile-findings" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th style="width: 10%">Date</th>
                                    <th style="width: 10%">Height</th>
                                    <th style="width: 10%">Weight</th>
                                    <th style="width: 10%">BMI</th>
                                    <th style="width: 10%">Visceral</th>
                                    <th style="width: 10%">Muscle</th>
                                    <th style="width: 10%">Metabolism</th>
                                    <th style="width: 10%">Body Age</th>
                                    <th style="width: 10%">Body Fat</th>
                                    <th style="width: 10%"></th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="analysis2">
                            <form class="form-horizontal" method="POST" action="{{ route("profile-finding.store") }}">
                                @csrf
                                <input type="hidden" name="profile_id" value="{{ $profile->id }}">
                                <div class="form-group row">
                                    <label for="height" class="col-sm-2 col-form-label">Height</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="height" id="height"
                                               placeholder="Height (cm)" required>
                                    </div>
                                    <label for="weight" class="col-sm-2 col-form-label">Weight</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="weight" id="weight"
                                               placeholder="Weight (Kg)" required>
                                    </div>
                                    <label for="bmi" class="col-sm-2 col-form-label">BMI</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="bmi" id="bmi"
                                               placeholder="BMI" readonly required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-2 col-form-label">Visceral Fat</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="visceral_fat" id=""
                                               placeholder="Visceral Fat" required>
                                    </div>
                                    <label for="" class="col-sm-2 col-form-label">Muscle</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="muscle" id=""
                                               placeholder="Muscle" required>
                                    </div>
                                    <label for="" class="col-sm-2 col-form-label">Metabolism</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="metabolism" id=""
                                               placeholder="Metabolism" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="" class="col-sm-2 col-form-label">Body Age</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="body_age" id=""
                                               placeholder="Body Age" required>
                                    </div>
                                    <label for="" class="col-sm-2 col-form-label">Body Fat</label>
                                    <div class="col-sm-2">
                                        <input type="number" class="form-control" name="body_fat" id=""
                                               placeholder="Body Fat" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <div class="offset-10 col-sm-2">
                                        <button type="submit" class="btn btn-primary btn-block">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.tab-pane -->
                        <div class="tab-pane" id="diet">
                            <form class="form-horizontal" method="POST"
                                  action="{{ route("profile-diet-plan.update", $profile->profileDietPlan->id) }}">
                                @csrf @method("PATCH")
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">05:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="05am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["05am"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">06:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="06am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["06am"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">07:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="07am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["07am"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">08:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="08am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["08am"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">09:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="09am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["09am"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">10:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="10am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["10am"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">11:00 AM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="11am" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["11am"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">12:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="12pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["12pm"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">01:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="01pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["01pm"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">02:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="02pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["02pm"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">03:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="03pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["03pm"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">04:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="04pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["04pm"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">05:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="05pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["05pm"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">06:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="06pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["06pm"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">07:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="07pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["07pm"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">08:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="08pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["08pm"] }}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-1 col-form-label">09:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="09pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["09pm"] }}">
                                    </div>
                                    <label for="height" class="col-sm-1 col-form-label">10:00 PM</label>
                                    <div class="col-sm-5">
                                        <input type="text" class="form-control" name="10pm" id="" placeholder=""
                                               value="{{ json_decode($profile->profileDietPlan->pdp_schedule, true)["10pm"] }}">
                                    </div>
                                </div>
                                <hr>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-2 col-form-label">Notes</label>
                                    <div class="col-sm-10">
                                        <textarea name="notes" id="" class="form-control" rows="4">{{ $profile->profileDietPlan->pdp_notes }}</textarea>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="height" class="col-sm-2 col-form-label">Instructions</label>
                                    <div class="col-sm-10">
                                        <textarea name="instructions" id="" class="form-control" rows="4">{{ $profile->profileDietPlan->pdp_instructions }}</textarea>
                                    </div>
                                </div>
                                <hr>
                                <div class="form-group row">
                                    <div class="col-sm-2">
                                        <button type="submit" class="btn btn-primary btn-block">Update</button>
                                    </div>
                                    <div class="offset-8 col-sm-2">
                                        <button type="" class="btn btn-primary btn-block">Print</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- /.tab-pane -->
                    </div>
                    <!-- /.tab-content -->
                </div><!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>
@endsection
@section("scripts")
    <script type="text/javascript">
        $(function () {
            $('#data-table-profile-findings').DataTable({
                processing: true,
                serverSide: true,
                ordering: false,
                ajax: {
                    url: "{{ route('data-tables') }}",
                    data: {
                        'model_name': 'ProfileFinding',
                        'profile_id': "{{ $profile->id }}"
                    },
                },
                columns: [
                    {data: 'createdAt', name: 'createdAt'},
                    {data: 'pf_height', name: 'pf_height', className: "text-right"},
                    {data: 'pf_weight', name: 'pf_weight', className: "text-right"},
                    {data: 'pf_bmi', name: 'pf_bmi', className: "text-right"},
                    {data: 'visceral', name: 'visceral', className: "text-right"},
                    {data: 'muscle', name: 'muscle', className: "text-right"},
                    {data: 'metabolism', name: 'metabolism', className: "text-right"},
                    {data: 'body_age', name: 'body_age', className: "text-right"},
                    {data: 'body_fat', name: 'body_fat', className: "text-right"},
                    {data: 'buttons', name: 'buttons'},
                ]
            });
        });
    </script>
    <script type="text/javascript">
        $(function () {
            const heightSelector = $("#height");
            const weightSelector = $("#weight");
            const bmiSelector = $("#bmi");

            let height = heightSelector.val();
            let weight = weightSelector.val();
            let bmi = 0;

            heightSelector.on("input", function () {
                calculateBmi(height, weight);
            });

            weightSelector.on("input", function () {
                calculateBmi(height, weight);
            });

            function calculateBmi() {
                height = heightSelector.val();
                weight = weightSelector.val();
                bmi = Math.round(((weight / (height * height)) * 10000) * 100) / 100;
                bmiSelector.val(bmi);
            }
        });
    </script>
@endsection