@extends('Frontend.partials.layout')
@section('styles')
<style>
    .profile-img img {
        min-width: 90px;
        max-width: 90px;
        min-height: 90px;
        max-height: 90px;
        border-radius: 50%;
        object-fit: cover;
    }

    .user-info h6,
    .user-info p {
        margin-bottom: 5px;
    }

    .user-info p:last-child {
        margin-bottom: 0px;
    }

    .treatment-overview-list{
        overflow-x: auto;
    }

    .treatment-overview-list .table-responsive {
        width: 100%;
        min-width: 855px;
    }

    .treatment-overview-list thead,
    .treatment-overview-list tbody tr {
        display:table;
        width: 100%;
        table-layout:fixed;
    }

    .treatment-overview-list tbody {
        display:block;
        min-height: 210px !important;
        max-height: 420px !important;
        overflow-y: auto;
    }

    .treatment-overview-list thead tr{
        border-top: 1px solid #eeeeee !important;
        border-bottom: 1px solid #eeeeee !important;
    }

    .treatment-overview-list tbody tr:not(:last-child){
        border-bottom: 1px dashed #eeeeee !important;
    }

    .treatment-overview-list tbody tr.opend-treat{
        background-color: rgba(47, 171, 102, .08);
    }

    .treatment-overview-list tbody::-webkit-scrollbar {
        width: 5px;
    }

    .treatment-overview-list tbody::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
    }

    .treatment-overview-list tbody::-webkit-scrollbar-thumb {
        background-color: #2fab66;
        border-radius: 10px;
    }

    .view-pdf-btn{
        color: #4E5155;
    }

    .treat-play-btn[disabled]{
        color: #1e70cda1;
        pointer-events: none;
    }

    .therapist-info,
    .note-content{
        min-height: 90px;
    } 
    .action-btn a {
        position: relative;
        margin: 5px 3px!important;
        font-size: 15px;
        border: 1px solid #2fab66;
        padding: 3px 5px;
        border-radius: 3px;
        width: 30px;
        display: inline-block;
        text-align: center;
        height: 30px;
    }

    .action-btn a i {}

    .action-btn a svg {
        position: relative;
        top: -1px;
    }

    .action-btn .treat-play-btn {
        background-color: #2fab66;
        color: #fff;
        box-shadow: 0 2px 3px #ccc;
        border-bottom: 0.25em solid #1b7041;
        width: 45px;
    }

    .upcomingtreatplay a {
        background-color: #2fab66;
        color: #fff;
        box-shadow: 0 2px 3px #ccc;
        border-bottom: 0.25em solid #1b7041;
        /* width: 50px; */
        width: 100%;
        display: inline-block;
        text-align: center;
        padding: 3px;
        height: 50px;
        font-size: 24px;
        padding-top: 4px;
    }

    .upcomingtreatplay {
        position: relative;
        margin: 15px auto -5px;
        display: block;
        width: 100%;
        padding: 0px 20px;
        display: none;
        text-align: center;
    }


    @media only screen and (max-width: 576px){
        .selected-user .treat-count {
            width: 100%;
            margin-top: 20px;
        }
    }


    @media(max-width: 767px) {
        .therapist-row .pl-0,.therapist-row .pr-0 {
            padding: 0px !important;
        }
        td.action-btn {
            text-align: right;
            width: 235px;
        }
        .to-su {
            position: relative;
        }

        .to-su .treat-count {
            position: absolute;
            top: 3px;
            right: -10px;
            margin: 0px !important;
            background-color: #2fab66;
            padding: 20px !important;
            max-width: 95px;
            height: 95px;
            border-radius: 50%;
        }

        .tosu-user {
            position: relative;
            width: 100%;
        }

        .to-su .treat-count h1 {
            color: #fff;
            font-size: 18px;
            margin-bottom: 4px;
        }

        .to-su .treat-count p {
            font-size: 12px;
            line-height: 15px;
            color: #fff;
        }

        .tosu-user .user-info {
            max-width: 100px;
            margin-left: -10px;
        }

        .upcomingtreatplay {
            display: block;
        }
    }

    
</style>
@endsection

