@extends('installer::app')
@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between">
            <p>Enter Database Details</p>
            <div>
                <a class="btn btn-outline-primary" href="{{ route('setup.requirements') }}">&laquo; Back</a>
            </div>
        </div>
        <form id="database_migrate_form" autocomplete="off">
            <div class="card-body">
                <div class="mb-3">
                    <label>Host <span class="text-danger">*</span></label>
                    <input type="text" name="host" id="host" class="form-control"
                        value="{{ old('host') ?: '127.0.0.1' }}" placeholder="Enter Database Host">
                </div>
                <div class="mb-3">
                    <label>Port <span class="text-danger">*</span></label>
                    <input type="text" name="port" id="port" class="form-control"
                        value="{{ old('port') ?: '3306' }}" placeholder="Enter Database Port. Default Is 3306">
                </div>
                <div class="mb-3">
                    <label>Database Name <span class="text-danger">*</span></label>
                    <input type="text" name="database" id="database" value="{{ old('database') }}" class="form-control"
                        placeholder="Enter Database Name Here">
                </div>
                <div class="mb-3">
                    <label>Database User <span class="text-danger">*</span></label>
                    <input autocomplete="off" type="text" name="user" id="user" value="{{ old('user') }}"
                        class="form-control" placeholder="Enter Database User Here">
                </div>
                <div class="mb-3">
                    <label>Database User Password @if (isset($isLocalHost) && !$isLocalHost)
                            <span class="text-danger">*</span>
                        @endif
                    </label>
                    <input autocomplete="new-password" type="password" name="password" id="password"
                        value="{{ old('password') }}" class="form-control" placeholder="Enter Database Password Here">
                </div>
                <div class="mb-3">
                    <small class="text-muted">Enter your existing database credentials. The database must already exist. Migrations should be run manually after installation.</small>
                </div>
            </div>
            <div class="card-footer d-flex justify-content-end ">
               
                <button type="submit" id="submit_btn" class="btn btn-lg btn-primary">Setup Database</button>
            </div>
        </form>
        <div class="card-footer text-center">
            <p>For script support, contact us at <a href="https://dreamstechnologies.com/page/support"
                target="_blank" rel="noopener noreferrer">@dreamstechnologies</a>. We're here to help. Thank you!</p>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $(document).on('submit', '#database_migrate_form', async function(e) {
                e.preventDefault();
                let submit_btn = $('#submit_btn');
                let host = $('#host').val();
                let port = $('#port').val();
                let database = $('#database').val();
                let username = $('#user').val();
                let password = $('#password').val();

                if ($.trim(port) === '') {
                    toastr.warning("Port is required");
                } else if ($.trim(database) === '') {
                    toastr.warning("Database Name is required");
                } else if ($.trim(username) === '') {
                    toastr.warning("Username is required");
                } else {
                    submit_btn.html(
                        'Connecting... <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
                    ).prop('disabled', true);
                    try {
                        const res = await makeAjaxRequest({
                            host: host,
                            port: port,
                            database: database,
                            user: username,
                            password: password,
                        }, "{{ route('setup.database.submit') }}");
                        if (res.success) {
                            toastr.success(res.message);
                            submit_btn.addClass('btn-success').html('Redirecting...');
                            window.location.href = "{{ route('setup.account') }}";
                        } else {
                            submit_btn.html('Setup Database').prop('disabled', false);
                            toastr.error(res.message);
                        }
                    } catch (error) {
                        submit_btn.html('Setup Database').prop('disabled', false);
                        $.each(error.errors, function(index, value) {
                            toastr.error(value);
                        });
                    }
                }
            });
        });
    </script>
@endpush