198 lines
9.9 KiB
PHP
198 lines
9.9 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">Add New Subscription Service</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
|
|
{{-- Success Message --}}
|
|
@if(session('success'))
|
|
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
|
{{ session('success') }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('services.store') }}" method="POST">
|
|
@csrf
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-6">
|
|
<label for="name" class="form-label">Service Name</label>
|
|
<input type="text" class="form-control @error('name') is-invalid @enderror" id="name" name="name" value="{{ old('name') }}" placeholder="e.g., Live Scores" required>
|
|
@error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="schema_type" class="form-label">Schema Type</label>
|
|
<select class="form-select @error('schema_type') is-invalid @enderror" id="schema_type" name="schema_type" required>
|
|
<option value="" disabled selected>Select schema format...</option>
|
|
<option value="type_a" {{ old('schema_type') == 'type_a' ? 'selected' : '' }}>Type A (msisdn, is_active)</option>
|
|
<option value="type_b" {{ old('schema_type') == 'type_b' ? 'selected' : '' }}>Type B (cell_number, sub_state)</option>
|
|
</select>
|
|
@error('schema_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
<h6 class="mb-3 text-muted">Database Connection</h6>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-8">
|
|
<label for="db_host" class="form-label">Host / IP Address</label>
|
|
<input type="text" class="form-control @error('db_host') is-invalid @enderror" id="db_host" name="db_host" value="{{ old('db_host') }}" required>
|
|
@error('db_host')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
<div class="col-md-4">
|
|
<label for="db_port" class="form-label">Port</label>
|
|
<input type="number" class="form-control @error('db_port') is-invalid @enderror" id="db_port" name="db_port" value="{{ old('db_port', 3306) }}" required>
|
|
@error('db_port')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-12">
|
|
<label for="db_name" class="form-label">Database Name</label>
|
|
<input type="text" class="form-control @error('db_name') is-invalid @enderror" id="db_name" name="db_name" value="{{ old('db_name') }}" required>
|
|
@error('db_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<label for="db_user" class="form-label">Database Username</label>
|
|
<input type="text" class="form-control @error('db_user') is-invalid @enderror" id="db_user" name="db_user" value="{{ old('db_user') }}" required>
|
|
@error('db_user')<div class="invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label for="db_password" class="form-label">Database Password</label>
|
|
<div class="input-group">
|
|
<input type="password" class="form-control @error('db_password') is-invalid @enderror" id="db_password" name="db_password" required>
|
|
<button class="btn btn-outline-secondary" type="button" id="togglePassword">Show</button>
|
|
</div>
|
|
@error('db_password')<div class="d-block invalid-feedback">{{ $message }}</div>@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add this placeholder for the AJAX response just above the buttons -->
|
|
<div id="test-connection-alert" class="alert d-none mb-4" role="alert"></div>
|
|
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<button type="button" id="testConnectionBtn" class="btn btn-outline-info">
|
|
<span class="spinner-border spinner-border-sm d-none me-1" id="testSpinner" role="status" aria-hidden="true"></span>
|
|
Test Connection
|
|
</button>
|
|
|
|
<div>
|
|
<button type="submit" class="btn btn-primary" id="saveServiceBtn" disabled>
|
|
Save Subscription Service
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<small class="text-muted d-block text-end mt-1" id="saveHint">
|
|
You must successfully test the connection before saving.
|
|
</small>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@push('scripts')
|
|
<script>
|
|
$(document).ready(function() {
|
|
// Selectors for connection fields
|
|
const connectionInputs = '#db_host, #db_port, #db_name, #db_user, #db_password';
|
|
|
|
// 1. Automatically re-disable the save button if ANY connection field is edited
|
|
$(connectionInputs).on('input change', function() {
|
|
$('#saveServiceBtn').prop('disabled', true);
|
|
$('#saveHint').text('Connection parameters changed. Re-testing required before saving.')
|
|
.removeClass('text-success')
|
|
.addClass('text-muted');
|
|
});
|
|
|
|
// 2. Toggle password visibility
|
|
$('#togglePassword').on('click', function() {
|
|
const passwordInput = $('#db_password');
|
|
const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
|
|
passwordInput.attr('type', type);
|
|
$(this).text(type === 'password' ? 'Show' : 'Hide');
|
|
});
|
|
|
|
// 3. Test Connection AJAX Logic
|
|
$('#testConnectionBtn').on('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
let btn = $(this);
|
|
let spinner = $('#testSpinner');
|
|
let alertBox = $('#test-connection-alert');
|
|
let saveBtn = $('#saveServiceBtn');
|
|
let saveHint = $('#saveHint');
|
|
|
|
let payload = {
|
|
db_host: $('#db_host').val(),
|
|
db_port: $('#db_port').val(),
|
|
db_name: $('#db_name').val(),
|
|
db_user: $('#db_user').val(),
|
|
db_password: $('#db_password').val(),
|
|
_token: $('input[name="_token"]').val()
|
|
};
|
|
|
|
if (!payload.db_host || !payload.db_name || !payload.db_user || !payload.db_password) {
|
|
alertBox.removeClass('d-none alert-success alert-warning')
|
|
.addClass('alert-danger')
|
|
.text('Please fill out all database fields before testing.');
|
|
return;
|
|
}
|
|
|
|
btn.prop('disabled', true);
|
|
spinner.removeClass('d-none');
|
|
alertBox.addClass('d-none');
|
|
|
|
$.ajax({
|
|
url: "{{ route('services.test') }}",
|
|
method: 'POST',
|
|
data: payload,
|
|
success: function(response) {
|
|
alertBox.removeClass('d-none alert-danger alert-warning')
|
|
.addClass('alert-success')
|
|
.text(response.message);
|
|
|
|
// ENABLE SAVE BUTTON
|
|
saveBtn.prop('disabled', false);
|
|
saveHint.text('Connection verified. Ready to save.')
|
|
.removeClass('text-muted')
|
|
.addClass('text-success');
|
|
},
|
|
error: function(xhr) {
|
|
let errorMessage = xhr.responseJSON && xhr.responseJSON.message
|
|
? xhr.responseJSON.message
|
|
: 'An unexpected error occurred.';
|
|
|
|
alertBox.removeClass('d-none alert-success alert-warning')
|
|
.addClass('alert-danger')
|
|
.text(errorMessage);
|
|
|
|
// KEEP SAVE BUTTON DISABLED
|
|
saveBtn.prop('disabled', true);
|
|
saveHint.text('Connection failed. Fix credentials and test again.')
|
|
.removeClass('text-success')
|
|
.addClass('text-muted');
|
|
},
|
|
complete: function() {
|
|
btn.prop('disabled', false);
|
|
spinner.addClass('d-none');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endpush |