@extends('layouts.content')

@section('body_content')
    @push('custom-css')
        <link href="{{ assetTemp('/css/custom_pdf.css') }}" rel="stylesheet" />
    @endpush

    <main>
        <header class="page-header page-header-dark bg-gradient-primary-to-secondary pb-10">
            <div class="container-fluid px-4">
                <div class="page-header-content pt-4">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-auto mt-4">
                            <h1 class="page-header-title">
                                <div class="page-header-icon"><i data-feather="activity"></i></div>
                                Organizational Structure
                            </h1>

                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-fluid mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-header py-2">
                    <div class="row">
                        <div class="me-auto col-auto my-auto">
                            Organization Structure
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="container-fluid">

                        <!-- Alert Section -->
                        @include('partials.alert')

                        <!-- Loading Message -->
                        <div id="loading-message" style="display: none; text-align: center;">
                            <p>Loading... Mohon tunggu sebentar.</p>
                        </div>

                        <!-- Error Message -->
                        <div id="error-message" style="display: none; text-align: center; color: red;">
                            <p>Terjadi kesalahan atau struktur organisasi tidak ditemukan.</p>
                        </div>

                        <!-- Display PDF using iframe -->
                        <div id="pdf-container"
                            style="border: 1px solid black; border-radius: 5px; text-align: center; width: 100%; height: 500px; overflow: auto;">
                            <canvas id="pdf-canvas" style="width: 100%; height: auto;"></canvas>
                        </div>


                        <!-- Form for HR-Manager and People Development roles -->
                        @if (in_array(auth()->user()->roles->name, ['HR-Manager', 'People Development']))
                            <div class="mt-4">
                                <form action="/organization-structures" method="post" id="organization_structure_form"
                                    enctype="multipart/form-data">
                                    @csrf

                                    <!-- File Input -->
                                    <div class="mb-3">
                                        <label for="upload" class="form-label">Tambah Struktur Organisasi</label>
                                        <input class="form-control required" type="file" name="upload" id="upload"
                                            accept=".pdf">
                                        <div class="invalid-feedback">
                                            Struktur Organisasi belum dipilih! Silakan pilih file terlebih dahulu.
                                        </div>
                                    </div>

                                    <!-- Submit Button -->
                                    <div>
                                        <button type="submit" class="btn btn-primary">Simpan</button>
                                    </div>

                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>


        {{-- <div class="container-fluid mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-header py-2">
                    <div class="row">
                        <div class="me-auto col-auto my-auto">
                            Structure
                        </div>
                    </div>
                </div>
                <div class="card-body" style="display: flex;">
                    <div class="container" style="contain: inherit;text-align: center">
                        @include('partials.alert')
                        <div class="organization-structure">
                            <div class="overflow-auto" id="chart-container"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div> --}}
    </main>

    @push('scripts')
        {{-- <script src="{{ assetTemp('/js/employees/user/structure.js') }}"></script> --}}
        <script src="{{ assetTemp('/js/functions/fetchData.js') }}"></script>
        <script src="{{ assetTemp('/js/functions/spinner.js') }}"></script>
        <script src="{{ assetTemp('/js/organization_structures/_init.js') }}"></script>
        <script src="{{ assetTemp('/js/organization_structures/index.js') }}"></script>
    @endpush
@endsection