@extends('layouts.base')

@section('css')
    <link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/responsive.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/vendor/vendor.min.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/plugins/plugins.min.css') }}">

    <style>
        .svg-success {
            display: inline-block;
            vertical-align: top;
            height: 50px;
            width: 30px;
            opacity: 1;
            overflow: visible;
        }
        @-webkit-keyframes success-tick {
            0% {
                stroke-dashoffset: 16px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 31px;
                opacity: 1;
            }
        }
        @keyframes success-tick {
            0% {
                stroke-dashoffset: 16px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 31px;
                opacity: 1;
            }
        }
        @-webkit-keyframes success-circle-outline {
            0% {
                stroke-dashoffset: 72px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 0px;
                opacity: 1;
            }
        }
        @keyframes success-circle-outline {
            0% {
                stroke-dashoffset: 72px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 0px;
                opacity: 1;
            }
        }
        @-webkit-keyframes success-circle-fill {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes success-circle-fill {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        .svg-success .success-tick {
            fill: none;
            stroke-width: 1px;
            stroke: #ffffff;
            stroke-dasharray: 15px, 15px;
            stroke-dashoffset: -14px;
            -webkit-animation: success-tick 450ms ease 1400ms forwards;
            animation: success-tick 450ms ease 1400ms forwards;
            opacity: 0;
        }
        .svg-success .success-circle-outline {
            fill: none;
            stroke-width: 1px;
            stroke: #81c038;
            stroke-dasharray: 72px, 72px;
            stroke-dashoffset: 72px;
            -webkit-animation: success-circle-outline 300ms ease-in-out 800ms forwards;
            animation: success-circle-outline 300ms ease-in-out 800ms forwards;
            opacity: 0;
        }
        .svg-success .success-circle-fill {
            fill: #81c038;
            stroke: none;
            opacity: 0;
            -webkit-animation: success-circle-fill 300ms ease-out 1100ms forwards;
            animation: success-circle-fill 300ms ease-out 1100ms forwards;
        }

        .svg-error {
            display: inline-block;
            vertical-align: top;
            height: 50px;
            width: 30px;
            opacity: 1;
            overflow: visible;
        }

        @-webkit-keyframes error-cross {
            0% {
                stroke-dashoffset: 16px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 31px;
                opacity: 1;
            }
        }

        @keyframes error-cross {
            0% {
                stroke-dashoffset: 16px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 31px;
                opacity: 1;
            }
        }

        @-webkit-keyframes error-circle-outline {
            0% {
                stroke-dashoffset: 72px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 0px;
                opacity: 1;
            }
        }

        @keyframes error-circle-outline {
            0% {
                stroke-dashoffset: 72px;
                opacity: 1;
            }
            100% {
                stroke-dashoffset: 0px;
                opacity: 1;
            }
        }

        @-webkit-keyframes error-circle-fill {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes error-circle-fill {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .svg-error .error-cross {
            fill: none;
            stroke-width: 1px;
            stroke: #ffffff;
            stroke-dasharray: 15px, 15px;
            stroke-dashoffset: -14px;
            -webkit-animation: error-cross 450ms ease 1400ms forwards;
            animation: error-cross 450ms ease 1400ms forwards;
            opacity: 0;
        }

        .svg-error .error-circle-outline {
            fill: none;
            stroke-width: 1px;
            stroke: #d9534f;
            stroke-dasharray: 72px, 72px;
            stroke-dashoffset: 72px;
            -webkit-animation: error-circle-outline 300ms ease-in-out 800ms forwards;
            animation: error-circle-outline 300ms ease-in-out 800ms forwards;
            opacity: 0;
        }

        .svg-error .error-circle-fill {
            fill: #d9534f;
            stroke: none;
            opacity: 0;
            -webkit-animation: error-circle-fill 300ms ease-out 1100ms forwards;
            animation: error-circle-fill 300ms ease-out 1100ms forwards;
        }


        .toggle {
            position: relative;
            display: flex;
            justify-content: center;
        }

        .toggle:before {
            content: "Pasif";
            position: absolute;
            left: 32px;
            top: 3px;
            font-size: 18px;
            color: #388f49;
            font-weight: 900;
        }

        .toggle:after {
            content: "Aktif";
            position: absolute;
            right: 32px;
            top: 3px;
            font-size: 18px;
            color: white;
            font-weight: 900;
        }

        .toggle label {
            position: relative;
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #FD1015;
            border-radius: 50px;
            cursor: pointer;
            box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px #ef4247;
            -webkit-tap-highlight-color: transparent;
        }

        .toggle label:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.2s cubic-bezier(0, -1.85, 0.27, 1.75);
            height: 22px;
            width: 22px;
            background-color: #fd0f14;
            border-radius: 46px;
            box-shadow: inset 0px 0px 0px 4px #fff;
        }

        .toggle input {
            display: none;
        }

        .toggle input:checked+label {
            background-color: #57de72;
            box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.1), 0px 9px 15px 0px rgba(3, 132, 28, 0.5411764706);
        }

        .toggle input:checked+label:before {
            width: 5px;
            background-color: #fff;
        }

        .on {
            background-color: #6fc57c;
        }

        .on .toggle:before {
            color: white;
        }

        .on .toggle:after {
            color: red;
        }

        #onOffScreen {
            background-color: rgba(62, 160, 81, 0.89);
        }

        #onOffScreen.on {
            background-color: red;
        }

        /* Dürt */
        #poke {
            background-color: transparent;
        }

        #poke:hover {
            background-color: #2bd768;
        }

        #poke[disabled] {
            background-color: red;
            border-color: red;
        }
    </style>
