@extends('web.layouts.layout')
@section('css')
    <style>

        .filter {
            position: relative;
        }

        .color-select {
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            overflow: hidden;
            width: 100%;
            min-width: 180px;
            display: none;
            position: absolute;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            top: 0.5px;
        }

        .color-select .form-group {
            display: block;
            margin-top: 0;
            margin-bottom: 0;
            background-color: #fff;
            padding: 7px 10px;
            border-bottom: 1px solid #9992;
            position: relative;
        }

        .color-select .form-group.active {
            background-color: #323A86;
            color: #fff;
        }

        .color-select .form-group span {
            font-size: 12px;
        }

        .color-select .form-group input {
            padding: 0;
            height: initial;
            width: initial;
            margin-bottom: 0;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
            opacity: 0;
        }

        .color-select .form-group label {
            position: relative;
            cursor: pointer;
            -webkit-appearance: none;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
            padding: 10px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            opacity: 0.7;
            margin-bottom: 0;
            margin-right: 10px;
        }

        .color-select .form-group input:checked+label:after {
            content: '';
            display: block;
            position: absolute;
            top: 4px;
            left: 12px;
            width: 9px;
            height: 18px;
            border: solid #fff;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

        .filter-head {
            border-bottom: 1px solid #fff9;
            padding: 10px;
            margin-bottom: 0;
            cursor: pointer;
        }

        .filter-head small {
            float: right;
            transition: all 0.5s ease;
        }

        .filter-head small.rotate {
            transform: rotate(180deg);
        }
        /* ------------------ new style ------------------ */

        .filter {
            z-index: 5;
        }

        .history-list .rounded-list {
            position: relative;
            margin-bottom: 30px;
        }

        .history-list .rounded-list .edit {
            position: absolute;
            content: "";
            left: 15px;
            top: 5px;
            width: 35px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            border-radius: 30px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            background-color: transparent;
            border: 1px solid #9992;
            transition: all 0.3s ease;
            z-index: 5;
            color: #fff;
            font-size: 11px;
        }

        .history-list .rounded-list .edit:hover {
            color: #fff;
            background-color: #000;
        }

        .history-list .rounded-list .edit-box {
            position: absolute;
            bottom: calc(100% + 5px);
            z-index: 30;
            left: 0;
            transform: scale(0);
            transition: all 0.3s ease;
            flex-wrap: wrap;
            justify-content: center;
            height: 100px;
        }

        .history-list .rounded-list .edit-box.active {
            transform: scale(1);
        }

        .history-list .rounded-list .edit-box.active.tall {
            height: 340px;
        }

        .history-list .rounded-list .edit-box:after {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #f7f7f7;
            left: 25px;
            bottom: -9px;
        }

        .history-list .rounded-list .edit-box a {
            padding: 5px 15px;
            margin: 0 10px;
            max-height: 30px;
        }

        .history-list .rounded-list .edit-box .form {
            padding: 15px;
            margin-top: 30px;
            border-radius: 10px;
            border: 1px solid #9993;
            display: none;
        }

        .history-list .rounded-list .edit-box .form label {
            color: #555;
        }

        .history-list .rounded-list .edit-box .form .form-control {
            border-radius: 10px;
            margin-bottom: 15px;
        }
    </style>
@endsection()

@section('container_content')
    <!--Contents-->
    <main class="menu-main">
        <section class="history-list">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-2">
                        <button class="btn btn-danger clear_history_list"><i class="fas fa-trash"></i> {{__('merchants.clear_list')}}</button>
                    </div>
                    <div class="col-md-2">
                        <button class="btn btn-primary refresh_history_list"><i class="fas fa-spinner"></i> {{__('merchants.refresh_list')}}</button>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-md-9 col-sm-10">
                        <div class="row">
                            <div class="col-lg-8">
                                <div class="side-title">
                                    <h3>{{__('merchants.history_list')}}</h3>
                                    <p>{{__('merchants.navigate_waiting_list')}}</p>
                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="side-title mb-0">
                                    <p class="filter-head">{{__('merchants.filter')}}<small><i class="fas fa-chevron-down"></i></small></p>
                                </div>
                                <div class="filter">
                                    <form class="color-select">
                                        <div class="form-group active">
                                            <input type="checkbox" checked id="color1">
                                            <label for="color1" class="bg-success"></label>
                                            <span>{{__('merchants.done')}}</span>
                                        </div>
                                        <div class="form-group active">
                                            <input type="checkbox" checked id="color2">
                                            <label for="color2" class="bg-warning"></label>
                                            <span>{{__('merchants.waiting_time_1')}}</span>
                                        </div>
                                        <div class="form-group active">
                                            <input type="checkbox" checked id="color3">
                                            <label for="color3" class="bg-danger"></label>
                                            <span>{{__('merchants.waiting_time_finish')}}</span>
                                        </div>
                                        <div class="form-group active">
                                            <input type="checkbox" checked id="color4">
                                            <label for="color4" class="bg-info"></label>
                                            <span>{{__('merchants.waiting_queue')}}</span>
                                        </div>
                                        <div class="form-group active">
                                            <input type="checkbox" checked id="color5">
                                            <label for="color5" class="bg-secondary"></label>
                                            <span>{{__('merchants.cancelled')}}</span>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="refresh_history_list_container">
                            @if($queues->count())
                                @foreach ($queues as $queue)
                                    {{-- [bg-success, bg-warning, bg-danger, bg-info, bg-secondary] --}}
                                    @php
                                        /** @var TYPE_NAME $queue */
                                        /** @var TYPE_NAME $waitingTime */
                                        /** @var TYPE_NAME $time */
                                         $waiting_time = ($waitingTime + strtotime($queue->called_at)) - time();
                                            if ($queue->called_at && $queue->status == 'done'){
                                                $queue->color = 'bg-success';
                                            } elseif($queue->called_at && $queue->status == 'active' && $waiting_time >= 0) {
                                                $queue->color = 'bg-warning';
                                            } elseif($queue->called_at && $queue->status == 'active' && $waiting_time < 0){
                                                $queue->color = 'bg-danger';
                                                $queue->check_in_action = true;
                                            } elseif(!$queue->called_at && $queue->status == 'active') {
                                                $queue->color = 'bg-info';
                                                $queue->check_in_cancel_action = true;
                                            } elseif($queue->status == 'cancelled') {
                                                $queue->color = 'bg-secondary';
                                            }
                                    @endphp
                                    <div class="rounded-list">
                                        <span class="cir {{$queue->color}} color_{{$queue->id}}"></span>
                                        <p><i class="fas {{$queue->user_id?'fa-mobile online':'fa-laptop'}}"></i>{{$queue->customer_name}}</p>
                                        <small>{{'QN:'.$queue->serial}}</small>
                                        <small>{{$queue->person_count . ' '. __('merchants.persons')}}</small>
                                        <small>{{date('h:i', strtotime($queue->created_at))}}</small>
                                        {{-- {!! \QrCode::size(300)->phoneNumber($queue->customer_phone) !!} --}}
                                        {{--                                <img src="data:image/png;base64, {!! base64_encode(QrCode::size(300)->format('png')->phoneNumber($queue->customer_phone)) !!}">--}}
                                        <a href="{{asset($queue->user->qr_code ?? $queue->qr_code ?? 'assets/web/images/qr-code.png')}}" data-fancyBox class="qr-icon">
                                            <img src="{{asset('assets/web/images/qr-code.png')}}" alt="">
                                        </a>
                                        <a href="tel:{{$queue->customer_phone}}" class="icon">
                                            <i class="fas fa-phone"></i>
                                        </a>

                                        @if($queue->check_in_action)
                                            <div class="deleted_section">
                                                <div class="edit-box rounded-box">
                                                    <a data-color-target=".color_{{$queue->id}}" data-color="bg-success" data-waiting-time-finish="true" data-checkin="true" data-cancel="false" data-name="{{$queue->customer_name}}" data-phone="{{$queue->customer_phone}}" href="{{route('merchant.checkInOrCancelFromHistoryList', $queue->user_id)}}" class="bg-success rounded text-light checkInOrCancelFromHistoryList">{{$waiting_time < 0 ? __('merchants.check_in') : __('merchants.call')}}</a>
                                                </div>
                                                <span class="edit"><i class="far fa-edit"></i></span>
                                            </div>
                                        @endif
                                        @if($queue->check_in_cancel_action)
                                        <!-- ------------ new ------------- -->
                                            <div class="deleted_section">
                                                <div class="edit-box rounded-box">
                                                    <a href="#" class="bg-secondary rounded text-light">{{__('merchants.cancel')}}</a>
                                                    <a data-color-target=".color_{{$queue->id}}" data-color="bg-warning" data-waiting-time-finish="false" data-checkin="true" data-cancel="false" data-name="{{$queue->customer_name}}" data-phone="{{$queue->customer_phone}}" href="{{route('merchant.checkInOrCancelFromHistoryList', $queue->user_id)}}" class="bg-warning rounded text-light checkInOrCancelFromHistoryList">{{__('merchants.call')}}</a>
                                                    <div class="form w-100">
                                                        <div class="form-group">
                                                            <label>{{__('merchants.cancel_reason')}}</label>
                                                            <select name="reason_message" class="form-control message_{{$queue->id}}">
                                                                <option value="">{{__('merchants.select')}}</option>
                                                                @foreach($cancelReason as $reason)
                                                                    <option value="{{$reason->id}}">{!! $reason->message !!}</option>
                                                                @endforeach
                                                            </select>
                                                            <div class="text-center">
                                                                <a data-color-target=".color_{{$queue->id}}" data-color="bg-secondary" data-message=".message_{{$queue->id}}" data-waiting-time-finish="false" data-checkin="false" data-cancel="true" data-name="{{$queue->customer_name}}" data-phone="{{$queue->customer_phone}}" href="{{route('merchant.checkInOrCancelFromHistoryList', $queue->user_id)}}" class="butn color small checkInOrCancelFromHistoryList btn-lg"><span>{{__('merchants.send')}}</span></a>
                                                                <div class="alert alert-danger mt-3 d-none text-center ajaxError"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <span class="edit"><i class="far fa-edit"></i></span>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach

                            @else
                                <div class="rounded-list d-flex justify-content-center align-items-center text-danger">
                                    <h6>{{__('merchants.no_history_list')}}</h6>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </section>
        @include('web.layouts.side_menu')

    </main>
    <!--End-Contents-->

@endsection

@section('inner_js')
    <script>
        let refreshHistoryListRout = "{{route('merchant.historyList')}}";
        let clearHistoryListRout = "{{route('merchant.clearHistoryList')}}";
        let clearHistoryListMessage = "{{__('merchants.clear_history_message')}}"
    </script>
    <script src="{{asset('assets/web/js/history_list.js')}}"></script>
@endsection