@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('survey.update',$survey->id)}}" method="post"  enctype="multipart/form-data">
                @csrf
                @method('put')
                <div class="add-client bg-white rounded">
                    <h4 class="mb-0 p-20 f-21 font-weight-normal text-capitalize border-bottom-grey">
                        @lang('Edit Survey')</h4>
                    <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}}">
                            </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}}">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mt-3 mb-3">
                            <label for="image">{{__('app.image')}}</label>
                            <div class="btn btn-primary" style="display:block;">
                                <input type="file" name="image" id="image" accept="image/*" onchange="previewImage(event)">
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 mt-3">
                            <div id="image-preview" class="image-preview"><img src="{{asset($survey->image)}}" alt="Uploaded Image" width="100px" height="100px"></div>
                        </div>
                        <div class="col-lg-6 mt-3">
                            <div class="form-group">
                                <x-forms.label fieldId="employees" :fieldLabel="__('app.menu.employees')">
                                </x-forms.label>
                                <x-forms.input-group>
                                    <select class="form-control select2" data-live-search="true" data-size="8" name="employees[]" id="employees" multiple disabled>
                                        <option value=""  disabled>{{__("app.nothing_selected")}}</option>
                                        @foreach($employees as $employee)
                                            <option value="{{$employee['id']}}">{{$employee['name']}}</option>
                                        @endforeach
                                    </select>
                                </x-forms.input-group>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <x-forms.select fieldId="user_type" fieldName="user_type" :fieldLabel="__('app.user_type')"
                                            search="true">
                                <option value="" selected disabled>{{__("app.nothing_selected")}}</option>
                            </x-forms.select>
                        </div>
                        <div class="col-lg-6 col-md-6 mt-3">
                            <label for="user">{{__("app.user")}}</label>
                            <select class="form-group" id="user" name="user_id[]" style="height: 36px;width: 100%;" multiple disabled>
                            </select>
                        </div>
                        <div class="col-lg-1 mt-3">
                            <div class="form-group">
                                <label class="form-check-label" for="open_date">{{__('app.open_date')}}</label>
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input p-2 mt-2" id="open_date" name="open_date" @if($survey->open_date == 1) checked @endif onclick="toggleDateInputs()">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-6 mt-3">
                            <label for="date">{{__('app.start_date')}}</label>
                            <div class="form-group">
                                <input type="date" class="form-control p-2" id="start_date" name="start_date" value="{{$survey->start_date}}">
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 mt-3">
                            <label for="date">{{__('app.end_date')}}</label>
                            <div class="form-group">
                                <input type="date" class="form-control p-2" id="end_date" name="end_date" value="{{$survey->end_date}}">
                            </div>
                        </div>

                        <div class="col-lg-12 col-md-6">
                            <button type="submit" class="btn btn-primary">{{__('app.save')}}</button>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
    <style>
        .upload-button {
            background-color: #4caf50;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .image-preview img {
            max-width: 200px;
            max-height: 200px;
            margin-top: 10px;
        }
    </style>
    <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 () {
            $('.select2').select2({
                placeholder: "{{ __('app.select_employees') }}", // Replace with your desired placeholder text
            });
        });
        $(document).ready(function () {
            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;
            $(document).ready(function () {
                $('#user').select2({
                    placeholder: "{{__('app.select_a_user')}}",
                    allowClear: true, // Optional: Allows clearing the selected option
                });
            });
            $('#user_type').on('change', function () {

                var selectedValue = $(this).val();
                var currentURL = window.location.href;

                if (selectedValue === 'client' || selectedValue === 'lead') {
                    console.log("Selected User:" + selectedValue);
                    console.log("Current URL: " + currentURL);
                    $.ajax({
                        url: "{{ route('show_room_visits.user') }}",
                        method: 'GET',
                        data: { user_type: selectedValue },
                        success: function (response) {
                            var selectElement = $('#user');

                            // Clear existing options
                            selectElement.empty();

                            console.log(response)
                            // Add the default option back
                            selectElement.append('<option value=""  disabled>Select a user</option>');
                            if(response) {
                                $("#user").removeAttr("disabled");
                                response.forEach(function (option) {
                                    if(option.name) {
                                        selectElement.append('<option value="' + option.id + '">' + option.name + '</option>');
                                    }else {
                                        selectElement.append('<option value="' + option.id + '">' + option.client_name + '</option>');
                                    }
                                });
                            }
                        },
                        error: function (xhr, status, error) {
                            console.error(error);
                        }
                    });
                }
            });
        });
    </script>

@endsection