@extends('admin.layout')
@section('content')
    <style>
        body {
            font-family: Arial;
        }

        /* Style the tab */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* Style the buttons inside the tab */
        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #ddd;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #ccc;
        }

        /* Style the tab content */
        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
    </style>
    <div class="card">
        <div class="card-body">
            <div class="card-title">
                <div class="d-flex">
                    <div class="p-2"><span class="text-dark" style="font-size: 16px;">{{ $title }}</span></div>
                    <div class="ml-auto p-2">
                        @if (Auth::user()->role_id == 3 || Auth::user()->role_id == 1)
                            <a href="/data_permohonan/create" class="btn btn-primary">Tambah Data</a>
                        @endif
                    </div>
                </div>
            </div>
            <div class="tab">
                <button class="tablinks active" onclick="openCity(event, 'Menunggu_Konfirmasi')">Menunggu
                    Konfirmasi</button>
                <button class="tablinks" onclick="openCity(event, 'Diterima')">Diterima</button>
                <button class="tablinks" onclick="openCity(event, 'Ditolak')">Ditolak</button>
            </div>

            <div id="Menunggu_Konfirmasi" class="tabcontent" style="display: block;">
                @include('admin.permohonan.status.konfirmasi')
            </div>

            <div id="Diterima" class="tabcontent">
                @include('admin.permohonan.status.diterima')
            </div>

            <div id="Ditolak" class="tabcontent">
                @include('admin.permohonan.status.ditolak')
            </div>
        </div>
    </div>
    <script>
        function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
        }
    </script>
@endsection