@extends('backend.layouts.app')
@section('title', @$data['title'])
@section('content')
    <style>
        .single-checkin-bttons .form-check {
            padding: 10px 20px;
            background-color: #f5f5f5;
            display: flex;
            gap: 11px;
            align-items: center;
            border-radius: 4px;
            cursor: pointer;
        }
        .progress.break_in {
            animation: zoomInOut 1s infinite alternate;
            transform-origin: center;
            border: 5px solid #ddd;
        }
        .progress.break_out {
            background: #CD4040 !important;
            animation: zoomInOut 1s infinite alternate;
            transform-origin: center;
            border: 5px solid #DDD;
        }
        @keyframes zoomInOut {
            0% {
                transform: scale(1);
                /* Initial scale */
            }

            50% {
                transform: scale(1.1);
                /* Zoom in */
            }

            100% {
                transform: scale(1);
                /* Zoom out */
            }
        }
    </style>
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '#' => @$data['title'],
    ]) !!}
    <div class="table-content table-basic">
        <div class="row">
            <div class="col-lg-12">
                <div class="panel_s pt-16">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6 border-right project-overview-left">
                                <div class="table-content table-basic">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="table-content table-basic">
                                                        <div class="table-responsive  min-height-400">
                                                            <table class="table project-overview-table">
                                                                <tbody class="tbody">
                                                                    <tr
                                                                        class="project-overview-customer">
                                                                        <td class="fw-bold">
                                                                            {{ _trans('common.Title') }}
                                                                        </td>
                                                                        <td>
                                                                            {{ @$data['view']->title }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr class="project-overview-status">
                                                                        <td class="fw-bold">
                                                                            {{ _trans('common.Status') }}
                                                                        </td>
                                                                        <td>
                                                                            <small class="badge badge-"></small>                                                                        </td>
                                                                    </tr>
                                                                    
                                                                    <tr
                                                                        class="project-overview-start-date">
                                                                        <td class="fw-bold">
                                                                            {{ _trans('common.Date') }}
                                                                        </td>
                                                                        <td>{{ showDate($data['view']->date) }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr
                                                                        class="project-overview-deadline">
                                                                        <td class="fw-bold">
                                                                            {{ _trans('project.Start Time') }}
                                                                        </td>
                                                                        <td>{{ showTime($data['view']->start_at?? "00:00:00") }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr
                                                                        class="project-overview-deadline">
                                                                        <td class="fw-bold">
                                                                            {{ _trans('project.End Time') }}
                                                                        </td>
                                                                        <td>{{ showTime($data['view']->end_at ?? "00:00:00") }}
                                                                        </td>
                                                                    </tr>
                                                                    <tr
                                                                        class="project-overview-date-created">
                                                                        <td class="fw-bold">
                                                                            {{ _trans('common.Date Created') }}
                                                                        </td>
                                                                        <td>{{ showDate($data['view']->created_at) }}
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="clearfix"></div>
                                            <div class="row">
                                                <div class="col-md-12 project-progress-bars">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="info-box info-box-card ot-card p-4">
                                                                
                                                                <div class="info-box-content">
                                                                    <p class="mb-8">
                                                                        <i
                                                                        class="fa fa-users"
                                                                        aria-hidden="true"></i>
                                                                        <span class="info-box-text">{{ _trans('common.Participants') }}</span>
                                                                    </p>
                                                                    <p class="progress-description mt-8">
                                                                        {!!  teams($data['view']->meetingParticipants)  !!}
                                                                    </p>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12 project-progress-bars project-overview-days-left">
                                                    <div class="row">
                                                        <div class="col-md-12">
                                                            <div class="info-box info-box-card ot-card p-4">
                                                                
                                                                <div class="info-box-content">
                                                                    <div>
                                                                        <p class="mb-8"> 
                                                                            <i class="far fa-file"></i>
                                                                            <span class="info-box-text">{{ _trans('common.Attachment') }}</span>
                                                                        </p>
                                                                    
                                                                    </div>
                                                                    <p class="progress-description mt-8">
                                                                        {!!  attachment($data['view']->attachment_file_id)  !!}
                                                                    </p>
                                                                </div>

                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="tc-content project-overview-description font-size-13">
                                                <hr class="hr-panel-heading project-area-separation">
                                                <h4 class="bold font-size-16 project-info">
                                                    {{ _trans('common.Description') }}
                                                </h4>
                                                <p></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 project-overview-right">
                                <div class="card ot-card">
                                    <form action="{{ route('meeting.status.update') }}" method="POST" enctype="multipart/form-data" class="justify-content-center">
                                        @csrf
                                        <input type="hidden" name="meetings_id" value="{{ @$data['participant']->id }}">
                                        <div class="row max-w-600 white-bg p-check radious-4">
                                            <h4 class="text-center mb-3 text-uppercase mb-30">
                                                {{ _trans('common.Meeting Going Status') }}
                                            </h4>
                                            <div class="col-md-6">
                                                <div class="single-checkin-bttons mb-10">
                                                    <label class="form-check" for="going">
                                                        <input type="radio" class="form-check" name="is_going" id="going" value="1" {{ @$data['participant']->is_going ? 'checked':'' }}>
                                                         {{ _trans('common.Going') }}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="single-checkin-bttons mb-10">
                                                    <label class="form-check" for="not_going">
                                                        <input type="radio" class="form-check" name="is_going" id="not_going" value="0" {{ !@$data['participant']->is_going ? 'checked':'' }}>
                                                         {{ _trans('common.Not Going') }}
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-12 text-center">
                                                <button type="submit" class="btn btn-gradian">Submit</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="card ot-card mt-3">
                                    <div class="row justify-content-center">
                                        <div class="max-w-600 white-bg p-check radious-4">
                                            @if(!@$data['participant']->meeting_started_at)
                                            <h4 class="text-center mb-3 text-uppercase mb-30">
                                                {{ _trans('common.Start Meeting') }}
                                            </h4>
                                            @elseif(@$data['participant']->meeting_started_at && !$data['participant']->meeting_ended_at)
                                            <h4 class="text-center mb-3 text-uppercase mb-30">
                                                {{ _trans('common.Meeting Started') }}
                                            </h4>
                                            <div class="d-flex justify-content-between   align-items-center mb-20">
                                                <div class="left-div">
                                                    <h3 class="  mb-0 mt-0">STARTED</h3>
                                                    <p class="time-calculate  mb-0 mt-0">
                                                        {{ date('h:i:s A', strtotime(@$data['participant']->meeting_started_at)) }}</p>
                                                </div>
                                                <div class="right-div">
                                                    <h3 class=" text-end mb-0 mt-0">END</h3>
                                                    <p id="endTime" class="time-calculate text-end mb-0 mt-0"></p>
                                                </div>
                                            </div>

                                            <div class="form-group w-50 mx-auto mb-3">
                                                <label class="form-label float-left">{{ _trans('common.Note') }} </label>
                                                <textarea type="text" name="reason" id="reason" rows="3" class="form-control mt-0 ot-input" 
                                                    placeholder="{{ _trans('common.Note') }}"></textarea>
                                            </div>

                                            @else
                                            <h4 class="text-center mb-3 text-uppercase mb-30">
                                                {{ _trans('common.Meeting Ended') }}
                                            </h4>
                                            <div class="d-flex justify-content-between   align-items-center mb-20">
                                                <div class="left-div">
                                                    <h3 class="  mb-0 mt-0">STARTED</h3>
                                                    <p class="time-calculate  mb-0 mt-0">
                                                        {{ date('h:i:s A', strtotime(@$data['participant']->meeting_started_at)) }}
                                                    </p>
                                                </div>
                                                <div class="right-div">
                                                    <h3 class=" text-end mb-0 mt-0">END</h3>
                                                    <p class="time-calculate  mb-0 mt-0">
                                                        {{ date('h:i:s A', strtotime($data['participant']->meeting_ended_at)) }}
                                                    </p>
                                                </div>
                                            </div>
                                            @endif

                                            <div class="form-group">
                                                <div class="timer-field pt-2 pb-2">
                                                    {{-- <h4 class="text-center text-uppercase">Current Time</h4> --}}
                                                    <h1 class="text-center">
                                                        <div class="clock company_name_clock fs-16 clock" id="clock" onload="currentTime()">
                                                            {{ _trans('attendance.00:00:00') }}</div>
                                                    </h1>
                                                </div>
                                            </div>

                                            <div class="form-group button-hold-container">
                                                <button class="button-hold" id="button-hold">
                                                    <div>
                                                        <svg class="progress {{@$data['participant']->meeting_started_at ? 'break_out':'break_in'}}" viewBox="0 0 32 32">
                                                            <circle r="8" cx="16" cy="16" />
                                                        </svg>
                                                        <svg class="tick" viewBox="0 0 32 32">
                                                            <polyline points="18,7 11,16 6,12" />
                                                        </svg>
                                                    </div>
                                                </button>
                                            </div>
                                        
                                            <input type="hidden" id="form_url" value="{{ @$data['url'] }}">
                                            <input type="hidden" name="meeting_id" value="{{ @$data['meeting_id'] }}">


                                            {{-- Total Recored Time --}}
                                            @if(@$data['participant']->meeting_started_at && $data['participant']->meeting_ended_at)
                                            <div class="d-flex flex-wrap gap-2 align-items-center justify-content-center mt-40">
                                                <span class="text-primary text-capitalize m-0 text-danger">
                                                    Total meeting time 
                                                    <span class=" badge badge-danger">
                                                        {{ @$data['participant']->meeting_duration ?? '0 Min' }}
                                                    </span> 
                                                </span>
                                            </div>
                                            <div
                                                class="tc-content project-overview-description font-size-13">
                                                <hr class="hr-panel-heading project-area-separation">
                                                <h4 class="bold font-size-16 project-info">
                                                   {{ _trans('common.Note') }}: 
                                                </h4>
                                                <p>{{ @$data['participant']->reason}}</p>
                                            </div>
                                            @endif
                                            {{-- / --}}
                                        </div>
                                    </div>
                                </div>
                            

                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
    </div>
@endsection
@section('script')
    {{-- onchnage document_type select  --}}
    <script>
        // updateContent

        $(document).ready(function() {
            $('#document_type').on('change', function() {
                updateContent();
            });
        });
    </script>
    <script src = "{{ global_asset('backend/js/pages/__project.js') }}" ></script>
    <script src="{{ global_asset('frontend/assets/js/iziToast.js') }}"></script>
    <script src="{{ global_asset('backend/js/image_preview.js') }}"></script>
    <script src="{{ global_asset('ckeditor/ckeditor.js') }}"></script>
    <script src="{{ global_asset('ckeditor/config.js') }}"></script>
    <script src="{{ global_asset('ckeditor/styles.js') }}"></script>
    <script src="{{ global_asset('ckeditor/build-config.js') }}"></script>
    <script src="{{ global_asset('backend/js/global_ckeditor.js') }}"></script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            // Ensure CKEditor script is loaded
            if (typeof CKEDITOR !== 'undefined') {
                console.log("CKEditor script loaded successfully.");
                // Replace textarea with CKEditor and set the height
                CKEDITOR.replace('editor1Textarea', {
                    height: 500, // Set height to 500 pixels
                    on: {
                        instanceReady: function(evt) {
                            console.log("CKEditor instance is ready with height:", evt.editor.config
                                .height);
                        }
                    }
                });
            } else {
                console.error("CKEditor script is not loaded.");
            }
        });

        function btnHold() {
            let duration = 1600,
                success = button => {
                    $('.progress').hide();
                    button.classList.add('success');
                    breakIn($('#form_url').val());
                };
            document.querySelectorAll('.button-hold').forEach(button => {
                button.style.setProperty('--duration', duration + 'ms');
                ['mousedown', 'touchstart', 'keypress'].forEach(e => {
                    button.addEventListener(e, ev => {
                        if (e != 'keypress' || (e == 'keypress' && ev.which == 32 && !button
                                .classList.contains('process'))) {
                            button.classList.add('process');
                            button.timeout = setTimeout(success, duration, button);
                        }
                    });
                });
                ['mouseup', 'mouseout', 'touchend', 'keyup'].forEach(e => {
                    button.addEventListener(e, ev => {
                        if (e != 'keyup' || (e == 'keyup' && ev.which == 32)) {
                            button.classList.remove('process');
                            clearTimeout(button.timeout);
                        }
                    }, false);
                });
            });
        }
        btnHold();

        var breakUrl;
        var breakIn = (url) => {
            breakUrl = url;
            let meeting_id = $('input[name="meeting_id"]').val();
            let reason = $('#reason').val();

            // check meeting time (15 minutes before)
            let formattedNewStartTime = convertTimeFormat("{{$data['view']->start_at}}");
            const meetingDateTime = "{{$data['view']->date}}" + "T"+ formattedNewStartTime;
            if(checkMeetingTime(meetingDateTime)){
                return true;
            }

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    meeting_id: meeting_id,
                    reason: reason,
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);
                    if (response.status == 'success') {
                        Toast.fire({
                            icon: 'success',
                            title: response.message,
                            timer: 1500,
                        });
                        setTimeout(() => {
                            window.location.href = response.redirect;
                        }, 1000);
                    } else if (response.status == 'warning') {
                        Toast.fire({
                            icon: 'error',
                            title: response.message,
                        });
                    } else {
                        Toast.fire({
                            icon: 'error',
                            title: response?.data?.message ?? 'Something went wrong!',
                        });
                    }
                }
            });
        }


        function convertTimeFormat(time) {
            let [hours, minutes] = time.split(':');
            return `${hours}:${minutes}`;
        }

        function checkMeetingTime(meetingDateTime) {
            const currentTime = new Date();
            const meetingDate = new Date(meetingDateTime);
            const timeDifference = meetingDate - currentTime;
            const differenceInMinutes = timeDifference / (1000 * 60);
            if (differenceInMinutes > 15) {
                Toast.fire({
                    icon: 'error',
                    title: 'Be ready 15 minutes before your meeting',
                });
                return true;
            } else {
                return false;
            }
        }

        function updateTime() {
            var currentTime = new Date();
            var formattedTime = currentTime.toLocaleTimeString('en-US', {
                hour: 'numeric',
                minute: '2-digit',
                second: '2-digit'
            });
            document.getElementById('endTime').textContent = formattedTime;
        }
        updateTime();
        // Update time every second
        setInterval(updateTime, 1000);
    </script>
@endsection