@extends('layouts.admin.base')

@section('page-title')
    Surveys
@endsection

@section('content')

<div class="row">
    <div class="modal fade" role="dialog" tabindex="-1" id="add-survey">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header border-0">
                    <h4 class="modal-title">New Survey</h4><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="addwalletform" class="w-60" action="{{ route('admin.surveys.new') }}" method="POST">{{ csrf_field() }}
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="_name">Give it a Name</label>
                                    <input required class="form-control" name="name" type="text" id="_name" placeholder="Survey Name">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="plans">Plans (Optional - for incentive surveys)</label>
                                    <select onchange="_select_payout_options(this)" id="plans" class="form-select" name="plan_id">
                                        <optgroup label="Preferred Plan">
                                            <option value="">- No Plan (Survey Only) -</option>
                                            @foreach ($plans as $plan)
                                                <option value="{{ $plan->id }}">{{ $plan->name }}
                                                    {{ formatMoney($plan->minimum_amount) }} -
                                                    {{ formatMoney($plan->maximum_amount) }} ({{ $plan->category->name }})
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-12" id="payout_options_section" style="display: none;">
                                <div class="form-group mb-3">
                                    <div class="form-group mb-3">
                                        @php
                                            $_options = [];
                                        @endphp
                                        <label class="form-label" for="plans">Payout Options</label>
                                        <select class="form-select" name="payout_option_id" id="payout_option_id">
                                            <option value="">- Select Payout Option -</option>
                                            @foreach ($plans as $plan)
                                                @foreach ($plan->payout_options as $option)
                                                    @php
                                                        $_options[$plan->id][] = $option;
                                                    @endphp
                                                @endforeach
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 mb-3 mb-xl-4 mb-lg-3 mb-md-3" id="payment_method_section" style="display: none;">
                                <div>
                                    <label class="form-label" for="cryptoSelect">Payment Method</label>
                                    <select id="cryptoSelect" name="payment_method" class="form-select" onchange="calc(this)">
                                        <optgroup label="Preffered Cryptocurrency">
                                            <option value selected>- Select -</option>
                                            <option value="{{ PAYMENT_METHOD_WALLET }}"> {{ ucfirst(PAYMENT_METHOD_WALLET) }}</option>
                                            @foreach (CRYPTOCURRENCIES as $item)
                                                <option value="{{ $item }}">{{ $item }}</option>
                                            @endforeach
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row" id="upline_credit_section" style="display: none;">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="upline-credit">Upline Credit</label>
                                    <input class="form-control" name="upline_credit" type="number" step="1" id="upline-credit" placeholder="How much does upline get?">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="start_at">Start Date</label>
                                    <input required class="form-control" name="start_at" type="date" id="start_at">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group mb-3">
                                    <label class="form-label" for="end_at">End Date</label>
                                    <input required class="form-control" name="end_at" type="date" id="end_at">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="form-group mb-3 d-flex justify-content-between">
                                    <label class="form-label" for="level1">
                                        <span style="color: rgb(33, 37, 41); background-color: rgb(255, 255, 255);">Questions</span>
                                    </label>
                                    <button type="button" class="btn btn-sm btn-secondary" onclick="add_quetion()"><i class="fa fa-plus"></i> Add Question</button>
                                </div>
                            </div>
                        </div>
                        <div class="row _questions">
                            
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group mb-3">
                                    <button class="btn btn-primary" type="submit">Create Survey</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @include('admin.settings.layouts.sidebard')

    <div class="col-md-9 mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="row">
            <div class="col-md-12">
                <div class="mb-3">
                    <a class="text-decoration-none alt-btn" href="#" data-bs-target="#add-survey" data-bs-toggle="modal">Create Survey<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1 mt-n1">
                        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path></svg>
                    </a>
                </div>
                <div class="card card-bg border-0">
                    <div class="card-body">
                        @foreach ($surveys as $survey)
                            <div class="shadow rounded p-2 mb-2">
                                <h5>{{ $survey->name }} Survey 
                                    @if($survey->plan)
                                        - ({{ $survey->plan->name }} <small>{{ $survey->plan->category->name }}</small>)
                                    @else
                                        <small class="text-muted">(Survey Only - No Incentive)</small>
                                    @endif
                                </h5>
                                @foreach ($survey->questions as $question)
                                    <div>
                                        <div class="mb-4 d-flex justify-content-start">
                                            <span>{{ $question->question }}</span>
                                            <div>
                                                <a class="text-decoration-none alt-btn" href="#" data-bs-target="#add-answer{{ $question->id }}" data-bs-toggle="modal"><i class="fa fa-add"></i> Add Answer</a>
                                            </div>
                                        </div>
                                        <ul>
                                            @foreach ($question->answers as $answer)
                                                <li>{{ $answer->answer }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <hr>

                                    <div class="modal fade" role="dialog" tabindex="-1" id="add-answer{{ $question->id }}">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header border-0">
                                                    <h4 class="modal-title">Add Answer</h4>
                                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>

                                                <form id="addwalletform" class="w-60" action="{{ route('admin.surveys.question.answer.new') }}" method="POST">{{ csrf_field() }}
                                                    <input type="hidden" name="survey_id" value="{{ $survey->id }}">
                                                    <input type="hidden" name="survey_question_id" value="{{ $question->id }}">
                                                    <div class="modal-body">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="form-group mb-3">
                                                                    <label class="form-label" for="answer">Anwer</label>
                                                                    <textarea required class="form-control" name="answer" type="text" id="answer" placeholder="An answer"></textarea>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <div class="form-group mb-3">
                                                                    <button class="btn btn-primary" type="submit">Create Answer</button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>

    var current_question_index = 1
    function add_quetion(){
        var h = '<div class="col-md-12 form-group mb-3">'
            h += '<label class="form-label" for="feature1">Question '+current_question_index+'</label>'
            h += '<span class="mx-3">';
            h += '<input name="options['+current_question_index+']" id="_option'+current_question_index+'" type="checkbox" value="1">'
            h += '  <label class="form-label" for="_option'+current_question_index+'">Its Multiple</label>'
            h += '</span>';
            h += '<textarea name="questions['+current_question_index+']" class="form-control" required></textarea>'
            h += '</div>';
        $('._questions').append(h);
        current_question_index += 1;
    }

    function init() {
        return {}
    }

    // Handle form submission to clean up options when no plan is selected
    $('#addwalletform').on('submit', function(e) {
        var planSelected = $('#plans').val();
        if (!planSelected || planSelected === '') {
            // Remove all options checkboxes when no plan is selected
            $('input[name^="options"]').remove();
        }
    });


    function _select_payout_options(el) {
        var selected = $(el).val()
        var options = {!! json_encode($_options) !!}
        
        if (selected && selected !== '') {
            // Show incentive-related fields
            $('#payout_options_section').show()
            $('#payment_method_section').show()
            $('#upline_credit_section').show()
            
            // Make required fields required
            $('#payout_option_id').prop('required', true)
            $('#cryptoSelect').prop('required', true)
            $('#upline-credit').prop('required', true)
            
            var ops = options[selected]
            var html_options = ''
            if (ops) {
                ops.forEach(element => {
                    html_options += '<option value="' + element.id + '">' + element.name + '</option>'
                });
            }
            $('#payout_option_id').html(html_options)
        } else {
            // Hide incentive-related fields
            $('#payout_options_section').hide()
            $('#payment_method_section').hide()
            $('#upline_credit_section').hide()
            
            // Remove required attributes
            $('#payout_option_id').prop('required', false)
            $('#cryptoSelect').prop('required', false)
            $('#upline-credit').prop('required', false)
            
            // Clear values
            $('#payout_option_id').val('')
            $('#cryptoSelect').val('')
            $('#upline-credit').val('')
        }
    }

</script>
@endsection