@extends('admin.main')
@section('title', 'OpenAI Settings')
@section('breadcrumb')
    <li class="breadcrumb-item active">OpenAI Settings</li>
@endsection
@section('content')


    <div class="col-md-12">
        <!-- About Me Box -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Data</h3>
                <div class="card-tools">
                    <a href="#" id="btnEdit" class="btn btn-warning" data-id="{{ Auth::user()->id }}" data-toggle="modal"
                        data-target="#modalEdit" class="btn btn-block"><b>Edit</b></a>
                </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
                <strong>STATUS ACTIVE</strong>

                <p class="text-muted">
                    {{ $data->status_active }}
                </p>

                <hr>
                <strong>BASE URL</strong>

                <p class="text-muted">
                    {{ $data->base_url }}
                </p>

                <hr>

                <strong>API KEY</strong>

                <p class="text-muted">
                    {{ $data->api_key }}
                </p>

                <hr>


            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </div>
    <!-- /.col -->

    <div class="modal fade" id="modalEdit">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-edit" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Form Edit</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="hidden" name="id" value="{{ $data->id }}">
                            <label>BASE URL</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="text" class="form-control" id="base_url" name="base_url" value="{{ $data->base_url }}"
                                placeholder="input base url..">
                        </div>
                        <div class="form-group">
                            <div class="form-group">
                                <label>API KEY</label><span style="color: var(--danger);"><b>*</b></span>
                                <textarea class="form-control" name="api_key" id="" cols="30" rows="3">{{ $data->api_key }}</textarea>
                            </div>
                        </div>

                        <div class="form-group">
                            <input type="hidden" name="id" value="{{ $data->id }}">
                            <label>MODEL</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="text" class="form-control" id="model" name="model" value="{{ $data->model }}"
                                placeholder="input model.." readonly>
                        </div>

                        <div class="form-group">
                            <label>STATUS ACTIVE</label><span style="color: var(--danger);"><b>*</b></span>
                            <select class="form-control" id="is_active" name="is_active">
                                <option value="" {{ $data->is_active == null ? 'selected' : '' }} disabled>Pilih status</option>
                                <option value="1" {{ $data->is_active == '1' ? 'selected' : '' }}>Enable</option>
                                <option value="0" {{ $data->is_active == '0' ? 'selected' : '' }}>Disable</option>
                            </select>
                        </div>
                        
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="modalChangePassword">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="" class="form-modal-password" method="post">
                    @csrf
                    <div class="modal-header">
                        <h4 class="modal-title">Form Tukar Password</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input type="hidden" name="id" value="{{ Auth::user()->id }}">
                            <label>Password Sekarang</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="current_password" name="current_password"
                                placeholder="input password sekarang.." required>
                        </div>
                        <div class="form-group">
                            <label>Password Baru</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="new_password" name="new_password"
                                placeholder="input password baru.." required>
                        </div>
                        <div class="form-group">
                            <label>Confirm Password</label><span style="color: var(--danger);"><b>*</b></span>
                            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                                placeholder="input confirm password baru.." required>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary btn-sm">Save changes</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <script>
        $(document).ready(function() {

            $('.form-modal-edit').submit(function(e) {
                e.preventDefault();

                var token = $('input[name=_token]');
                var form = $(this);
                var id = form.find('input[name=id]').val();
                
                hitApi(
                    '/admin/openai-settings/update/' + id,
                    'post', 
                    {
                        _token: token.val(),
                        base_url: form.find('input[name=base_url]').val(),
                        api_key: form.find('textarea[name=api_key]').val(),
                        is_active: form.find('select[name=is_active]').val(),
                    },
                    function(response) {
                        token.val(response.newToken);
                        if (response.isSuccess) {
                            $('#modalEdit').modal('hide');
                            location.reload();
                            Swal.fire({
                                title: "Success!",
                                text: response.message,
                                icon: "success"
                            });

                        } else {
                            Swal.fire({
                                title: "Warning!",
                                text: response.message,
                                icon: "warning"
                            });
                        }
                    }
                );

            });

        });
    </script>

@endsection