@extends('layouts.app')

@section('title', 'Providers - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/vendor/select2/select2.css') }}">
<style>
    /* Page-specific styles only - Select2 styling is in common file (select2-dark-theme.css) */
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Providers</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Settings</li>
                        <li class="breadcrumb-item active">Providers</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            @can('create providers')
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#providerModal" id="addProviderBtn"><i class="fa fa-plus"></i> Add Provider</button>
                            @endcan
                            <button type="button" class="btn btn-secondary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerts -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        <!-- DataTable -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Providers List</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="providersTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Country</th>
                                        <th>Alias</th>
                                        <th>Group</th>
                                        <th>ISPs</th>
                                        <th>Created At</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Provider Modal (Create/Edit/View) -->
<div class="modal fade" id="providerModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="providerModalTitle">Add Provider</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="providerForm">
                @csrf
                <input type="hidden" id="provider_id" name="provider_id">
                <input type="hidden" id="_method" name="_method" value="POST">
                <div class="modal-body">
                    <div id="providerModalBody">
                        <div class="form-group">
                            <label for="modal_country">Country <span class="text-danger">*</span></label>
                            <select class="form-control select2" id="modal_country" name="country" style="width: 100%;" required>
                                <option value="">Select Country</option>
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_alias">Alias <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_alias" name="alias" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_group_id">Group <span class="text-danger">*</span></label>
                            <select class="form-control" id="modal_group_id" name="group_id" required>
                                <option value="">Select Group</option>
                                <!-- Will be populated via AJAX -->
                            </select>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_isps">ISPs</label>
                            <textarea class="form-control" id="modal_isps" name="isps" rows="3" placeholder="Enter ISPs separated by comma or new line"></textarea>
                            <small class="form-text text-muted">Enter ISPs separated by comma or new line (e.g., ISP1, ISP2 or one per line)</small>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    
                    <!-- View Mode Content -->
                    <div id="providerViewContent" style="display: none;">
                        <table class="table table-bordered">
                            <tr>
                                <th width="150">Provider ID</th>
                                <td id="view_id">-</td>
                            </tr>
                            <tr>
                                <th>Country</th>
                                <td id="view_country">-</td>
                            </tr>
                            <tr>
                                <th>Alias</th>
                                <td id="view_alias">-</td>
                            </tr>
                            <tr>
                                <th>Group</th>
                                <td id="view_group_id">-</td>
                            </tr>
                            <tr>
                                <th>ISPs</th>
                                <td id="view_isps">-</td>
                            </tr>
                            <tr>
                                <th>Created At</th>
                                <td id="view_created_at">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer" id="providerModalFooter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="providerSubmitBtn">
                        <i class="fa fa-spinner fa-spin" id="providerSubmitSpinner" style="display: none;"></i>
                        <span id="providerSubmitText">Save</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('assets/vendor/select2/select2.min.js') }}"></script>
