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

    @php
    $result = DB::table('comm_moderation_autoescalation')
->where('type2', 'upc')
    ->get();
    $result1 = DB::table('comm_moderation_autoescalation')
->where('type2', 'user')
    ->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>
                Moderation Auto Escalation 
            </span>
           
        </a>

        </li>
    </ol>
  
    </nav>
        <div class="flex items-center justify-between">
            <h1 class="text-2xl font-medium">Moderation 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>
        <br>
        <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">
                            UPC Type
                        </th>
                      
                        <th scope="col" class="px-6 py-3" style="
    text-align: center;
">
                           Elapse time <br> Level I - Escalation (ASANA)
                        </th>
                        <th scope="col" class="px-6 py-3" style="
    text-align: center;
">
                        Elapse time <br> Level II - Escalation (SLACK)
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @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">
                           @if($items->type == 'Premium') 
                           <span style="padding: 5px 10px;letter-spacing: 2px;width: 75%;display:flex;g;gap: 4%;background: linear-gradient(344deg, #e6b94340, #ddae38);border-radius: 24px;"><span><img src="images/crown1 (1).png" alt="crown" style="object-fit: cover;height: 26px;"></span><span style="
    top: 3px;
    position: relative;    font-weight: 600;
">Premium</span></span>                           @else

<span style="padding: 5px 10px;letter-spacing: 3px;width: 75%;display:flex;g;gap: 4%;background: rgb(203, 201, 210);border-radius: 24px;"><span><img src="images/user_icon.jpg" alt="crown" style="object-fit: cover;height: 26px;width: 35px;"></span><span style="
    top: 3px;
    position: relative;    font-weight: 600;
">Free</span></span>
                           @endif
                            </th>
                         
                            <td class="px-6 py-3 cursor-pointer" style="
    text-align: center;
">
                            <input type="number" id="counter{{$key}}" class="border p-1.5 rounded-lg" data-elapsetime1="{{ $items->elapsetime1 }}">&nbsp;days
                            </td>
                            <td class="px-6 py-3 cursor-pointer" style="
    text-align: center;
">
                            <input type="number" id="counters{{$key}}" class="border p-1.5 rounded-lg" data-elapsetime2="{{ $items->elapsetime2 }}">&nbsp;days
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <script>
                window.addEventListener("DOMContentLoaded", function () {
                    // Get all elapetime inputs
                    document.querySelectorAll('input[data-elapsetime1]').forEach(input => {
                        const val = input.getAttribute('data-elapsetime1');
                        if (val) input.value = val;
                    });

                    // Get all escalation inputs
                    document.querySelectorAll('input[data-elapsetime2]').forEach(input => {
                        const val = input.getAttribute('data-elapsetime2');
                        if (val) input.value = val;
                    });
                });
            </script>
            <script>
                 function autoescale() {
                    $.ajax({
                        type: "post",
                        url: "{{ route('updatemod') }}",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: {
                           
                            Elapsetime1: $('#counter0').val(),
                            Elapsetime2: $('#counters0').val(),
                            Elapsetime3: $('#counter1').val(),
                            Elapsetime4: $('#counters1').val(), 

                            Elapsetime5: $('#counter10').val(),
                            Elapsetime6: $('#counters10').val(),
                          
                            Elapsetime7: $('#counter11').val(),
                            Elapsetime8: $('#counters11').val(),

                            Elapsetime9: $('#counter12').val(),
                            Elapsetime10: $('#counters12').val(),
                           
                        },
                        success: function(response) {
                           
                              $('#hideshow').css('display','block');
                              setTimeout(function() {
                                $('#hideshow').css('display','none');


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

<br>



        <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">
                            User Type
                        </th>
                      
                        <th scope="col" class="px-6 py-3" style="
    text-align: center;
">
                          Elapse time <br> Level I - Escalation (ASANA)
                        </th>
                        <th scope="col" class="px-6 py-3" style="
    text-align: center;
">
                        Elapse time <br>Level II - Escalation (SLACK)
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($result1 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">
                           @if($items->type == 'Enterprise') 
                           <span style="padding: 5px 10px;letter-spacing: 2px;width: 75%;display:flex;g;gap: 4%;background: linear-gradient(344deg, #e6b94340, #ddae38);border-radius: 24px;"><span><img src="images/crown1 (1).png" alt="crown" style="object-fit: cover;height: 26px;"></span><span style="
    top: 3px;
    position: relative;    font-weight: 600;
">Premium</span></span>  
@elseif($items->type == 'Priority')
<span style="padding: 5px 10px;letter-spacing: 3px;width: 75%;display:flex;g;gap: 4%;background: linear-gradient(335deg, #e6b94305, green);border-radius: 24px;"><span><img src="images/priority.png" alt="crown" style="object-fit: cover;height: 26px;width: 35px;"></span><span style="
    top: 3px;
    position: relative;    font-weight: 600;
">Priority</span></span>

@else


<span style="padding: 5px 10px;letter-spacing: 3px;width: 75%;display:flex;g;gap: 4%;background: rgb(203, 201, 210);border-radius: 24px;"><span><img src="images/user_icon.jpg" alt="crown" style="object-fit: cover;height: 26px;width: 35px;"></span><span style="
    top: 3px;
    position: relative;    font-weight: 600;
">Free</span></span>
                           @endif
                            </th>
                         
                            <td class="px-6 py-3 cursor-pointer" style="
    text-align: center;
">
                            <input type="number" id="counter1{{$key}}" class="border p-1.5 rounded-lg" data-elapsetime1="{{ $items->elapsetime1 }}">&nbsp;days
                            </td>
                            <td class="px-6 py-3 cursor-pointer" style="
    text-align: center;
">
                            <input type="number" id="counters1{{$key}}" class="border p-1.5 rounded-lg" data-elapsetime1="{{ $items->elapsetime2 }}">&nbsp;days
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
            <script>
                window.addEventListener("DOMContentLoaded", function () {
                    // Get all elapetime inputs
                    document.querySelectorAll('input[data-elapsetime1]').forEach(input => {
                        const val = input.getAttribute('data-elapsetime1');
                        if (val) input.value = val;
                    });

                    // Get all escalation inputs
                    document.querySelectorAll('input[data-elapsetime2]').forEach(input => {
                        const val = input.getAttribute('data-elapsetime2');
                        if (val) input.value = val;
                    });
                });
            </script>
        </div>
    </div>
@endsection