@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