@endsection

@section('content')
    <div class="clearfix pt-30 pt-sm-40 pb-10 pb-sm-30">
        <div class="container">
            <div class="section-title text-center mb-12 aos-init aos-animate" data-aos="fade-up">
                <h2 class="title">Canlı Destek</h2>
                <hr>
            </div>
            <div class="row mb-10">
                <div class="menu-column-area">
                    @include('widgets.profile.navigation')
                </div>
            </div>
        </div>
        <div class="container customer-messages">
            <div class="tile tile-alt" id="messages-main">
                <div class="ms-menu">
                    <!-- Aktif Siparişler -->
                    <div class="ms-user clearfix d-flex justify-content-between">
                        <div>Kişiler</div>
                        <div class="d-block d-sm-none position-relative" id="ms-menu-trigger">
                            <i class="fa fa-bars"></i>
                        </div>
                    </div>

                    <div class="list-group lg-alt">
                        {{--<a class="list-group-item media" href="">
                            <div class="pull-left me-2">
                                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-avatar">
                            </div>
                            <div class="media-body">
                                <p class="list-group-item-heading">O***** K*****</p>
                                <small class="list-group-item-text c-gray">Sp No: 5487522</small>
                            </div>
                        </a>--}}
                    </div>
                </div>

                <div style="padding-right: 240px" class="ms-body">
                    <div class="action-header justify-content-between flex-wrap">
                        <div class="d-block d-md-none" id="ms-menu-trigger">
                            <i class="fa fa-bars"></i>
                        </div>
                        <div class="d-flex flex-column">
                            <div class="pull-left hidden-xs d-flex mb-5 mb-xxl-0 pl-5 pl-sm-0">
                                <a class="status d-none d-sm-block" href="#!">
                                    <img src="https://bootdey.com/img/Content/avatar/avatar2.png" alt="" class="img-avatar">
                                </a>
                                <div class="d-flex flex-column mx-2">
                                    <span>{{ $order->customerDetail->username }}</span>
                                    <span class="m-plaform">Sipariş No: {{ $order->order_code }}</span>
                                    <span class="m-plaform">Platform :
                        <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg41117" viewBox="0 0 200 154.81912" height="20" width="20" preserveAspectRatio="xMidYMid">
                          <path style="
                              fill: #fff;
                              fill-opacity: 1;
                              fill-rule: evenodd;
                            " class="cls-2" id="path-1" d="m 197.23914,117.96194 c -3.8677,4.8796 -13.34356,8.36053 -13.34356,8.36053 0,0 -70.49109,25.31994 -70.49109,25.31994 0,0 0,-18.67289 0,-18.67289 0,0 51.87665,-18.48401 51.87665,-18.48401 5.887,-2.10924 6.79096,-5.09097 2.00581,-6.65604 -4.77616,-1.56957 -13.42451,-1.11983 -19.31601,0.99841 0,0 -34.56645,12.17426 -34.56645,12.17426 0,0 0,-19.37898 0,-19.37898 0,0 1.99232,-0.6746 1.99232,-0.6746 0,0 9.98856,-3.534896 24.03371,-5.09097 14.04515,-1.547081 31.24291,0.211374 44.74389,5.32933 15.21445,4.80764 16.92793,11.89543 13.06473,16.77502 z M 120.11451,86.165853 c 0,0 0,-47.752601 0,-47.752601 0,-5.608163 -1.03439,-10.771093 -6.29626,-12.232725 -4.0296,-1.290734 -6.53012,2.45104 -6.53012,8.054706 0,0 0,119.583887 0,119.583887 0,0 -32.250314,-10.23591 -32.250314,-10.23591 0,0 0,-142.58321 0,-142.58321 13.712343,2.54549 33.689454,8.56291 44.429074,12.18326 27.31226,9.376917 36.57225,21.047482 36.57225,47.343343 0,25.630256 -15.82159,35.344478 -35.92463,25.63925 z M 15.862004,131.01768 C 0.24279269,126.6193 -2.3566614,117.45375 4.7626047,112.17389 c 6.5795883,-4.8751 17.7689333,-8.54492 17.7689333,-8.54492 0,0 46.241498,-16.442224 46.241498,-16.442224 0,0 0,18.744854 0,18.744854 0,0 -33.275709,11.90892 -33.275709,11.90892 -5.878004,2.10924 -6.781967,5.09547 -2.005807,6.66054 4.780657,1.56506 13.433512,1.11983 19.320511,-0.99391 0,0 15.961005,-5.79256 15.961005,-5.79256 0,0 0,16.77053 0,16.77053 -1.011893,0.17989 -2.140724,0.35978 -3.184104,0.53518 -15.965505,2.60845 -32.969893,1.5201 -49.726928,-4.00262 z m 171.105246,7.42508 c 2.0193,0 3.91267,0.78254 5.33832,2.22618 1.42566,1.42115 2.21269,3.31903 2.21269,5.33383 0,2.02379 -0.78703,3.91267 -2.21269,5.33383 -1.42565,1.43464 -3.31902,2.21718 -5.33832,2.21718 -2.0193,0 -3.90818,-0.78254 -5.33833,-2.21718 -1.42565,-1.42116 -2.20818,-3.31004 -2.20818,-5.33383 0,-4.16453 3.38198,-7.56001 7.54651,-7.56001 z m -6.27827,7.56001 c 0,1.6775 0.65211,3.25606 1.83941,4.43436 1.18279,1.19629 2.76585,1.8439 4.43886,1.8439 3.46743,0 6.27826,-2.81532 6.27826,-6.27826 0,-1.682 -0.64761,-3.26056 -1.8394,-4.44336 -1.1828,-1.19629 -2.76586,-1.83941 -4.43886,-1.83941 -1.67301,0 -3.25607,0.64312 -4.43886,1.83941 -1.1873,1.1828 -1.83941,2.76136 -1.83941,4.44336 z m 8.55841,-4.07008 c 0.82751,0.36428 1.24576,1.06586 1.24576,2.06427 0,0.5127 -0.10794,0.94444 -0.3283,1.28174 -0.15741,0.24285 -0.38228,0.44074 -0.63413,0.61163 0.19788,0.11694 0.37328,0.25635 0.50371,0.41826 0.17988,0.23386 0.28332,0.60713 0.29682,1.11533 0,0 0.0405,1.07486 0.0405,1.07486 0.0135,0.28783 0.0315,0.5082 0.0765,0.64312 0.045,0.19788 0.13042,0.32381 0.23835,0.36429 0,0 0.11244,0.054 0.11244,0.054 0,0 0,0.12143 0,0.12143 0,0 0,0.18439 0,0.18439 0,0 0,0.18439 0,0.18439 0,0 -0.18439,0 -0.18439,0 0,0 -1.33571,0 -1.33571,0 0,0 -0.10793,0 -0.10793,0 0,0 -0.054,-0.0944 -0.054,-0.0944 -0.045,-0.0899 -0.0764,-0.19338 -0.10793,-0.3283 -0.0225,-0.12143 -0.045,-0.3328 -0.0585,-0.65661 0,0 -0.0675,-1.33571 -0.0675,-1.33571 -0.018,-0.46322 -0.1754,-0.75105 -0.47222,-0.90396 -0.18439,-0.0854 -0.49021,-0.12592 -0.90396,-0.12592 0,0 -2.28914,0 -2.28914,0 0,0 0,3.26056 0,3.26056 0,0 0,0.18439 0,0.18439 0,0 -0.18889,0 -0.18889,0 0,0 -1.08836,0 -1.08836,0 0,0 -0.18438,0 -0.18438,0 0,0 0,-0.18439 0,-0.18439 0,0 0,-8.03672 0,-8.03672 0,0 0,-0.18439 0,-0.18439 0,0 0.18438,0 0.18438,0 0,0 3.71929,0 3.71929,0 0.63863,0 1.17381,0.0944 1.58756,0.28782 z m -4.0296,3.38648 c 0,0 2.32961,0 2.32961,0 0.46772,0 0.841,-0.0855 1.10634,-0.26084 0.24286,-0.1754 0.35979,-0.49471 0.35979,-0.95793 0,-0.5037 -0.1664,-0.83201 -0.51719,-1.0074 -0.19338,-0.0944 -0.46323,-0.14841 -0.80503,-0.14841 0,0 -2.47352,0 -2.47352,0 0,0 0,2.37458 0,2.37458 z"></path>
                        </svg>
                      </span>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex flex-column w-50 w-100-web">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 100%; color: black;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
                                    Beklemede
                                </div>
                            </div>
                        </div>

                        <a href="javascript:void(0)" data-toggle="modal" data-target="#teklif_picture" class="rbbtn rbblue text-center pt-1 pb-1">Teklif Detayları</a>
                    </div>
                    <!--Tabs Start-->
                    <div class="tabs-to-dropdown mb-3">
                        <div class="nav-wrapper d-flex align-items-center justify-content-center">
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <a class="nav-link active" id="musteri-tab" data-toggle="pill" href="#musteri" role="tab" aria-controls="musteri" aria-selected="true">Sohbet</a>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content" id="pills-tabContent">
                            <div class="tab-pane fade show active" id="musteri" role="tabpanel" aria-labelledby="musteri-tab">
                                <div class="action-body">
                                    <div data-type="chatList"></div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <div class="paperclip">
                                    <a href="#!"><i class="fal fa-paperclip font-size24"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Tabs End-->

                    <div class="msb-reply">
                        <textarea placeholder="Mesajınızı Yazınız..." name="message"></textarea>
                        <button data-type="sendMessage"><i class="fad fa-paper-plane"></i></button>
                    </div>
                </div>

                <div id="ms-right-menu" class="ms-right-menu">
                    @if(\Illuminate\Support\Facades\Auth::id() != $order->customerDetail->id)
                    <div class="list-group lg-alt">
                        <div id="onOffScreen" class="list-group-item media text-white">
                            <div class="toggle">
                                <input type="checkbox" id="toggle" />
                                <label for="toggle"></label>
                            </div>
                            <div
                                style="
                      margin-top: 15px;
                      text-align: center;
                      margin-bottom: 10px;
                    "
                            >
                    <span style="font-size: 18px" class="font-weight-bold"
                    >Hesaptayım</span
                    >
                                <p class="font-italic" style="font-size: 12px; color: #fff">
                                    Müşteri, hesaba giriş yapmaması yönünde bildirim
                                    alacaktır.
                                </p>
                                <div class="d-block d-xl-none" id="ms-right-menu-trigger">
                                    <i class="fa fa-bars"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    @if($order->supplier)
                        <div class="list-group lg-alt">
                            <div class="list-group-item media text-white">
                                <div style="text-align: center">
                                    <span style="font-size: 18px" class="font-weight-bold">Dürt</span>
                                    <p class="font-italic" style="font-size: 12px; color: #fff">
                                        Kullanıcıyı mail veya bildirim aracılığı ile
                                        bilgilendirebilirsiniz.
                                    </p>
                                    <!-- <a
                                      id="poke"
                                      href="javascript:void(0)"
                                      class="rbbtn rbgreen text-center float-right w-100"
                                      >Dürt</a
                                    > -->
                                    <button
                                        id="poke"
                                        type="button"
                                        class="rbbtn rbgreen text-center float-right w-100"
                                    >
                                        Dürt
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endif

                    @foreach($featureList as $item)
                        <div class="list-group-item media text-white">
                            <div style="gap:10px" class="d-flex justify-content-between align-items-center">
                                <span style="white-space: normal;">{{ $item['title'] }}</span>
                                <div>
                                    @if($item['feature']['status'] == 'true')
                                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-success" viewBox="0 0 24 24">
                                            <g stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
                                                <circle class="success-circle-outline" cx="12" cy="12" r="11.5"/>
                                                <circle class="success-circle-fill" cx="12" cy="12" r="11.5"/>
                                                <polyline class="success-tick" points="17,8.5 9.5,15.5 7,13"/>
                                            </g>
                                        </svg>
                                    @else
                                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-error" viewBox="0 0 24 24">
                                            <g stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
                                                <circle class="error-circle-outline" cx="12" cy="12" r="11.5"/>
                                                <circle class="error-circle-fill" cx="12" cy="12" r="11.5"/>
                                                <line class="error-cross" x1="8" y1="8" x2="16" y2="16"/>
                                                <line class="error-cross" x1="16" y1="8" x2="8" y2="16"/>
                                            </g>
                                        </svg>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach


                    <div class="list-group lg-alt">
                        <div class="list-group-item media text-white">
                            <div class="position-relative" style="text-align: center">
                    <span style="font-size: 18px" class="font-weight-bold"
                    >Başarılı</span
                    >
                                <p class="font-italic" style="font-size: 12px; color: #fff">
                                    Tüm işlemleriniz tamamlandıysa işlemi tamamladım butonuna
                                    tıklayabilirsiniz.
                                </p>
                                <a
                                    id="allDoneButton"
                                    class="rbbtn rbgreen text-center float-right w-100"
                                >
                                    İşlemi Tamamladım
                                </a>

                                <!-- Confirmation Tooltip -->
                                <div
                                    id="confirmationTooltip"
                                    style="top: 135px; display: none"
                                    class="tooltip fade bs-tooltip-top show"
                                    role="tooltip"
                                >
                                    <div class="tooltip-arrow"></div>
                                    <div class="tooltip-inner">
                                        Devam istediğinize emin misiniz?
                                        <div style="gap: 15px" class="mt-2 d-flex justify-content-center">
                                            <button id="confirmYes" class="btn btn-success">
                                                Evet
                                            </button>
                                            <button id="confirmNo" class="btn btn-danger">
                                                Hayır
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <style>
                                    #confirmationTooltip.tooltip {
                                        opacity: 1;
                                    }
                                    #confirmationTooltip .tooltip-arrow {
                                        top: 0;
                                        rotate: 180deg;
                                        left: 50%;
                                        transform: translateX(50%);
                                    }
                                    #confirmationTooltip .tooltip-arrow::before {
                                        border-top-color: #0d6efd;
                                    }
                                    #confirmationTooltip .tooltip-inner {
                                        background-color: #0d6efd;
                                        border-radius: 0;
                                    }
                                    #confirmationTooltip .tooltip-inner button {
                                        font-size: 14px;
                                        width: 40px;
                                        height: 30px;
                                    }
                                </style>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('js')
    <script src="{{ asset('assets/js/vendor/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/plugins.min.js') }}"></script>

    <script src="{{ asset('assets/js/plugins/slick.js') }}"></script>

    <script src="{{ asset('assets/js/main.js') }}"></script>
    <script src="{{ asset('assets/js/chat.js') }}"></script>
