@forelse ($locations as $location)
    @php 
        $sql = DB::table('locations')
        ->where('parent_id', '=', $location->id)
        ->get();
        $no = 1;
    @endphp
    <tr data-id="{{ $location->id }}" class="bgLocation" id="Tab{{ $location->id }}ss">
        <td class="has-text-centered">{{ $loop->index + 1 }}</td>
        <td>{{ $location->name }}</td>
        <td>{{ $location->description ?? '-' }}</td>
        <td>
            @php
            $items = explode(',', $location->dokter_id);
            @endphp
            @if (!empty($items))
                @foreach ($items as $item) 
                    @php 
                        $item = trim($item); 
                        $sqlDokter = DB::table('users')
                        ->where('id', '=', $item)
                        ->first();
                    @endphp
                    {!! optional($sqlDokter)->name ? optional($sqlDokter)->name . '<br>' : '' !!}

                @endforeach 
             @endif
        </td>
        <td class="has-text-centered">
            <button type="button" class="button h-button tablinks" onclick="openTab(event, 'Tab{{ $location->id }}')">

                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.4425 6.2207L9 9.6557L5.5575 6.2207L4.5 7.2782L9 11.7782L13.5 7.2782L12.4425 6.2207Z" fill="#363636"/>
                </svg>

            </button>
            <button type="button" class="button h-button h-modal-trigger edit-button-location" title="Edit"
                data-id="{{ $location->id }}" data-name="{{ $location->name }}"
                data-description = "{{ $location->description }}" data-dokterid = "{{ $location->dokter_id }}" data-parentid = "{{ $location->parent_id }}">
                <span class="icon">
                    @include('components.icons.pencil-alt')
                </span>
            </button>
        </td>
    </tr>
    <tr id="Tab{{ $location->id }}" class="tabcontent" style="display: none;">
        <td colspan="5" align="center" style="background-color: #E89417; padding:2px;">
            <table width="100%" class="table">
                <tr style="background-color: #eee;">
                    <th class="has-text-centered">NO</th>
                    <th>NAME</th>
                    <th>DESCRIPTION</th>
                    <th>DOCTOR ON DUTY</th>
                    <th class="has-text-centered">ACTION</th>
                </tr>
                @foreach ($sql as $row)
                <tr>
                    <td class="has-text-centered">{{ $no }}</td>
                    <td>{{ $row->name }}</td>
                    <td>{{ $row->description }}</td>
                    <td>
                        @php
                        $items = explode(',', $row->dokter_id);
                        @endphp
                        @if (!empty($items))
                            @foreach ($items as $item) 
                                @php 
                                    $item = trim($item); 
                                    $sqlDokter = DB::table('users')
                                    ->where('id', '=', $item)
                                    ->first();
                                @endphp
                                {{$sqlDokter->name ?? '-'}}<br>
                            @endforeach 
                         @endif
                    </td>
                    <td class="has-text-centered">
                        <button type="button" class="button h-button edit-button-location" data-id="{{ $row->id }}" data-name="{{ $row->name }}" data-description = "{{ $row->description }}" data-dokterid = "{{ $row->dokter_id }}" data-parentid = "{{ $row->parent_id }}" title="Edit">
                            <span class="icon">
                                @include('components.icons.pencil-alt') 
                            </span>
                        </button>
                    </td>
                </tr>
                @php $no++; @endphp
                @endforeach
            </table>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="4" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>

    $(document).on('click', '.edit-button-location', function() {
        const id = $(this).data('id');
        const name = $(this).data('name');
        const description = $(this).data('description');
        const dokterid = $(this).data('dokterid');
        const parentid = $(this).data('parentid');

        $('#modal_edit_location').addClass('is-active')
        $('#location_id').val(id)
        $('#location_name').val(name)
        $('#location_description').val(description)
        $('#location_dokterid').val(dokterid)
        $('#location_parentid').val(parentid)

        $.ajax({
            method: 'GET',
            url: '{{ url('/location/datatable-detail') }}',
            data: { dokterid: dokterid, id: id, parentid: parentid },
            success: function(response) {
                $('#detail').html(response);
            },
            error: function(xhr) {
                console.error('Gagal memuat data detail:', xhr.responseText);
            }
        });


    });

    function openTab(evt, tabName) {
      const tabcontent = document.getElementsByClassName("tabcontent");
      const bgLocation = document.getElementsByClassName("bgLocation");
      const tablinks = document.getElementsByClassName("tablinks");

      const clickedTab = document.getElementById(tabName);
      const clickedButton = evt.currentTarget;
      const clickedBg = document.getElementById(tabName + 'ss');

      // Cek apakah tab yang diklik sedang aktif
      const isActive = clickedButton.classList.contains("active");

      // SVG panah atas dan bawah
      const arrowUp = `
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.4425 6.2207L9 9.6557L5.5575 6.2207L4.5 7.2782L9 11.7782L13.5 7.2782L12.4425 6.2207Z" fill="#363636"/>
        </svg>`;
      const arrowDown = `
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M9 6.2207L4.5 10.7207L5.5575 11.7782L9 8.3432L12.4425 11.7782L13.5 10.7207L9 6.2207Z" fill="#363636"/>
        </svg>`;

      // Reset semua tab dan background
      for (let i = 0; i < tabcontent.length; i++) tabcontent[i].style.display = "none";
      for (let i = 0; i < bgLocation.length; i++) bgLocation[i].style.backgroundColor = "#fff";
      for (let i = 0; i < tablinks.length; i++) {
        tablinks[i].classList.remove("active");
        // Kembalikan ikon semua tab ke posisi awal (panah atas)
        tablinks[i].innerHTML = arrowUp;
      }

      if (!isActive) {
        // Jika belum aktif → tampilkan tab dan ubah ikon ke bawah
        clickedTab.style.display = "table-row";
        clickedButton.classList.add("active");
        if (clickedBg) clickedBg.style.backgroundColor = "#eee";
        clickedButton.innerHTML = arrowDown;
      } else {
        // Jika sudah aktif → sembunyikan tab dan ubah ikon ke atas lagi
        clickedTab.style.display = "none";
        if (clickedBg) clickedBg.style.backgroundColor = "#fff";
        clickedButton.innerHTML = arrowUp;
      }
    }

    // Buka tab pertama saat halaman dimuat (opsional)
    document.addEventListener("DOMContentLoaded", () => {
      document.querySelector(".tab button").click();
    });


   
</script>