@extends('includes.layout')
@section('content')

    @php
    $result = DB::table('comm_auto_escalation as cu')
    ->join('comm_action as gm', 'cu.action', '=', 'gm.id')
    ->select('cu.*', 'gm.*') // Change this to select the specific columns you need
    ->get();

    @endphp

    <div class="p-4" style="width:98%;">
    <nav aria-label="breadcrumb" class="w-max">
    <ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a href="/settings" class="opacity-60">
        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 text-gray-500 transition duration-75  text-white" width="20" height="20" viewBox="0 0 24 24" fill="#00000">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"></path>
                        </svg>
        </a>
        <span
            class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
            /
        </span>
        </li>
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a  class="opacity-60">
            <span>
                Auto Escalation
            </span>
        </a>
        </li>
    </ol>
    </nav>
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-medium">Auto Escalation Configuration</h1>
            <span id="hideshow" style="color:green;display:none">
              <b> Updated Successfully...</b>
            </span>
            <button
                class="align-middle select-none font-sans font-bold text-center uppercase transition-all disabled:opacity-50 disabled:shadow-none disabled:pointer-events-none text-xs py-3 px-6 rounded-lg bg-gray-900 text-white shadow-md shadow-gray-900/10 hover:shadow-lg hover:shadow-gray-900/20 focus:opacity-[0.85] focus:shadow-none active:opacity-[0.85] active:shadow-none"
                type="button" Onclick="autoescale()">Update</button>
        </div>
        <div class="relative  shadow-md sm:rounded-lg">
            <table class="w-full text-sm text-left rtl:text-right text-gray-500 darks:text-gray-400">
                <thead class="text-xs text-gray-700 uppercase bg-gray-50 darks:bg-gray-700 darks:text-gray-400">
                    <tr>
                        <th scope="col" class="px-6 py-3">
                            Action
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Elapse time(excluding weekends)
                        </th>
                        <th scope="col" class="px-6 py-3">
                            Escalation email
                        {{-- </th>
                        <th scope="col" class="px-6 py-3">
                            Level II escalation
                        </th> --}}
                    </tr>
                </thead>
                <tbody>
                @if(count($result) > 0)
                    @foreach($result as $key => $items)
                        <tr key="{{$key}}" class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                            <th scope="row" class="px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                {{$items->action_name}}
                            </th>
                            <td class="px-6 py-3 flex items-center">
                                <input type="number" id="counter{{$key}}" class="border p-1.5 rounded-lg" value="{{$items->elapetime}}">&nbsp;hrs
                            </td>
                            <td class="px-6 py-3 cursor-pointer">
                                <input id="levelone{{$key}}" class="border p-1.5 rounded-lg" value="{{$items->level_one_escalation}}">
                            </td>
                            {{-- <td class="px-6 py-3 cursor-pointer">
                                <input id="leveltwo{{$key}}" class="border p-1.5 rounded-lg" value="{{$items->level_two_escalation}}">
                            </td> --}}
                        </tr>
                    @endforeach
                    @else
                       <tr class="odd:bg-white odd:darks:bg-gray-900 even:bg-gray-50 even:darks:bg-gray-800 border-b darks:border-gray-700">
                       <th colspan="3" scope="row" class="text-center text-zinc-400 px-6 py-3 font-medium text-gray-900 whitespace-nowrap darks:text-white">
                                            No data available in table
                       </th>
                       </tr>
                    @endif
                </tbody>
            </table>
            <script>
                 function autoescale() {
                    $.ajax({
                        type: "post",
                        url: "{{ route('autonomous-level') }}",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {
                            ref: "auto_escalation",
                            Elapsetime1: $('#counter0').val(),
                            Elapsetime2: $('#counter1').val(),
                            Elapsetime3: $('#counter2').val(),
                            Elapsetime4: $('#counter3').val(),
                            Elapsetime5: $('#counter4').val(),
                            Elapsetime6: $('#counter5').val(),
                            Elapsetime7: $('#counter6').val(),
             

                            levelone1: $('#levelone0').val(),
                            levelone2: $('#levelone1').val(),
                            levelone3: $('#levelone2').val(),
                            levelone4: $('#levelone3').val(),
                            levelone5: $('#levelone4').val(),
                            levelone6: $('#levelone5').val(),
                            levelone7: $('#levelone6').val(),
                     

                         

                            // leveltwo1: $('#leveltwo0').val(),
                            // leveltwo2: $('#leveltwo1').val(),
                            // leveltwo3: $('#leveltwo2').val(),
                            // leveltwo4: $('#leveltwo3').val(),
                            // leveltwo5: $('#leveltwo4').val(),
                            // leveltwo6: $('#leveltwo5').val(),
                            // leveltwo7: $('#leveltwo6').val(),
                            // leveltwo8: $('#leveltwo7').val(),
                        },
                        success: function(response) {
                            // if (response.message) {
                            //     alert('updated successfully..!');
                            // }
                            $('#hideshow').css('display','block');
                              setTimeout(function() {
                                $('#hideshow').css('display','none');


            }, 1000);
                        },
                        error: function() {}
                    });
                }
            </script>
        </div>
    </div>
@endsection