@extends('layouts.app')

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

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
@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>Protocols</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">Protocols</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 protocols')
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#protocolModal" id="addProtocolBtn"><i class="fa fa-plus"></i> Add Protocol</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>Protocols List</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="protocolsTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Code</th>
                                        <th>Description</th>
                                        <th>Status</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>

<!-- Protocol Modal (Create/Edit/View) -->
<div class="modal fade" id="protocolModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="protocolModalTitle">Add Protocol</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="protocolForm">
                @csrf
                <input type="hidden" id="protocol_id" name="protocol_id">
                <input type="hidden" id="_method" name="_method" value="POST">
                <div class="modal-body">
                    <div id="protocolModalBody">
                        <!-- Form will be loaded here -->
                        <div class="form-group">
                            <label for="modal_name">Protocol Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_name" name="name" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_code">Protocol Code <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_code" name="code" required>
                            <small class="form-text text-muted">Unique code identifier (e.g., p1, p2)</small>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_description">Description</label>
                            <textarea class="form-control" id="modal_description" name="description" rows="3"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group" id="enabledField" style="display: none;">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="modal_enabled" name="enabled" value="1">
                                <label class="form-check-label" for="modal_enabled">
                                    Enabled
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <!-- View Mode Content -->
                    <div id="protocolViewContent" style="display: none;">
                        <table class="table table-bordered">
                            <tr>
                                <th width="150">Protocol ID</th>
                                <td id="view_id">-</td>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <td id="view_name">-</td>
                            </tr>
                            <tr>
                                <th>Code</th>
                                <td><code id="view_code">-</code></td>
                            </tr>
                            <tr>
                                <th>Description</th>
                                <td id="view_description">-</td>
                            </tr>
                            <tr>
                                <th>Status</th>
                                <td id="view_status">-</td>
                            </tr>
                            <tr>
                                <th>Created At</th>
                                <td id="view_created_at">-</td>
                            </tr>
                            <tr>
                                <th>Updated At</th>
                                <td id="view_updated_at">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer" id="protocolModalFooter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="protocolSubmitBtn">
                        <i class="fa fa-spinner fa-spin" id="protocolSubmitSpinner" style="display: none;"></i>
                        <span id="protocolSubmitText">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>
    $(document).ready(function() {
        // Show loader on initial page load
        showFullScreenLoader();
        
        // Initialize DataTable
        var table = $('#protocolsTable').DataTable({
            processing: false,
            serverSide: false,
            ajax: {
                url: "{{ route('protocols.ajax.list') }}",
                cache: false,
                timeout: 30000,
                dataSrc: 'data',
                complete: function() {
                    // Hide loader after DataTables AJAX completes (success or error)
                    hideFullScreenLoader();
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Error:', error);
                    console.error('Response:', xhr.responseText);
                    // Loader will be hidden in complete callback
                }
            },
            columns: [
                { data: 'name', name: 'name' },
                { data: 'code', name: 'code' },
                { data: 'description', name: 'description', defaultContent: '-' },
                { 
                    data: 'enabled', 
                    name: 'enabled',
                    render: function(data, type, row) {
                        if (data === true || data === 1 || data === 'true') {
                            return '<span class="badge badge-success">Enabled</span>';
                        }
                        return '<span class="badge badge-secondary">Disabled</span>';
                    }
                },
                { 
                    data: 'createdAt', 
                    name: 'createdAt',
                    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) {
                        // Use 'id' field, fallback to '_id' for backward compatibility
                        var protocolId = data || row.id || row._id || '';
                        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-protocol" href="javascript:void(0);" data-id="' + protocolId + '"><i class="fa fa-eye"></i> View</a>';
                        @can('edit protocols')
                        actions += '<a class="dropdown-item edit-protocol" href="javascript:void(0);" data-id="' + protocolId + '"><i class="fa fa-edit"></i> Edit</a>';
                        @endcan
                        @can('delete protocols')
                        actions += '<a class="dropdown-item delete-protocol" href="javascript:void(0);" data-id="' + protocolId + '"><i class="fa fa-trash"></i> Delete</a>';
                        @endcan
                        actions += '</div>';
                        actions += '</div>';
                        return actions;
                    }
                }
            ],
            order: [[4, 'desc']], // Order by created at desc
            pageLength: 20,
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            language: {
                processing: '',
                emptyTable: "No protocols found",
                zeroRecords: "No matching protocols found"
            }
        });

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

        // Add Protocol - Open modal
        $('#addProtocolBtn').on('click', function() {
            resetProtocolModal();
            $('#protocolModalTitle').text('Add Protocol');
            $('#protocolForm').attr('action', "{{ route('protocols.store') }}");
            $('#_method').val('POST');
            $('#protocol_id').val('');
            $('#protocolModalBody').show();
            $('#protocolViewContent').hide();
            $('#protocolModalFooter').show();
            $('#protocolSubmitBtn').show();
            $('#protocolSubmitText').text('Create Protocol');
            $('#enabledField').hide();
            $('#protocolModal').modal('show');
        });

        // View Protocol
        $(document).on('click', '.view-protocol', function() {
            var protocolId = $(this).data('id');
            
            // Show loading
            showFullScreenLoader();
            $('#protocolModalBody').hide();
            $('#protocolViewContent').show();
            $('#protocolModalFooter').show();
            $('#protocolSubmitBtn').hide();
            $('#protocolModalTitle').text('Protocol Details');
            
            $.ajax({
                url: "{{ route('protocols.show.ajax', ':id') }}".replace(':id', protocolId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var protocol = response.data;
                        $('#view_id').text(protocol.id || protocol._id || '-');
                        $('#view_name').text(protocol.name || '-');
                        $('#view_code').text(protocol.code || '-');
                        $('#view_description').text(protocol.description || '-');
                        $('#view_status').html((protocol.enabled ? '<span class="badge badge-success">Enabled</span>' : '<span class="badge badge-secondary">Disabled</span>'));
                        $('#view_created_at').text(protocol.createdAt ? new Date(protocol.createdAt).toLocaleString() : '-');
                        $('#view_updated_at').text(protocol.updatedAt ? new Date(protocol.updatedAt).toLocaleString() : '-');
                        $('#protocolModal').modal('show');
                    } else {
                        showErrorToast('Failed to load protocol details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading protocol:', error);
                    console.error('Response:', xhr.responseJSON);
                    showErrorToast('Error loading protocol details.');
                }
            });
        });

        // Edit Protocol
        $(document).on('click', '.edit-protocol', function() {
            var protocolId = $(this).data('id');
            
            showFullScreenLoader();
            resetProtocolModal();
            $('#protocolModalTitle').text('Edit Protocol');
            $('#protocolForm').attr('action', "{{ route('protocols.update', ':id') }}".replace(':id', protocolId));
            $('#_method').val('PATCH');
            $('#protocol_id').val(protocolId);
            $('#protocolModalBody').show();
            $('#protocolViewContent').hide();
            $('#protocolModalFooter').show();
            $('#protocolSubmitBtn').show();
            $('#protocolSubmitText').text('Update Protocol');
            $('#enabledField').show();
            
            // Load protocol data
            $.ajax({
                url: "{{ route('protocols.show.ajax', ':id') }}".replace(':id', protocolId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var protocol = response.data;
                        $('#modal_name').val(protocol.name || '');
                        $('#modal_code').val(protocol.code || '');
                        $('#modal_description').val(protocol.description || '');
                        $('#modal_enabled').prop('checked', protocol.enabled === true || protocol.enabled === 1);
                        $('#protocolModal').modal('show');
                    } else {
                        showErrorToast('Failed to load protocol details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading protocol:', error);
                    console.error('Response:', xhr.responseJSON);
                    showErrorToast('Error loading protocol details.');
                }
            });
        });

        // Reset modal form
        function resetProtocolModal() {
            $('#protocolForm')[0].reset();
            $('#protocolForm').find('.is-invalid').removeClass('is-invalid');
            $('#protocolForm').find('.invalid-feedback').text('');
            $('#protocol_id').val('');
            $('#_method').val('POST');
        }

        // Submit Protocol Form (Create/Edit)
        $('#protocolForm').on('submit', function(e) {
            e.preventDefault();
            
            var $form = $(this);
            var $submitBtn = $('#protocolSubmitBtn');
            var $spinner = $('#protocolSubmitSpinner');
            var $submitText = $('#protocolSubmitText');
            var protocolId = $('#protocol_id').val();
            var method = $('#_method').val();
            var url = $form.attr('action');
            
            // Disable submit button and show loading
            $submitBtn.prop('disabled', true);
            $spinner.show();
            $submitText.text(method === 'PATCH' ? 'Updating...' : 'Creating...');
            showFullScreenLoader();
            
            // Prepare form data
            var formData = {
                name: $('#modal_name').val(),
                code: $('#modal_code').val(),
                description: $('#modal_description').val(),
                _token: $('meta[name="csrf-token"]').attr('content')
            };
            
            if (method === 'PATCH') {
                formData.enabled = $('#modal_enabled').is(':checked') ? 1 : 0;
                formData._method = 'PATCH';
            }
            
            $.ajax({
                url: url,
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                data: formData,
                success: function(response) {
                    hideFullScreenLoader();
                    // Close modal
                    $('#protocolModal').modal('hide');
                    
                    // Reload table
                    showFullScreenLoader();
                    table.ajax.reload(function() {
                        hideFullScreenLoader();
                    }, false);
                    
                    // Show success message
                    var message = response.message || (method === 'PATCH' ? 'Protocol updated successfully.' : 'Protocol created successfully.');
                    showSuccessToast(message);
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error saving protocol:', error);
                    console.error('Response:', xhr.responseJSON);
                    
                    // Handle validation errors
                    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 protocol. Please try again.';
                        showErrorToast(errorMsg);
                    }
                },
                complete: function() {
                    // Re-enable submit button
                    $submitBtn.prop('disabled', false);
                    $spinner.hide();
                    $submitText.text(method === 'PATCH' ? 'Update Protocol' : 'Create Protocol');
                }
            });
        });

        // Delete protocol
        $(document).on('click', '.delete-protocol', function() {
            var protocolId = $(this).data('id');
            var protocolName = $(this).closest('tr').find('td:first').text();
            
            if (confirm('Are you sure you want to delete protocol "' + protocolName + '"? This action cannot be undone.')) {
                showFullScreenLoader();
                $.ajax({
                    url: "{{ url('protocols') }}/" + protocolId,
                    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('Protocol deleted successfully.');
                    },
                    error: function(xhr, status, error) {
                        hideFullScreenLoader();
                        console.error('Error deleting protocol:', error);
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error deleting protocol. Please try again.';
                        showErrorToast(errorMsg);
                    }
                });
            }
        });

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