@endsection

@section('script')
    <script>
        $(document).on("ready", function () {
            $(".variable").slick({
                dots: false,
                infinite: false,
                variableWidth: true,
            });
        });
    </script>

    <script>
        const toggle = document.querySelector("#toggle");

        const updateBackground = (event) => {
            document.getElementById("onOffScreen").classList.toggle("on");
        };

        toggle.addEventListener(
            "click",
            () => document.getElementById("onOffScreen").classList.toggle("on"),
            false
        );
    </script>

    <script>
        localStorage.setItem('poke',JSON.stringify({
            boost: {
                'fad1c4b3':{ time: 10},
            }
        }));

        document.addEventListener("DOMContentLoaded", function () {
            var pokeList = JSON.parse(localStorage.getItem('poke'));

            function startTimer(pokeTime) {
                var pokeButton = document.getElementById("poke");

                pokeButton.disabled = true;
                pokeButton.textContent = "00:00:00";

                var timeLeft = pokeTime;

                var timerId = setInterval(function () {
                    var hours = Math.floor(timeLeft / 3600);
                    var minutes = Math.floor((timeLeft % 3600) / 60);
                    var seconds = timeLeft % 60;

                    pokeButton.textContent = [
                        hours.toString().padStart(2, "0"),
                        minutes.toString().padStart(2, "0"),
                        seconds.toString().padStart(2, "0"),
                    ].join(":");

                    if (timeLeft <= 0) {
                        clearInterval(timerId);
                        pokeButton.disabled = false;
                        pokeButton.textContent = "Dürt";
                    }
                    timeLeft -= 1;
                    localStorage.setItem('poke',JSON.stringify({
                        boost: {
                            '{{ $order->order_code }}':{ time: timeLeft},
                        }
                    }));

                    if(timeLeft == -1)
                    {
                        //delete pokeList['boost']['{{ $order->order_code }}'];
                        delete pokeList['boost']['ASD'];
                        console.log(pokeList);
                    }
                }, 1000);
            }

            if(pokeList.boost['{{ $order->order_code }}'] != undefined)
            {
                startTimer(pokeList.boost['{{ $order->order_code }}']['time']);
            }

            document.getElementById("poke").addEventListener("click", function () {

                if(pokeList.boost['{{ $order->order_code }}'] != undefined)
                {
                    startTimer(pokeList.boost['{{ $order->order_code }}']['time']);
                }else{
                    $.ajax({
                        url: '{{ route('api.v.order.part.poke') }}',
                        headers: {
                            'x-u': {{ \Illuminate\Support\Facades\Auth::id() }},
                        },
                        data: {
                            order_id: {{ $order->id }},
                        },
                        success: function(res)
                        {

                        }
                    })
                    localStorage.setItem('poke',JSON.stringify({
                        boost: {
                            'fad1c4b3':{ time: 7200},
                        }
                    }));
                    startTimer(7200);
                }
            });
        });
    </script>

    <script>
        !(function (e) {
            e(["jquery"], function (e) {
                return (function () {
                    function t(e, t, n) {
                        return g({
                            type: O.error,
                            iconClass: m().iconClasses.error,
                            message: e,
                            optionsOverride: n,
                            title: t,
                        });
                    }
                    function n(t, n) {
                        return (
                            t || (t = m()),
                                (v = e("#" + t.containerId)),
                                v.length ? v : (n && (v = d(t)), v)
                        );
                    }
                    function o(e, t, n) {
                        return g({
                            type: O.info,
                            iconClass: m().iconClasses.info,
                            message: e,
                            optionsOverride: n,
                            title: t,
                        });
                    }
                    function s(e) {
                        C = e;
                    }
                    function i(e, t, n) {
                        return g({
                            type: O.success,
                            iconClass: m().iconClasses.success,
                            message: e,
                            optionsOverride: n,
                            title: t,
                        });
                    }
                    function a(e, t, n) {
                        return g({
                            type: O.warning,
                            iconClass: m().iconClasses.warning,
                            message: e,
                            optionsOverride: n,
                            title: t,
                        });
                    }
                    function r(e, t) {
                        var o = m();
                        v || n(o), u(e, o, t) || l(o);
                    }
                    function c(t) {
                        var o = m();
                        return (
                            v || n(o),
                                t && 0 === e(":focus", t).length
                                    ? void h(t)
                                    : void (v.children().length && v.remove())
                        );
                    }
                    function l(t) {
                        for (var n = v.children(), o = n.length - 1; o >= 0; o--)
                            u(e(n[o]), t);
                    }
                    function u(t, n, o) {
                        var s = !(!o || !o.force) && o.force;
                        return (
                            !(!t || (!s && 0 !== e(":focus", t).length)) &&
                            (t[n.hideMethod]({
                                duration: n.hideDuration,
                                easing: n.hideEasing,
                                complete: function () {
                                    h(t);
                                },
                            }),
                                !0)
                        );
                    }
                    function d(t) {
                        return (
                            (v = e("<div/>")
                                .attr("id", t.containerId)
                                .addClass(t.positionClass)),
                                v.appendTo(e(t.target)),
                                v
                        );
                    }
                    function p() {
                        return {
                            tapToDismiss: !0,
                            toastClass: "toast",
                            containerId: "toast-container",
                            debug: !1,
                            showMethod: "fadeIn",
                            showDuration: 300,
                            showEasing: "swing",
                            onShown: void 0,
                            hideMethod: "fadeOut",
                            hideDuration: 1e3,
                            hideEasing: "swing",
                            onHidden: void 0,
                            closeMethod: !1,
                            closeDuration: !1,
                            closeEasing: !1,
                            closeOnHover: !0,
                            extendedTimeOut: 1e3,
                            iconClasses: {
                                error: "toast-error",
                                info: "toast-info",
                                success: "toast-success",
                                warning: "toast-warning",
                            },
                            iconClass: "toast-info",
                            positionClass: "toast-top-right",
                            timeOut: 5e3,
                            titleClass: "toast-title",
                            messageClass: "toast-message",
                            escapeHtml: !1,
                            target: "body",
                            closeHtml: '<button type="button">&times;</button>',
                            closeClass: "toast-close-button",
                            newestOnTop: !0,
                            preventDuplicates: !1,
                            progressBar: !1,
                            progressClass: "toast-progress",
                            rtl: !1,
                        };
                    }
                    function f(e) {
                        C && C(e);
                    }
                    function g(t) {
                        function o(e) {
                            return (
                                null == e && (e = ""),
                                    e
                                        .replace(/&/g, "&amp;")
                                        .replace(/"/g, "&quot;")
                                        .replace(/'/g, "&#39;")
                                        .replace(/</g, "&lt;")
                                        .replace(/>/g, "&gt;")
                            );
                        }
                        function s() {
                            c(), u(), d(), p(), g(), C(), l(), i();
                        }
                        function i() {
                            var e = "";
                            switch (t.iconClass) {
                                case "toast-success":
                                case "toast-info":
                                    e = "polite";
                                    break;
                                default:
                                    e = "assertive";
                            }
                            I.attr("aria-live", e);
                        }
                        function a() {
                            E.closeOnHover && I.hover(H, D),
                            !E.onclick && E.tapToDismiss && I.click(b),
                            E.closeButton &&
                            j &&
                            j.click(function (e) {
                                e.stopPropagation
                                    ? e.stopPropagation()
                                    : void 0 !== e.cancelBubble &&
                                    e.cancelBubble !== !0 &&
                                    (e.cancelBubble = !0),
                                E.onCloseClick && E.onCloseClick(e),
                                    b(!0);
                            }),
                            E.onclick &&
                            I.click(function (e) {
                                E.onclick(e), b();
                            });
                        }
                        function r() {
                            I.hide(),
                                I[E.showMethod]({
                                    duration: E.showDuration,
                                    easing: E.showEasing,
                                    complete: E.onShown,
                                }),
                            E.timeOut > 0 &&
                            ((k = setTimeout(b, E.timeOut)),
                                (F.maxHideTime = parseFloat(E.timeOut)),
                                (F.hideEta = new Date().getTime() + F.maxHideTime),
                            E.progressBar && (F.intervalId = setInterval(x, 10)));
                        }
                        function c() {
                            t.iconClass && I.addClass(E.toastClass).addClass(y);
                        }
                        function l() {
                            E.newestOnTop ? v.prepend(I) : v.append(I);
                        }
                        function u() {
                            if (t.title) {
                                var e = t.title;
                                E.escapeHtml && (e = o(t.title)),
                                    M.append(e).addClass(E.titleClass),
                                    I.append(M);
                            }
                        }
                        function d() {
                            if (t.message) {
                                var e = t.message;
                                E.escapeHtml && (e = o(t.message)),
                                    B.append(e).addClass(E.messageClass),
                                    I.append(B);
                            }
                        }
                        function p() {
                            E.closeButton &&
                            (j.addClass(E.closeClass).attr("role", "button"),
                                I.prepend(j));
                        }
                        function g() {
                            E.progressBar && (q.addClass(E.progressClass), I.prepend(q));
                        }
                        function C() {
                            E.rtl && I.addClass("rtl");
                        }
                        function O(e, t) {
                            if (e.preventDuplicates) {
                                if (t.message === w) return !0;
                                w = t.message;
                            }
                            return !1;
                        }
                        function b(t) {
                            var n =
                                    t && E.closeMethod !== !1 ? E.closeMethod : E.hideMethod,
                                o =
                                    t && E.closeDuration !== !1
                                        ? E.closeDuration
                                        : E.hideDuration,
                                s = t && E.closeEasing !== !1 ? E.closeEasing : E.hideEasing;
                            if (!e(":focus", I).length || t)
                                return (
                                    clearTimeout(F.intervalId),
                                        I[n]({
                                            duration: o,
                                            easing: s,
                                            complete: function () {
                                                h(I),
                                                    clearTimeout(k),
                                                E.onHidden && "hidden" !== P.state && E.onHidden(),
                                                    (P.state = "hidden"),
                                                    (P.endTime = new Date()),
                                                    f(P);
                                            },
                                        })
                                );
                        }
                        function D() {
                            (E.timeOut > 0 || E.extendedTimeOut > 0) &&
                            ((k = setTimeout(b, E.extendedTimeOut)),
                                (F.maxHideTime = parseFloat(E.extendedTimeOut)),
                                (F.hideEta = new Date().getTime() + F.maxHideTime));
                        }
                        function H() {
                            clearTimeout(k),
                                (F.hideEta = 0),
                                I.stop(!0, !0)[E.showMethod]({
                                    duration: E.showDuration,
                                    easing: E.showEasing,
                                });
                        }
                        function x() {
                            var e =
                                ((F.hideEta - new Date().getTime()) / F.maxHideTime) * 100;
                            q.width(e + "%");
                        }
                        var E = m(),
                            y = t.iconClass || E.iconClass;
                        if (
                            ("undefined" != typeof t.optionsOverride &&
                            ((E = e.extend(E, t.optionsOverride)),
                                (y = t.optionsOverride.iconClass || y)),
                                !O(E, t))
                        ) {
                            T++, (v = n(E, !0));
                            var k = null,
                                I = e("<div/>"),
                                M = e("<div/>"),
                                B = e("<div/>"),
                                q = e("<div/>"),
                                j = e(E.closeHtml),
                                F = { intervalId: null, hideEta: null, maxHideTime: null },
                                P = {
                                    toastId: T,
                                    state: "visible",
                                    startTime: new Date(),
                                    options: E,
                                    map: t,
                                };
                            return (
                                s(), r(), a(), f(P), E.debug && console && console.log(P), I
                            );
                        }
                    }
                    function m() {
                        return e.extend({}, p(), b.options);
                    }
                    function h(e) {
                        v || (v = n()),
                        e.is(":visible") ||
                        (e.remove(),
                            (e = null),
                        0 === v.children().length && (v.remove(), (w = void 0)));
                    }
                    var v,
                        C,
                        w,
                        T = 0,
                        O = {
                            error: "error",
                            info: "info",
                            success: "success",
                            warning: "warning",
                        },
                        b = {
                            clear: r,
                            remove: c,
                            error: t,
                            getContainer: n,
                            info: o,
                            options: {},
                            subscribe: s,
                            success: i,
                            version: "2.1.3",
                            warning: a,
                        };
                    return b;
                })();
            });
        })(
            "function" == typeof define && define.amd
                ? define
                : function (e, t) {
                    "undefined" != typeof module && module.exports
                        ? (module.exports = t(require("jquery")))
                        : (window.toastr = t(window.jQuery));
                }
        );
    </script>

    <script>
        $(document).ready(function(){
            $("#allDoneButton").on("click", function (e) {
                e.preventDefault();
                var tooltip = $("#confirmationTooltip");

                if (tooltip.is(":visible")) {
                    tooltip.stop(true, true).fadeOut();
                } else {
                    var buttonPosition = $(this).offset();
                    var tooltipHeight = tooltip.outerHeight();
                    tooltip.stop(true, true).css({
                        display: "block",
                    });
                }
            });

            $("#confirmNo").on("click", function () {
                $("#confirmationTooltip").fadeOut();
            });

            $("#confirmYes").on("click", function () {
                $.ajax({
                    url: '{{ route('api.v.order.part.confirmed') }}',
                    method: "POST",
                    data: { id: 5 },
                    success: function (response) {
                        $("#confirmationTooltip").fadeOut();
                        $("#successModal").modal("show");
                    },
                    error: function (xhr) {
                        $("#confirmationTooltip").fadeOut();
                        toastr["error"]("Başarısız: " + xhr.responseText);
                        toastr.options = {
                            closeButton: false,
                            debug: false,
                            newestOnTop: false,
                            progressBar: false,
                            positionClass: "toast-top-right",
                            preventDuplicates: false,
                            onclick: null,
                            showDuration: "300",
                            hideDuration: "1000",
                            timeOut: "5000",
                            extendedTimeOut: "1000",
                            showEasing: "swing",
                            hideEasing: "linear",
                            showMethod: "fadeIn",
                            hideMethod: "fadeOut",
                        };
                    },
                });
            });

            $("#modalCloseButton").on("click", function () {
                window.location.href = "profil.html";
            });


































            var pChannel = pusherBase.subscribe('face2face');
            pChannel.bind('deneme', function(data) {
                console.log(data);
                if(data.user != {{ \Illuminate\Support\Facades\Auth::id() }})
                {
                    incoming({
                        message: data.message
                    })
                }
            });

            $('[data-type="sendMessage"]').on('click', function(){
                var message = $('[name="message"]').val();
                sender({
                    message: message,
                });
                $('[name="message"]').val('');

                $.ajax({
                    url: '{{ route('site.account.chat.boostSend') }}',
                    type: 'POST',
                    data: {
                        message: message,
                        chat_id: {{ $orderMessage->chat }},
                        user: {{ \Illuminate\Support\Facades\Auth::id() }},
                    },
                });
            });

            $.each({!! json_encode($chatMessages) !!}, function(index, item){
                if(item.sender == 'me')
                {
                    sender({
                        message: item.message.message
                    })
                }else{
                    incoming({
                        message: item.message.message
                    })
                }
            });

            function incoming(data)
            {
                var item = $('<div>').attr({
                    class: 'message-feed media'
                });
                var avatarDiv = $('<div>').attr({
                    class: 'pull-left'
                });
                var avatar = $('<img>').attr({
                    class: 'img-avatar',
                    src: '{{ asset('assets/images/avatar/') }}'
                });
                var bodyMessage = $('<div>').attr({
                    class: 'media-body',
                });
                var content = $('<div>').attr({
                    class: 'mf-content'
                }).html(data.message);
                var date = $('<small>').attr({
                    class: 'mf-date'
                }).html('<i class="fa fa-clock-o"></i> Bugün - 10:10');

                $(bodyMessage).append($(content)).append($(date));
                $(avatarDiv).append($(avatar));
                $(item).append($(avatarDiv)).append($(bodyMessage));

                $('[data-type="chatList"]').append($(item));
            }

            function sender(data)
            {
                var item = $('<div>').attr({
                    class: 'message-feed right'
                });
                var avatarDiv = $('<div>').attr({
                    class: 'pull-right'
                });
                var avatar = $('<img>').attr({
                    class: 'img-avatar',
                    src: 'https://bootdey.com/img/Content/avatar/avatar1.png'
                });
                var bodyMessage = $('<div>').attr({
                    class: 'media-body',
                });
                var content = $('<div>').attr({
                    class: 'mf-content'
                }).html(data.message);
                var date = $('<small>').attr({
                    class: 'mf-date'
                }).html('<i class="fa fa-clock-o"></i> Bugün - 10:10');

                $(bodyMessage).append($(content)).append($(date));
                $(avatarDiv).append($(avatar));
                $(item).append($(avatarDiv)).append($(bodyMessage));

                $('[data-type="chatList"]').append($(item));
            }
        });
    </script>
@endsection