@extends('layouts.content')

@push('custom-css')
    <link rel="stylesheet" href="/css/custom_pills.css" />
@endpush

@section('body_content')
    <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 class="fa-solid fa-gear"></i></div>
                                System Settings
                            </h1>
                            <div class="page-header-subtitle">Manage application configuration and global preferences</div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main page content-->
        <div class="container-fluid mt-n10 px-4">
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex flex-column flex-md-row align-items-start">
                        <div class="nav flex-row flex-md-column nav-pills mb-3 mb-md-0 me-md-3" id="v-pills-tab"
                            role="tablist">
                            <button class="custom-link nav-link active" id="v-pills-home-tab" data-bs-toggle="pill"
                                data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home"
                                aria-selected="true">General Setting</button>

                            <button class="custom-link nav-link" id="employee_self_service_pills_setting_tab"
                                data-bs-toggle="pill" data-bs-target="#employee_self_service_pills_setting" type="button"
                                role="tab" aria-controls="employee_self_service_pills_setting"
                                aria-selected="false">Employee Self
                                Service Setting</button>

                            <button class="custom-link nav-link" id="sop_pills_setting_tab" data-bs-toggle="pill"
                                data-bs-target="#sop_pills_setting" type="button" role="tab"
                                aria-controls="sop_pills_setting" aria-selected="false">SOP Setting</button>

                            <button class="custom-link nav-link" id="btr_pills_setting_tab" data-bs-toggle="pill"
                                data-bs-target="#btr_pills_setting" type="button" role="tab"
                                aria-controls="btr_pills_setting" aria-selected="false">BTR Setting</button>

                            <button class="custom-link nav-link" id="kpi_pills_settings_tab" data-bs-toggle="pill"
                                data-bs-target="#kpi_pills_settings" type="button" role="tab"
                                aria-controls="kpi_pills_settings" aria-selected="false">KPI Setting</button>

                            <button class="custom-link nav-link" id="ga_log_delivery_pills_setting_tab"
                                data-bs-toggle="pill" data-bs-target="#ga_log_delivery_pills_setting" type="button"
                                role="tab" aria-controls="ga_log_delivery_pills_setting" aria-selected="false">GA Log
                                Delivery Setting</button>

                            <button class="custom-link nav-link" id="ticket_pills_settings_tab" data-bs-toggle="pill"
                                data-bs-target="#ticket_pills_settings" type="button" role="tab"
                                aria-controls="ticket_pills_settings" aria-selected="false">Ticket Setting</button>
                        </div>

                        <div class="container-fluid">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
                                    aria-labelledby="v-pills-home-tab" tabindex="0">
                                    @include('settings.content.general_setting')
                                </div>

                                <div class="tab-pane fade" id="sop_pills_setting" role="tabpanel"
                                    aria-labelledby="sop_pills_setting_tab" tabindex="0">
                                    @include('settings.content.sop_setting')
                                </div>

                                <div class="tab-pane fade" id="employee_self_service_pills_setting" role="tabpanel"
                                    aria-labelledby="employee_self_service_pills_setting_tab" tabindex="0">
                                    @include('settings.content.ess_setting')
                                </div>

                                <div class="tab-pane fade" id="btr_pills_setting" role="tabpanel"
                                    aria-labelledby="btr_pills_setting_tab" tabindex="0">
                                    @include('settings.content.btr_setting')
                                </div>

                                <div class="tab-pane fade" id="kpi_pills_settings" role="tabpanel"
                                    aria-labelledby="kpi_pills_settings_tab" tabindex="0">
                                    @include('settings.content.kpi_setting')
                                </div>

                                <div class="tab-pane fade" id="ga_log_delivery_pills_setting" role="tabpanel"
                                    aria-labelledby="ga_log_delivery_pills_setting_tab" tabindex="0">
                                    @include('settings.content.ga_log_delivery_setting')
                                </div>

                                <div class="tab-pane fade" id="ticket_pills_settings" role="tabpanel"
                                    aria-labelledby="ticket_pills_settings_tab" tabindex="0">
                                    @include('settings.content.ticket_setting')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </main>

    @push('scripts')
        <script src="{{ assetTemp('/js/settings/fetch_data.js') }}"></script>
    @endpush
@endsection