@extends('backend.layouts.app')

@section('content')

<div class="main-panel">
    <div class="content-wrapper">
        <div class="row">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Sinkronisasi Data Pegawai</h4>
                        <p class="card-description">
                            Klik tombol di bawah untuk menjalankan sinkronisasi data pegawai dari SIMPEG.
                        </p>
                        <form action="{{ route('sinkron-data.store') }}" method="POST" id="syncPegawaiForm">
                            @csrf
                            <button type="submit" class="btn btn-primary mr-2" id="syncPegawaiButton">Jalankan Sinkronisasi</button>
                            <div class="spinner-border text-primary mt-2" role="status" id="loadingPegawai" style="display:none;">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </form>
                        @if (session('info_pegawai'))
                            <div class="alert alert-info mt-3">
                                {{ session('info_pegawai') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Sinkronisasi Data OPD</h4>
                        <p class="card-description">
                            Klik tombol di bawah untuk menjalankan sinkronisasi data OPD dari SIMPEG.
                        </p>
                        <form action="{{ route('sinkron-data.sync-opd') }}" method="POST" id="syncOpdForm">
                            @csrf
                            <button type="submit" class="btn btn-primary mr-2" id="syncOpdButton">Jalankan Sinkronisasi OPD</button>
                            <div class="spinner-border text-primary mt-2" role="status" id="loadingOpd" style="display:none;">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </form>
                        @if (session('info_opd'))
                            <div class="alert alert-info mt-3">
                                {{ session('info_opd') }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('js')
<script>
    document.getElementById('syncPegawaiForm').addEventListener('submit', function() {
        document.getElementById('syncPegawaiButton').setAttribute('disabled', 'disabled');
        document.getElementById('loadingPegawai').style.display = 'inline-block';
    });

    document.getElementById('syncOpdForm').addEventListener('submit', function() {
        document.getElementById('syncOpdButton').setAttribute('disabled', 'disabled');
        document.getElementById('loadingOpd').style.display = 'inline-block';
    });
</script>
@endpush