@extends('admin.layouts.container')

@section('content')
    <form>
        <div class="side-title">
            <div class="row">
                <div class="col-lg-6">
                    <h3>{{ $title }}</h3>
                </div>
                {{--        <div class="col-lg-6 valign">--}}
                {{--            <div class="edit-buttons text-right w-100">--}}
                {{--                <a href="{{ route ('activeConsultings.destroyAll') }}" data-method="delete" class="butn statusButns status_1 tableAction btn disabled bg-warning"> <span>{{ __('dashboard.sendToTrash') }}</span></a>--}}
                {{--                <a href="#" class="butn statusButns status_1 showArchive bg-primary"> <span> {{ __('dashboard.displayTrash') }} </span></a>--}}

                {{--                <a href="{{ route ('activeConsultings.destroyAll') }}" data-method="delete" class="butn statusButns status_0 tableAction btn disabled bg-danger force"> <span> {{ __('dashboard.delete') }} </span></a>--}}
                {{--                <a href="{{ route ('activeConsultings.restoreAll') }}" data-method="put" class="butn statusButns status_0 tableAction btn disabled bg-info"> <span> {{ __('dashboard.restore') }} </span></a>--}}
                {{--                <a href="#" class="butn statusButns status_0 showActive bg-primary"> <span> {{ __('dashboard.displayActive') }} </span></a>--}}
                {{--            </div>--}}
                {{--        </div>--}}
            </div>
        </div>

        <!-- ------------ data table ------------- -->
        <table class="table table-hover table-bordered">
            <thead>
            <tr>
                <th scope="col"> #
                    {{--                <div class="custom-control custom-checkbox">--}}
                    {{--                    <input type="checkbox" class="custom-control-input" id="selectall" name="example1">--}}
                    {{--                    <label class="custom-control-label" for="selectall"> </label>--}}
                    {{--                </div>--}}
                </th>
{{--                <th scope="col">{{ __('activeConsultings.type') }}</th>--}}
                <th scope="col">{{ __('activeConsultings.way') }}</th>
                <th scope="col">{{ __('activeConsultings.consulting_date') }}</th>
                <th scope="col">{{ __('activeConsultings.consulting_time') }}</th>
                <th scope="col" colspan="2">{{ __('dashboard.created_at') }}</th>
                <th scope="col">{{ __('dashboard.processes') }}</th>
            </tr>
            </thead>

            <tbody class="response">
            <tr class="search_filter_form">
                <th scope="row"></th>
{{--                <th scope="row">--}}
{{--                    <select name="type" class="form-control">--}}
{{--                        <option value="">{{ __('activeConsultings.type') }}</option>--}}
{{--                        <option value="urgent">{{__('activeConsultings.urgent')}}</option>--}}
{{--                        <option value="appointment">{{__('activeConsultings.appointment')}}</option>--}}
{{--                    </select>--}}
{{--                </th>--}}
                <th scope="row">
                    <select name="way" class="form-control">
                        <option value="">{{ __('activeConsultings.way') }}</option>
                        <option value="phone">{{__('activeConsultings.phone')}}</option>
                        <option value="zoom">{{__('activeConsultings.zoom')}}</option>
                        <option value="office">{{__('activeConsultings.office')}}</option>
                    </select>
                </th>
                <td>
                    <input type="text" placeholder="{{ __('activeConsultings.consulting_date') }}" name="consulting_date" value="{{ $request->consulting_date ?? '' }}" class="date_from form-control">
                </td>
                <td>
                    <input type="time" placeholder="{{ __('activeConsultings.consulting_time') }}" name="consulting_time" value="{{ $request->consulting_time ?? '' }}" class="form-control">
                </td>
                <td>
                    <input type="text" placeholder="{{ __('dashboard.date_from') }}" name="date_from" value="{{ $request->date_from ?? '' }}" class="date_from form-control">
                </td>
                <td>
                    <input type="text" placeholder="{{ __('dashboard.date_to') }}" name="date_to" value="{{ $request->date_to ?? '' }}" class="date_to form-control">
                </td>
                <th scope="col"><button type="button" class="butn color small search"><span><i class="fas fa-search"></i></span></button></th>
            </tr>
            </tbody>


        </table>
        <!-- ------------ sidemenu links ------------- -->
    </form>
@endsection

<div class="modal fade zoom_modal" id="modal-id">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header d-flex justify-content-between">
                <button type="button" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" style="height: 700px">
                <iframe class="zoom_iframe w-100 h-100" src="https://us04web.zoom.us/s/77801771502?zak=eyJ0eXAiOiJKV1QiLCJzdiI6IjAwMDAwMSIsInptX3NrbSI6InptX28ybSIsImFsZyI6IkhTMjU2In0.eyJhdWQiOiJjbGllbnRzbSIsInVpZCI6InFtUTlHZnFGVE1DTnM0MS1wY2k1Z2ciLCJpc3MiOiJ3ZWIiLCJzayI6Ijc4OTUzMzM2MTM5MDU0OTIwMiIsInN0eSI6MTAwLCJ3Y2QiOiJ1czA0IiwiY2x0IjowLCJtbnVtIjoiNzc4MDE3NzE1MDIiLCJleHAiOjE2NDk2ODQwNDAsImlhdCI6MTY0OTY3Njg0MCwiYWlkIjoiVUFQVTRkLVJTeHlfYW5udEc1OGRHQSIsImNpZCI6IiJ9.WQNlxa1ilGICiFDVqIxw-RttgjI-ug-dEqIEAQDZVZE" frameborder="0"></iframe>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                {{--                <button type="button" class="btn btn-primary">Save changes</button>--}}
            </div>
        </div>
    </div>
</div>

<script>
    /**
     * Importat to handle ajax requests for filters, deletes, trash and any proccess done on the table's data
     */
    var dataTable={
        route: '{{ route("activeConsultings.grid") }}'
    }
</script>
@section('inner_js')
    <script>

        let confirmationMessage = "{{__('activeConsultings.confirmation_message')}}";
        $(document).ready(function () {
            $(document).on('click', '.consultation_status' , async function (e) {
                e.preventDefault();
                let url = $(this).data('href'),
                    method = 'get';

                if($(this).hasClass('end_office_phone') || $(this).hasClass('end_zoom')){
                    if(!confirm(confirmationMessage)){
                        return false;
                    }
                }

                const response=await ajax({
                    url,
                    dataType: 'json',
                    method,
                });

                if(response.errors){
                    toasterSuccess(response.errors);
                }
                if (response.status === 'finished') {
                    $(this).parents('td').parents('tr').remove();
                    toasterSuccess(response.message);
                    // $(this).children('i').toggleClass('fa-check text-success fa-times text-danger')
                }

                if (response.status === 'active') {
                    toasterSuccess(response.message);
                    $(this).children('i').toggleClass('fa-stop text-danger fa-play text-success');
                    $(this).toggleClass('end_zoom start_zoom');
                    window.open(response.zoom_link);
                    // $('.modal-body').html(`<iframe class="zoom_iframe w-100 h-100" src="${response.zoom_link}" frameborder="0"></iframe>`);
                    // $('.zoom_modal').modal();

                    let consultingCount = $('.consulting_count'),
                        counter = parseInt(consultingCount.html());
                    consultingCount.html(counter+1);
                }
            });
        });

        // $('.zoom_modal').on('hide.bs.modal', function () {
        //     $('.modal-body').html('')
        // })


    </script>
@endsection