@extends('layouts.content')
@section('body_content')
    <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">
                                Create Survey
                            </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">
                                <i class="me-1" data-feather="arrow-left"></i>
                                Back Survey Management
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-fluid px-4 mt-4">
            <form action="" method="post" id="create_survey_management_form">
                @csrf

                {{-- FLOATING SAVE BUTTON --}}
                <div class="position-fixed bottom-0 end-0 p-4" style="z-index: 1050;">
                    <button type="button" class="btn btn-primary btn-lg shadow d-flex align-items-center gap-2"
                        id="btn-save-survey" onclick="createSurvey()">
                        <i class="fas fa-save"></i>
                        Create Survey
                    </button>
                </div>

                <div class="row">
                    {{-- LEFT CONFIG --}}
                    <div class="col-md-3">

                        {{-- SURVEY CONFIG --}}
                        <div class="card mb-3">
                            <div class="card-body">
                                <h6 class="fw-bolder text-primary mb-3">
                                    <i class="fas fa-sliders-h me-2"></i> Survey Config
                                </h6>

                                {{-- TITLE --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">
                                        Survey Title <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" name="survey_title" class="form-control required"
                                        placeholder="Employee Engagement Q3">
                                    <div class="invalid-feedback">
                                        Survey title is required.
                                    </div>
                                </div>

                                {{-- DESCRIPTION (OPTIONAL) --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">
                                        Description
                                        <span class="text-muted fw-normal">(Optional)</span>
                                    </label>
                                    <textarea name="survey_description" class="form-control" rows="3"
                                        placeholder="Short explanation about this survey..." style="min-height: 100px; overflow: hidden; resize: none;"
                                        oninput="autoResize(this)"></textarea>
                                </div>

                                {{-- DATE RANGE --}}
                                <div class="row g-2 mb-3">
                                    <div class="col">
                                        <label class="form-label small fw-semibold">
                                            Start Date <span class="text-danger">*</span>
                                        </label>
                                        <input type="date" name="start_date" class="form-control required">
                                        <div class="invalid-feedback">
                                            Start date is required.
                                        </div>
                                    </div>
                                    <div class="col">
                                        <label class="form-label small fw-semibold">
                                            End Date <span class="text-danger">*</span>
                                        </label>
                                        <input type="date" name="end_date" class="form-control required">
                                        <div class="invalid-feedback">
                                            End date is required.
                                        </div>
                                    </div>
                                </div>

                                <hr class="my-3">

                                {{-- IS MANDATORY --}}
                                <div>
                                    <label class="form-label small fw-semibold mb-2">
                                        Is this survey mandatory?
                                    </label>

                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="is_mandatory_survey"
                                                id="surveyMandatoryYes" value="1">
                                            <label class="form-check-label small" for="surveyMandatoryYes">
                                                Yes, mandatory
                                            </label>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="is_mandatory_survey"
                                                id="surveyMandatoryNo" value="0" checked>
                                            <label class="form-check-label small" for="surveyMandatoryNo">
                                                No, optional
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-text mt-1">
                                        If mandatory, employees must complete this survey before proceeding.
                                    </div>
                                </div>

                                <hr class="my-3">

                                {{-- PUBLISH SURVEY --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold mb-2">
                                        Publish this survey? <span class="text-danger">*</span>
                                    </label>

                                    <div class="d-flex gap-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="is_published"
                                                id="surveyPublishYes" value="1">
                                            <label class="form-check-label small" for="surveyPublishYes">
                                                Yes, publish
                                            </label>
                                        </div>

                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="is_published"
                                                id="surveyPublishNo" value="0" checked>
                                            <label class="form-check-label small" for="surveyPublishNo">
                                                No, save as draft
                                            </label>
                                        </div>
                                    </div>

                                    <div class="form-text mt-1">
                                        If not published, this survey will be saved as draft.
                                    </div>
                                </div>

                                {{-- SURVEY STATUS --}}
                                <div class="mb-3">
                                    <label class="form-label small fw-semibold">
                                        Survey Status <span class="text-danger">*</span>
                                    </label>

                                    <select name="status" class="form-select required">
                                        <option value="">-- Select Status --</option>
                                        <option value="active">Active</option>
                                        <option value="draft" selected>Draft</option>
                                        <option value="ended">Ended</option>
                                    </select>

                                    <div class="invalid-feedback">
                                        Survey status is required.
                                    </div>

                                    <div class="form-text mt-1">
                                        Draft surveys are not visible to participants.
                                    </div>
                                </div>
                            </div>
                        </div>


                        {{-- PARTICIPANT TARGET --}}
                        <div class="card mb-3">
                            <div class="card-body">
                                <h6 class="fw-bolder text-primary mb-3">
                                    <i class="fas fa-users me-2"></i> Participant Target
                                </h6>

                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="participant_target"
                                        value="all" checked>
                                    <label class="form-check-label small">All Employees</label>
                                </div>

                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="participant_target"
                                        value="department">
                                    <label class="form-check-label small">Specific Department</label>
                                </div>

                                <select class="form-control selectpicker mt-2" name="participant_department"
                                    id="create_survey_management_field_participant_department" data-live-search="true"
                                    data-placeholder="-- Select Department --" disabled></select>

                                <hr class="my-3">

                                <h6 class="fw-bolder text-primary mb-3">
                                    <i class="fas fa-user-secret me-2"></i> Response Privacy <span
                                        class="text-danger">*</span>
                                </h6>

                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="is_anonymous"
                                        id="survey_anonymous_yes" value="1" checked>
                                    <label class="form-check-label small" for="survey_anonymous_yes">
                                        Yes, record responses as anonymous
                                    </label>
                                </div>

                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="is_anonymous"
                                        id="survey_anonymous_no" value="0">
                                    <label class="form-check-label small" for="survey_anonymous_no">
                                        No, show respondent identity
                                    </label>
                                </div>

                                <small class="text-muted d-block">
                                    If enabled, respondent names will not be visible in survey results.
                                </small>
                            </div>
                        </div>

                        {{-- TRIGGER TYPE --}}
                        <div class="card mb-3">
                            <div class="card-body">
                                <h6 class="fw-bolder text-primary mb-3">
                                    <i class="fas fa-bolt me-2"></i> Trigger Type
                                </h6>

                                <div class="list-group list-group-flush small">
                                    <label class="list-group-item d-flex align-items-center gap-2">
                                        <input class="form-check-input" type="radio" name="trigger_type"
                                            value="login" checked>
                                        <i class="fas fa-sign-in-alt text-primary"></i>
                                        Login Popup
                                    </label>

                                    <label class="list-group-item d-flex align-items-center gap-2">
                                        <input class="form-check-input" type="radio" name="trigger_type"
                                            value="clockin">
                                        <i class="fas fa-clock text-success"></i>
                                        Clock-in Popup
                                    </label>

                                    <label class="list-group-item d-flex align-items-center gap-2">
                                        <input class="form-check-input" type="radio" name="trigger_type"
                                            value="clockout">
                                        <i class="fas fa-sign-out-alt text-danger"></i>
                                        Clock-out Popup
                                    </label>
                                </div>
                            </div>
                        </div>

                        {{-- RESET --}}
                        <button type="button" id="btn-reset-config" class="btn btn-sm btn-outline-danger w-100">
                            <i class="fas fa-rotate-left me-1"></i> Reset Configuration
                        </button>

                    </div>


                    <div class="col-md-9">
                        {{-- DEFAULT QUESTION 1 --}}
                        <div id="question-container">
                            <div class="card mb-4 question-block" data-question="0">
                                <div class="card-body">
                                    <div class="row mb-3">
                                        <div class="col-md-8">
                                            <label class="form-label text-muted fw-bolder" for=""
                                                style="font-size: 0.85rem">Question 1</label>
                                            <input class="form-control required" type="text"
                                                name="questions[0][title]"
                                                placeholder="e.g. How satisfied are you with your workspace?" />
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label text-muted fw-bolder" for=""
                                                style="font-size: 0.85rem">Field Type</label>
                                            <select class="form-select field-type" name="questions[0][type]"
                                                onchange="toggleOptions(this)">
                                                <option value="text">Text Input</option>
                                                <option value="radio">Multiple Choice</option>
                                            </select>
                                        </div>

                                        <div class="option-container d-none">
                                            <div class="option-list"></div>

                                            <button type="button" class="btn btn-sm btn-outline-secondary mt-2"
                                                onclick="addOption(this, 0)">
                                                <i class="fas fa-plus"></i> Add Option
                                            </button>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <hr />
                                        <div class="col-md-12">
                                            <div class="form-check form-switch">
                                                <input class="form-check-input" name="questions[0][is_mandatory]"
                                                    type="checkbox" value="1">
                                                <label class="form-check-label small">Mandatory</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ADD QUESTION --}}
                        <div class="text-center mt-3">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-add-question">
                                <i class="fas fa-plus"></i> Add New Question
                            </button>
                        </div>

                    </div>

                </div>
            </form>
        </div>
    </main>

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

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