@extends('layouts.app')
@section('title')
    {{ __('messages.Datasource') }}
@endsection
@section('content')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('messages.Datasource') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('messages.Dashboard') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('messages.Datasource') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="card card-info">
                        <div class="card-header"></div>
                        <form class="form-horizontal" action="" method="post">
                            @csrf
                            <div class="card-body">
                                <div class="form-group row">
                                    <label for="type_of_datasource" class="col-sm-2 col-form-label">{{ __('messages.Type of datasource') }}</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="type_of_datasource" id="type_of_datasource">
                                            <option value="">{{ __('messages.Select datasource') }}</option>
                                            @foreach ($datasources as $_datasource)
                                                <option value="{{ $_datasource->id }}" data-value="{{ json_encode($_datasource->datasource) }}" @if(old('type_of_datasource') && old('type_of_datasource') == $_datasource->id)Selected @elseif(isset($datasource) && $datasource->datasource_id == $_datasource->id)Selected @endif>{{ $_datasource->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('type_of_datasource')
                                            <span class="error invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="owner" class="col-sm-2 col-form-label">{{ __('messages.Select owner') }}</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="owner" id="owner">
                                            <option value="">{{ __('messages.Select owner') }}</option>
                                            @foreach ($owners as $owner)
                                                <option value="{{ $owner->id }}" @if(old('owner') && old('owner') == $_datasource->id)Selected @elseif(isset($datasource) && $datasource->owner_id == $owner->id)Selected @endif>{{ $owner->name }}</option>
                                            @endforeach
                                        </select>
                                        @error('owner')
                                            <span class="error invalid-feedback d-block">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="datasource_form">
                                    
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-info">{{ __('messages.Submit') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
<script>
    createForm()
    $('#type_of_datasource').change(function() {
        createForm()
    });
    function createForm() {
        let type_of_datasource = $('#type_of_datasource').val()
        if(!type_of_datasource) {
            return;
        }
        let selectedOption = $('#type_of_datasource').find('option:selected');
        let formData = selectedOption.data('value');
        let formHtml = '';

        formData.forEach(function(field) {
            if(field.type === 'text') {
                formHtml += `<div class="form-group row">
                    <label for="${field.name}" class="col-sm-2 col-form-label">${field.name}</label>
                    <div class="col-sm-10">
                        <input type="text" name="${field.name}" class="form-control" id="${field.name}" placeholder="${field.name}">
                    </div>
                </div>`
            } else if (field.type === 'select') {
                formHtml += `<div class="form-group row">
                    <label for="${field.name}" class="col-sm-2 col-form-label">${field.name}</label>
                    <div class="col-sm-10">
                        <select class="form-control" name="${field.name}" id="${field.name}" placeholder="${field.name}">`;

                var options = field.options.split(',');
                options.forEach(function(option) {
                    var parts = option.split('|');
                    if (parts.length > 1) {
                        formHtml += '<option value="' + parts[0] + '">' + parts[1] + '</option>';
                    } else {
                        formHtml += '<option value="' + option + '">' + option + '</option>';
                    }
                });
                formHtml += `</select></div></div>`
            }
        });
        $(".datasource_form").empty().html(formHtml)
        @if(isset($datasource->value))
            let datasource_id = parseInt("{{ $datasource->datasource_id }}")
            if(type_of_datasource == datasource_id) {
                let valueJson = @json($datasource->value);
                $.each(valueJson, function(key, value) {
                    $('[name="'+key+'"]').val(value)
                });
            }
        @endif
    }
</script>
@endsection