@section('content')
<section class="treatment-overview-container">
    <div class="col-lg-12 card mb-3 dashboard-card p-0">
        <div class="card-body">
            <div class="row mx-0 align-items-center justify-content-between selected-user to-su">
                    <div class="p-0 row mx-0 align-items-center justify-content-start tosu-user" style="gap: 30px;">
                        <div class="profile-img">
                            @if (empty($cron->selecteduser->photo))
                                <img lazy="loading" data-name="{{$cron->selecteduser->first_name .' '. $cron->selecteduser->last_name}}" data-view="true" src="{{ ($cron->selecteduser->gender == 2)?asset('/images/female.jpg') : asset('/images/avatar.png') }}" alt="Profile Image">
                            @else
                                <img lazy="loading" data-name="{{$cron->selecteduser->first_name .' '. $cron->selecteduser->last_name}}" data-view="true" src="{{ getEmbededImage('/profile/users/'.$cron->selecteduser->photo) }}">
                            @endif

                            <ul class="p-0 m-0 mt-1 d-flex justify-content-center align-items-center" style="list-style: none; gap: 5px;">
                                <li><i class="fa fa-star text-warning"></i></li>
                                <li><i class="fa fa-star text-warning"></i></li>
                                <li><i class="fa fa-star text-warning"></i></li>
                            </ul>
                        </div>
    
                        <div class="user-info">
                            <h6 class="f-16">{{ $cron->selecteduser->first_name .' '. $cron->selecteduser->last_name }}</h6>
                            <p>{{ $cron->selecteduser->gebdatum }}</p>
                            <p>{{ $cron->selecteduser->address }}</p>
                        </div>
                    </div>
                @php
                    $open_treat_count = 0;

                    foreach ($cron->cronsetuptimes as $cronsetup_time) {
                        if ($cronsetup_time->email_open_status == 1) {
                            $open_treat_count++;
                        }
                    }
                @endphp

                <div class="p-0 text-center treat-count">
                    <h1><span>{{ $open_treat_count }}</span>/<span>{{ $cron->cronsetuptimes->count() }}</span></h1>
                    <p class="m-0">{{ trans('action.open_treatment') }}</p>
                </div>
            </div>
            
        </div>
    </div>

    <div class="col-lg-12 card mb-3 dashboard-card p-0">
        <div class="card-header">
            <h3 class="card-title">{{ trans('action.treatment_list') }}</h3>
        </div>
        <div class="upcomingtreatplay"></div>
        <div class="card-body">
            <div class="treatment-overview-list">
                <div class="table-responsive">
                    <table class="table table-borderless treatment-overview-table">
                        <thead>
                            <tr>
                                <th>{{ trans('action.sno') }}</th>
                                <th>{{ trans('action.start_date') }}</th>
                                <th>{{ trans('action.start_time_cron_view') }}</th>
                                <th>{{ trans('action.end_time_cron_view') }}</th>
                                <th>{{ trans('action.run_time_cron_view') }}</th>
                                <th>{{ trans('action.action') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($remaining_crons as $key => $cron_time)
                                <tr {{ ($cron_time->email_open_status == 1) ? 'class=opend-treat' : "" }}>
                                    <td>{{ $loop->iteration }}</td>
                                    <td>{{ date_change($cron_time->start_time) }}</td>
                                    <td>{{ date('H:i', strtotime($cron_time->start_time)) }}</td>
                                    <td>{{ date('H:i', strtotime($cron_time->end_time)) }}</td>
                                    <td>{{ Carbon\Carbon::parse($cron_time->start_time)->diff(Carbon\Carbon::parse($cron_time->end_time))->format('%h h %i m %s s') }}</td>
                                    <td class="action-btn">
                                        @php
                                            $timeDifference = Carbon\Carbon::parse($cron_time->start_time)->diff(Carbon\Carbon::parse($cron_time->end_time));
                                        @endphp
                                        @if($timeDifference->h === 0 && $timeDifference->i === 0 && $timeDifference->s === 0)
                                        <span class="badge badge-outline-danger">{{ trans('action.no_treatment_needed') }}</span>
                                        @else
                                            @if(Carbon\Carbon::parse($cron_time->start_time)->isSameDay(Carbon\Carbon::now()))
                                                <a href='{{ url('cron/open_treat/'.$cron_time->cronsetup_id.'/'.$cron_time->id.'/'.$cron->unique_id) }}' class='mr-2 treat-play-btn' target='_blank'><i class='fa fa-play-circle'></i></a>
                                            @endif
                                            @php
                                                $pdf_url = url('treatment/view_pdf/'.$cron->selecteduser->id.'/'.$cron_time->cronsetup_id.'/'.$cron_time->id.'/'.$cron->unique_id);
                                            @endphp
                                            <a href="{{ $pdf_url }}" target="_blank" class="hover-primary mr-2 view-pdf-btn"><i class="far fa-file-pdf"></i></a>
                                        @endif

                                         
                                        <a href="https://api.whatsapp.com/send?text={{ url('cron/open_treat/'.$cron_time->cronsetup_id.'/'.$cron_time->id.'/'.$cron->unique_id) }}" target="_blank" class="what-link"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></a>
                                        <a href="https://t.me/share/url?url={{ url('cron/open_treat/'.$cron_time->cronsetup_id.'/'.$cron_time->id.'/'.$cron->unique_id) }}" target="_blank" class="tel-link"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 496 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M248,8C111.033,8,0,119.033,0,256S111.033,504,248,504,496,392.967,496,256,384.967,8,248,8ZM362.952,176.66c-3.732,39.215-19.881,134.378-28.1,178.3-3.476,18.584-10.322,24.816-16.948,25.425-14.4,1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25,5.342-39.5,3.652-3.793,67.107-61.51,68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608,69.142-14.845,10.194-26.894,9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7,18.45-13.7,108.446-47.248,144.628-62.3c68.872-28.647,83.183-33.623,92.511-33.789,2.052-.034,6.639.474,9.61,2.885a10.452,10.452,0,0,1,3.53,6.716A43.765,43.765,0,0,1,362.952,176.66Z"/></svg></a>
                                        <a href="#" class="copy-link" data-url="{{ url('cron/open_treat/'.$cron_time->cronsetup_id.'/'.$cron_time->id.'/'.$cron->unique_id) }}"><i class="fas fa-copy"></i></a> 
                                        
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center">{{ trans('action.no_data_found') }}</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row mx-0 therapist-row">
        <div class="col-lg-4 mb-3 pl-0">
            <div class="card dashboard-card">
                <div class="card-header">
                    <h3 class="card-title">{{ trans('action.therapist_info') }}</h3>
                </div>

                <div class="card-body">
                    <div class="therapist-info p-0 row mx-0 align-items-center justify-content-start" style="gap: 30px;">
                        <div class="profile-img">
                            {{-- <img data-profileimage="true" lazy="loading" data-name="{{$cron->get_therapist->first_name .' '. $cron->get_therapist->last_name}}" data-email="{{$cron->get_therapist->email}}" data-view="true" src="{{ ($cron->get_therapist->gender == 2)?asset('/images/female.jpg') : asset('/images/avatar.png') }}" alt="Profile Image"> --}}
                            <img lazy="loading"
                                data-name="{{$cron->get_therapist->first_name .' '. $cron->get_therapist->last_name}}"
                                data-email="{{$cron->get_therapist->email}}" data-view="true"
                                src="{{ getProfileImage($cron->get_therapist)}}"
                                alt="Profile Image">
                        </div>

                        <div class="user-info">
                            <h6 class="f-16">{{ $cron->get_therapist->first_name .' '. $cron->get_therapist->last_name }}</h6>
                            <p>{{ $cron->get_therapist->email }}</p>
                            <p>{{ $cron->get_therapist->address }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- @if(!empty($cron->client_note)) --}}
            <div class="col-lg-8 mb-3 pr-0">
                <div class="card dashboard-card">
                    <div class="card-header">
                        <h3 class="card-title">{{ trans('action.cron_note_header') }}</h3>
                    </div>

                    <div class="card-body">
                        <div class="col-md-6 note-content">
                            {!! $cron->client_note !!}
                        </div>
                    </div>
                </div>
            </div>
        {{-- @endif --}}
    </div>
</section>
@endsection

@section('scripts')
<script> 
    $( document ).ready(function() {
        if($('td.action-btn a.treat-play-btn').length > 0){
            var upcomingtreatplay = $("td.action-btn a.treat-play-btn").clone();
            $(".upcomingtreatplay").append(upcomingtreatplay); 
        }
    });
</script>
@endsection