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

    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-fluid px-4">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title fw-bolder fs-3">
                                Survey Management
                            </h1>
                            <p class="text-muted mb-0" style="font-size: 0.85rem">
                                Manage and track employee engagement surveys across the organization.
                            </p>
                        </div>
                        <div class="col-xl-auto mb-3">
                            <a class="btn btn-sm btn-light text-primary" href="/surveys/create/new">
                                <i class="me-1" data-feather="plus"></i>
                                Create Survey
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-fluid px-4 mt-4">
            {{-- Summary Cards --}}
            <div class="row g-3 mb-4">

                <!-- TOTAL -->
                <div class="col-md-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="icon-circle bg-light-primary text-primary">
                                <i class="fa-solid fa-clipboard-list"></i>
                            </div>
                            <div>
                                <small class="text-muted">Total Surveys</small>
                                <h4 class="fw-bolder mb-0" id="sum_total_survey">
                                    <div class="spinner-border spinner-border-sm text-secondary"></div>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ACTIVE -->
                <div class="col-md-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="icon-circle bg-light-warning text-warning">
                                <i class="fa-solid fa-bolt"></i>
                            </div>
                            <div>
                                <small class="text-muted">Active</small>
                                <h4 class="fw-bolder mb-0" id="sum_active_survey">
                                    <div class="spinner-border spinner-border-sm text-warning"></div>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- DRAFT -->
                <div class="col-md-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="icon-circle bg-light-dark text-dark">
                                <i class="fa-solid fa-file-lines"></i>
                            </div>
                            <div>
                                <small class="text-muted">Drafts</small>
                                <h4 class="fw-bolder mb-0" id="sum_draft_survey">
                                    <div class="spinner-border spinner-border-sm text-dark"></div>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- COMPLETED -->
                <div class="col-md-3">
                    <div class="card shadow-sm h-100">
                        <div class="card-body d-flex align-items-center gap-3">
                            <div class="icon-circle bg-light-success text-success">
                                <i class="fa-solid fa-circle-check"></i>
                            </div>
                            <div>
                                <small class="text-muted">Completed</small>
                                <h4 class="fw-bolder mb-0" id="sum_completed_survey">
                                    <div class="spinner-border spinner-border-sm text-success"></div>
                                </h4>
                            </div>
                        </div>
                    </div>
                </div>

            </div>


            {{-- Filter Bar --}}
            <div class="card shadow-sm mb-3">
                <div class="card-body">
                    <div class="d-flex align-items-center flex-nowrap gap-2">

                        {{-- LEFT : Status Tabs --}}
                        <div class="btn-group btn-group-sm" role="group">
                            <button class="btn btn-primary">All</button>
                            <button class="btn btn-outline-primary">Active</button>
                            <button class="btn btn-outline-primary">Drafts</button>
                            <button class="btn btn-outline-primary">Ended</button>
                        </div>

                        {{-- RIGHT : Filter + Sort --}}
                        <div class="d-flex align-items-center gap-2">
                            <select class="form-select form-select-sm" style="width: 180px;">
                                <option>All Departments</option>
                                <option>Engineering</option>
                                <option>HR</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>


            <div class="card shadow-sm">
                <div class="table-responsive p-4">
                    <table class="table small table-hover align-middle mb-0" id="survey_management_datatable"></table>
                </div>
            </div>
        </div>
    </main>

    @push('scripts')
        <script src="{{ assetTemp('/js/functions/fetchData.js') }}"></script>

        <script src="{{ assetTemp('/js/surveys/_init.js') }}"></script>
        <script src="{{ assetTemp('/js/surveys/summary.js') }}"></script>
        <script src="{{ assetTemp('/js/surveys/dt.js') }}"></script>
        <script src="{{ assetTemp('/js/surveys/delete.js') }}"></script>
    @endpush
@endsection