@extends('base')
@section('content')
    <div id="result">
        {{ $message ?? '' }}
    </div>

    <form class="my-3" method="POST" action="{{ secure_url('store-project') }}" id="newProjectForm">
        @csrf
        <div class="audience_audit_one">
            <br>
            <div class="graph-card px-4 py-3 my-3" style="max-width: 600px;">
                <h2 class="" style="color: #727E88;">Select Project Name:</h2>
                <div id="redBannerProject" style="display: none; color: red;">
                    Please enter project name or choose existing.
                </div>
                <input type="text" placeholder="Enter project name" name="project_name" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="newProjectInput">
                <select name="project_id" class="form-control px-3 py-2" id="projectInput">
                    @foreach($getProject as $getProjects)
                        <option value="" disabled selected hidden style="font-weight:300!important;">choose existing project</option>
                        <option value="{{ $getProjects->id }}">{{ $getProjects->project_name }}</option>
                    @endforeach
                </select>
                <br>
                <h2 class="" style="color: #727E88;">Audit Name:</h2>
                <div id="redBannerAudit" style="display: none; color: red;">
                    Please enter audit name or choose existing.
                </div>
                <input type="text" placeholder="Enter audit name" name="audit_name" class="d-inline-block form-control px-3 py-2 audit-name mb-3" id="newAuditInput">
                <select name="audit_id" class="form-control px-3 py-2" id="auditInput">
                </select>
                <div class="btn-text-left" style="text-align:right;">
                    <button type="button" class="btn btn-primary vl-btn-small start mt-3" >Continue</button>
                </div>
            </div>
        </div>

        <div class="audience_audit_two">
            <h1 class="mt-5">New Audit</h1>
            <div class="graph-card px-4 py-3 my-3">
                <h2 class="" style="color: #727E88;font-size: 30px!important;">What stage is your product or service at?</h2>
                <div class="row content py-3 px-0 mx-0" style="gap: 25px" >
                    <div class="col-3 image px-3 py-4">
                        <img class="mb-2" style="width: 80px;height: auto;" src="{{secure_asset('images/icon.svg')}}">
                        <p style="font-size:30px; color: #384B5C;">Audience Audit</p>
                        <p style="color: #727E88;font-size: 18px;">Discovery or pre-design</p>
                        <input type="radio" name="image" value="Audience-audit" />
                    </div>
                    <div class="col-3 image px-3 py-4">
                        <img class="mb-2" style="width: 80px;height: auto;" src="{{secure_asset('images/icon1.svg')}}">
                        <p style="font-size:30px; color: #384B5C;">Design concept & Testing audit</p>
                        <p style="color: #727E88;font-size: 18px;">Early design or design concept stage</p>
                        <input type="radio" name="image" value="Design-concept-audit" />
                    </div>
                    <div class="col-3 image px-3 py-4">
                        <img class="mb-2" style="width: 80px;height: auto;" src="{{secure_asset('images/icon2.svg')}}">
                        <p style="font-size:30px; color: #384B5C;">Test Design audit</p>
                        <p style="color: #727E88;font-size: 18px;">Use if you are testing witn users or have a complete design concept</p>
                        <input type="radio" name="image" value="Test-Design-audit" />
                    </div>
                    <div class="col-3 image px-3 py-4">
                        <img class="mb-2" style="width: 80px;height: auto;" src="{{secure_asset('images/icon2.svg')}}">
                        <p style="font-size:30px; color: #384B5C;">Complete design audit</p>
                        <p style="color: #727E88;font-size: 18px;">Product-service is in the market</p>
                        <input type="radio" name="image" value="Complete-design-audit" />
                    </div>
                </div>

                <div class="text-end">
                    <button type="button" class="btn btn-primary vl-btn-small-sec" id="AuditTypebackBtn">Back</button>
                    <a id="setParameter"><button type="submit" class="btn btn-primary vl-btn-small" id="AuditTypeNextBtn">Next</button></a>
                </div>

            </div>
        </div>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('#dropdownMenuCustom').on('click', function(){
                $('#dropdownCustom').toggle();
            })
        });
        $('.explain_btn').on('click', function() {
            $('.explain_box').show();
        })
        $('.audience_audit_two').hide();

        $('#AuditTypebackBtn').on('click', function() {
            $('.audience_audit_two').hide();
            $('.audience_audit_one').show();
        })

        $('.start').on('click', function() {
            if ($('#newProjectInput').val() === '' && $('#projectInput').val() === null  ) {
                $('#redBannerProject').show();
            }else if($('#newAuditInput').val() === '' && $('#auditInput').val() === null){
                $('#redBannerAudit').show();
                $('#redBannerProject').hide();
            }else {
                $('.audience_audit_two').show();
                $('.audience_audit_one').hide();
            }

        })

        $('#commentbtn').on('click', function() {
            var comment = $('#comment_input').val();
            $.ajax({
                url     : '/store-comments',
                method  : 'post',
                data    : {
                    "_token": "{{ csrf_token() }}",
                    comment : comment,
                },

                success : function(response){
                    $('#exampleModal').modal('hide');
                }
            });
        });

        $('#submitFollowUpbtn').on('click', function() {
            var questionId = $('#questionsDropdown').val();
            var project_id = $('#TextInput').val();
            var notes      = $('#notes_input').val();

            $.ajax({
                url     : '/store-follow-up',
                method  : 'post',
                data    : {
                    "_token": "{{ csrf_token() }}",
                    storeQuestion : questionId,
                    projectId : project_id,
                    notes : notes,
                },

                success : function(response){
                    $('#AddFollowUpModal').modal('hide');
                }
            });
        });
        $('.content .image').click(function(){
            $('.content .image').removeClass('active');
            $(this).addClass('active').find('input[type=radio]').prop('checked', true);
        });

        $('#addNewPoject').click(function(){
            $('#projectInput').hide();
            $('#addNewPoject').hide();
            $('.start').hide();
            $('#newProjectForm').show();
        });


        $("#auditInput").hide();
        $("#projectInput").change(function() {
            var selectedId = $(this).val();
            $.ajax({
                url     : '/select-project-name',
                method  : 'post',
                data    : {
                    "_token": "{{ csrf_token() }}",
                    selectedId : selectedId,
                },
                success : function(response){
                    if (response.data) {
                        $('#auditInput').empty();
                        var dropdown = $('#auditInput');

                        if(response.data.length != 0) {
                            $("#auditInput").show();
                            $.each(response.data, function (index, item) {
                                dropdown.append($('<option>', {
                                    value: item.id,
                                    text: item.audit_name
                                }));
                            });
                        }else{
                            $("#auditInput").hide();
                        }
                    }
                }
            });
        });


    </script>
@endsection