<script>
    var groupsList = [];
    var groupsMap = {};

    function buildGroupsMap() {
        groupsMap = {};
        groupsList.forEach(function(group) {
            var id = group.id || group._id;
            if (id) {
                groupsMap[String(id)] = group.name;
            }
        });
    }

    function formatGroupDisplay(groupIdOrObject) {
        if (!groupIdOrObject) {
            return '-';
        }

        if (typeof groupIdOrObject === 'object' && groupIdOrObject !== null) {
            if (groupIdOrObject.name) {
                return groupIdOrObject.name;
            }
            groupIdOrObject = groupIdOrObject.id || groupIdOrObject._id || '';
        }

        return groupsMap[String(groupIdOrObject)] || String(groupIdOrObject);
    }
    
    // Load countries and initialize select2
    function initCountrySelect2() {
        var $countrySelect = $('#modal_country');
        if (!$countrySelect.length) {
            console.error('Country select element not found');
            return;
        }
        
        // Destroy existing select2 if any
        if ($countrySelect.hasClass('select2-hidden-accessible')) {
            $countrySelect.select2('destroy');
        }
        
        // Show loading state
        $countrySelect.prop('disabled', true).addClass('select2-loading');
        $countrySelect.empty().append('<option value="">Loading countries...</option>');
        
        // Load countries via AJAX first
        $.ajax({
            url: "{{ route('countries.ajax.select') }}",
            dataType: 'json',
            data: { q: '' }, // Empty search to get all countries
            beforeSend: function() {
                $countrySelect.prop('disabled', true).addClass('select2-loading');
            },
            success: function(response) {
                // Clear existing options except the placeholder
                $countrySelect.empty().append('<option value="">Select Country</option>');
                
                // Add countries as options
                if (response.results && response.results.length > 0) {
                    $.each(response.results, function(index, country) {
                        $countrySelect.append(
                            $('<option></option>')
                                .attr('value', country.id)
                                .text(country.text)
                        );
                    });
                }
                
                // Remove loading state
                $countrySelect.prop('disabled', false).removeClass('select2-loading');
                
                // Initialize Select2 after options are loaded
                $countrySelect.select2({
                    placeholder: 'Select Country',
                    allowClear: true
                });
            },
            error: function(xhr, status, error) {
                console.error('Error loading countries:', error);
                console.error('Response:', xhr.responseText);
                // Remove loading state
                $countrySelect.prop('disabled', false).removeClass('select2-loading');
                $countrySelect.empty().append('<option value="">Error loading countries</option>');
                // Initialize Select2 anyway with empty options
                $countrySelect.select2({
                    placeholder: 'Select Country',
                    allowClear: true
                });
            }
        });
    }
    
    // Load groups for dropdown
    function loadGroups(callback) {
        var $groupSelect = $('#modal_group_id');
        
        $.ajax({
            url: "{{ route('groups.ajax.list') }}",
            method: 'GET',
            beforeSend: function() {
                if ($groupSelect.length) {
                    $groupSelect.prop('disabled', true);
                    $groupSelect.empty().append('<option value="">Loading groups...</option>');
                }
            },
            success: function(response) {
                if ($groupSelect.length) {
                    $groupSelect.empty().append('<option value="">Select Group</option>');
                }
                if (response.data && Array.isArray(response.data)) {
                    groupsList = response.data;
                    buildGroupsMap();
                    if ($groupSelect.length) {
                        response.data.forEach(function(group) {
                            $groupSelect.append('<option value="' + (group.id || group._id) + '">' + group.name + '</option>');
                        });
                    }
                }
                if ($groupSelect.length) {
                    $groupSelect.prop('disabled', false);
                }
                if (typeof callback === 'function') {
                    callback();
                }
            },
            error: function() {
                console.error('Failed to load groups');
                if ($groupSelect.length) {
                    $groupSelect.empty().append('<option value="">Error loading groups</option>');
                    $groupSelect.prop('disabled', false);
                }
                if (typeof callback === 'function') {
                    callback();
                }
            }
        });
    }
    
    // Parse ISPs from textarea (comma or newline separated)
    function parseISPs(text) {
        if (!text) return [];
        return text.split(/[,\n]/).map(function(isp) {
            return isp.trim();
        }).filter(function(isp) {
            return isp.length > 0;
        });
    }
    
    // Format ISPs for display
    function formatISPs(isps) {
        if (!isps || !Array.isArray(isps)) return '-';
        return isps.join(', ');
    }
    
    $(document).ready(function() {
        showFullScreenLoader();

        loadGroups(function() {
            initProvidersTable();
        });

        function initProvidersTable() {
        var table = $('#providersTable').DataTable({
            processing: false,
            serverSide: false,
            ajax: {
                url: "{{ route('providers.ajax.list') }}",
                cache: false,
                timeout: 30000,
                dataSrc: 'data',
                complete: function() {
                    hideFullScreenLoader();
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Error:', error);
                    console.error('Response:', xhr.responseText);
                }
            },
            columns: [
                { data: 'country', name: 'country' },
                { data: 'alias', name: 'alias' },
                {
                    data: 'group_id',
                    name: 'group_id',
                    render: function(data, type, row) {
                        return formatGroupDisplay(row.group || data);
                    }
                },
                { 
                    data: 'isps', 
                    name: 'isps',
                    render: function(data, type, row) {
                        return formatISPs(data);
                    }
                },
                { 
                    data: 'created_at', 
                    name: 'created_at',
                    render: function(data, type, row) {
                        if (!data) return '-';
                        var date = new Date(data);
                        return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
                    }
                },
                { 
                    data: 'id', 
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var actions = '<div class="btn-group" role="group">';
                        actions += '<button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
                        actions += '<i class="fa fa-cog"></i> Actions ';
                        actions += '</button>';
                        actions += '<div class="dropdown-menu dropdown-menu-right">';
                        actions += '<a class="dropdown-item view-provider" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-eye"></i> View</a>';
                        @can('edit providers')
                        actions += '<a class="dropdown-item edit-provider" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-edit"></i> Edit</a>';
                        @endcan
                        @can('delete providers')
                        actions += '<a class="dropdown-item delete-provider" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-trash"></i> Delete</a>';
                        @endcan
                        actions += '</div>';
                        actions += '</div>';
                        return actions;
                    }
                }
            ],
            order: [[4, 'desc']],
            pageLength: 20,
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            language: {
                processing: '',
                emptyTable: "No providers found",
                zeroRecords: "No matching providers found"
            }
        });

        // Refresh table manually
        $('#refreshTable').on('click', function() {
            var $btn = $(this);
            var originalHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
            showFullScreenLoader();
            table.ajax.reload(function(json) {
                $btn.prop('disabled', false).html(originalHtml);
                hideFullScreenLoader();
            }, false);
        });

        // Initialize country select2 when modal is shown
        $('#providerModal').on('shown.bs.modal', function() {
            if ($('#providerModalBody').is(':visible')) {
                initCountrySelect2();
            }
        });

        // Add Provider - Open modal
        $('#addProviderBtn').on('click', function() {
            resetProviderModal();
            $('#providerModalTitle').text('Add Provider');
            $('#providerForm').attr('action', "{{ route('providers.store') }}");
            $('#_method').val('POST');
            $('#provider_id').val('');
            $('#providerModalBody').show();
            $('#providerViewContent').hide();
            $('#providerModalFooter').show();
            $('#providerSubmitBtn').show();
            $('#providerSubmitText').text('Create Provider');
            loadGroups();
            $('#providerModal').modal('show');
        });

        // View Provider
        $(document).on('click', '.view-provider', function() {
            var providerId = $(this).data('id');
            showFullScreenLoader();
            $('#providerModalBody').hide();
            $('#providerViewContent').show();
            $('#providerModalFooter').show();
            $('#providerSubmitBtn').hide();
            $('#providerModalTitle').text('Provider Details');
            
            $.ajax({
                url: "{{ route('providers.show.ajax', ':id') }}".replace(':id', providerId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var provider = response.data;
                        $('#view_id').text(provider.id || '-');
                        $('#view_country').text(provider.country || '-');
                        $('#view_alias').text(provider.alias || '-');
                        $('#view_group_id').text(formatGroupDisplay(provider.group || provider.group_id));
                        $('#view_isps').text(formatISPs(provider.isps));
                        $('#view_created_at').text(provider.created_at ? new Date(provider.created_at).toLocaleString() : '-');
                        $('#providerModal').modal('show');
                    } else {
                        showErrorToast('Failed to load provider details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading provider:', error);
                    showErrorToast('Error loading provider details.');
                }
            });
        });

        // Edit Provider
        $(document).on('click', '.edit-provider', function() {
            var providerId = $(this).data('id');
            showFullScreenLoader();
            resetProviderModal();
            $('#providerModalTitle').text('Edit Provider');
            $('#providerForm').attr('action', "{{ route('providers.update', ':id') }}".replace(':id', providerId));
            $('#_method').val('PATCH');
            $('#provider_id').val(providerId);
            $('#providerModalBody').show();
            $('#providerViewContent').hide();
            $('#providerModalFooter').show();
            $('#providerSubmitBtn').show();
            $('#providerSubmitText').text('Update Provider');
            loadGroups();
            $('#providerModal').modal('show');
            
            $.ajax({
                url: "{{ route('providers.show.ajax', ':id') }}".replace(':id', providerId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var provider = response.data;
                        // Set country in select2
                        if (provider.country) {
                            // Wait for select2 to be initialized and countries loaded
                            setTimeout(function() {
                                $('#modal_country').val(provider.country).trigger('change');
                            }, 500);
                        } else {
                            $('#modal_country').val(null).trigger('change');
                        }
                        $('#modal_alias').val(provider.alias || '');
                        $('#modal_group_id').val(provider.group_id || '');
                        $('#modal_isps').val(formatISPs(provider.isps));
                    } else {
                        showErrorToast('Failed to load provider details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading provider:', error);
                    showErrorToast('Error loading provider details.');
                }
            });
        });

        // Reset modal form
        function resetProviderModal() {
            $('#providerForm')[0].reset();
            $('#providerForm').find('.is-invalid').removeClass('is-invalid');
            $('#providerForm').find('.invalid-feedback').text('');
            $('#provider_id').val('');
            $('#_method').val('POST');
            $('#modal_group_id').val('');
            $('#modal_isps').val('');
            $('#modal_country').val(null).trigger('change');
        }

        // Submit Provider Form (Create/Edit)
        $('#providerForm').on('submit', function(e) {
            e.preventDefault();
            
            var $form = $(this);
            var $submitBtn = $('#providerSubmitBtn');
            var $spinner = $('#providerSubmitSpinner');
            var $submitText = $('#providerSubmitText');
            var providerId = $('#provider_id').val();
            var method = $('#_method').val();
            var url = $form.attr('action');
            
            $submitBtn.prop('disabled', true);
            $spinner.show();
            $submitText.text(method === 'PATCH' ? 'Updating...' : 'Creating...');
            showFullScreenLoader();
            
            var formData = {
                country: $('#modal_country').val(),
                alias: $('#modal_alias').val(),
                group_id: $('#modal_group_id').val(),
                isps: parseISPs($('#modal_isps').val()),
                _token: $('meta[name="csrf-token"]').attr('content')
            };
            
            if (method === 'PATCH') {
                formData._method = 'PATCH';
            }
            
            $.ajax({
                url: url,
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                data: formData,
                success: function(response) {
                    hideFullScreenLoader();
                    $('#providerModal').modal('hide');
                    showFullScreenLoader();
                    table.ajax.reload(function() {
                        hideFullScreenLoader();
                    }, false);
                    var message = response.message || (method === 'PATCH' ? 'Provider updated successfully.' : 'Provider created successfully.');
                    showSuccessToast(message);
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error saving provider:', error);
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            var $field = $('#modal_' + field);
                            $field.addClass('is-invalid');
                            $field.siblings('.invalid-feedback').text(messages[0]);
                        });
                    } else {
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error saving provider. Please try again.';
                        showErrorToast(errorMsg);
                    }
                },
                complete: function() {
                    $submitBtn.prop('disabled', false);
                    $spinner.hide();
                    $submitText.text(method === 'PATCH' ? 'Update Provider' : 'Create Provider');
                }
            });
        });

        // Delete provider
        $(document).on('click', '.delete-provider', function() {
            var providerId = $(this).data('id');
            var providerAlias = $(this).closest('tr').find('td:nth-child(2)').text();
            
            if (confirm('Are you sure you want to delete provider "' + providerAlias + '"? This action cannot be undone.')) {
                showFullScreenLoader();
                $.ajax({
                    url: "{{ url('providers') }}/" + providerId,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(response) {
                        showFullScreenLoader();
                        table.ajax.reload(function() {
                            hideFullScreenLoader();
                        }, false);
                        showSuccessToast('Provider deleted successfully.');
                    },
                    error: function(xhr, status, error) {
                        hideFullScreenLoader();
                        console.error('Error deleting provider:', error);
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error deleting provider. Please try again.';
                        showErrorToast(errorMsg);
                    }
                });
            }
        });

        // Reset modal on close
        $('#providerModal').on('hidden.bs.modal', function() {
            resetProviderModal();
        });
        }
    });
</script>
@endpush