@extends('layouts.app')

<link rel="stylesheet" href="{{ asset('vendor/css/dropzone.min.css') }}">
@section('content')
    <div class="row">
        <div class="col-sm-12">
            <form action="{{route('updateSurveyQuestions',['survey_id'=>$survey_id])}}" method="post">
                @csrf
                @method('put')
                <input type="hidden" name="survey_id" value="{{$survey_id}}" />
                <div class="add-client bg-white rounded">
                    <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
                        @lang('app.menu.addSurveyQuestions')</h4>
                    <div>
                        @foreach($survey_questions as $survey)
                        <div class="row p-20">

                            <div class="col-lg-6 col-md-6 mt-3">
                                <label for="date">{{__('app.name_en')}}</label>
                                <div class="form-group">
                                    <input type="text" class="form-control p-2" id="name_en" name="name_en[]" placeholder="Enter English Name" value="{{$survey->name_en}}" required>
                                </div>
                            </div>

                            <div class="col-lg-6 col-md-6 mt-3">
                                <label for="date">{{__('app.name_ar')}}</label>
                                <div class="form-group">
                                    <input type="text" class="form-control p-2" id="name_ar" name="name_ar[]" placeholder="Enter Arabic Name"  value="{{$survey->name_ar}}"  required>
                                </div>
                            </div>

                            <div class="col-lg-6 mt-3">
                                <div class="form-group">
                                    <x-forms.label fieldId="answer_type" :fieldLabel="__('app.menu.answer_type')">
                                    </x-forms.label>
                                    <x-forms.input-group>
                                        <select class="form-control select2" data-live-search="true" data-size="8" name="answer_type[]" id="answer_type">
                                            @foreach($answerTypes as $answerType)
                                                @if($survey->answer_type == $answerType->id)
                                                    <option value="{{$answerType->id}}" selected>{{$answerType->type}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </x-forms.input-group>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
{{--                <div class="col-lg-12 col-md-6 mt-3 bg-white rounded">--}}
{{--                    <button class="btn btn-success mt-2 mb-2" id="add-field">Add New Survey Question</button>--}}
{{--                </div>--}}
                <div class="col-lg-12 col-md-6 bg-white rounded">
                    <button type="submit" class="btn btn-primary">{{__('app.save')}}</button>
                </div>
            </form>
        </div>
    </div>
    <style>
        .image-preview img {
            max-width: 200px;
            max-height: 200px;
            margin-top: 10px;
        }
    </style>
    <script>

        $(document).ready(function () {
            var counter = 1;
            $('.select2').select2({
                width:'100',
            });

            $(document).on('click','button[id^="add-field"]', function () {
                var formString = `
                <div class="row p-20">

                    <div class="col-lg-6 col-md-6 mt-3">
                        <label for="date_${counter}">{{__('app.name_en')}}</label>
                        <div class="form-group">
                            <input type="text" class="form-control p-2" id="name_en_${counter}" name="name_en[]" placeholder="Enter English Name" required>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 mt-3">
                        <label for="date_${counter}">{{__('app.name_ar')}}</label>
                        <div class="form-group">
                            <input type="text" class="form-control p-2" id="name_ar_${counter}" name="name_ar[]" placeholder="Enter Arabic Name"  required>
                        </div>
                    </div>

                    <div class="col-lg-6 mt-3">
                        <div class="form-group">
                            <x-forms.label fieldId="answer_type_${counter}" :fieldLabel="__('app.menu.answer_type')">
                            </x-forms.label>
                            <x-forms.input-group>
                                <select class="form-control select2" data-live-search="true" data-size="8" name="answer_type[]" id="answer_type_${counter}">
                                    <option value="" selected disabled>{{__("app.nothing_selected")}}</option>
                                    @foreach($answerTypes as $answerType)
                <option value="{{$answerType->id}}">{{$answerType->type}}</option>
                                    @endforeach
                </select>
            </x-forms.input-group>
        </div>
    </div>
                <div class="col-lg-12 col-md-6 mt-3">
                                <button class="btn btn-danger mt-2 mb-2" id="delete-field${counter}">Delete</button>
          </div>
</div>
`;
                $('.add-client').append(formString);

                $(`#answer_type_${counter}, #survey_id_${counter}`).select2();

                counter++;
            });

            $(document).on('click', 'button[id^="delete-field"]', function () {
                $(this).closest('.row').remove();
            });
        });
    </script>

    <script>
        function toggleDateInputs() {
            var start_date = document.getElementById("start_date");
            var end_date = document.getElementById("end_date");
            var open_date_checkbox = document.getElementById("open_date");

            start_date.disabled = open_date_checkbox.checked;
            end_date.disabled = open_date_checkbox.checked;
        }
        function previewImage(event) {
            var input = event.target;
            var reader = new FileReader();

            reader.onload = function () {
                var output = document.getElementById('image-preview');
                output.innerHTML = '<img src="' + reader.result + '" alt="Image Preview">';
            };

            reader.readAsDataURL(input.files[0]);
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#answer_type').select2({
                placeholder: "{{ __('app.select_answer_type') }}",
            });
            $('#survey_id').select2({
                placeholder: "{{ __('app.select_survey') }}",
            });
        });
        $(document).ready(function () {
            $(document).ready(function () {
                $('#user').select2({
                    placeholder: "{{__('app.select_a_user')}}",
                    allowClear: true,
                });
            });
        });
    </script>
@endsection