@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-user-cog mr-2"></i>API Service Users</b></h3>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary ml-auto">Add API Service User</a>
</div>
<div class="card">
    <div class="card-body">
        <table id="datatable" class="datatable table table-hover table-center mb-0">
            <thead>
                <tr>
                    <th>User Name</th>
                    <th>API Service Name</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add API Service User</h4>
<form action="{{ isset($id)? route('api_users.update', $id) : route('api_users.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif
    <div class="form-group">
        <label for="">User</label>
        <select id="user" class="form-control" name="user">
            <option>Choose</option>
            @foreach(App\User::select('id','name')->get() as $user)
                <option value="{{ $user->id }}">{{ $user->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        <label for="">API Service</label>
        <select id="api" class="form-control" name="api">
            <option>Choose</option>
            @foreach(App\Api::select('id','name')->get() as $_api)
                <option value="{{ $_api->id }}">{{ $_api->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="form-group">
        @if(isset($id)) <label for="">Key Values</label> @endif
        <div class="key_fields"></div>
        @if(isset($id))
            @foreach(json_decode($api_user->key_values, true) as $key => $value)
            <div class="row">
                <div class="col-12 col-md-6">
                    <div class="form-group"><input name="key[]" value="{{ $key }}" class="form-control">
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="form-group">
                        <input name="value[]" value="{{ $value }}" class="form-control">
                    </div>
                </div>
            </div>
            @endforeach
        @endif
    </div>
    <div class="form-group">
        <label>Choose</label>
        <br>
        <select name="cities[]" id="cities" class="form-control" multiple style="height: 200px; width: 100%;">
            @foreach(App\MagentoCity::orderBy('city', 'ASC')->get() as $city)
                <option value="{{ $city->city }}">{{ $city->city }}</option>
            @endforeach
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Save</button>
    <a @if(isset($id)) href="{{ route('api_users.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
<script>
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ URL::to('api_users') }}",
        columns: [
            {data: 'user_name', name: 'user_name'},
            {data: 'api_name', name: 'api_name'},
            {
                data: 'action', 
                name: 'action', 
                orderable: true, 
                searchable: true
            },
        ]
    });
    $(document).ready(function(){
        $('#api').on('change', function(){
            var _this = $(this);
            var values_array = [];

            $.ajax({
                url: "{{ URL::to('api_users/get_key_fields') }}/"+_this.val(),
                method: 'GET',
                success: function(data){
                    // console.log(JSON.parse(data.key_fields));
                    $.each(JSON.parse(data.key_fields), function(i, v){
                        // values_array[v] = v.replace(/[{}]/g, '');
                        $('.key_fields').append('<div class="row"><div class="col-12 col-md-6"><div class="form-group"><input name="key[]" value="'+v+'" class="form-control"></div></div><div class="col-12 col-md-6"><div class="form-group"><input name="value[]" class="form-control"></div></div></div>');
                        console.log(v);
                    });
                    // console.log(values_array);
                    // $('#key_values').val(JSON.stringify(Object.assign({}, values_array)));
                }
            });
        });
    });
</script>

@if(isset($id))
<script>
    $(document).ready(function(){
        var formBar = $('.form-bar');
        var formBarOverlay = $('.form-bar-overlay');

        formBar.addClass('show-form-bar'); 
        formBarOverlay.addClass('show-form-bar-overlay');

        $('#user').val('{{ $api_user->user_id }}');
        $('#api').val('{{ $api_user->api_id }}');

        var cities = '';

        $('#cities').val(JSON.parse(cities));
    });
</script>
@endif
@endsection