@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('addSurveyQuestions.store')}}" method="post">
            @csrf
            <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>
                <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" 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"  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">
                                    <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>
                </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-6 mt-3">--}}
    {{--    <div class="form-group">--}}
    {{--        <x-forms.label fieldId="survey_id_${counter}" :fieldLabel="__('app.menu.survey')">--}}
    {{--                        </x-forms.label>--}}
    {{--                        <x-forms.input-group>--}}
    {{--                            <select class="form-control select2" data-live-search="true" data-size="8" name="survey_id[]" id="survey_id_${counter}">--}}
    {{--                                <option value="" selected disabled>{{__("app.nothing_selected")}}</option>--}}
    {{--                                @foreach($surveys as $survey)--}}
    {{--            <option value="{{$survey->id}}">{{ App::getLocale() == "en" ? $survey->name_en :$survey->name_ar }}</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